JPEG图片：1024×768，1024×1024，1280×800，1280×960，1440×900，1600×1200，1920×1080

PSD文件：

valentine’s day wallpaper

相关文章

• 无相关文章

相关文章

• 十一月 16, 2011 -- 视频制作网站主页展示（商业作品） (10)

一、要把网页设计当成玩儿，而不单单是工作。

这其实说的是兴趣的事儿，作为网页设计师，一定要对网页设计感兴趣，你才能痛并快乐着，要不每天忙于应付客户交付的任务，就只剩痛苦了。韩老师现在还在给客户做大量设计的同时，有事没事的画个猪头或者煤气罐啥的，其实就是一种玩儿的态度。为啥做东西都挺累人了，他还要自己折腾呢？感兴趣呗！自己动手设计出来挺酷、挺炫的东西一方面会有成就感，另一方面也锻炼了自己的设计能力，所以如果我们对网页设计有兴趣和话，加上勤学苦练，进步一定非常快。

二、网页设计其实也是UI，所以要用做UI的概念来做设计

上面是韩老师作品中的元素截图，相信很多人都对这种酷炫的光效效果感兴趣而去临摹。但是其实就像韩老师教给大家的那样，技术上实现起来并不难，关键在于要对光效的理解到位。哪里是高光，哪里是阴影，哪里是反光要能够考虑到。拿第二张图片登录表单来说，顶部的左右两边的高光最亮的部分是白色的，这是一个层次，那么既然有这么亮的光线存在，那么必然在这些亮光周围有向外扩散的光晕，这又是一个层次，所以你可以看到这些高光周围的紫色是要比更远处的紫色浅一些的，所以你如果考虑到了这些东西，并且掌握了实现的技术，做出来的东西应该是很细腻漂亮的。而这些效果仅仅靠图层样式的参数调整是不能够实现的，如果我们仅仅死记硬背了几个图层样式的参数设置，或者在Photoshop中保存了一大堆图层样式，而没有真正理解的话，是不会有提高的。为什么韩老师做这种光效很厉害？我觉得和他一开始做UI设计有非常大的关系，做UI要考虑到很多关于结构、光效之类的东西，比起网页上的元素来说要复杂很多。下面是韩老师最近设计的煤气罐图标，我们可以认真观察，仔细考虑其中的高光和阴影，为什么高光和阴影放在这里？为什么是这个形状？明白了这些之后，网页元素上的光效看上去就比较简单了。所以多拿这种图形设计练手是非常好的提高设计能力的方法。

用UI的概念做网页设计的另外一个要点是细节。就像观止教育的优秀设计师辛旭起接受68Design采访时说的那样”我就拿一个按钮来说明，什么是按钮的细节？做出了颜色的渐变，做出了玻璃质感的高光，还需要什么？现在做出了三个面：亮部，暗部，高光。但是仔细想想：高光可能不止一处有高光，可以有多处光源，可以有多处高光。暗部不只是暗，它里面可能还会有反光，还有反射的物体，还有被反射的物体上面也有高光等等这些。把这些在这个按钮里有力的表现出来，这个时候，跟原来的按钮相比，就看到了细节。”要让设计出来的东西看上去漂亮，细节的表现是其中非常重要的一个方面。很多设计师在创建页面元素的细节时总感觉无从下手，不知道该做些什么，总被批评为设计粗糙，原因就在于想法还不够深入，看不到更深一层的东西，辛老师总结的这几句话算是给我们道破了迷津。

关于网页设计的细节，这里我要重点推荐我经常访问的两个关注细节的网页设计网站，一个是PremiumPixels，这是英国有名的网页设计师Orman Clark的个人站点，Orman Clark的这个网站主要关注的是wordpress主题的设计制作，他设计的wordpress主题虽然看上去界面没有企业站那样色彩丰富，效果炫丽，但是仔细观察，细节上都无可挑剔。另外Orman Clark会经常的把自己设计的PSD文件共享出来，供大家下载。所以这个网站上有很多的PSD源文件，而每一个设计的细节非常的讲究。所以通过研究源文件，我们可以很快把大师的技术学到手。

另外一个关注细节的优秀的网站是Dribbble，这是一个优秀设计师展示作品的平台，几乎每一个设计的细节部分都无可挑剔，仔细分析这其中的优秀作品，我们都可以在创意、配色、更重要的是细节方面提高很多。之前我挑出Dribbble上的10个导航设计进行了详细的分析，写了一篇文章《10个精致的导航菜单欣赏及点评》，大家可以参考一下。下面是我从Dribbble上随便摘取下来的设计作品，大家可以看到这些作品在细节方面的完美表现。

三、技术要积累并且熟练掌握。

拿韩老师的作品中用到的技术举几个例子来说，在这个游戏网站中，主要用到了下面几种技术来实现最终的效果：

1、用动感模糊滤镜做出来下雨的效果，喷溅笔刷做出来的打在巨人头上和肩上的雨水溅起效果以及图层叠加做出的地面的雨水漫过巨人脚面的效果。

2、用素材结合蒙板技术实现的巨人手中的火球效果以及巨人身后的山峰和闪电的效果。

3、套索工具和笔刷实现的顶部导航的岩石纹理的效果。

4、图层样式和笔刷做出来的Logo效果。

5、渐变映射为整个场景调色的技术。

所以如果这些实现的技术我们都没有熟练掌握的话，先不谈创意，就让你临摹一个类似的效果也不见得我们都能做得很好。这里我们又要谈到细节的问题，课堂上，韩老师给我们看过这个设计的PSD文件，单单是巨人的一只手里的火焰效果好像就用了将近20个图层，所以为什么韩老师做出来的这个场景看上去很真实，我觉得讲究细节是其中的一个非常重要的原因。所以我们做设计一定要有耐心，要有把即使一个小小的箭头都要求看上去完美的精神，做出来的东西才能经得起众人挑剔的眼睛和品味的检验。

四、认真细致的分析每一个优秀作品，让自己不断提高。

每个设计师的电脑里都保存了很多漂亮的网站截图，但是这些设计作品我们有时候并没有挖掘它更深层次的功效。既然这些都是我们看得上的好的设计作品，就应该多分析别人为什么以这种方式创意？为什么选择这种颜色？为什么这么布局？如果是我做这个设计，我会怎么做？和别人相比差距在哪里等等这些问题，借鉴别人的长处。我的方法是用马克鳗将这些值得学习的地方都标注下来，保存成图片，以便随时学习查阅。下面是我平时分析的一些东西，供大家参考（点击缩略图查看大图）。

相关文章

• 无相关文章

相关文章

• 一月 16, 2012 -- BuyUSA货源网设计作品展示（商业作品） (9)

下载

下面是具体实现步骤：

一、Ctrl+N新建一个文档，580像素宽，290像素高，白色背景，其他选项默认。给前景色选择一种灰色，我这里用的颜色是#898989，使用Alt+Delete键给背景图层填充此颜色。然后新建一个图层，选择圆角矩形工具（U），工具栏上选择路径属性，半径10个像素，在图层中画出路径形状，如下图：

二、按Ctrl+Enter键将路径转化为选区，选择一种颜色填充。不要取消选区，再新建一个图层，Ctrl+i反选选区，选择矩形选框工具（M），工具属性选择”与选区交叉”，框选出圆角矩形选区的左下角，填充为和圆角矩形相同的颜色，Ctrl+D取消选区，这样我们就得到了一个下图中所展示的形状，这个形状将帮助我们来实现标签式按钮的效果。

如下图：

三、使用移动工具（V）将做好的转角移动到圆角矩形的右边，按照垂直方向和水平方向拼接好，这里你可以将文档放大，并使用参考线来仔细的对齐。Ctrl+J将转角图层再复制一层，Ctrl+T自由变换，将图层水平翻转，放到矩形的左下角拼合好。按住Ctrl键将圆角矩形和左右两边的的转角图层都选择上，按下Ctrl+E合并三个图层。

四、使用放大镜工具将文档放大，用矩形选区工具（M）框选出按钮下方多余的部分，利用方向键仔细调整位置，将多余的部分删除掉，然后按下Ctrl+D取消选区。这样标签式按钮的形状就已经完成了。

五、最后给按钮根据需要添加质感就行了。这里我做了四种样式的标签按钮，供大家下载。

相关文章

• 十月 20, 2011 -- 手把手教你设计一个电影导演工作室主页 (11)
• 五月 13, 2011 -- 在Photoshop中创建内容盒阴影效果 (23)
• 五月 9, 2011 -- 在Photoshop中创建一个精致的音频播放器界面 (5)
• 九月 30, 2011 -- 苹果iOS和谷歌安卓用户界面风格对比及技术总结 (22)
• 九月 18, 2011 -- 10个精致的导航菜单欣赏及点评 (21)

先来看最终效果：

接下来是具体实现步骤：

一、Ctrl+N新建一个文档，680像素宽，390像素高，背景白色，其余保持默认，点击确定。新建文档的大小要比你最终想要的图片大小大一些，基本上上下左右各留出50像素，我这里最终要创建宽580像素，高290像素的图片，所以我给宽和高各加了100像素。然后在菜单栏选择图层>新建填充图层>纯色命令，选择一个较深的灰色，我这里的颜色为#303030。

二、新建一个图层，命名为”深色横纹”，填充为白色，在菜单栏上选择滤镜>杂色>添加杂色命令，数量99%，平均分布，勾选单色，点击确定。再应用滤镜>模糊>动感模糊命令，角度0度，距离25像素，点击确定。最后将图层的混合模式更改为叠加。再次新建一个图层，命名为”深色竖纹”，应用和上面的图层一样的方法，只是将动感模糊的角度设置为90度。最后将两个图层的不透明度更改为25%。完成之后的效果如下图：

这时你就能观察到为什么我们要将文档设置的大一些了，可以看到，文档的边缘部分的布纹好像被扯掉了一些纤维一样，看起来很稀薄。所以最后我们要将边缘部分裁切掉。

三、我们再新建一个图层，命名为”浅色横纹”，填充为黑色。应用添加杂色命令，这时我们使用和上一步骤中不同的杂色数量，目的是使布纹的纤维更为明显。所以这里我们使用101%，平均分布，勾选单色。然后应用动感模糊，角度0度，距离25像素。再按照相同的方法创建一个”浅色竖纹”图层。最后将两个图层的混合模式更改为滤色，不透明度更改为20%。完成后的效果如下：

四、最后使用裁切工具将图片的四边裁掉，调整为你想要的图片尺寸。当然你还可以通过调整填充图层的颜色和布纹图层的不透明度来创建多种色彩的背景图片，这也是为什么我们在第一步中使用填充图层的原因。以下是最终效果图：

相关文章

• 五月 12, 2010 -- 简单、快捷并且可收缩的Photoshop背景 (3)
• 四月 20, 2009 -- wordpress主题分析二A（Insense） (1)
• 三月 26, 2009 -- 一张红邮票(wordpress主题分析一B) (0)
• 十二月 16, 2008 -- 如何实现博客描述的气泡效果？ (0)

PS：由于文件比较大，所以我将设计PSD源文件放在了飞鱼的声纳群共享文件中，欢迎大家下载。群号码：168083758

二、设计要求

创建一个电影导演工作室主页，要体现出怀旧感和孤独感。没有Logo，没有图片，所有素材自己搜集。

三、设计思路和素材

根据设计要求，我们可以想象一个场景，一间有着泛旧的地板和斑驳的墙面的房间，一把空荡荡的导演椅安静的放在那里，椅子旁边放着拍片时用的喊话筒和废弃的电影胶片，打板也斜倚在墙上，安静的躺在幽暗的角落里。一束光从顶部向下打下来，落在椅子和地板上，让整个的气氛更加显得孤寂。依据这个想法，我们搜集以下素材来创建我们头脑里的这个场景。

1. 地板
2. 墙面
3. 裂纹笔刷
4. 导演椅
5. 话筒
6. 胶片
7. 打板
8. 胶片笔刷
9. 留声机
10. 相关字体（汉仪雪君、像素字体）

四、创建方法

接下来是具体的实现步骤。

1、打开Photoshop，快捷键Ctrl+N新建一个宽960像素，高800像素的空文档，使用移动工具（V）在文档左右两边拉出参考线，然后选择图像>画布大小命令，在对话框中将宽度更改为1400像素，点击确定。这样我们就有了一个宽1400像素，高800像素的空白文档以及位置合理的参考线。接下来，我们的设计全部都在这两条参考线内展开，所以第一步创建参考线是非常重要的。如下图所示：

2、按D键将前景和背景色调整到默认和前黑后白的状态，然后使用Alt+Delete键将图层填充为黑色。使用文件>置入命令将我们已经找好的地板素材导入到文档中，来创建整个场景的第一个元素。由于地板素材文件非常大，超过了文档的尺寸，所以你会看到置入命令会自动将图片调整到合适的尺寸。另外，此命令还会将地板图片作为智能对象添加到文档中。我们可以对地板图标进行缩放、定位、斜切、旋转或变形操作，而不会降低图像的质量。所以置入是一个非常好的将图片导入到文档中的选择。

通过观察置入的地板图片我们可以发现对于我们要创建的场景来讲，地板中木条的宽度还是太大，所以我们使用自由变换（Ctrl+T）命令，将图片再缩小一些。这时候虽然木条的宽度合适了，但是图片整体的大小太小了，不能覆盖整个文档，而我们的目的是要创建一个铺满了木地板的房间的感觉。所以这里我们将调整好的地板图片再复制一层。将两张图片左右拼合起来，这样图片的宽度就够了。这里要注意一个细节，就是两张图片的拼合接缝处要细细的调整，最好一点都看出来。对于这张线条明显的木地板，要做到这一点并不难。最后使用Ctrl+E将两个图层合并。最终的效果如下图：

3、在图层面板的地板图层上点击右键，选择转换为智能对象命令。之后使用自由变换（Ctrl+T），在文档的自由变换区域内点击右键，选择透视，将鼠标放置于右上角的锚点上水平向左拖动，你会观察到地板图片的顶部会向内收缩，同时透视的感觉出现，你还可以通过向右水平移动右下角锚点调整透视的角度，在调整的同时注意观察图片的效果，直到满意为止。如果对最终的效果不满意，你可以重新来一遍，这时由于图层已经是智能对象，所以不会损失清晰度。完成透视效果之后，在图层面板底部点击添加图层蒙板按钮，然后选择 渐变工具（G），使用黑色至透明的渐变同时按住Shift键在地板两端拉出水平渐变，遮盖住地板的两边，使其更好的融合于场景之中。最后选择滤镜>锐化>智能锐化命令，在弹出的对话框中将数量调整为110%，半径1个像素，其它参数默认，点击确定。这样地板看上去会更加清晰。最终完成的效果如下图：

4、由于我们需要创建一种怀旧的感觉，所以原始地板图片的颜色看上去过于明亮并且饱和度太高。所以接下来我们在图层面板的底部点击类似于太极图标似的调整图层按钮，选择色阶调整图层。应用如下参数设置：

当然这些参数只是用来参考，并不是说一定不能改动，你也可以自己调整数值，只要将地板的亮度降低到你自己认为合适就可以，一切以感觉为主。完成之后，回到图层面板，确保调整图层位于地板图层色上方，按住Alt键，移动鼠标到调整图层和地板图层之间的位置，这时你会观察到鼠标从手指的形状变成了一个左边一个小箭头右边两个圆形相叠的图标样式，点击一下，调整图层的左边出现了一个向下的小箭头，这样做的目的是将调整图层转换为下面图层的剪贴蒙板，这样色阶调整图层只会对地板图层有效，否则，凡是建立在调整图层下方的图层都会受到该调整图层的影响。

降低了亮度之后，接下来我们再按照同样的方法创建一个色相饱和度调整图层，参数设置如下：

调整了色阶和饱和度之后，我们再来看完成后的效果：

5、至此地板的效果就完成了，接下来我们在地板后面再来盖一堵墙。应用置入命令将下载好的墙面素材载入文档。由于下载的墙面素材还带有地面的部分，所以我们将墙面素材置于地板图层的下方，让地板遮住多余的部分，然后调整墙面的位置并应用自由变换使墙面素材大小合适。效果如下图：

6、可以观察到，要使墙面素材融合于整个场景之中还有这么几个问题需要解决。首先是从地板的半透明区域可以看到墙面素材多余的部分，需要遮盖住。二是需要调整墙面的色调，因为它太红了。三是在墙面与地板交汇的部分过于生硬，看起来不自然。下面就让我们一个问题一个问题的来解决。首先在墙面图层上方新建一个图层，使用渐变工具（G），按住Shift键从文档底部至地板与墙面的交汇处拉出一个黑色至透明的渐变，这样既遮住了墙面多余的部分，而且由于给墙面底部添加了阴影，所以地板和墙面的融合也会显得自然，一次解决了两个问题。需要注意的是，渐变的效果不要过于强烈，要柔和一些，如果你一次做的不够好，可以试着多做几次。下面是最后的效果：

7、接下来我们和上面地板中的方法一样，通过建立调整图层来给墙面调色，使其和地板的感觉相融合。首先建立一个色阶调整图层，应用如下参数设置：

再建立一个色相饱和度调整图层，参数如下：

最后给墙面图层创建一个蒙板，遮盖住两边的区域。当然别忘了使用Alt键将调整图层应用为剪贴蒙板。完成后的效果如下图：

8、为了增加怀旧的气氛，接下来，我们使用笔刷工具在墙面上创建裂纹的效果。首先新建一个图层，然后下载上面提供的裂纹笔刷效果文件，选择画笔工具（B），将下载的裂纹笔刷载入到画笔当中。将前景色调整为黑色，选择其中的一个裂纹笔刷效果，使用键盘上的左右方括号键调整笔刷的大小，在墙面的右下角位置点击一下，这样一条裂纹就出现在了墙面上，裂纹的效果就完成了。最后，选中以上创建的关于地板和墙面的所有图层，按 Ctrl+G键将它们放入到一个图层组中，命名为”地板和墙面”。最终效果如下图：

9、至此我们的整个空间背景就创建完成了，整个设计也有了一些气氛。接下来我们来完成主页的Logo和导航的制作。新建一个图层组，命名为导航，在其中新建一个图层。下载上面提供的电影胶片画笔文件，载入笔刷，选择其中的长条胶片笔刷，调整画笔大小，将前景色调整为黑色，画出电影胶片导航背景，如果画出的胶片太短的话，将画好的胶片图层复制一遍，使用移动工具（V）调整两张图片的位置，将其拼合起来，使用Ctrl+E将两图层合并。

由于我们只需要胶片的打孔部分，所以接下来新建一个图层，使用直角矩形工具画出一个宽度横跨整个文档，也就是大于1400像素，高度为115像素的黑色矩形，使用移动工具仔细的将矩形的下边框和胶片的打孔部分拼合在一起。完成后的效果如下图：

10、接下来我们添加Logo和导航文字。选择文字工具，分别键出”电影”、”工作室”、”Flyfish Film Studio”三个文字图层，”电影”文字使用68像素大小、汉仪雪君字体，并应用如下图层样式：

“工作室”和”Flyfish Film Studio”文字分别使用方正小标宋字体和Georgia字体，22像素和14像素大小，颜色都为#b86850。

导航中文文字部分使用12像素大小、微软雅黑字体、加粗、犀利、颜色#bab1ad，然后新建一个图层，选择矩形选区工具（M），画一个包含中文文字上半部分的选区，填充为白色，然后按住Alt键将该图层创建为文字图层的剪贴蒙板，这样导航文字就有了如同金属般的质感。

英文文字部分使用12像素大小、Georgia字体、犀利、颜色#b86850。然后使用移动工具将中英文导航文字排列好，导航部分的设计就完成了。如下图：

11、我们继续。接下来是整个设计中最重要的部分，主视觉的设计。首先下载导演椅素材，在photoshop中打开，使用钢笔工具仔细的将椅子从背景中抠出来。抠图虽然是技术含量不高的步骤，但是却直接影响到后期的设计效果，所以不能马虎。接下来使用修补工具（J）和仿制图章工具（S）将椅子图片上的水印和椅背后的文字抹掉。完成之后，使用拷贝粘贴将其载入文档，右键转换为智能对象，使用自由变换（Ctrl+T）将其大小调整到合适，观察图片后发现，椅子的亮度和饱和度太高，所以我们这里依然使用上面步骤中的方法，将其压暗，并降低饱和度，以下是色阶调整图层和色相饱和度调整图层的具体参数设置。

调整结束后我们可以清楚的看到椅子的靠背和坐垫部分为绿色，所以我们这里需要改变其色相，以下是具体参数：

完成后的效果如下图：

12、椅子的色调虽然调完了，但是椅子却像是飘在空中，没落地的感觉。别急，接下来我们就让椅子结结实实的落在地上。首先为了增加孤独的气氛，我们打算在椅子顶部打上一束光，类似于舞台追光灯的效果。那么我们在导航图层组下方新建一个图层组，命名为”灯光”，在其中新建一个图层，使用多边形套索工具，在椅子顶部画一个梯形，然后选择渐变工具（G），按住Shift键，使用白色至透明的渐变在选区内部画一个白色的渐变，如下图所示：

将此图层转换为智能对象，应用半径为10个像素的高斯模糊，将图层模式更改为叠加，然后降低图层的饱和度至65%。完成之后将此图层复制一遍，使用自由变换（Ctrl+T）将复制的图层缩小，放置于外层光的中间，这样光线中间就有了一个更为明亮的区域，使用同样的方法再做几遍，让光线看上去有一定的层次感。最后新建一个图层，使用椭圆形工具（U），在椅子底部画出一个和上方光线范围大小差不多的白色椭圆，图层模式更改为叠加，将此图层复制一遍，栅格化图层，应用3个像素的高斯模糊，这样光线不会看上去过于生硬。最后完成的效果如下图：

13、接下来我们给椅子添加阴影和高光。新建一个图层，使用矩形工具（U）在椅子底部画一个和椅子座位部分大小差不多的黑色矩形，应用5个像素的高斯模糊，不透明度更改为30%。然后将椅子图层复制一遍，按住Ctrl键在图层缩略图上点击一下，将椅子载入选区，填充为黑色，Ctrl+D取消选区。然后使用自由变换（Ctrl+T）将图层从上向下压扁，效果如下图：

接下来给阴影图层添加图层蒙板，使用大小合适的柔软黑色画笔将多余的阴影部分擦去，这样椅子就结结实实的落在了地板上了。最后的效果如下：

继续。接下来我们给椅子座位部分添加高光，新建一个图层，使用椭圆工具（U）在椅子座位处画一个白色的椭圆，栅格化图层，应用高斯模糊，然后将图层模式更改为叠加，由于椅子部分的颜色较深，所以可能需要多复制几个图层。接下来使用文字工具在椅背处键出相应的文字，大小22像素，Georgia字体，颜色#a06a57，完成后的效果如下图所示：

14、接下来添加其他物件。首先是喊话筒。下载素材，使用钢笔将喊话筒从背景中抠出，使用色彩平衡调整图层和可选颜色调整图层调整话筒的色调，使其和背景融合。具体参数设置如下：

然后和上面的椅子一样，我们也要为话筒添加阴影和高光。和上面的方法一样，我们使用应用了高斯模糊的白色叠加来创建高光，而用钢笔在话筒左侧画出选区，填充黑色，应用高斯模糊和蒙板来添加阴影。最终效果如下：

15、接下来是电影胶片盒。下载素材，抠出需要的部分。转换为智能对象，使用自由变换（Ctrl+T）将图片调整到合适大小。由于胶片盒的主要色调偏蓝色，所以我们首先使用色相饱和度调整图层将整个的蓝色调调整为符合整个场景的偏红色，以下是具体参数设置：

可以观察到胶片部分为彩色，所以我们新建一个黑白调整图层，这时候整个图片都被去色，我们不想让胶片盘部分被调整图层影响到，所以我们在图层面板中选择黑白调整图层的蒙板部分，然后使用大小合适的黑色画笔将胶片盘部分擦除出来。这样你会看到胶片部分为黑白色而胶片盘部分为偏红的颜色。接下来我们再新建一个色彩平衡调整图层，按住Ctrl键在黑白调整图层的蒙板上点击一下，然后将色彩平衡调整图层蒙板的相同部分填充为黑色，保证此部分不被色彩平衡所影响，然后应用如下参数设置：

接着再添加色阶调整图层将整个图片压暗一些。以下是参数设置：

最后使用上面的方法给胶片光线区域内的部分，以及右侧远离光线的部分添加高光和阴影，让它更融合于整个场景之中。下面是最后完成的效果图：

16、最后我们来添加电影打板和宣传语。下载素材，将打板从背景抠出，转换为智能对象，使用自由变换将其大小调整到合适。由于原素材偏青色、颜色较少并且亮度较高，所以我们首先使用色相饱和度调整图层来做调整，让青色的板子偏红偏暗一些，以下是具体参数设置：

可以观察到，板子偏红的程度还不够，所以我们再给图层添加色彩平衡调整图层，给它添加一定量的红色。

最后使用色阶调整图层将图片压暗。

最后在板子的背后和靠墙的部分画上阴影，在板子的左下角叠加白色画出高光部分。最后给主视觉也就是椅子的左侧添加宣传语。完成的效果如下图：

17、即将完成我们的设计。最后我们来设计页脚并添加版权信息。首先新建一个图层组，命名为”页脚”，在其中新建一个图层，使用矩形工具（U），在文档底部画出一个横跨整个文档的黑色矩形。使用文字工具（T）分别键出”飞鱼导演工作室 FLYFISH FILM STUDIO”、”FLYFISH FILM STUDIO ALL RIGHTS RESERVE 2011-2013″和”网页设计 STARTWMLIFE.COM.京ICP备20111011″三行文字，第一行文字12像素大小，中文部分使用方正小标宋字体，英文部分使用Georgia字体，颜色#ab8574，第二行英文文字应用04b_03像素字体，8像素大小，颜色#492317，第三行文字和第一行文字雷同，而颜色上和第二行文字相同。

接下来将老式留声机从背景抠出，转换为智能对象，自由变换改变大小，由于图片本身有些暗，所以我们新建一个图层，创建为剪贴蒙板，使用柔软白色画笔在需要调亮的地方画出白色，然后改变图层混合模式为叠加，这样本身暗的部分就被调亮了。

最后，将前景色调整为白色，放大文档，使用1像素的铅笔工具分别画出紧挨在一起的3像素高、2像素高和1像素高的三个垂直白线，这样就创建好了细腻的箭头效果，缩小文档至100%，你会看到实际的效果，前进后退箭头如法炮制，最后给它们应用如下渐变叠加图层样式。

页脚部分的最终效果如下图：

好了，至此，我们的电影导演工作室主页的设计就全部完成了，你可以下载PSD文件，详细查看每一步骤的具体操作。下面是最终的效果缩略图，你可以点击查看大图。

相关文章

• 十一月 15, 2011 -- 如何在Photoshop中创建标签式按钮（附PSD下载） (8)
• 五月 13, 2011 -- 在Photoshop中创建内容盒阴影效果 (23)
• 五月 9, 2011 -- 在Photoshop中创建一个精致的音频播放器界面 (5)
• 九月 30, 2011 -- 苹果iOS和谷歌安卓用户界面风格对比及技术总结 (22)
• 九月 18, 2011 -- 10个精致的导航菜单欣赏及点评 (21)

闲话少叙，这篇文章里我会将iOS和安卓的相同功能界面截取出来，共有五个部分，分别是：锁屏界面、拨号界面、浏览器界面、键盘界面以及其它元素。我会一一将它们从设计风格上做一对比，提取其中大家可能会关心的实现技术，让大家从设计思想和技术两方面了解它们之间的差异，通过这种对比分析提高我们自身的设计水平。另外我将自己搜集到的苹果iphone和ipad的iOS系统以及谷歌安卓系统界面完整的设计PSD文件放在这里，供大家下载研究。

PS：由于wordpress上传文件大小限制问题未解决，所以文件暂时放在飞鱼的声纳交流群里。待问题解决，我会及时上传。群号码：168083758

下面我们开始。

一、锁屏界面

可以观察到，iphone的锁屏界面在时间和解锁部分有着透明强高光风格的背景，高光部分有非常明显的界限，边缘部分1像素的高光也是非常醒目的，整体感觉整个表面非常光滑，如同玻璃般的质感。透明的使用让整个界面不被硬生生的划分为三个部分，而是让桌面图片从后面透过来，扩大了视线的范围，让整个界面感觉更加透气。滑动按钮使用了灰色的渐变，但是依然延续了这种风格，你可以清晰的看到高光和阴影部分的分界线。在整体的颜色上选择了不同层次的灰色，便于搭配各种桌面图片。

这里我们主要来了解一下透明的高光背景所使用的技术。通过查看源文件我们可以发现，其中最主要的部分实际上是技巧性的应用了图层样式中的渐变叠加。上半部分的高光应用了从顶部到底部由浅至深的灰色渐变，而下半部分只是单纯的黑色。下面图片显示了具体的颜色值，当然，这并不是唯一的数值，只是让大家做一个参考。完成渐变叠加后，再将渐变叠加的不透明度降低到55%，然后在图层面板中将图层的填充不透明度降低至0%就可以了。

这是我按照上面的方法做出来的效果，你也可以自己动手试一试。

相较于iphone的界面，安卓的看上去就要柔和一些，那是因为元素表面没有高光和阴影的显著差别，但是注意观察安卓各元素的阴影部分，却要比iphone强烈许多。如果说iOS的设计师偏好于运用高光的话，安卓的设计师可能更钟情于阴影的巧妙运用。可以看到在时间文字部分、解锁按钮以及背景部分、音量按钮以及背景部分都使用了非常显著的阴影效果。另外，不像iOS整体偏灰色的设计，安卓的界面在灰色中使用了饱和度和亮度较高的偏黄色的绿色，让使用这个色彩的元素非常醒目。

这里我们来重点学习安卓系统解锁按键的创建方法，音量按键创建方法完全相同只是颜色不同而已。这些效果全都是运用图层样式来实现的。先来看灰色的背景部分，其中的阴影是用外发光样式来实现的，元素表面是一个深灰色至深灰色的微弱的渐变，斜面和浮雕样式勾勒出顶部的高光和底部的阴影，最后将图层不透明度降低到85%。绿色的解锁按键使用内阴影做高光，由上到下从黑至白，混合模式为正片叠底的渐变完成的内阴影，也就是凹陷效果。具体的参数设置你可以通过查看PSD文件了解。

二、拨号界面

iphone的拨号界面整体使用了蓝色，只是在亮度和饱和度上有些差别，这样就显得层次丰富而又和谐统一。网页设计中也是如此，虽然我们可能用的颜色并不多，但是让他们在饱和度和亮度上有所区别的话，不仅不会有单调的感觉，反而会觉得层次很丰富。唯一在颜色上区别较大的部分是绿色的拨出按键，你可以考虑一下为什么单单这里使用了和其它部分色相不同的颜色？对，就是要让它跳出，因为它在功能上的重要性，所以给了它另外的颜色。这也正是为什么网页上那些”登录”、”注册”、”下载”、”购买”之类的按键做的又大又醒目的原因了。另外，你还可以在界面中的上下部分看到这种玻璃般质感的高光和阴影。这种风格贯穿于iphone界面的整个设计当中。

和上面透明高光背景的创建方法一样，绿的拨号按钮上的玻璃质感也是用渐变叠加来实现。下面是具体参数设置，你可以再次了解这种玻璃质感按钮创建方法的技巧在哪里。

安卓的整个界面以黑色为背景，上下部分使用了灰色，重要的地方用饱和度较高的亮黄绿色来跳出。可以观察到，在拨号键1的绿色背景中，同样应用了内发光的图层样式给按键添加了内阴影，保持了风格上的统一。

三、浏览器界面

iphone浏览器的整个色调依旧延续了饱和度较低的蓝色，低调而柔和。文字输入框添加了内阴影的图层样式，这样会产生凹陷的视觉效果。你依旧可以在浏览器下方的操控按钮背景处看到玻璃质感的风格运用。正是因为处处都有这样重复存在，才会让整个设计看起来是统一的。

安卓使用了浅灰色作为主打色，并且在地址栏和读取条使用了橙色高亮显示重要信息。仍旧也是延续了之前的风格。橙色和前面的偏黄的绿色由于其中都含有黄色，所以作为相近色会感觉非常和谐。这也正是我们在网页设计的色彩使用中值得注意的地方。

四、键盘

和浏览器一样，iphone键盘也使用了这种饱和度较低的蓝色，看上去不会那么刺眼。由于背景颜色较浅，所以你可以清晰的看到每个字母矩形背景下清晰的阴影效果。字母文字的黑色相较于其它功能键的颜色来讲更为醒目一些，这也正是功能重要性在视觉设计上的表现方式。每个字母的矩形背景都添加了细微的渐变，优秀设计总是在细节上都毫不松懈，这正是我们要学习的地方。

安卓的键盘在黑色的背景上使用了深灰色作为主色调，由于整个键盘的颜色较深，所以这里给字母应用了和深灰色反差较大的白色，每个字母还添加了淡淡的阴影。字母背景的矩形使用了较小的圆角半径，看上去只有2个像素大小，所以整个键盘给人的感觉相较于iphone的键盘来说更为方正一些。

五、其他元素

虽然iOS的设计以蓝色为主，但是并不是说完全不允许其它色彩出现。相反，使用小范围的饱和度较高的颜色更能让相关的设计在整个的设计中脱颖而出。当然，不能喧宾夺主，这是一定要注意的地方。就像前面提到的绿色的电话拨出键一样，这些绿色、红色、紫色的按钮和图标在整个的蓝色调中辨识度非常高，而且，仔细观察这些元素的质感，你还能找到玻璃感的设计。这些元素在技术创建方面没有任何的难度，稍微懂一点Photoshop技巧，都能动手实现。关键点在于在整个的设计之前，你能不能想到要按照这样的风格来做设计？而且为什么要这样来做而不是换为其它的一种风格？这恐怕是我们都值得深思的问题。

安卓的元素样式也一样，照葫芦画瓢，谁都能完成。但是我要说”我要一种简洁、低调、柔和的设计风格！”，你能作出这种感觉的设计作品来吗？这时候你恐怕要考虑的问题就多了。”要符合这种设计，我该用什么颜色？”"渐变的过度应该强烈还是缓和一些？”"这里应不应该用描边？阴影呢？”"是用直角还是圆角？圆角用2个像素够不够？”所以，临摹已经完成的设计和从零开始的设计是完完全全不同的，从零开始你要作出一个又一个的选择，就像前面提到的哪些问题，都是要经过仔细的思考完成的。每一个好的选择加起来就是好的作品，完全没思考或者一个个不好的选择叠加，那结果就可想而知了。

相关文章

• 八月 5, 2011 -- 57个关于iphone和ipad应用程序的网页设计 (7)
• 十一月 15, 2011 -- 如何在Photoshop中创建标签式按钮（附PSD下载） (8)
• 十月 20, 2011 -- 手把手教你设计一个电影导演工作室主页 (11)
• 九月 18, 2011 -- 10个精致的导航菜单欣赏及点评 (21)
• 八月 12, 2011 -- 在wordpress中创建以标签过滤的日志页面 (17)

一、木质页面上的抽屉创意

不看这个案例话，你能想到将木质页面上的导航菜单做成类似这样抽屉式的样式吗？我自己反正是没想到，这就是值得学习的创意。我们不要一做导航菜单就想也不想的画一个直角或者圆角的矩形背景，将文字放在上面，用竖线隔开文字。这就落入了程式化的束缚之中了。

看过这个案例后，你可以明白一点，就是根据已有的东西（这里是木质的页面材质）去展开思考元素样式的可能性。以这个案例为例，你可以思考一下在一个木质的页面上，如果能将抽屉的开合作为导航菜单的两种状态的话，那么暂时不考虑技术上的实现问题，还可以通过什么样式来实现？弹孔？刻痕？油漆？这里你就可以放开你的想象力了，这时候就是创意迸发的时刻。有了创意之后再考虑技术的问题，而不能让技术上能否实现限制住了我们的想象空间。

关于木质材质的创建我建议使用素材来实现，高分辨率的素材不仅细节丰富而且风格多样，上图的材质属于比较细腻的风格，这样的素材其实有很多，一搜一大把，但是关键在于平时的积累，有了不同风格的素材在手边，实现这样的效果其实非常快。

二、重复和对比原则的应用

垂直导航也是网页设计中常见的设计元素。在上面的设计中，我们能够看到设计师对于重复和对比原则的充分理解和应用。其中，一级导航的样式都很类似，左边是文字，右边是简洁的小图标，每个图标虽然不同，但是风格都是统一的，这正是多样性的重复原则。所以这些父导航按钮会让人感觉是平等而有某种联系的。而当前所在的位置以非常醒目饱和度较高的黄色显示，明显区别于一般状态的导航按钮，让访问者清楚的知道自己当前所处的位置，提高了用户体验并且增强了设计感。子导航既然和父导航不属于同一层次，那么必然要在视觉上和父导航有所区别，所以在背景颜色和文字颜色以及样式上你就能看到这种差别所在。

另外，我将这个导航按钮重新做成了PSD文件，放在这里供大家下载，你可以学习一下如何使用杂色滤镜、图层样式来实现这样细腻的导航菜单，以及如何使用铅笔工具以像素级的标准画出文字旁边那个小小的三角图标并且还要给它应用图层样式。以下是PSD文件预览图。

下载

三、每一个元素都是有用的

想象我们从一张空白的白色文档开始设计一个页面的导航。首先添加链接文字，为了让文字颜色和白色的页面对比不过于强烈刺眼，我们决定不用黑色而使用灰色。这里我们将文字行距拉开，让留白区域更多一些，目的是让页面保持透气感和干净的感觉。

各个导航栏目如果只是文字的话看上去过于类似，所以为了让它们在保持相似性的同时而有所区别，我们给每一个栏目的左侧添加上了风格简洁的图标，选择这种风格的图标一是符合页面本身干净的感觉，另外一点的考虑是图片和文字内容的关联性。我们不打算让图标比文字还吸引眼球，所以我们让它们保持比文字还浅的灰色。白色的页面上如果仅仅放上导航内容的话感觉结构不够整齐，因为没有实际上的线条来束缚视线，所以这里我们给每一个导航栏目添加非常浅的灰色水平线和垂直水平线，这种隐隐约约的线条既可以加强排版，还不至于让页面看上去条条框框过多，阻碍视线的游走。

接下来就是鼠标悬停的效果了，这要和菜单本身的状态有较大的视觉差别，所以这里我们将文字和背景颜色更改为清爽的绿色和灰色，灰色是为了让整个页面的颜色统一，而绿色是唯一跳出整个灰色页面的颜色。这样就让页面在颜色上有了亮点，而不至于让人感觉页面上灰蒙蒙的一片。背景的材质上添加了杂色，这样看上去更加柔和，而不是光亮的冷冰冰的感觉。这基本上就是我们设计这个导航的整个考虑过程。

这样你就看到了，这里的每一个元素和细节的应用都是经过充分考虑的，而且没有一个多于的东西无缘无故的存在，这就是简洁风格的设计理念。

四、强质感的高光风格

这个例子中的导航和我上一篇日志《强质感高光风格网页欣赏及其表现手法总结》中提高的风格比较类似，技术方法也非常简单，你可以去那篇日志中下载我做好的PSD文件，学习一下如何实现这样的效果。

五、温暖柔和的画面

导航菜单周围一圈略深于背景色的描边让导航和背景融合的更加自然。整个导航的颜色和底部的大约10个像素的阴影让整个导航条看上去更像是电脑键盘上的一个个按键。这个案例设计师提供了PSD文件，你可以自己尝试一下创建这样的导航效果。

下载

六、细节决定成败

这和苹果系统上程序图标上的数字提醒很像。虽然这样的数字提醒放在导航上非常漂亮，但是实际功能性却值得商榷，但它不妨碍我们学习到一点，那就是即使这样简单的导航，在细节上也是十分讲究的，从那小小的2字的圆形背景上你就能看得出来。图层样式中的高光、阴影、渐变、描边一个都不能少。另外为了和灰色页面的色调搭配，这些数字背景的红色、黄色和蓝色都选择了饱和度偏中间调的颜色，因为灰色本身也是介于黑色和白色中间的色调。

下载

七、有关主题的创意

这是一个有关电影剧场的网页设计。所以设计师在导航部分使用了这种类似于电影票的纸质的背景图片，并且添加上了水迹的笔刷效果，让细节更为丰富。在导航条的右下方，还加上了淡淡的阴影，让其和页面保持一定的距离，加强了导航菜单的纸质的感觉。有关这样的阴影的创建，你可以在《在Photoshop中创建内容盒阴影效果》这篇日志中找到详细的方法。和案例1类似，创建一个这样的关于电影剧场的网页设计，如果展开联想的话，你会有很多关于电影剧场的设计上的创意，这种以电影票为导航背景只是其中的一个例子而已。

八、自然质朴的布制风格

两条水平的白色虚线和一条灰色的垂直线仿佛是缝在布上的线脚。这种风格给人一种自然以及手工的感觉。创建这样的线脚并不难，直接用文字工具键出虚线，调整字体、大小以及间距就可以了。关键点在于页面边缘弯折的那部分，要注意绿色带子弯折后的透视关系，需要将其向下移动一定的距离。

九、让色彩从页面跳出

在偏向于黑色的页面背景上有这样鲜亮的绿色跳出会非常吸引视觉注意力。再加上好像用大头针钉在页面上的独特样式，更是和页面本身增强了对比，所以如果这样的下拉菜单展开的话，你会忍不住将鼠标移动到其它菜单上试试效果，如果同时你能关注到导航内容的话，设计者的目的就达到了。

十、互补色营造鲜明视觉

细腻的斜纹背景创建起来非常简单，只需用铅笔工具以1像素的粗细创建好图案，保存后在图层样式中应用图案叠加就可以了。关于这种背景的创建我在之前写的《在Photoshop中创建多种样式的网格背景图案》这篇文章中详细讲过，你可以参考这篇日志自己动手创建。

这里值得一提的是案例中的冷色背景色和暖色的文字和图标颜色的使用，橙色和青绿色属于互补色，青绿色作为背景色饱和度很低，而橙色的饱和度非常高，通过对比让图标和文字看上去非常醒目同时又非常和谐。所以如果你打算在设计中使用互补色的话，不要同时调高两种颜色的饱和度，这样会使视觉向两边拉扯，而应该有所主次，通过将一种颜色的饱和度降低，再加入相应的白色或者黑色和另外一种饱和度较高的颜色搭配，就像这个案例向我们展示的那样。

相关文章

• 十一月 15, 2011 -- 如何在Photoshop中创建标签式按钮（附PSD下载） (8)
• 十月 20, 2011 -- 手把手教你设计一个电影导演工作室主页 (11)
• 九月 30, 2011 -- 苹果iOS和谷歌安卓用户界面风格对比及技术总结 (22)
• 八月 12, 2011 -- 在wordpress中创建以标签过滤的日志页面 (17)
• 八月 5, 2011 -- 57个关于iphone和ipad应用程序的网页设计 (7)

我这里将这些常用的表现方法提取了出来，共有6种样式，分别是：1、镜面的内容背景；2、光亮的按钮；3、浮动的圆角水晶按钮；4、凸出的分割线；5、阴影分割线；6、角横幅。我将这些元素做成了PSD格式，提供给大家下载，你可以通过查看分层文件来学习如何在photoshop中实现这样的效果，将它们用在你的设计中。下面是这6种元素的预览图以及涉及到这种光亮风格的网页设计作品案例。

下载

1、Legacy Locker

2、Cappuccino

3、EZGameCard

4、tendyTUTS

5、Portfolio WebSite

6、Apple

7、CampaignMonitor

8、Invoice Machine

9、WooThemes

10、ActiveCollab

11、Ten24Media

12、Icebrrg

13、Xero

14、Media Temple

15、Realmac Software

16、OneHub

17、励步儿童教育

18、天泓信诺

相关文章

• 无相关文章