优艾设计网

UI教程,设计联系人和短信图标

优艾设计网 https://www.uibq.com 2020-09-14 00:00 出处:网络 作者:yu0910
第一次出UI教程,把之前参加过比赛的几套风格各异的主题图标拿制作过程出来讲解一下,图标的绘制方法有很多种,主要看你适合哪种,用得方便不,注意技巧跟细节

【描边】:大小3px,内部,颜色# d85082,

【内阴影】:颜色# c33c6d,不透明度70%,角度120°,距离5,阻塞2,大小8,

【渐变叠加】:线性渐变,色值从上到下为 # feb8d2 — # ff80af,角度为90°;

 

UI教程,设计联系人和短信图标

Step06:复制nei_yuan图层命名为nei_yuan_ban,清除图层样式,自由变换路径缩小94%(记得点击【保持长宽比】),颜色# FFFFFF,不透明度改为10%;再载入yuan_ban的蒙版选区,点击【图层】窗口的【添加图层蒙版】;

再复制nei_yuan图层命名为nei_yuan_bian,清除图层样式,填充颜色改为# ffb9d3;载入选区向上移动两像素,反向选区,再点击【图层】窗口的【添加图层蒙版】,再把nei_yuan_bian图层向下移动一像素;

再复制nei_yuan图层命名为nei_yuan2,清除图层样式,自由变换路径缩小90%(记得点击【保持长宽比】),颜色# FFFFFF,不透明度改为5%;

 

UI教程,设计联系人和短信图标

Step07:绘制LYNN Rabbit头部部分,用【椭圆工具】创建一个椭圆,设置图层混合选项,再绘制耳朵部分,注意描边细节跟阴影,脸部一一拆分,大多数用是用钢笔工具、椭圆工具、图层蒙版、设置图层混合选项等完成,在这就不一一详细说明,最后加上耳朵阴影和高光,拉个椭圆白色透明渐变,设置不透明度为50%,完成图标的绘制。

UI教程,设计联系人和短信图标

END:Duang~ 完成图标后加个华丽丽的背景,再用同样的方法就绘制出一套主题图标啦~

 

 

 

 

二、微扁平化 —— FLEXAGON (短信图标)

link:http://www.zcool.com.cn/work/ZMjg5MzQ1Ng==.html

 

UI教程,设计联系人和短信图标

Step01:选择【圆角矩形工具】(快捷键U,可按Shift+U切换),在画布点击【创建圆角矩形】弹出层,设置宽度为120px,高度为120px,半径20px,并勾选【从中心】,然后点击确定;

 

UI教程,设计联系人和短信图标

提示:键盘也能翻页,试试"← →"键
0

精彩评论

暂无评论...
验证码 换一张
取 消