少儿美术加盟网 > 美术知识 > 【UI教程】设计钟表图标

【UI教程】设计钟表图标

336加盟网 美术知识 2020年02月06日

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

 

最终效果如下图所示:

 

【UI教程】设计钟表图标

 

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

 

【UI教程】设计钟表图标

 

步骤一:

 

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

 

【UI教程】设计钟表图标

【UI教程】设计钟表图标

 

步骤二:

 

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

 

【UI教程】设计钟表图标

【UI教程】设计钟表图标

 

步骤三:

 

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

 

【UI教程】设计钟表图标

 

【UI教程】设计钟表图标

 

步骤四:

 

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

 

【UI教程】设计钟表图标

【UI教程】设计钟表图标

 

【UI教程】设计钟表图标

 

步骤五:

 

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

 

【UI教程】设计钟表图标

【UI教程】设计钟表图标

【UI教程】设计钟表图标

 

步骤六:

 

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

 

【UI教程】设计钟表图标

【UI教程】设计钟表图标

 

步骤七:

 

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

 

【UI教程】设计钟表图标

【UI教程】设计钟表图标

【UI教程】设计钟表图标

 

步骤八:

 

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

 

【UI教程】设计钟表图标

【UI教程】设计钟表图标

 

【UI教程】设计钟表图标

 

步骤九:

 

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

 

【UI教程】设计钟表图标

【UI教程】设计钟表图标

【UI教程】设计钟表图标

 

步骤十:

 

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

 

【UI教程】设计钟表图标

【UI教程】设计钟表图标

【UI教程】设计钟表图标

 

步骤十一:

 

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

 

【UI教程】设计钟表图标

 

步骤十二:

 

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

 

【UI教程】设计钟表图标

 

步骤十三:

 

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

 

【UI教程】设计钟表图标

【UI教程】设计钟表图标

【UI教程】设计钟表图标

 

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

 

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

 

 

标签: