推荐阅读
PS美化给森林人像照片添加魔法施法场景效果
这组片子的整体后期思路如下：1、把拍完的片子导入LIGHTROOM里面后，进行原片的分析，利用raw的特性进行初步的参数调节。原图图片挺灰的，色彩并不讨喜，让人看着不是老么舒服的说。并且人物的面部欠曝，而手中的魔法书过曝，可以说画面极为不平衡，那么我们在调整的时候就要利用raw包容度的特性把这些初期的问题进行修复。 不过咱们拍摄必然是用RAW格式进行的，所以这张片子到底包涵了哪些信息，并且咱能修到哪一步，作为摄影君咱应该会有一个预估。效果图：原图：下面两张图是LR调节完参数以后的图片，以及所用的参数。与原图的区别主要体现在了利用HSL、曲线、分离色调以及相机校准让整体色调偏红黄色，并且有胶片效果;其次，我把高光减弱，阴影提亮，这么做是为了平衡整张片子的高光阴影部分，因为你的片子在进阶的爱好者那里，必然会被拖进软件看有没有过曝或者欠曝的地方，这个一定要注意，虽然我不会这么对待别人的片子。。但是毕竟这是一个硬性的指标。。还是尽量做到吧，另外高光的降低让书页的细节通过调节找回来了，让人看着更舒服哦。关于上面提到的面部欠曝，这个属于修颜范畴了，我会留在了下一步ps里面统一进行的。
PS素材合成戴面具的美女插画
本教程介绍简单的真人插画效果的制作。制作的时候用到素材比较多，需要协调好整体的色调，也可以装饰自己喜爱的素材及笔刷等。原图 最终效果 一、打开原图把人物勾出来，然后把背景填充颜色：#FABE52，效果如图1。 二、在背景图层上面新建一个图层，选择椭圆选框工具拉出图2所示的选区，按Ctrl + Alt + D羽化，数值为60，确定后填充颜色：#EF037E，效果如图3，如果边缘还不够柔化，可以再用高斯模糊处理一下。
Photoshop制作闪烁的舞厅灯光立体字
在3D面板中，可以找到3D场景的全部元素，当选择其中一个元素的时候，属性面板就会自动转向该元素的属性面板。因此，当需要对3D场景中的元素进行操作的时候，要确保选择正确的3D元素。
select控件是如何设计的？
有几个原因促使我们使用自定义的select控件来代替原生的select控件：先把用HTML+CSS把select控件的外观模拟出来：这儿用到一张图片arrow.gif运行代码框<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <style> body, table, input, textarea, select{ margin: 0; font-size: 12px; line-height:1.5; font-family: Tahoma, SimSun, sans-serif; } .zSelect { display:inline-block; *zoom: 1; *display: inline; position:relative; height:20px; vertical-align:middle; } .zSelect .inputText { line-height: 17px; font-size:12px; background: #f7fafc; padding: 1px 17px 0 1px; border: 1px solid #68a; vertical-align: top; cursor:default; height: 17px; margin:0; } .zSelect .arrowimg { display:inline-block; *zoom: 1; *display: inline; position:relative; cursor:pointer; width:18px; height:20px; left:-18px; margin-right:-18px; vertical-align: top; outline:none; background: url(/design/UploadFiles_design/201105/2011050809104370.gif); } .zSelect .arrowimg:hover { background: url(http://www.blueidea.com/articleimg/2009/06/6794/arrow_over.gif); } .optgroup { position:absolute; z-index:666; left:0; top:19px; color: #369; } .optgroup div.optionsDiv{ padding:1px; overflow: auto; overflow-x: hidden; max-height:300px; color: #369; border: 1px solid #678; background: #f7fafc; width:auto; z-index:888; filter: Alpha(Opacity=90); opacity: 0.9; } .optgroup a, .optgroup a:visited{ font-size:12px; text-decoration:none; cursor:default; display:block; color: #369; white-space: nowrap; padding:1px 3px 2px 6px; _padding:0 3px 0 6px; height:18px; min-width:2em; } .optgroup a:hover,.optgroup a.selected:hover{ color: #dff; text-decoration:none; background:#38d; } .optgroup a.selected,.optgroup a:focus{ color: #eff; text-decoration:none; background:#49e; } </style> <script> function switchOptions(ele){ var optgroup=ele.parentNode.getElementsByTagName('div')[0]; if(optgroup.className=="optgroup")optgroup.style.display=optgroup.style.display=='none'?'block':'none'; } </script> <div>当前站点: <span id="_SiteSelector" class="zSelect"> <input type="text" class="inputText" value="请选择演示站点" style="width:100px;" unselectable="On"/><img height="20" width="18" class="arrowimg" src="http://www.ps123.net/design/UploadFiles_design/201105/2011050809104370.gif" onClick="switchOptions(this)"/> <div class="optgroup" style="width:120px;"><div class="optionsDiv"> <a href="javascript:retureValur(this);">*门户类演示站</a> <a href="javascript:retureValur(this);">新闻门户类演示站</a> <a href="javascript:retureValur(this);">企业形象类演示站</a> </div></div> </span> << </div> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]OK，在ff3下测试通过，在ie6、ie7下有一些错位，需要加CSS hack来作小许的调整，为了代码的纯粹，在这就不展示了。 接下来试着用js实现基本功能：通过JS替换页面内原有的select，当时我们希望这个JS是非侵入式的，只要引用了select.js这个js文件的页面，就自动把页面里原有的select控件替换接管了。
最新发布
浅谈网页加载动画的那点事
对于加载(loading)，想必大家都不陌生。每当看到加载页中那个不停转啊转的圈圈，或者是 “Loading…”后面不停闪动的三个点点，心里都会涌起各种焦躁反感。这篇文章详析了不同Loading对用户情感的影响，魔鬼藏在细节里，假如想让用户在惊叹于魔鬼般的细节时有出色的体验，你可以试试这个 → 《让等待也成为享受!18个读取进度条的优秀设计案例》根据一份调查得出，用户能够忍受加载的最长时间在：6到8秒。8秒是一个临界值，如果加载时间在8秒以上，大部分访问者最终会选择放弃，除非他一定要打开那个页面。以上三种是常见的loading方式，如果是我，我更希望看到第三种的进度条，因为我实在不知道第一个圈圈要转多久才能算加载成功，也不知道第二个点点要点到猴年马月。如果这个时候，界面除了看到”加载”以外的东西，是否就能转移用户的注意力呢?我们在看视屏前，视屏都会缓冲，在这时个候总是会放一段广告。每次我都会忍耐加载时的广告，但是如果广告做的很棒，很吸引人，就一点都不烦躁了，甚至还能在评论里看到求加载广告的地址。网页的loading就承担了加载广告的作用。在页面局部加载时常能看到第一个圈圈的身影，不过每次看到这个圈圈都差不多，如果换一种转圈的形式，也许会觉得”这个圈圈跟别的好像不太一样”，通过好奇减少等待的焦躁。减少用户的焦虑，可以给个允诺，示意他们还要加载多久，告诉现在的进度(有个进程百分比)，算给一个定心丸。例如以下的方式：
浅谈如何设计才能让网站风格协调一致
网页设计的要点之一便是一致性，设计师首先需要了解一致性，然后再致力于构建页面元素之间的联系。网页设计的目标是将网页和用户连结，通过设计(顺手的导航、流畅的交互)让用户对网站产生信任。尽管网页设计以功能性为主，但依然可以为用户提供优良的用户体验。客户，用户以及一致性：具备一致性特质的网页能够帮助推广品牌、清晰传递信息。客户在意的是设计能否有效传达他们的品牌、信息，在意设计是否能够在消费者中建立一种对品牌的信任感。如果品牌信息传递的不够一致、或者晦涩难懂，那么消费者很难对品牌产生信任感，这就影响到了客户的销售额和业绩。一致性与设计师个人推广：作为设计师，你自己就是一个品牌，你需要仔细思量一下该要如何打造一致性的”个人品牌”。如果你的个人博客设计的风格一致，分量充足，案例丰富，那么客户很容易就找上门来。简要概括一致性：布局井然有序，主页面、子页面有章可循，配色方案自成体系，交互方式统一协调，与内容深度联系————这就是一致性。
浅析文字在国际范网页中的重要性
网页设计中最重要的元素是什么?你不知道?思考一下：你是如何将信息传递给用户的?你是如何展示产品的?现在你明白了吧，答案很简单，用文字将信息传递给用户，用图像展示产品。两者结合之后，表达能力呈几何级上升。图像胜过文字大多数人认为图像比文字易于理解，这已经不是什么秘密了。通过观看的形式，图像更容易表达情绪，也更容易让用户铭记。用户很可能因为页面中一幅动人的图像而记住你的网站。在网上，你可能看过很多信息图。信息图的绘制规则很简单——人们更喜欢读图。很多人宁愿从图像中学习知识，世界上三分之一的人喜欢用图像作为学习的工具。背景图确实能够起到营造氛围的作用和信息图的道理很相似，你可能会注意到很多网站的背景都采用质感佳、意境好的大图。这种设计方式连我都挑不出毛病。这种背景图营造出特殊、出众的网站氛围，要注意根据品牌的特点选取恰当的大图。关键所在间断的介绍之后，我们来讨论一下：用户浏览网站，期望得到怎样的第一印象。从评论中我们得知，用户喜欢那种简约理念的网站，所以我们就放上一张效果惊人的背景照片，背景上面再写上几行字，就能满足用户需求。文字解释似乎有点含糊不清，可以看看下面的案例便能明晓。这种设计方法非常行之有效，效果很形象化。我前面已经说过，用户期望先看到一张大图，既舒服，又能了解大致内容，有个心理准备，然后再看文字，详细的了解内容，这样的信息传达更加到位。这种方式下，用户会在你的网站停留更久、会获取更多公司信息、会了解更多你的产品。
七条优秀网页设计的基本准则
互联网何时诞生，专家对此说法不一，30多年前，互联网的应用非常有限，仅仅一小部分人能够接触到这种先进的技术。然后经历了30多年的指数级发展，它取得了梦幻般的成功。十年前，互联网刚刚处于雏形阶段，到如今，整个产业的格局已呈”大而不倒”的局面。而互联网的阵线也拉长了，从传统的”老式桌面”到各式各样的便携式设备，从由互联网引领的”大数据时代”，再到存储的新革命”云概念”。而设备呢?手表、眼镜各种以网络为基础的可穿戴设备正在蓬勃发展。如穿越到十年前，向别人描述今日的网络现状，他肯定会一笑而过，认为这只不过是”海市蜃楼”般的幻想。但十年后的今天，这些革新一一实现，不再是触手不可及的幻象，这所有的技术革新切切实实的就在我们身边。感谢那些为互联网做出贡献的革命者们!这张图能够很好的阐述响应式设计的思想。而聪明的Luke Wroblewski提出了”移动优先(Mobile First)”设计战略，他认为，这种设计模式：先从移动设备开始设计，那么设计便能很轻松的向下兼容。(通俗的讲，就是大屏肯定能完美呈现小屏上的设计，而小屏不一定能装得下大屏上的设计。)
详细解析网页改版的一些心得技巧
互联网行业，几乎每天都有新的网站上线，旧的网站改版，但不论是新站还是改版都有一个共同的特征就是’全新’，全新的产品结构，全新的视觉风格带来全新的用户体验，这样的创新和调整多多少少都会给用户带来些许茫然。最近关注一些大型站点改版设计，如七月末淘宝的改版2013淘宝新详情页改版出炉以及针对京东改版谈网页设计趋势，感觉业内对新版调整后的用户适应方面做了很多新的努力，这篇则是作者对改版设计的一个小总结，今天特意拿来跟大家分享一下。01.新旧版同时在线，保留切换入口。豆瓣近期对首页做了改版，新旧版从产品结构方面做出了很大的调整，如果是豆瓣的常客，一定会在一个时期内觉得很不适应，所以豆瓣针对这个问题做出的解决方案是：暂时保留旧版网站的切换入口，一定时间段的适应期后彻底采用新版页面。MSN的新版上线后，发现多了一个往日首页的模块，用户可以自行设定日期，回顾当天MSN首页的样式和内容，很有新意。02.增加新版体验功能，第一时间给用户全新的认识。
如何设计完美婚礼网站的心得和秘诀
可能你已经收到过好几次请帖，或者准备好了礼物，因为这正是婚礼时节。夏季和秋季是受欢迎的婚礼季节。新人们越来越觉得，一个很棒的婚礼网站是和亲朋好友们交流的绝佳方式，还可免去各种额外花销。这原本小众的趋向，正在变得越来越流行。一个网站可以用作结婚纪念、婚礼信息展示台(登记信息、着装要求、向导指引和其他更多)，还可以作为一个分享图片与视频的地方。很多新人会选择模版样式个性十足的婚礼网站，可以让他们的网站脱颖而出。一个精美的婚礼网站比facebook页面更个性化，也让不用社交网络的人(好吧……)更易访问。在这，我们分享一些打造精彩婚礼网站的诀窍和个性十足的案例——其实你不必依赖手书和粉红丝带，先来欣赏一组漂亮的婚礼相关网站设计。强调欢迎页面jessandrussPittmans一个婚礼网站可以简单到单页设计，或者复杂到任何你能想象。但是欢迎页面是重中之重，婚礼网站的欢迎页(或主页)应该传达三件事：新人要清晰可辨，要能看见婚礼日期，所有其他导航项应该清楚、容易找到。
10大创意教你玩转网站背景设计
如何选择一种最恰当的网页背景是网站设计中最常见的问题之一。 通常网站设计者都已准备好网站内容，而且版面布局大多也基本敲定。但背景要么是令人厌烦，要么是让人眼花缭乱，让设计者迟迟不能确定。今天，我们将介绍几个实际网站来启发你的灵感，看看如何设计趣味而又令人感兴趣的网页背景。收藏本文，当你再次阅读时，你定会被某一个背景设计所迷恋。1. 素描设计这种设计在几年前就变得比较流行，而且一直持续到现在。这灵感来源于在笔记本上的涂鸦乱画，就像你十几岁时在英文课上所作的那样。每一部分都是些粗糙的素描表现，页面看似是非常随意的创意集合，而它们都以不同的旋转方式散布在页面各处。NotchStudio就是很好地应用了这种创意，并且以非常柔缓的方式表现出来。即使你本人不善长绘画，这种创意也是相当容易实现的，是因为这些涂鸦通常都是些非常基本的设计。如果拥有一部Wacom或iPad平板电脑，你就可以相当容易地描绘出你自己的图片或者某种意义上能够反映此类风格的书写文本。还有很多免费字体如Pointy，可以帮你不费吹灰之力就可实现让人赞不绝口的素描。2. 精细文稿设计风格纸张的质地纹理总能激起设计者的激情，而且为所有年龄所适用。目前这种创意已不像几年前那样风靡，但是它还是会带给你一种非常微妙的效果：如果你没有看到它，那会让你非常地想念。你注意到Beautiful Type所用的纹理设计，它既没有偏离主题也没有过分夸张，而是将一个原本看起来就很好的网站更是锦上添花。
精选国外优秀图片优化工具推荐
网页设计中往往需要大量部署图片。网站的品质取决于图像，如果一个网站的图像品质精良，那么体验将非常的棒。可以去看看那些优秀设计师和开发者的作品，他们往往非常注意图像的优化。既保证了图片的质量，又适度压缩图像，以提高加载速度。本文将介绍多种极佳的图像优化工具，可以在日常应用中帮助你。The Online Image Optimizer是一款在线压缩图像工具。支持本地上传图像进行压缩（最大不超过2.86MB）。可以选择图像输出类型。默认输出格式设置为和输入图像格式相同。 想要更好的图像优化体验吗？选择Riot吧！Riot软件提供了优化图像的绝佳平台。Riot软件轻量、界面简单、易用，实时优化，能够快速显示优化结果，可批量处理，可以发送到网络、邮箱、打印机中。原图：测试结果： 可以将你的图片最佳优化，达到惊艳的加载速度，同时最低限度降低图像质量。非常强大的工具，它的优化算法比其他工具先进。如果你想要”鱼与熊掌兼得”，那么花钱用这个吧！有网络试用版。支持SVG,PNG,GIF,JEPG。也具有Chrome、Firefox插件。
大胆奔放的字体在网页设计中的应用
好的设计为何好?原因可能不尽相同：先进的动效、蔚为壮观的图像、不同寻常的视频、细节精美的插画、完美无瑕的处理、创意的解决方案等等——但，以何种手段包装网页要取决于网站设计的目的。网站可以没有动效、可以没有图像及插画、可以没有视频、可以不采用流行风格，但是网站绝对不能没有文字。然而，正因为常见，所以被忽视。大家往往只把文字当作数据与内容的组织形式。然而大家有没有考虑过把字体也当成视觉表现的一种手段呢?优秀的字体能帮助网页设计打造清晰的视觉层级，有着优秀的可读性。字重、字体大小是字体较为重要的两个特性，我们可以借助这两个特性来进行优化。例如，如果你想要让一句话清晰可见、脱颖而出，那么只需要把文字加粗即可。粗厚的字体能够有效的引起用户注意。把字体放大一点，设计的显著一点，更具有支配性一点，那么网页将非常具有诱惑力。今天我们收集了一些对字体巧妙处理的网页设计。Holler大、柔和。黑白搭配，力量感很强的网页设计。Black in history吸引人的字体，精美的动效，蒙版效果不错，从其中可以窥见很多历史人物的肖像。
详细解析扁平化设计的进化论心得
别说你听的想吐了，也别说你不想讨论。除非有一天你想落伍离大家越来越远。事实证明，关于扁平化空前的争议和讨论导致了扁平化风格的多样化。没有争论，就没有变革！信息层级的简化、极简主义，这是我认为扁平化的核心，不同的设计师肯定对此理解也不同，大家有没有发现，最近的扁平化变了。实验，加入效果，失败！再实验，再次加入效果，成功，付诸实践！就是这么简单。所以现在的扁平化设计变得”不那么”扁平了或者”更”扁平了。好吧，先推荐一片文章An Extensive Look at Flat Design我们稍微挖掘了一下网络，我们试图搞清楚，这些设计师在干什么，在试验什么，在借鉴什么。以下是我们的小发现。来瞧瞧扁平化设计目前进化成哪几个类别了：）上帝看到扁平化设计，说”要有光”，于是就有光，然后也就有了投影。延伸投影，一般都是45度角，投影一般为物体的2.5倍大，给图标加入了一种深度。阴影也是扁平的，无渐变、明暗和衰退。但是坏处是，往往用户被阴影给吸引了，用户更关注阴影而不是图标。导致了一种阻碍效果。我个人看法是，这种设计个人感觉像是一团阴影，而不是一个图标。收集的长投影设计如下：ClockImage: Dmitri Litvinov