设计翻页日历图标教程
教程作者：全栈UI笔记本篇UI教程跟大家分享如何设计翻页日历图标，整体风格由灰白红组成，颜色十分大气，想学UI设计的同学快来学习一下吧。
我们来看看效果图：
http://pic1.16xx8.com/allimg/170826/0410431963-0.thumb.jpg
老规矩，先来分析一下。这里我们主要分为二个部分：底座、日历，其它问题都不大，主要是日历部分、需要用到多个图层来表现图标的立体感，骚年分析完已经成功一半了，离成功还会远么，噢耶！！！
http://pic1.16xx8.com/allimg/170826/041043M35-1.thumb.jpg
步骤一：
首先新建画布900px*900px画布，命名为日历图标，为背景添加图层样式。
http://pic1.16xx8.com/allimg/170826/041043D63-2.jpg
http://pic1.16xx8.com/allimg/170826/0410432A3-3.thumb.jpg
http://pic1.16xx8.com/allimg/170826/0410431433-4.thumb.jpg
步骤二：
使用圆角矩形工具、绘制一个530px*530px圆角半径为90px底座，并为它添加图层样式。
http://pic1.16xx8.com/allimg/170826/041043H60-5.thumb.jpg
http://pic1.16xx8.com/allimg/170826/04104354T-6.thumb.jpg
http://pic1.16xx8.com/allimg/170826/0410431313-7.thumb.jpg
http://pic1.16xx8.com/allimg/170826/04104364E-8.thumb.jpg
http://pic1.16xx8.com/allimg/170826/041043I30-9.thumb.jpg
http://pic1.16xx8.com/allimg/170826/04104362S-10.thumb.jpg
步骤三：
高逼格的底座一下就出来了，有木有！！！接下来继续使用圆角矩形工具、绘制一个398px*398px圆角半径为40px日历，并为它添加图层样式。
http://pic1.16xx8.com/allimg/170826/04104350Q-11.thumb.jpg
http://pic1.16xx8.com/allimg/170826/0410435243-12.thumb.jpg
http://pic1.16xx8.com/allimg/170826/0410434448-13.thumb.jpg
步骤四：
复制日历图层，将复制的图层移动到合适的位置。
http://pic1.16xx8.com/allimg/170826/0410433b3-14.jpg
步骤五：
再次复制日历图层，利用形状图层布尔运算，减去顶部，命名为变形图层，并合并形状组件。
http://pic1.16xx8.com/allimg/170826/0410433M6-15.thumb.jpg
步骤六：
我们复制变形图层吧， ctrl+t调整中心点垂直翻转一下，调节高度，右键透视调节合适形状，合并两个形状清除之前的图层样式，并从新添加图层样式吧。
http://pic1.16xx8.com/allimg/170826/04104325T-16.thumb.jpg
http://pic1.16xx8.com/allimg/170826/0410434051-17.thumb.jpg
http://pic1.16xx8.com/allimg/170826/04104355c-18.jpg
http://pic1.16xx8.com/allimg/170826/0410432923-19.thumb.jpg
http://pic1.16xx8.com/allimg/170826/04104332a-20.thumb.jpg
http://pic1.16xx8.com/allimg/170826/0410433Q6-21.thumb.jpg
http://pic1.16xx8.com/allimg/170826/0410433531-22.thumb.jpg
步骤七：
现在我们来绘制右侧装饰，制一个14px*56px圆角半径为3px的矩形颜色为#101010，并为它添加图层样式。
http://pic1.16xx8.com/allimg/170826/041043G37-23.thumb.jpg
http://pic1.16xx8.com/allimg/170826/0410434F7-24.thumb.jpg
http://pic1.16xx8.com/allimg/170826/041043E02-25.thumb.jpg
步骤八：
选择椭圆工具，绘制一个宽高8px*4px的椭圆，并添加高斯模糊命令，复制出另外三个并移动到合适位置。
http://pic1.16xx8.com/allimg/170826/041043IY-26.thumb.jpg
http://pic1.16xx8.com/allimg/170826/0410433R9-27.thumb.jpg
http://pic1.16xx8.com/allimg/170826/0410435013-28.thumb.jpg
步骤九：
将右侧装饰打组，复制装饰组移动到左侧位置。
http://pic1.16xx8.com/allimg/170826/041043L40-29.thumb.jpg
步骤十：
现在我们来绘制文字部分，字体方正兰亭黑简体 R.大小200点，颜色为#92181a，复制文字，将两个文字右键栅格化文字，删除不需要的位置。
http://pic1.16xx8.com/allimg/170826/04104345E-30.thumb.jpg
http://pic1.16xx8.com/allimg/170826/0410431050-31.thumb.jpg
http://pic1.16xx8.com/allimg/170826/0410431a0-32.thumb.jpg
步骤十一：
将文字下图层，ctrl右键执行透视效果，并添加图层样式。
http://pic1.16xx8.com/allimg/170826/0410432142-33.thumb.jpg
http://pic1.16xx8.com/allimg/170826/041043D31-34.thumb.jpg
http://pic1.16xx8.com/allimg/170826/0410435416-35.thumb.jpg
http://pic1.16xx8.com/allimg/170826/0410432102-36.thumb.jpg
步骤十二：
现在我们来绘制最后一个横线吧，用直线工具、绘制一个宽度360px粗细3px的直线，为它添加图层样式，并添加高斯模糊效果就完成这个案例了哦。
http://pic1.16xx8.com/allimg/170826/0410431130-37.thumb.jpg
http://pic1.16xx8.com/allimg/170826/0410435946-38.thumb.jpg
http://pic1.16xx8.com/allimg/170826/0410435X5-39.thumb.jpg
http://pic1.16xx8.com/allimg/170826/04104363Y-40.thumb.jpg
以上就是本次UI教程的全部内容，主要是学习运用图层样式来制作出图标的质感，大家可以活学活用，制作出其他质感的图标。欢迎大家分享自己的学习经验。http://www.16xx8.com/1diy/imges/wxapp_2wm.jpg 我的作业：我想复杂了，效果也不是很好。。。
页:
[1]