推荐阅读
用Photoshop制作炫彩魔幻烟雾头像效果
炫彩魔幻烟雾头像效果的制作方法制作大致需要经过下面几个过程：第一步就是把图片处理后，用一些滤镜等找出头像部分的主体轮廓线条。第二步用烟雾或火焰等笔刷沿着轮廓线添加烟雾。最后就是烟雾部分的细化和上色，可以选择自己熟悉的方法处理。最终效果1最终效果2原图一、打开素材用魔术棒工具选择图片背景，反选（ctrl+i）选中人物肖像，复制新的一层（ctrl+j）。二、点击背景层，填充黑色，回到图层一用橡皮擦工具将额外的部分擦去，直到只剩下头部。确保你笔刷的不透明度设置为100%。
自已喜爱的图案转为PS自定义图形
在PS制作中，常常会用到自定义图形工具，可是在PS中自带的自定义图形很少，如何将自已喜爱的图形转成自定义图形呢？这里我将自已的制作过程简单的讲一下；1。打开自已想要设定为图形的图片；这里我随便选了一张，最好是单色的。2。如果图片太小，可用放大镜稍微放大一点，用魔棒点击图形部份；3。点鼠标右键-----建立工作路径------容差0.5.点确定;4. 再点一下左工具栏的钢笔形，点鼠标右键-----定义自定形状-----确定;5.这样后,可删除路径了，以后如果需要这种图形时，就可以直截在自定义工具栏里面选取了，很方便，当然还可以做很多自定义图形，方法相同。
Maya制作手和yoyo球动作的动画教程
这个教程是由Chas Jarret撰写，用以启发在变形的手掌的手指上附加材质，在解决手和 yoyo 之间的运动的问题上它包含一些有趣的技术,一种独创的解决办法，使表面扭曲环绕和卷绕手的重心。 这个方案全面的展示director的外面的并且是在光滑的 colourisedX-ray's的基础之上。但是在这里我们将会专注于对象的动画。最初我们决定射击绿色荧屏上的手臂，手和 yoyo 活动的行动然後对手臂的 rotoscope一个 CG 骨骼。运动的手臂， yoyo 和线将会在 Inferno被处理赋予其有 CG 骨骼的 X光神情合成完成幻影所该含有的种种要素。由于不切实际，使用这个射击方法引起一些不良因素。因此最后我制作、开发那整个的商业都是用三维。用的是MAYA 1.5 和 Renderman 。这不是正常的引起的任何问题除了这个要求一射击 yoyo哪里和附着和在手外套线在它周围排成列的手指的回应。具体到这里这里我选择的方法式达成yoyo的 运动和使那些线变形。 建模手臂和赋予其动画（NURBS曲线建 首先建立了来自 " primitives " 菜单的一个定位器而且命名它 "handLocation" 。我把这个定位器放在手的手掌部位并把它连接到手掌的一个结合点（连结）之下。然后建立另外一个定位器并命名为“yoyoLocation”，然后把强迫限制YOYO顶端的结点指向这个定位器和最开始建立的那个定位器。然后在"constraints"菜单选择“point constraint”。 然后选择yoyo顶部的结点，两者的约束重力全显示在属性栏上，默认的话两者都是1.0，表示每个定位 现在调整yoyoLocation的重力为0，把handLocationde 的重力值增加到1，yoyo 移到手的手掌的位置而且追随它的运动。我一直键入这些值直到手到达到假定释放yoyo的地方的那一刻。 在这一帧我把 yoyoLocation的定位器移动到yoyo的位置。键入转换通道（平移引导）和交换限制压重，以便yoyoLocation的总的影响超过yoyo自身。从这里我可以使 "yoyoLocation"产生 yoyo的运动。然后在动画的最后，手抓住yoyo的那一刻，把其限制压重值 使用复式的限制引导给我一个解决yoyo线和创造它正在向上卷绕的幻影或在yoyo的轮毂外上下运动的方法。然后是一个解决当YOYO附着在手掌时手指所作出的反应的那一刻，手指周围的string的材质？？（wrapping）的方法。
Photoshop滤镜打造蓝色魔圈特效
先在Photoshop中新建一个正方形画布的文件，注意一定保证宽度和高度一样。这样我们才好运用后面的滤镜。 新建一个图层，填充为黑色： 选择菜单“滤镜－渲染－镜头光晕”，注意：一定要将光晕中心放在中间的位置！ 选择菜单“滤镜－艺术效果－塑料包装”。 设置如下图。
最新发布
你应该知道的24种新兴交互设计
在互联网这个领域，每天都有不计其数的产品诞生，有些产品只是灵光一现，有的却存活了下来，但是不论存活与否，这些产品上总有一些设计细节让我们眼前一亮，下文中分类整理了一些不错的交互形式，希望能给大家带来新的设计灵感。一、导航1，Google+导航的隐藏功能Google+作为google进入社交领域的第一个产品，在交互方式有很多亮点，比如在导航的扩展性上，可以把不常用的标签拖放到“更多”中，从而使导航界面更简洁，这个操作进行时的效果也很精致、流畅。2，导航hover案例一：你选中某个导航标签时，并不是改变该标签的字体颜色或将字体加粗，而是点亮该标签的背景。案例二：选中的标签上会滴下一滴牛奶，并停留在那里，告知你的当前位置。(当然，这是一个关于牛奶的网站)。
用核心路径法设计网页专题页面
译者注：文章的原名为Designing Screens Using Cores and Paths。本文作者受到城市规划中“交通需求线”的启发，提出了网站设计的“核心-路径法”。区别于通常采用的从框架到主页以及导航的方式，“核心-路径法”让设计者从核心内容入手，由内而外来设计。这个打破常规的方法能够在网站中创造最直接的路径，以便用户找到核心内容。链接原文：http://boxesandarrows.com/designing-screens-using-cores-and-paths/想象一下，当你隔着一片草坪想要到达对面的巴士站时，你是绕着草坪四周的人行道走过去，还是从中间穿过去呢? 假如草地是干的，也没有被禁止进入，那么你很可能会选择最近的路线——穿过草坪直接走到巴士站。如果之前有不少人也这么干过，就会出现一条“走出来的路”。这种计划外的道路连接了两点之间的最短距离，我们周围到处是这样的例子。 在城市规划中，它们被称为“交通需求线”(desire paths/desire lines)，意思是人的自然行为和人为规划路线间的差异。建筑师Christopher Alexander在他的著作《模式语言》中定义了“交通需求线”(1976)。 对于“交通需求线”在建筑学中的应用，他给出了具体说明：“规划道路的方法，是先在自然景点中设置目标点，再将这些点彼此相连形成路径。” ——Christopher Alexander原则上，亚历山大的做法是以目标——即人们最终想要的东西为导向，然后将它们以最有用的方法连接在一起。但在网页设计中，遵循的方法通常是相反的：设计师从主页开始设计。然后他们根据网站结构层次制定出一个导航方案，不管合适与否。但是目标(用户正在找的主要内容，或是他们想要做的事)却成了设计过程中被考虑的最后一件事情。受到“交通需求线”的启发，我们可以改善这种设计网页的方法。使用核心-路径这种方法，可以指导你在网站中创造最直接的路径，以便用户直达核心内容。
让用户第一眼就爱上你的网站
我保证这是一篇对你有启发的文章，就像标题一样，我会教会你今后应该怎样设计来讨好你的用户。大家都知道人与人之间是有眼缘的，也就是所谓的第一印象，而对于我们设计的网站也是如此，用户对我们网站的第一印象可以说是旷日持久的，在最初的几秒钟里，用户就会决定在我们网站是去是留，他们会迅速判断网站是否符合他的胃口。所以设计的第一印象就显得格外重要，当然有一个细节可能大家都忽视了，那就是访问者的性别，用户有两类：男人和女人，而男人和女人的第一感官是不尽相同的。男性用户和女性用户经常依据不同的经验来浏览网站，你的站点的外观可以立刻吸引两性之一或两者都被吸引。那么如何有效的吸引不同性别的用户呢?其实业界早就有了很深层次的研究，并公布了他们的看法，今天在这篇文章里，我们将向您分享这些原则及设计理论。我将会反复向你灌输：设计是有性别的!bagigiaeverlovinpress
分析网页图片在网页设计中展现形式
图片，是构成网页的基本元素之一。图片不仅能够增加网页的吸引力，传达给用户更加丰富的信息，同时也大大地提升了用户在浏览网页的体验。图片的展示形式丰富多样，不同形式的图片展现也让浏览网页的乐趣变得更加多样化。跟随我们分别来体验一下目前存在的各种图片展现形式，让我们的眼睛去旅行吧。一、多图展现图片限制最大高度或宽度并进行矩阵平铺展现，这是最常见的多张图片展现形式。不同的边距与距离可产生不同的风格，用户一扫而过的快速浏览可以在短时间获得更多的信息。同时，鼠标悬浮时显示更多信息或功能按钮，既避免过多的重复性元素干扰用户浏览，又让交互形式带有乐趣。但传统的矩阵平铺展现版式略微拘谨，浏览体验略显枯燥。500px.com在传统矩阵式平铺布局基础上挣脱图片尺寸一致性束缚，图片以基础面积单元的1倍、2倍、4倍尺寸展现。大小不一致的图片展现打破重复带来的密集感，却仍按照基础面积单元进行排列布局，为流动的信息增加动感。不规则的图片为浏览带来乐趣，但由于视线的不规则流动，这样的展现形式并不利于信息的查找。
如何让我们的网页设计诱惑住访问用户
还记得和爱人难忘的约会情境么?出门前花时间打扮让自己看起来更动人;见面时做出各种有趣的行为来与对方交流：互相调侃在适当的时候送上美丽的笑 容,问卖萌的问题,“意外地”擦到对方的手。这些信号传达着“我对你的感觉不错，和我在一起吧，你一定会开心的”,那么我们的设计呢?如何诱惑用户，让你的设计对用户更具有吸引力，也同样需要一些手段的，让我们来一起探讨下吧。手段1.差异化设计例如：Clear这款应用将“简洁”设计理念实现得恰到好处。吸引用户群体去追寻那份最初使用的心动感，通过创新理念为用户塑造了专属的个性，才会在众多同类产品中脱颖而出。Clear最大的特点就是没有一个按钮，通过单指和双指的不同手势实现任务条拖曳、添加删除线、添加新任务、上下级界面等等，几乎所有的操作都可以 用手势来完成，这种交互形式成为亮点。使用渐变色让人感受眼前一亮，让颜色作为重要性排序的标记，在主题选项里面还可以改变任务界面的颜色，在这里视觉设 计不是仅凭设计师的喜好，更是起到了功能的作用。手段2.情趣化设计例如：比邻这款社区化应用从开始的引导体验到注册时加入诙谐的幽默语言，让用户感觉到与产品间的交流，积极地愿意去完善资料。虽然用户有时清楚这是产品玩的小 把戏，但是在如此具有带入感的前戏台词面前，多数用户会觉得非常有趣，正面情绪完全被调动起来。这样的文案比起简单枯燥的提示更易让用户接受。
层级元素含有position属性时鼠标坐标位置解决方案
在上一篇文章中《利用CSS sprites制作随着鼠标移动的动画背景》我们是用mousemove事件来实现我们的鼠标坐标定位判断的。mousemove这个鼠标函数，常常会用到我们的项目中，是个很好用的函数。根据在上一篇文章制作实例的时候遇到的一些问题，作个总结出来，一来分享给大家，二来可以给自己加深印象。相信熟悉javascript的朋友对鼠标坐标函数比较了解的，网上的资料也很多，就不多说了。先看看一段代码： jQuery(document).ready(function(){ $('#demos').mousemove(function(e){ var relX = e.pageX - this.offsetLeft var relY = e.pageY - this.offsetTop $('#demos').html(relX + '， ' + relY); }); 这段代码表示的是，鼠标在#demos对象中的相对坐标值，也就是以这个对象为基准（范围），计算鼠标在对象内（对象的左上方的顶角坐标为：0，0）的坐标值。我们继续看看具体的代码含义，e.pageX、e.pageY这两个表示了鼠标在页面上的位置；offsetLeftoffsetTop分别表示的是返回对象相对于父级对象的布局或坐标的left值和top值。明白了这几个代码含义，上面的示例代码最终输出值也不难理解。在这里附上一张关于盒模型的各种计算值含义详解图：在这里我们要重点说下offsetLeft的计算方法，上面也说到是对象相对于父级对象的布局或坐标的left值，那么父级对象将是影响最终值的关键。一般情况下，都没什么问题，但如果父级对象出现了position属性，并且定义了margin值，那么计算结果将会不如我们所意。这是个特殊情况，在这时我们需要适当的修改上面的示例代码，具体如下： jQuery(document).ready(function(){ $('#demos').mousemove(function(e){ var parentOffset = $(this).parent().offset(); var relX = e.pageX - parentOffset.left; var relY = e.pageY - parentOffset.top; $('#demos').html(relX + '， ' + relY); }); }) 总结到此结束，解决方案折腾了好久……好好学习，天天向上。Good luck！
实现CSS3动态进度条及JQUERY百分比数字显示
在网页设计中，想必一个精彩的进度条将会为你的网站增添不少的精彩，一个好的网页设计往往体现在一些小的细节上面，细节决定了成功与否。在此之前也为大家分享了一些关于进度条的设计 � 让人不得不爱的22个UI进度条设计。有了设计理念和作品，那我们怎么用最精彩的方法运用到我们的网页制作当中呢�今天就为大家分享一个利用css3制作动态进度条以及附加jQuery百分比数字显示。其效果对比flash来说却毫不逊色，有一个精致的动画进度条，上面还有当前进度的百分比数字显示，而且还会跟着进度条而移动。相信追求新颖的朋友来说一定会非常的喜欢。查看预览下载附件HTML的代码非常简单，只要为进度条提供一个容器就可以了。基本的HTML代码如下： <div class="wrapper"> <div class="load-bar"> <div class="load-bar-inner" data-loading="0"> <span id="counter"></span> </div> </div> <h1>Loading</h1> <p>Please wait...(By:<a href="http://www.jiawin.com">www.jiawin.com</a>)</p></div> CSS样式表 接下来是为我们的进度条定义样式，这里主要运用了CSS3的linear-gradient的渐变属性、border-radius的圆角属性、box-shadow的阴影属性等等，来制作出进度条的初步模型。完成进度条的模型后我们利用animation属性，让进度条开始动起来，就其中的进度条动画设置代码如下： .load-bar-inner { height: 99%; width: 0%; border-radius: inherit; position: relative; background: #c2d7ac; background: linear-gradient(#e0f6c8, #98ad84); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 1px 5px rgba(0, 0, 0, 0.3), 0 4px 5px rgba(0, 0, 0, 0.3); animation: loader 10s linear infinite;} 如果接触了CSS3的朋友，相信大多数人对这个属性都比较熟悉了，在这里大概的说明一下animation设置的参数：@keyframes loader这个标签属性是用来被animation使用的，定义动画时，简单的动画可以直接使用关键字from和to，即从一种状态过渡到另一种状态： @keyframes loader { from {width: 0%;}to { width: 100%;}} 下面是完整的CSS代码，大家可以多研究下，也可以自己修改其中的代码，看看是否制作出更加有趣的东西来： * { box-sizing: border-box;}html { height: 100%;}body { background: #efeeea; background: linear-gradient(#f9f9f9, #cecbc4); background: -moz-linear-gradient(#f9f9f9, #cecbc4); background: -webkit-linear-gradient(#f9f9f9, #cecbc4); background: -o-linear-gradient(#f9f9f9, #cecbc4); color: #757575; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; text-align: center;}h1, p { padding:0; margin:0;}.wrapper { width: 350px; margin: 200px auto;}.wrapper p a {color:#757575; text-decoration:none;}.wrapper .load-bar { width: 100%; height: 25px; border-radius: 30px; background: #dcdbd7; position: relative; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 2px 3px rgba(0, 0, 0, 0.2);}.wrapper .load-bar:hover .load-bar-inner, .wrapper .load-bar:hover #counter { animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; -webkit-animation-play-state: paused;}.wrapper .load-bar-inner { height: 99%; width: 0%; border-radius: inherit; position: relative; background: #c2d7ac; background: linear-gradient(#e0f6c8, #98ad84); background: -moz-linear-gradient(#e0f6c8, #98ad84); background: -webkit-linear-gradient(#e0f6c8, #98ad84); background: -o-linear-gradient(#e0f6c8, #98ad84); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 1px 5px rgba(0, 0, 0, 0.3), 0 4px 5px rgba(0, 0, 0, 0.3); animation: loader 10s linear infinite; -moz-animation: loader 10s linear infinite; -webkit-animation: loader 10s linear infinite; -o-animation: loader 10s linear infinite;}.wrapper #counter { position: absolute; background: #eeeff3; background: linear-gradient(#eeeff3, #cbcbd3); background: -moz-linear-gradient(#eeeff3, #cbcbd3); background: -webkit-linear-gradient(#eeeff3, #cbcbd3); background: -o-linear-gradient(#eeeff3, #cbcbd3); padding: 5px 10px; border-radius: 0.4em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 2px 4px 1px rgba(0, 0, 0, 0.2), 0 1px 3px 1px rgba(0, 0, 0, 0.1); left: -25px; top: -50px; font-size: 12px; font-weight: bold; width: 44px; animation: counter 10s linear infinite; -moz-animation: counter 10s linear infinite; -webkit-animation: counter 10s linear infinite; -o-animation: counter 10s linear infinite;}.wrapper #counter:after { content: ""; position: absolute; width: 8px; height: 8px; background: #cbcbd3; transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); left: 50%; margin-left: -4px; bottom: -4px; box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2), 1px 1px 1px 1px rgba(0, 0, 0, 0.1); border-radius: 0 0 3px 0;}.wrapper h1 { font-size: 28px; padding: 20px 0 8px 0;}.wrapper p { font-size: 13px;} @keyframes loader { from {width: 0%;}to { width: 100%;}} @-moz-keyframes loader { from {width: 0%;}to { width: 100%;}} @-webkit-keyframes loader { from {width: 0%;}to { width: 100%;}} @-o-keyframes loader { from {width: 0%;}to { width: 100%;}} @keyframes counter { from {left: -25px;}to { left: 323px;}} @-moz-keyframes counter { from {left: -25px;}to { left: 323px;}} @-webkit-keyframes counter { from {left: -25px;}to { left: 323px;}} @-o-keyframes counter { from {left: -25px;}to { left: 323px;}} 在这里其实有很多个CSS3的知识点，例如进度条上面的进度提示的小图标的下方有个小三角形，这个小三角主要是通过制作一个小的正方形，然后利用position来定位，调整好位置后，再通过transform来转换角度，使之最终成为一个三角形。大家可以多多看看里面的一些小细节，对于学习CSS3来说是很有帮助的。完成了进度条的模型，而且进度条也通过CSS3的定义开始动起来了，那我们就接下来用jQuery来完善我们的进度条，让他成为一个不管外表还是内心都很强大的进度条。嘿嘿…在这里主要做的是让进度条上面的数字随着进度而发生变化，从而客观的知道当前进度条的进度百分比，看下面的代码：
设计师学做信息图必须去的八个网页设计网站
这是一个读图的时代，浮躁的人们或许对超过150个的文字都读不下去，所以，信息图应运而生，搭配上优秀而又吸引人的图片，再加上一小段精炼的文字，足够吸引人而又不至于耽误太多的时间,在阅读一张张精彩的信息图之余，我们也常常会产生制作属于自己的精美信息图的冲动，只是往往是心有余而力不足.不过还好，有众多提供在线制作信息图的工具,比如creately就是其中的佼佼者。根据*的解释: 信息图形（Information graphics），又称为信息图（Infographics），是指数据、信息或知识的可视化表现形式。信息图形主要应用于必须要有一个清楚准确的解释或表达甚为复杂且大量的信息，例如在各式各样的文件档案上、各个地图及标志、新闻或教程文件，表现出的设计是化繁为简。公元1958年，Stephen Toulmin提出了一种图形化的理论模型，后来成为有影响力的理论及其应用。制作信息图的目的在于用图像的形式表现需要传达的数据、信息和知识。信息图示中的元素未必要和所表达的信息在语义上一致，但是必须达到向受众清晰传达正确信息的标准,这里介绍几个知名的提供信息图的网站:Information Is Beautiful: http://informationisbeautiful.com/Cool Infographics: http://www.coolinfographics.com/Flowing Data: http://flowingdata.com/Jess3: http://jess3.com/前文也提到了，制作信息图的网站有许多，那么，为什么要选择creately呢？就我看来，原因如下： 1.足够丰富的模板,几乎需要的样式都有,你可以制作UML图、Mindmap图、SWOT图、产品原型图、流程图等等数十种类型,甚至可以制作思维导图。2.支持简体中文语言显示，好吧，虽然不是很完全，但是菜单键都是中文的，这就够了。而且，你是可以插入中文汉字的。
解析网页设计配色红色系列案例解析
网页设计有为重要，无论是彩色搭配还是非彩色搭配，都应该注重。接下来我们开始对每一种颜色进行分析，我们先探索红色系在网页设计中的运用。众所周知，红色是一种很强烈的情感色彩，能使人感到兴奋，故此我们中国也将红色认为是一种喜庆的颜色，会给人带来快乐。鲜明的红色往往能吸引到游客的目光，所以红色也是网页设计中常用到的一种颜色。接下来我们进行分析，如何更好的运用来吸引读者的注意。红色是一种刺激性的颜色，现在我对各种运用到红色的网页进行一个分析。一.食品、饮食类网页设计案例一：红色+深红色+白色整个页面是以红色作为基调，具有很强的冲击效果，非常符合饮食类网页设计。白色的字体在红色中形成反差，整体页面非常醒目给人一种视觉冲击，让读者热力强盛，产生食欲。案例二：红色+深红色+灰色
网页设计练习之分享个人的设计思路
会写这个分享是因为有位朋友和我讨论如何改良某个他做的页面，因为很难表达，所以我干脆自己也试着去做了下，然后把思路分享出来。先看页面，主题是素食一、分析因为这次并无任何客户要求，纯粹自己练习，那么按照自己定的主题——素食，有了主题就有了方向，就可以开始分析了。首先我做个了简单的思维发散，由主题联想出相关的关键词，从关键词到从抽象到具象。二、设计通过思维导图很好的整理了信息，再将信息提取，选取需要部分，将其融入设计。具体如下：1、配色