确定退出登录
我们经常会看到各种软件和手机上都会用到这种图标,本篇UI教程就是教大家如何设计一枚这样的时钟UI图标,教程不算太难但不认真的话做下来也不容易,质感的制作主要靠图层样式,设置数值时要注意,总的来说并不难,分享给新手党学习。
最终效果如下图所示:
先说一下,这里我们把它拆分为三个部分:底座、表盘、指针,底座和指针的难度不大,就是表盘需要多个图层及图层样式叠加,这样图标才会有立体感。
步骤一:
新建一个1500px*1000px的画布,背景颜色为#4b4b4b,添加图案叠加图层样式。
步骤二:
使用圆角矩形工具、绘制一个600px*600px的圆角矩形,圆角半径是90px,并给它添加一个图层样式。
步骤三:
使用椭圆工具,绘制一个540px*540px的大圆,接着添加图层样式。
步骤四:
继续用椭圆工具,绘制一个500px*500px的圆,并添加图层样式。
步骤五:
用椭圆工具,再绘制一个393px*393px的圆,添加图层样式。
步骤六:
再绘制一个285px*285px的圆,添加图层样式。
步骤七:
再绘制一个107px*107px的圆,并添加图层样式。
步骤八:
接着绘制指针的位置,使用钢笔工具,绘制出指针的形状,复制指针改变指针颜色与角度,并为它们添加图层样式。
步骤九:
再用椭圆工具绘制出一个60px*60px的圆,给它添加图层样式。
步骤十:
现在来绘制刻度,使用矩形工具、绘制一个5px*35px的矩形,重复复制,旋转,并给它添加图层样式。
步骤十一:
一样的操作,绘制一个3px*18px的矩形,重复复制,旋转,并给它添加相同的图层样式。
步骤十二:
现在添加文字N.E. S.W字体样式Bebas Neue Regular ,字体大小设为46点,并添加上述图层样式。
步骤十三:
接下来做高光和暗部,利用椭圆工具,绘制出两个500px*500px的正圆,填充为0,不透明度为70%,添加图层样式,最后添加投影效果。
上面这些就是钟表图标的设计方法,需要提醒大家要特别注意对高光和暗部的处理,希望对童鞋们有用。
如果说,看完这篇教程还是学不会怎么办,那你可以来名动漫报名学习专业的ui设计培训,充实自己的UI知识,提高自己的制作能力。 广州名动漫,拥有十年的专注互娱就业教学经验,开设的有专业的UI课程,是大家学习ui设计培训的理想选择。
素材来源:站酷
编辑:名动漫小编