您的当前位置: 名动漫 > 关于学院 > 新闻资讯 > 【UI教程】设计钟表图标

【UI教程】设计钟表图标

2017-10-21 338

我们经常会看到各种软件和手机上都会用到这种图标,本篇UI教程就是教大家如何设计一枚这样的时钟UI图标,教程不算太难但不认真的话做下来也不容易,质感的制作主要靠图层样式,设置数值时要注意,总的来说并不难,分享给新手党学习。

 

最终效果如下图所示:


1.png

 

先说一下,这里我们把它拆分为三个部分:底座、表盘、指针,底座和指针的难度不大,就是表盘需要多个图层及图层样式叠加,这样图标才会有立体感。

 

2.png

 

步骤一:


新建一个1500px*1000px的画布,背景颜色为#4b4b4b,添加图案叠加图层样式。


3.png

4.png

 

步骤二:


使用圆角矩形工具、绘制一个600px*600px的圆角矩形,圆角半径是90px,并给它添加一个图层样式。

 

5.png

6.png

 

步骤三:


使用椭圆工具,绘制一个540px*540px的大圆,接着添加图层样式。


7.png

 

8.png 

 

步骤四:


继续用椭圆工具,绘制一个500px*500px的圆,并添加图层样式。

 

9.png

10.png

 

11.png

 

步骤五:


用椭圆工具,再绘制一个393px*393px的圆,添加图层样式。


12.png

13.png

14.png

 

步骤六:


再绘制一个285px*285px的圆,添加图层样式。


15.png

16.png

 

步骤七:


再绘制一个107px*107px的圆,并添加图层样式。


17.png

18.png

19.png


步骤八:


接着绘制指针的位置,使用钢笔工具,绘制出指针的形状,复制指针改变指针颜色与角度,并为它们添加图层样式。


20.png

21.png

 

22.png 


步骤九:


再用椭圆工具绘制出一个60px*60px的圆,给它添加图层样式。

 

23.png

24.png

25.png


步骤十:


现在来绘制刻度,使用矩形工具、绘制一个5px*35px的矩形,重复复制,旋转,并给它添加图层样式。


26.png

27.png

28.png

 

步骤十一:


一样的操作,绘制一个3px*18px的矩形,重复复制,旋转,并给它添加相同的图层样式。

 

30.png

  

步骤十二:


现在添加文字N.E. S.W字体样式Bebas Neue Regular ,字体大小设为46点,并添加上述图层样式。


31.png

  

步骤十三:


接下来做高光和暗部,利用椭圆工具,绘制出两个500px*500px的正圆,填充为0,不透明度为70%,添加图层样式,最后添加投影效果。

 

32.png

33.png

34.png


上面这些就是钟表图标的设计方法,需要提醒大家要特别注意对高光和暗部的处理,希望对童鞋们有用。

 

如果说,看完这篇教程还是学不会怎么办,那你可以来名动漫报名学习专业的ui设计培训充实自己的UI知识,提高自己的制作能力。 广州名动漫,拥有十年的专注互娱就业教学经验,开设的有专业的UI课程,是大家学习ui设计培训的理想选择。


素材来源:站酷

编辑:名动漫小编

上一篇:没毕业就能接触商业项目?厉害了我的影视后期班

下一篇:【UI教程】教你如何拥有一个哆啦A梦