PS图标设计：绘制逼真的计时器UI图标教程
本教程主要使用photoshop绘制逼真的计时器UI图标教程，今天这枚图标效果很经典了，作为一枚入门必备的练手图标，今天走着P大点S重新把教程写出来给大家练手，有什么不懂的东西可以下载PSD源文件，喜欢的朋友让我们一起学习吧。首先，看看我们的山寨原图。
http://www.06ps.com/d/file/2015/0724/20150724082343957.jpg
我们的成品：
http://www.06ps.com/d/file/2015/0724/20150724082403348.jpg
http://www.06ps.com/d/file/2015/0724/20150724082405423.jpg
原图有点小，我这里文档比原图建得稍大了一些。
http://www.06ps.com/d/file/2015/0724/20150724082407388.jpg
我们首先进行背景的创建，我创建了一个“渐变”调整层，设置的#444c60到#262f37的90度的径向渐变。
http://www.06ps.com/d/file/2015/0724/20150724082408912.jpg
建个新图层，填充白色，执行“滤镜—杂色—添加杂色”，设置杂色数量为20%，平均分布，并将这个图层混合模式更改为“正片叠底”。
http://www.06ps.com/d/file/2015/0724/20150724082410488.jpg
下面，我们制作原图中的像素斜线，新建个5像素*5像素的文档，放大画布到最大，用铅笔工具，设置铅笔像素大小为1像素，画出如下图案，记得把文档的背景图层删除掉，我们只要那个斜线图层。
http://www.06ps.com/d/file/2015/0724/20150724082412615.jpg
接下来，我们把这个图案自定义，执行“编辑—自定图案”。
http://www.06ps.com/d/file/2015/0724/20150724082414627.jpg
回到我们的文档，在“杂色”图层上层，新建个图层，执行“编辑—填充”，选择使用图案填充，找到刚才我们自定义的那个图案，确定。
http://www.06ps.com/d/file/2015/0724/20150724082415631.jpg
将这个斜线图层的图层不透明度更改为30%，这样我们就完成了背景的创建。
http://www.06ps.com/d/file/2015/0724/20150724082417479.jpg
设置前景色为黑色，画一个黑色的圆角矩形，并将填充更改为20%
http://www.06ps.com/d/file/2015/0724/20150724082419862.jpg
为这个底框图层添加一个内阴影
http://www.06ps.com/d/file/2015/0724/20150724082421265.jpg
添加一个投影
http://www.06ps.com/d/file/2015/0724/20150724082422854.jpg
复制这个底框图层，摆放到右边，现在我们得到如下的效果：
http://www.06ps.com/d/file/2015/0724/20150724082423753.jpg
下面，我们开始制作图标的整体，用圆角矩形工具，画一个圆角矩形。
http://www.06ps.com/d/file/2015/0724/20150724082426803.jpg
为这个框添加一个渐变叠加。
http://www.06ps.com/d/file/2015/0724/20150724082428840.jpg
添加一个外描边。
http://www.06ps.com/d/file/2015/0724/20150724082429201.jpg
添加一个内阴影。
http://www.06ps.com/d/file/2015/0724/20150724082430346.jpg
现在，我们得到如下效果：
http://www.06ps.com/d/file/2015/0724/20150724082431550.jpg
选择框图层，复制一层在下层，调整圆角矩形大小，宽度缩小4像素，高度不变，向下移动4像素。
http://www.06ps.com/d/file/2015/0724/20150724082434411.jpg
选择框拷贝图层，再次复制一层在下层，同样的宽度还是缩小4像素，高度不变，向下移动4像素。
http://www.06ps.com/d/file/2015/0724/20150724082436428.jpg
为这个最底层的框，也就是框拷贝2图层增加一个外发光。
http://www.06ps.com/d/file/2015/0724/20150724082438365.jpg
增加一个投影。
http://www.06ps.com/d/file/2015/0724/20150724082439843.jpg
现在，我们的效果如下：
http://www.06ps.com/d/file/2015/0724/20150724082441639.jpg
接下来，打上字。
http://www.06ps.com/d/file/2015/0724/20150724082443957.jpg
为这个数字设置一个渐变。
http://www.06ps.com/d/file/2015/0724/20150724082447652.jpg
添加一个投影。
http://www.06ps.com/d/file/2015/0724/20150724082448257.jpg
设置前景色为#172026，画一个矩形。
http://www.06ps.com/d/file/2015/0724/20150724082449710.jpg
为这个线，设置一个投影。
http://www.06ps.com/d/file/2015/0724/20150724082451603.jpg
用圆角矩形工具，画一个圆角矩形。
http://www.06ps.com/d/file/2015/0724/20150724082452990.jpg
为这个圆角矩形设置一个渐变叠加。
http://www.06ps.com/d/file/2015/0724/20150724082455467.jpg
添加一个斜面和浮雕。
http://www.06ps.com/d/file/2015/0724/20150724082456560.jpg
添加一个外发光。
http://www.06ps.com/d/file/2015/0724/20150724082458339.jpg
现在，我们的效果如下：
http://www.06ps.com/d/file/2015/0724/20150724082459790.jpg
接下来，打上字。
http://www.06ps.com/d/file/2015/0724/20150724082443957.jpg
为这个数字设置一个渐变。
http://www.06ps.com/d/file/2015/0724/20150724082447652.jpg
对这个一半的5进行透视变形。
http://www.06ps.com/d/file/2015/0724/20150724082602844.jpg
为这个一半的5添加一个渐变叠加。
http://www.06ps.com/d/file/2015/0724/20150724082604641.jpg
添加一个投影。
http://www.06ps.com/d/file/2015/0724/20150724082605976.jpg
现在，我们得到如下效果：
http://www.06ps.com/d/file/2015/0724/20150724082606698.jpg
设置前景色为黑色，用钢笔工具画一个下图的形状，我们来添加一个阴影。
http://www.06ps.com/d/file/2015/0724/20150724082608395.jpg
在属性面板中，为其设置一个10像素的羽化。
http://www.06ps.com/d/file/2015/0724/20150724082610779.jpg
更改这个阴影图层的混合模式为正片叠底，不透明度35%。
http://www.06ps.com/d/file/2015/0724/20150724082612539.jpg
到这里，就大功告成了，当然，你喜欢的话，随便做什么颜色都行。
http://www.06ps.com/d/file/2015/0724/20150724082614496.jpg
添加一个投影。
http://www.06ps.com/d/file/2015/0724/20150724082448257.jpg
设置前景色为#172026，画一个矩形。
http://www.06ps.com/d/file/2015/0724/20150724082449710.jpg
为这个线，设置一个投影。
http://www.06ps.com/d/file/2015/0724/20150724082451603.jpg
用圆角矩形工具，画一个圆角矩形。
http://www.06ps.com/d/file/2015/0724/20150724082452990.jpg
为这个圆角矩形设置一个渐变叠加。
http://www.06ps.com/d/file/2015/0724/20150724082455467.jpg
添加一个斜面和浮雕。
http://www.06ps.com/d/file/2015/0724/20150724082456560.jpg
添加一个外发光。
http://www.06ps.com/d/file/2015/0724/20150724082458339.jpg
现在，我们的效果如下：
http://www.06ps.com/d/file/2015/0724/20150724082459790.jpg
我们把最后一个图标修改一下，我们把高光图层，移动到文字5的下层，复制一层框图层在文字5的上层。并画一个矩形减去，组合形状组件。
http://www.06ps.com/d/file/2015/0724/20150724082501849.jpg
进行适当的透视变形，得到如下效果。
http://www.06ps.com/d/file/2015/0724/20150724082505251.jpg
为其设置一个渐变叠加。
http://www.06ps.com/d/file/2015/0724/20150724082507278.jpg
添加一个渐变的描边。
http://www.06ps.com/d/file/2015/0724/20150724082508464.jpg
添加一个内阴影。
http://www.06ps.com/d/file/2015/0724/20150724082509779.jpg
复制一层文字5，置于这个变形后的框的上层，转形状，用减去模式画个矩形，得到一个一半的5
http://www.06ps.com/d/file/2015/0724/20150724082518810.jpg
页:
[1]