UI教程,设计锤子时钟图标教程(3)

设置指针2的图层样式为: 第五步,新建一个40px X 40px的正圆,居中对齐,颜色根据自己喜欢添加,命名为圆盘中心,并添加图层样式。 复制一层,清除图层样式,重新添加图层样式!

UI教程,设计锤子时钟图标教程(4)

第6步,做完以上之后,快,快,快接近尾声了,我们一鼓作气,做出秒针,创建矩形椭圆工具,设置参数为: 放到合适的位置,并设置图层样式参数 接着调整一下图层样式顺序,成果图如下: 结语:非常感谢您能看完这个

设置指针2的图层样式为:

UI教程,设计锤子时钟图标教程(3)插图

UI教程,设计锤子时钟图标教程(3)插图(1)

UI教程,设计锤子时钟图标教程(3)插图(2)

第五步,新建一个40px X 40px的正圆,居中对齐,颜色根据自己喜欢添加,命名为圆盘中心,并添加图层样式。

UI教程,设计锤子时钟图标教程(3)插图(3)

复制一层,清除图层样式,重新添加图层样式!

UI教程,设计锤子时钟图标教程(3)插图(4)

UI教程,设计锤子时钟图标教程(3)插图(5)

UI教程,设计锤子时钟图标教程(3)插图(6)

UI教程,设计锤子时钟图标教程(3)插图(7)

第三步,底板做好了之后,我们开始要表盘里面的凹下去的效果,我们这一块分为两大块做,选中椭圆工具,按住Shift键,新建一个420px X 420px的正圆,命名为表盘1,并添加相应的图层样式。

UI教程,设计锤子时钟图标教程(3)插图(8)

UI教程,设计锤子时钟图标教程(3)插图(9)

接着复制一层,命名为表盘2,选择清除图层样式,重新添加新的图层样式。

UI教程,设计锤子时钟图标教程(3)插图(10)

UI教程,设计锤子时钟图标教程(3)插图(11)

第四步,做完以上之后,我们做指针,用圆角矩形工具绘制一个160px X 32px的圆角矩形,圆角设置成15px ,颜色为白色。命名为指针1

UI教程,设计锤子时钟图标教程(3)插图(12)

UI教程,设计锤子时钟图标教程(3)插图(13)

拉出辅助线,放到圆心的位置,摆放好位置,并设置指针1的图层样式。

UI教程,设计锤子时钟图标教程(3)插图(14)

做完指针1之后,我们要做指针2,设置参数为:

UI教程,设计锤子时钟图标教程(3)插图(15)

UI教程,设计锤子时钟图标教程(3)插图(16)

大家一起来制作一个时钟主题的UI图标,其实UI大部分的样式效果,其实就是对于我们在学习ps的时候,图层样式里面的混合选项样式的不断重复运用。菜鸟级别,不对的地方请大家多多见谅,也请留言提出,非常感谢!

效果图:

UI教程,设计锤子时钟图标教程(3)插图(17)

制作步骤如下:

首先,第一步,我们要建立一个空白文档,800px X 800px,分辨率为72像素的空白文档,为了日后可以随时调整背景色,新建一个图层,然后设置前景色,填充#8a8a8a。颜色大家可以根据自己的感觉,进行填充!此填充颜色图层命名为背景颜色填充层。(切记,养成不要修改原图和可以随时修改,不动原图的习惯哦)

操作过程为:

UI教程,设计锤子时钟图标教程(3)插图(18)

UI教程,设计锤子时钟图标教程(3)插图(19)

第二步,我们要进行时钟UI的设计,首先,我们做最外层,由外到内的渐进过程。找到ps中的“圆角矩形工具”,设置参数为:512px X 512px 圆角为120 ,颜色填充白色。并且在图层中修改图层名为为底层

UI教程,设计锤子时钟图标教程(3)插图(20)

UI教程,设计锤子时钟图标教程(3)插图(21)

做完这一步之后,我们要对此图层设置图层样式哦,参数仅供参考!

UI教程,设计锤子时钟图标教程(3)插图(22)

注意:此处的使用全局光前面的对号,一定要记得全部都取消哦!不然怎么样,自己去感觉!

UI教程,设计锤子时钟图标教程(3)插图(23)

第6步,做完以上之后,快,快,快接近尾声了,我们一鼓作气,做出秒针,创建矩形椭圆工具,设置参数为:

放到合适的位置,并设置图层样式参数

UI教程,设计锤子时钟图标教程(3)插图(24)

UI教程,设计锤子时钟图标教程(3)插图(25)

UI教程,设计锤子时钟图标教程(3)插图(26)

接着调整一下图层样式顺序,成果图如下:

UI教程,设计锤子时钟图标教程(3)插图(27)

结语:非常感谢您能看完这个教程O(∩_∩)O,谢谢!!!

大家一起来制作一个时钟主题的UI图标,其实UI大部分的样式效果,其实就是对于我们在学习ps的时候,图层样式里面的混合选项样式的不断重复运用。菜鸟级别,不对的地方请大家多多见谅,也请留言提出,非常感谢!

效果图:

UI教程,设计锤子时钟图标教程(3)插图(17)

制作步骤如下:

首先,第一步,我们要建立一个空白文档,800px X 800px,分辨率为72像素的空白文档,为了日后可以随时调整背景色,新建一个图层,然后设置前景色,填充#8a8a8a。颜色大家可以根据自己的感觉,进行填充!此填充颜色图层命名为背景颜色填充层。(切记,养成不要修改原图和可以随时修改,不动原图的习惯哦)

操作过程为:

UI教程,设计锤子时钟图标教程(3)插图(18)

UI教程,设计锤子时钟图标教程(3)插图(19)

第二步,我们要进行时钟UI的设计,首先,我们做最外层,由外到内的渐进过程。找到ps中的“圆角矩形工具”,设置参数为:512px X 512px 圆角为120 ,颜色填充白色。并且在图层中修改图层名为为底层

UI教程,设计锤子时钟图标教程(3)插图(20)

UI教程,设计锤子时钟图标教程(3)插图(21)

做完这一步之后,我们要对此图层设置图层样式哦,参数仅供参考!

UI教程,设计锤子时钟图标教程(3)插图(22)

注意:此处的使用全局光前面的对号,一定要记得全部都取消哦!不然怎么样,自己去感觉!

UI教程,设计锤子时钟图标教程(3)插图(23)

第三步,底板做好了之后,我们开始要表盘里面的凹下去的效果,我们这一块分为两大块做,选中椭圆工具,按住Shift键,新建一个420px X 420px的正圆,命名为表盘1,并添加相应的图层样式。

UI教程,设计锤子时钟图标教程(3)插图(8)

UI教程,设计锤子时钟图标教程(3)插图(9)

接着复制一层,命名为表盘2,选择清除图层样式,重新添加新的图层样式。

UI教程,设计锤子时钟图标教程(3)插图(10)

UI教程,设计锤子时钟图标教程(3)插图(11)

第四步,做完以上之后,我们做指针,用圆角矩形工具绘制一个160px X 32px的圆角矩形,圆角设置成15px ,颜色为白色。命名为指针1

UI教程,设计锤子时钟图标教程(3)插图(12)

UI教程,设计锤子时钟图标教程(3)插图(13)

拉出辅助线,放到圆心的位置,摆放好位置,并设置指针1的图层样式。

UI教程,设计锤子时钟图标教程(3)插图(14)

做完指针1之后,我们要做指针2,设置参数为:

UI教程,设计锤子时钟图标教程(3)插图(15)

UI教程,设计锤子时钟图标教程(3)插图(16)

设置指针2的图层样式为:

UI教程,设计锤子时钟图标教程(3)插图

UI教程,设计锤子时钟图标教程(3)插图(1)

UI教程,设计锤子时钟图标教程(3)插图(2)

第五步,新建一个40px X 40px的正圆,居中对齐,颜色根据自己喜欢添加,命名为圆盘中心,并添加图层样式。

UI教程,设计锤子时钟图标教程(3)插图(3)

复制一层,清除图层样式,重新添加图层样式!

UI教程,设计锤子时钟图标教程(3)插图(4)

UI教程,设计锤子时钟图标教程(3)插图(5)

UI教程,设计锤子时钟图标教程(3)插图(6)

UI教程,设计锤子时钟图标教程(3)插图(7)

第6步,做完以上之后,快,快,快接近尾声了,我们一鼓作气,做出秒针,创建矩形椭圆工具,设置参数为:

放到合适的位置,并设置图层样式参数

UI教程,设计锤子时钟图标教程(3)插图(24)

UI教程,设计锤子时钟图标教程(3)插图(25)

UI教程,设计锤子时钟图标教程(3)插图(26)

接着调整一下图层样式顺序,成果图如下:

UI教程,设计锤子时钟图标教程(3)插图(27)

结语:非常感谢您能看完这个教程O(∩_∩)O,谢谢!!!

作者: 791650988

为您推荐

联系我们

联系我们

0898-88881688

在线咨询: QQ交谈

邮箱: email@wangzhan.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部