<address id="1f133"></address>

        <address id="1f133"><nobr id="1f133"></nobr></address>

            <address id="1f133"><listing id="1f133"><meter id="1f133"></meter></listing></address>

            <address id="1f133"><nobr id="1f133"><th id="1f133"></th></nobr></address>

            <form id="1f133"><nobr id="1f133"><nobr id="1f133"></nobr></nobr></form>

            <sub id="1f133"></sub>
              <address id="1f133"><nobr id="1f133"><meter id="1f133"></meter></nobr></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 一键复制
                重庆幸运农场娱乐|官网_首页