iPhoneSE图标设计UI教程(3)

UI / UI设计教程 / UI图标教程 /      

uimaker
UI设计师 / 江苏 南京

来源:zcool   作者:无梦不欢

关键词

再为其添加logo和名字,效果如下图:

4f7556f275d732f875a9446de9b3.jpg

字体用 “思源黑体”,logo上网上找一个(让我偷个懒吧,哈哈哈)

STEP03,绘制镜头

下面利用一个简单粗暴的方式来绘制镜头,重复使用同一效果

绘制一个10*10px的圆形

添加渐变叠加:

14c156f275fc6ac7257d20b2121a.jpg

描边1:

95d056f2762c6ac7257d2060e17f.jpg

描边2:

7efb56f276376ac7257d2025e400.jpg

描边3:

28db56f276566ac7257d206bdeb8.jpg

描边4:


3e6f56f276826ac7257d206cab0c.jpg

描边5:

e11556f276a36ac7257d20810a33.jpg


效果如下图:

画两个小的白色圆形,模式为“叠加”,做为高光

285a56f276bf32f875a944c0086a.jpg

再绘制闪光灯:

绘制一个14*24px的圆角矩形,圆角可以调大

渐变叠加:

fc0756f276d56ac7257d20297d10.jpg

光泽:

fde656f276eb32f875a944abf873.jpg

内阴影:

a12e56f2770b6ac7257d20a5bbda.jpg

效果如下图所示

57e356f2773b32f875a9441b7326.jpg

STEP04,绘制按键

画一个54*10px的圆角矩形,圆角为“3px”

渐变叠加:

259556f2775a32f875a944f4f2d0.jpg

 收藏