推荐阅读
Illustrator设计扁平化风格的职业角色图像
在本教程中，我们将制作一套平面风格的肖像，描绘不同职业的人。这样的头像可以被用来当作社交网络的头像，或者是你个人网站的设计素材(描绘不同的职业类型)。你还可以用这种方法制作自己的扁平化肖像，用作你自己的商业名片。现在让我们开始我们的教程吧。Adobe Illustrator的几何形状工具在制作矢量图形方面非常棒。我们通过接下来详细的教程发现新的使用技巧和窍门。(路径查找，裁剪和蒙板工具以及其他的一些AI功能)即使你是刚入门的新手，也可以很轻松的使用这个教程完成上面的肖像画。赶紧跟随教程制作起来吧。先看看效果图(一)制作一个建筑工人的扁平化肖像画第一步：我们将开始我们第一个任务的头像，我们使用矩形工具(括号内为快捷键，以下同。矩形快捷键为M)制作一个65*80像素浅粉色皮肤色调的矩形，保持矩形选中状态。去对象>路径 >添加锚点。你将会注意到每一个矩形的边上上出现了新的锚点。第二步继续使用对象>路径 >添加锚点。为矩形的每个边在增加更多的两个点。 我们不需要用上面的锚点，，所以我们删除它们。用直接选择工具(A)选中需要删除的左边和右边倒数第三个点(左右各一个)然后在顶部的控制面板里，点击删除已选中锚点工具按钮。
2018淘宝店铺装修教程之基础旺铺全屏无缝实现方法！
本站改版上线以来，淘宝店铺装修方面的文章一直没有着手写，虽然之前在笔者另外的两个网站上写了有小一千篇装修教程，但在本站却无从下手，想从另外一个角度出发，分享装修思路，以及能够给朋友们带来便利性的工具和代码。本篇讲解基础旺铺全屏海报的三种装修方法，选择一个自己适合或者喜欢的，更容易提供工作效率以及在枯燥的装修中找寻点滴快乐。 1、下图中是笔者总结的全屏代码，适合基础旺铺和专业版旺铺，代码并不复杂，即使没有html基础也没关系，只需要修改数值，替换产品链接和产品图片链接即可。 2、笔者把需要修改的地方改为中文，一是可以直观看明白意思，另外一个是可以方便替换，下面解读一下代码的意思：因为是全屏无缝代码，所以模块高度与海报图高度有20的差值。举例：【模块高度】580【海报图高度】600【产品链接】https://item.taobao.com/item.htm?spm=a1z10.1-c.w5003-18396994491.1.5ad574c730Kbum&id=44467511416&scene=taobao_shop【图片链接】http://gdp.alicdn.com/imgextra/i1/91049940/TB2tRmdveOSBuNjy0FdXXbDnVXa_!!91049940.jpg <div data-title="taoxuemei.com 基础全屏代码" style="height:模块高度px;"> <div class="most-footer footer-more-trigger" style="left:auto;right:auto;width:950px;height:模块高度px;top:auto;padding:0;border:none;z-index:1;background:none;"> <div class="most-footer footer-more-trigger" style="left:-485px;top:-20px;width:1920px;height:海报图高度px;border:none;padding:0;background:none;"><a href="产品链接"> <img src="图片链接" /> </a></div></div></div> 3、复制上面的代码，进入淘宝装修后台，添加自定义内容模块，然后进入编辑界面，弹出的编辑器界面上，点击第一个【源码】按钮，然后单击鼠标右键，弹出的下拉菜单中点击【粘贴为纯文本】，之后按照上面第二步里面介绍的方法，替换文字为数值或者链接，然后再次点击【源码】按钮，可以看到图片点击确定查看效果。 如果手动修改代码搞不定，那么可以选用在线全屏代码生成工具，此类网站较多不在这里推荐，可以百度搜索一下，相比代码修改，此类工具提供图形化界面，只要按照提示填充链接即可，有些还可以做成 全屏热点、全屏无缝的代码，获取代码之后，还是要回到淘宝装修后台，编辑自定义内容模块添加代码即可。 如果你对上面两种方式还是不满意，还是感觉麻烦，就是不想接触代码，那么可以使用基础全屏模板，不过需要购买之后才能用，图形化的操作，不用接触代码，设置完成后，用客户端自动按照到淘宝店铺即可。 注册网址：http://www.taoxuemei.com/tao/276.html 注册之后送一套模板，登录之后咨询客服购买以及使用问题。 根据自己的需求和实际情况，选择适合自己的方式方法，使用代码一些数值需要调试的，比如【style="left:-485px;】，这个485是需要根据实际来调整，可能是585，也可能是685。基础版旺铺的装修，其实是比较麻烦的了，因为很多数值需要调整（淘宝对于css的限制，导致很多类不能直接修改），后期维护太麻烦。 笔者建议使用4y4基础全屏模板，有个模板直接替换图片，不用接触代码，相对而言简单多了。如有疑问可以在文章下方留言，笔者会及时回复你的。
在Dreamweaver MX中应用“占位图形”
“占位图形”顾名思义是在准备好将最终图形添加到 Web 页之前使用的临时图形。使用它可以在没有理想的图形的情况下先行制作Web页面――在需要使用图形的地方插入一个占位图形先“占领”着“地盘”。 一、插入占位图形 将光标定在需要插入图形的地方；选择：插入>图像占位符即出现图像占位符对话框，如图： 设定好各项参数后点击“确定”即将占位图形插入到了页面中，如图： 上面显示了名称和大小。察看源代码发现增加了一个包含空 src 属性的图像标签。 二、替换占位图形 1.当页面设计好以后，我们就需要使用正确的图形来替换到占位图形。在用DreamweaverMX（简称Dreamweaver MX）中选中占位图形并打开属性面板，点击“创建”按钮。则Dreamweaver MX就会启动FireworksMX(简称Fireworks MX)并自动建立好一个和占位图形同样大小的空白画布等待图形设计师的“操刀制作”。
Photoshop教程：模拟变形金刚壁纸
PS打造变形金刚壁纸。先看一下最终效果： （1）自己动手制作变形金刚壁纸 （2）在photoshop视图中新建一800×800象素的图纸，选择渐变工具绘制黄色到蓝色的渐变效果，如图所示。 （3）选择菜单“滤镜>风格化>凸出”，弹出凸出对话框，设置类型为“块”，“大小100象素左右”，“深度100”，“随机”。 （4）选择菜单“滤镜>艺术效果>塑料包装”以默认设置确定。 （5）选择菜单“滤镜>扭曲>旋转扭曲”
最新发布
详细解析网页设计中的轮廓框案例技巧
网页设计中使用轮廓框元素的案例不多。但实际上，这些纤细的、整洁的轮廓框效果极佳。为了保证效率的最大化，轮廓框一般采用纯色线条，这样便能产生前景与背景的明显对照。黑和白，是最传统的配色，以其对比强烈，效果突出而著称。因此很多轮廓框采用了白色线条。除了颜色，线条的粗细也是一大考量，纤细的线条让人感觉精致细腻，粗厚的线条显得异常醒目。下面，本文收集了一些网页设计中轮廓框应用的案例。Olivier Staub此网页设计一反传统，对菜单采取了简化设计，蔚为壮观的全屏图像滚动。厚重的轮廓狂和粗字体极具视觉冲击效应。Flinders Street Station Design Competition这个网站由一大堆轮廓框组成，线条很厚。轮廓框中填充了柔和的色调，功能为按钮。Ola Kvernberg.干净整洁，颇具视觉吸引力。设计师成功的融入了个人风格，极具创意和吸引力的主页。尽管主页采用了单色设计，但是紫色轮廓框线条很好的进行了调和，让整体显得错落有致。
浅谈10个CSS简写和优化的心得技巧
CSS简写就是指将多行的CSS属性简写成一行，又称为CSS代码优化或CSS缩写。CSS简写的最大好处就是能够显著减少CSS文件的大小，优化网站整体性能，更加容易阅读。下面介绍常见的CSS简写规则：这里主要用于两个属性：margin和padding，我们以margin为例，padding与之相同。盒子有上下左右四个方向，每个方向都有个外边距：你可以简写成： 1 margin:1px 2px 3px 4px; 语法 margin:top right bottom left; 12345678 //四个方向的边距相同，等同于margin:1px 1px 1px 1px; margin:1px; //上下边距都为1px，左右边距均为2px，等同于margin:1px 2px 1px 2px; margin:1px 2px; //右边距和左边距相同，等同于margin:1px 2px 3px 2px; margin:1px 2px 3px; //注意，这里虽然上下边距都为1px，但是这里不能缩写。 margin:1px 2px 1px 3px; 二、边框(border)边框的属性如下：可以缩写为一句：
详细解析2014年网页设计趋势分解
在过去的2013年及2012年，网页设计理念或多或少都受到大公司设计风格的影响。Google过去几年中也在搜索算法上做出很多调整——更注重网站内容原创性及可用性。HTML 5释放了设计师的思维，有利有弊，HTML 5 动画有时也玩过火了。随着移动Web的访问不断增大，响应式设计变得愈加重要了。下面我们通过简单的一些案例阐述2014年的Web设计趋势。但是，记住，不要过度使用。不是每一种趋势都适合你的客户。作为设计师或Web开发人员，你有责任紧跟趋势，并量身定做你客户的网站。准备好，跟随我们的脚步来看看今年的流行走向，然后决定你要如何使用它们。一、扁平化设计当苹果放出iOS 7的时候，不是每个人都喜欢这种全新的扁平设计的。然后，乔纳森·艾维知道这是去掉拟物化的最佳时机，引进了极简、干净、硬朗的设计风。iOS 7发布后，大量的扁平化风格出现在网络上，今年也不例外。这不仅对移动友好，而且更能体现设计的本质——有效组织外观和感觉。Mostlyserious完全的扁平化设计及少量动画效果Belancio
详细解析网页设计中的F式布局
今天我们来重点介绍网页设计中的F式布局。传统的布局方式，依赖布置视觉线索，“控制”用户的视觉路径，相较之下，F式布局更加自然，更加友好。本文将讲述一些F式布局的规则、原理以及设计方法。F式布局简介F式布局是一种很科学的布局方法，基本原理依据了大量的眼动研究。一般来说，用户浏览网页的视觉轨迹是这样的——先看看顶部，然后看看左上角，然后沿着左边缘顺势直下….而用户往往不太注意右边的信息，这是不是有点像字母F?据此，我们习惯性的把重要元素(诸如品牌Logo，导航，行为召唤控件)放在左边，而右边一般放置一些对用户无关紧要的广告信息。我们来看一下Webdesigntuts+的眼动热点图：这张眼动热点图展示了用户浏览此网站的视觉轨迹，呈一个F型。热区(途中红色、黄色、橙色部分)代表用户注意力最集中的地方。总结一下用户浏览网页的一般模式：先看看页面的左上角，了解一下这是什么网站(因此此处适合放置Logo)——“知道是什么”然后扫描一下页面的顶部(导航栏，搜索栏)——“了解用法”
利用颜色查找快速制造大感觉专题设计
当接到一个紧急需求的时候，设计师脑子里一定在抱怨不爽了。因为设计要用”赶出来”的话，是很难有优秀的作品的。但有时候不得不面对现实，需求方急着要，我们也只能加快速度设计。把脑子里有的设计形式全都翻出来，全用在页面上。有时候可能会有意想不到的结果！有时候又会出现那种连自己都不愿意承认是自己做的尴尬处境。这种快速设计没有经过前期的精细推敲，总有站不住脚的地方，但是时间有限，能达到一眼望去，让各位爷能心里感叹一声”哇”，就已经谢天谢地啦！！快速设计专题有很多种方法，这里只是给大家提供其中的一个小思路，并不一定适用每一个专题，如果在你紧急的情况下，不妨试试这个。今天收到了一个交互稿，如下。是一个在圣诞节的日子里卖皮肤也送皮肤的营销类型专题，并强调要使用”冰原狙击 凯特琳”这张原画进行设计。游戏类的专题，一般没有专门的交互设计师给你去设计交互稿，所以拿到交互后，就需要对交互进行一遍”审查“，把不明白的地方和接口人对一遍。比如这张交互上，标题有3列，”冰原献礼”"限定皮肤3送1起”"冰原狙击凯特琳 首战正义之地 “这些是出现在头部的文字，一般都属于最重要的信息传递。所以要特别详细的问接口人，这些文字都是什么意思，是不是已经完全确定采用这些字（因为后面要对这些文字进行设计，如果后面再要修改，就会浪费很多时间）又比如：上面四条”献礼1、2、3、4″是什么意思，放在这里有什么用。等等。总结来说，拿到交互后，一定要对交互的内容进行梳理，分析出内容的主次（对你后面的设计特别重要）
如何给网站布置干净的关于我们页面
所有网站，无论是官方、电子商务、社会化网络还是个人站点，都应该设计一个恰到好处的“关于”页面，直截了当地告诉到访者，为什么要浪费他们宝贵的时间浏览你的网站。编者：这是一篇老文章，不过写得还算实用，大家可以了解一下设计思路。一、为什么要有“关于”页面不要让用户思考!1、向浏览者传达本站的价值，留住用户2、始终提醒自己站点的主旨，不要跑题二、起什么名“关于”页面存在的目的就是尽快让浏览者找到网站的方向，或者作为进一步补充，比如陈列相比竞争对手而言，自己的优势和特色。所以名字越简单、越朴 素就越好。典型的门户的名字比较传统，因为它们无人不晓。比如网易的“公司简介”，谷歌的“Google大全”。大众、平易近人的网站往往都称呼为“关于我们”，比如嘀咕、phpChina;“关于+网站名称”的类型也不在少数，比如豆瓣和支付宝。
精选2013年精致漂亮的UI设计作品欣赏
回顾2013年，我们发现很多很优秀的UI设计作品，也期待2014年有更多创新的设计诞生！本期设计达人网从Dribbble上总结了2013漂亮细致的UI设计作品，有APP设计、界面设计、网页设计等等，这些设计很多看上去都令人兴奋，细致到位，而且又创新，很适合设计师们学习和参考。由于设计作品太多，图片已经被压缩，所以大家可以查看这些设计作品的原图，有PNG大图以及GIF动画，很多效果很棒哦！ 越来越多类似iOS 7的扁平化、半透明、拟实景动态界面。 查看原图 漂亮的半透明Tag、catelog选择 查看原图 以后的网站导航设计不一定是横向的了，更多表现为侧边栏。扩展阅读《2014网站导航设计趋势 使用垂直的导航菜单设计》 查看原图 APP也追求简约设计，并重视本色方案 查看原图 Windows 8的时尚Metro UI风格，界面简洁，配色清新有活力，很漂亮。 查看原图 使用统一圆形风格设计，字体、图案以及交互设计动画都是以圆为主，请点击看GIF动画，很不错哦！ 查看原图一个和地图位置应用界面设计，背景蓝色与白色的配合使得界面看起来很清晰，也很漂亮
网页设计配色剖析之绿色使用技巧
每个人都有自己最喜欢的颜色，在工作以及生活中，当购买产品或进行艺术创作的时候，他们会选择自己喜欢的颜色。对于设计师来说也是同理。设计师偏好在设计中重复使用他们最喜欢的色系。虽然命题是无限的，但是他们还是喜欢遵循自己的审美感觉。推广成功、运营优秀的网站，往往让用户感觉到页面和谐感强、视觉效果符合本能审美、元素具有图像象征且与产品服务紧密联系，这归功于网页设计。绿色的定义绿，是一种颜色，绿色处于光谱中间，波长较短，大约为500～570nm。在减色法中，绿色不是主色，但是可以由黄色和蓝色、或者黄色和青色创造出来的。绿色是加法三原色之一。Green网页设计中的绿色绿色在网页设计中效果极佳，因而被广泛的应用。可能是因为绿色是自然中最多的颜色，绿色能够唤起一种人类对于自然的本能意识。高手能够行之有效的将绿色和其它颜色有机结合，奏出一曲色彩、色调、明暗完美互补的视觉三重奏，让人兴趣满满。而材质的加入也能改变颜色的效果，比如，粗糙的材质表面让颜色看起来更深，平滑的表面让颜色看起来更浅。
如何创意的使用网页设计中的方块元素
当你欣赏下面这些案例时，留意一下他们如何以及为何使用矩形或正方形元素，会使得你思路大开。此处列举的方块元素，被用来对齐、组织、装饰、排列页面上的方与圆。在设计中使用方块元素有很多方法和原因。让我们来详细了解一下。使用方块布局的目的是什么?或许这对你而言有点哲学和理论化，我们来看看别人选择方块布局的原因。(顺便提一句，我所指的方块也包括矩形，有些案例也使用矩形。)使用这种元素有两大原因。首先也是最重要的，它有助于组织内容。其次，它也能打造特殊的样式。它们是展现内心渴望和需求的完美元素。看看Dennis Adelmann的作品集，显而易见，方块元素被用来组织排列他的作品。这是组织排列任意数量内容的简单途径，让事物保持简洁。Dennisadelmann不过再看看We Love Noise这个网站，它就完全不同!是的，到处都是方块，移动鼠标时还有个有趣的动画效果。不过除了组织内容之外，你会发现方块元素也成为了设计风格的一部分。它是这种风格关键的决定性元素。Welovenoise怎样用好它们?
网页设计心得之网页乾坤大挪移心得
腾讯TGI高级视觉设计师@晋小彦的系列专题，童鞋们看过瘾了木有?这一期教你如何将呆板僵硬的网页设计转眼就变成灵动活泼的创意设计，究竟是怎样的方法才能快速拓展设计思路呢?这一期，有招。时间短、没点子、没创意，又要快速捕抓眼球,怎么办?对页面整体进行旋转和平移是快速改变视觉是快速有效的方法.它打破了正常的网页视觉习惯,吸引了观众的注意力。说说 —— 旋转和平移如果每天要面对着巨大的需求量，难免有创意枯竭的时候，如果有一些相对讨巧的办法，能够不受主题限制，当然是再好不过的，这时候，我们不防试试这简单的小办法。旋转和平移，这是针对整个页面的大版式而言的，到底会造成怎样一种效果，我们继续往下看。