<form id="9f9ll"></form>

      <address id="9f9ll"></address>

      您的当前位置: 名动漫 > 行内资讯 > 【UI教程】设计钟表图标

      【UI教程】设计钟表图标

      2017-10-21 1066

      我们经?;峥吹礁髦秩砑褪只隙蓟嵊玫秸庵滞急?,本篇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梦

      加入福利群,享报名超低价(低至1元)
      QQ群号:935967719 一键复制
      重庆幸运农场娱乐|官网_首页