纳金网

标题: 浏览器图标皱纸风格制作解析 [打印本页]

作者: lut_456 时间: 2013-12-16 15:13
标题: 浏览器图标皱纸风格制作解析

导言：
有时，我们在制作图标时需要尝试许多不同的风格，通过对质感的把握，来达到突变在不同环境下的用途。这套浏览器图标皱纸版是通过官方山寨版处理而来。下面就是以制作Opera图标为例，来介绍如何用Photoshop制作这类图标。在制作的过程中，需要不断对比官方原版。希望对你有所帮助，让我们开始吧！

新建一个250px×250px的文档。再新建一图层，命名为128px。用于确定图标的尺寸。保存该PSD文件，命名为Opera。（图01）

图01

在工具栏选择矩形工具，画出一正方形。按住shift绘制一个正方形，再选择编辑→自由变换路径，来调整正方形为128px×128px。（图02）

图02

再把该正方形填充为任一种颜色。接下来新建一图层，命名为icon，准备画图标。（图03）

图03

选择椭圆工具，在正方形区域内画出外椭圆。参照官方图标来确定长宽。（图04）

图04

按住Alt键，用相同的工具画出内椭圆，添加两个锚点，用直接选择工具拖动各个锚点，调整内椭圆。（图05）

图05

用路径选择工具，同时选中两椭圆，右键→填充路径，使用颜色，色值#b21618。然后，删除路径。（图06）

图06

新建一图层，命名为shadow，准备画阴影。（图07）

图07

用相同的方法画出阴影轮廓，并填充为黑色，设置图层不透明度为50%，调整图标位置和大小，使其完全位于128px图层内部，且饱满。然后可隐藏128px图层。（图08）

图08

双击icon图层，调出图层样式面板，设置斜面和浮雕。（图09）

图09

设置参数如图。（图10）

图10

新建一层，命名为glarel，准备画出左边的高光，选择渐变工具。（图11）

图11

调出渐变编辑器，设置滑块的不透明度和色值。从左到右不透明度和色值分别为：（图12）
0% #eab239
25% #ea8c39
100% #fddad7
25% #ea8c39
0% #eab239

图12

按住Ctrl键，点击icon图层，调出其选区，再选中glarel图层。从右上往左下拖动渐变条，画出渐变高光。然后删除右侧的高光。（图13）

图13

新建一图层，命名为glare2，用同样的方法，画出其右侧的高光。再用橡皮擦工具稍微擦除下两高光的边缘。（图14）

图14

复制icon和shadow图层，并把复制出来的两个图层合并，生成icon副本。隐藏icon和shadow图层。（图15）

图15

选中icon副本图层，选择滤镜→扭曲→波纹，设置参数如图。（图16）

图16

选择滤镜→液化，使用向前变形工具，对图标进行略微的变形。（图17）

图17

选择滤镜→画笔描边→喷色描边。（图18）

图18

新建一层，命名为texture，找一张褶皱纹理的图将其定义为图案。再选择油漆桶工具，并选择图案和那张褶皱纹理贴图。（图19）

图19

按住Ctrl键，点击icon副本图层调出选区，填充texture图层，并将图层设置为线性减淡（添加）。（图20）

图20

新建一图层，命名为texture2，用同样的方法用另一淡色褶皱纹理贴图。（图21）

图21

设置图层为正片叠底，不透明度90%。这个皱纸版的图标就大致完成了。显示128px×128px的图像。隐藏所有背景，导出Png图片，这样我们就完成了。（图22、23）

图22

图23

欢迎光临纳金网 (http://rs.narkii.com/club/)