西湖鱼

@秒针?经典揭秘冒险游戏《纪念碑谷2》在App Store上架已经两个多月了。它的新版图标看起来华丽清新,不妨跟着教程绘制一下,通过它来练习钢笔工具和学习绘制扁平插画游戏图标的基本思路。

jiaozuoye

封面

 

使用工具:66_04

 

66_08

1. 新建画布,尺寸512*512,分辨率72ppi。用圆角矩形工具绘制一个圆角为90px的512*512的圆角矩形。给圆角矩形添加图层样式如图。

66_11

 

2. 用椭圆工具绘制颜色为#ffffff的8px正圆,并复制十余个,改变部分圆的透明度,达到图a的效果。

66_13

 

66_16

1. 分析出柱体的俯视图,这样更容易明白图标中柱体应如何绘制。八芒星柱体的俯视图如下,由两个正方形组合而成。

66_19

 

2. 根据俯视图开始绘制柱体。仔细观察图a图b,发挥空间想象力,根据数字提示看看怎么由图b得到图c的。

66_21

 

新建70*150的矩形,得到图c的矩形3。

新建50*150的矩形,自由变换斜切30°,得到图c的矩形2。

66_24

矩形5与矩形8受光程度不同,因此颜色不一。只要绘制出图c的矩形2和矩形3,通过水平变换和移动位置就可以得到图c。

 

3.用钢笔工具沿着柱体顶点画出部分八芒星,随后添加图层样式渐变叠加,参考数值如下:

66_26

 

添加图层蒙版擦除部分区域,实现近实远虚的效果。

66_28

记得关闭第二步中的矩形1与矩形7的图层显示,八芒星中擦除过的部分不透明度降低,不关闭显示则会影响八芒星的颜色效果。擦除效果接近图d即可。

?

4. 绘制八芒星描边。按住键盘上的 Ctrl 键,鼠标单击八芒星图层的缩略图得到选区。

66_30

 

得到八芒星的选区后,选中选框工具(快捷键M),在选区内单击鼠标右键选择“变换选区”。

66_32

 

选区变换大小如图作参考66_36

66_38

 

接着新建图层,即可激活描边选项。随后添加图层蒙版擦除部分区域。

66_40

 

以同样的步骤绘制颜色为#82b3ff的2px描边,以及16px的渐变描边,渐变叠加参数如下图。完成效果参考如图e。

66_42

 

66_45

1.小艾达可拆分如图:

66_48

 

① 用AI的形状生成工具绘制而成66_52

66_54

 

② 用布尔运算绘制而成

66_56

 

③ 由三角形和圆形组成的圆锥,添加锚点改变弧度而来

66_58

 

④ 复制一个部件③,添加渐变叠加(90°线性),用布尔运算绘制而成

66_61

 

⑤和⑥用钢笔工具绘制而成,再加上影子,小艾达的绘制就完成了

66_63

 

2.萝尔可拆分如图

66_65

 

① 是添加了渐变叠加的82*82圆

66_67

 

②是添加了渐变叠加(90度线性)的60*60圆

66_70

 

③运用布尔运算

66_72

 

部件⑤领口部分要与部件④等宽。部件⑤用钢笔工具绘制,添加了渐变叠加(图f效果),并用画笔工具画了一层暗面增加立体感

66_74

 

⑥是钢笔工具画轮廓,保持与艾达的手弧度一致,画笔工具画阴影

66_76

 

⑦运用布尔运算绘制出裆部,运用钢笔工具绘制腿与脚

66_80

 

完成以上步骤最终成果↓

66_81

 

坚持到这里并成功绘制的同学都超棒的!一步步跟着分析、拆分图标中的元素,练习了钢笔工具以及布尔运算,再看看以下用到相似元素的图标,是不是有种豁然开朗的感觉呢?欢迎留言提问,期待你提交的作业。

66_84

 

看完教程咱们交作业咯!点我直达作业提交页面~~

 

转载请注明:学UI网—UI设计师学习教程平台 » 《纪念碑谷2》图标教程[ps教程]

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.ccopus.com?”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.ccopus.com” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.ccopus.com” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.ccopus.com” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

【学UI网 原创文章 投稿邮箱:tougao@ccopus.com,也可以找各个群的管理】

 
你可能喜欢的:
一叶知秋-剪纸风教程【教程】一叶知秋-剪纸风教程【教程】
设计师必备!人工智能时代的配色方案?。凵衿鳎?/span>
AI快速绘制2.5D冰淇淋车AI快速绘制2.5D冰淇淋车
VIP勋章拆解教程 [ps教程]VIP勋章拆解教程 [ps教程]
写实插头图标教程[PS教程]写实插头图标教程[PS教程]
运气药水绘制【教程】运气药水绘制【教程】
毛线编织纹理图标教程[AI教程]毛线编织纹理图标教程[AI教程]
2.5D收音机教程2.5D收音机教程
Pixel Sorter创建潮流线粒风格!Pixel Sorter创建潮流线粒风格!
海盗插画教程【教程】海盗插画教程【教程】
?