设计UI时钟图标教程_网页logo教程 - Powered by Discuz! Archiver

阿Got. 发表于 2016-1-5 01:26:06

设计UI时钟图标教程

大家一起来制作一个时钟主题的UI图标，其实UI大部分的样式效果，其实就是对于我们在学习ps的时候，图层样式里面的混合选项样式的不断重复运用。菜鸟级别，不对的地方请大家多多见谅，也请留言提出，非常感谢！效果图：
http://pic.16xx8.com/allimg/151224/203530ND-0.jpg
作者：xinyi_2009 出处：站酷

阿Got. 发表于 2016-1-5 01:26:06

制作步骤如下：首先，第一步，我们要建立一个空白文档，800px X 800px，分辨率为72像素的空白文档，为了日后可以随时调整背景色，新建一个图层，然后设置前景色，填充#8a8a8a。颜色大家可以根据自己的感觉，进行填充！此填充颜色图层命名为背景颜色填充层。（切记，养成不要修改原图和可以随时修改，不动原图的习惯哦）操作过程为：
http://pic.16xx8.com/allimg/151224/2035303337-1.png

http://pic.16xx8.com/allimg/151224/2035301207-2.png

阿Got. 发表于 2016-1-5 01:26:06

第二步，我们要进行时钟UI的设计，首先，我们做最外层，由外到内的渐进过程。找到ps中的“圆角矩形工具”，设置参数为：512px X 512px 圆角为120 ，颜色填充白色。并且在图层中修改图层名为为底层
http://pic.16xx8.com/allimg/151224/203530F06-3.png

http://pic.16xx8.com/allimg/151224/20353053V-4.png

阿Got. 发表于 2016-1-5 01:26:06

做完这一步之后，我们要对此图层设置图层样式哦，参数仅供参考！
http://pic.16xx8.com/allimg/151224/2035303360-5.png

阿Got. 发表于 2016-1-5 01:26:06

注意：此处的使用全局光前面的对号，一定要记得全部都取消哦！不然怎么样，自己去感觉！
http://pic.16xx8.com/allimg/151224/20353045N-6.png

阿Got. 发表于 2016-1-5 01:26:06

第三步，底板做好了之后，我们开始要表盘里面的凹下去的效果，我们这一块分为两大块做，选中椭圆工具，按住Shift键，新建一个420px X 420px的正圆，命名为表盘1，并添加相应的图层样式。
http://pic.16xx8.com/allimg/151224/2035305400-7.png

http://pic.16xx8.com/allimg/151224/2035301152-8.png

阿Got. 发表于 2016-1-5 01:26:06

接着复制一层，命名为表盘2，选择清除图层样式，重新添加新的图层样式。
http://pic.16xx8.com/allimg/151224/2035306036-9.png

http://pic.16xx8.com/allimg/151224/2035306428-10.png

阿Got. 发表于 2016-1-5 01:26:06

第四步，做完以上之后，我们做指针，用圆角矩形工具绘制一个160px X 32px的圆角矩形，圆角设置成15px ，颜色为白色。命名为指针1
http://pic.16xx8.com/allimg/151224/203530N08-11.png

http://pic.16xx8.com/allimg/151224/2035303123-12.png

阿Got. 发表于 2016-1-5 01:26:06

拉出辅助线，放到圆心的位置，摆放好位置，并设置指针1的图层样式。
http://pic.16xx8.com/allimg/151224/20353022W-13.png

阿Got. 发表于 2016-1-5 01:26:06

做完指针1之后，我们要做指针2，设置参数为：
http://pic.16xx8.com/allimg/151224/203530A31-14.png

http://pic.16xx8.com/allimg/151224/203530ID-15.png

阿Got. 发表于 2016-1-5 01:26:06

设置指针2的图层样式为：
http://pic.16xx8.com/allimg/151224/2035305Y1-16.png

http://pic.16xx8.com/allimg/151224/20353049A-17.png

http://pic.16xx8.com/allimg/151224/2035303957-18.png

阿Got. 发表于 2016-1-5 01:26:06

第五步，新建一个40px X 40px的正圆，居中对齐，颜色根据自己喜欢添加，命名为圆盘中心，并添加图层样式。
http://pic.16xx8.com/allimg/151224/2035304135-19.png

阿Got. 发表于 2016-1-5 01:26:06

复制一层，清除图层样式，重新添加图层样式！
http://pic.16xx8.com/allimg/151224/203530G60-20.png

http://pic.16xx8.com/allimg/151224/203530OQ-21.png

http://pic.16xx8.com/allimg/151224/20353040c-22.png

http://pic.16xx8.com/allimg/151224/20353025N-23.png

阿Got. 发表于 2016-1-5 01:26:06

第6步，做完以上之后，快，快，快接近尾声了，我们一鼓作气，做出秒针，创建矩形椭圆工具，设置参数为：放到合适的位置，并设置图层样式参数
http://pic.16xx8.com/allimg/151224/2035303505-24.png

http://pic.16xx8.com/allimg/151224/2035302205-25.png

http://pic.16xx8.com/allimg/151224/2035306052-26.png

阿Got. 发表于 2016-1-5 01:26:06