教程 发表于 2020-12-11 17:20:39

绘制游戏图标

教程作者：西湖鱼
本篇的图标教程是通过PS来制作一款时下最流行的游戏《纪念碑谷2》的游戏图标，华丽又清新，通过它来练习钢笔工具和学习绘制扁平插画游戏图标的思路，喜欢的同学们一起来学习下吧。

效果图

http://pic1.16xx8.com/allimg/171031/1104152523-0.thumb.png

http://pic1.16xx8.com/allimg/171031/1104152G6-1.png

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

http://pic1.16xx8.com/allimg/171031/1104155019-2.thumb.png

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

http://pic1.16xx8.com/allimg/171031/1104155214-3.thumb.png


http://pic1.16xx8.com/allimg/171031/110415I13-4.png

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

http://pic1.16xx8.com/allimg/171031/1104153O7-5.thumb.png

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

http://pic1.16xx8.com/allimg/171031/110415J35-6.thumb.png

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

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

http://pic1.16xx8.com/allimg/171031/1104155554-7.thumb.png

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

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

http://pic1.16xx8.com/allimg/171031/1104155D9-8.thumb.png

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

http://pic1.16xx8.com/allimg/171031/1104151D6-9.thumb.png

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

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

http://pic1.16xx8.com/allimg/171031/11041523T-10.thumb.png

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

http://pic1.16xx8.com/allimg/171031/1104155503-11.thumb.png

选区变换大小如图作参考

http://pic1.16xx8.com/allimg/171031/1104153D9-12.png

http://pic1.16xx8.com/allimg/171031/11041532L-13.thumb.png

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

http://pic1.16xx8.com/allimg/171031/1104154013-14.thumb.png

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

http://pic1.16xx8.com/allimg/171031/110415D45-15.thumb.png


http://pic1.16xx8.com/allimg/171031/11041533c-16.png

1、小艾达可拆分如图：

http://pic1.16xx8.com/allimg/171031/1104154339-17.thumb.png

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

http://pic1.16xx8.com/allimg/171031/1104154008-18.png

http://pic1.16xx8.com/allimg/171031/1104153Z7-19.thumb.png

② 用布尔运算绘制而成

http://pic1.16xx8.com/allimg/171031/1104154a5-20.thumb.png

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

http://pic1.16xx8.com/allimg/171031/110415B30-21.thumb.png

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

http://pic1.16xx8.com/allimg/171031/1104155F1-22.thumb.png

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

http://pic1.16xx8.com/allimg/171031/1104154143-23.thumb.png


2、萝尔可拆分如图

http://pic1.16xx8.com/allimg/171031/11041553b-24.thumb.png

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

http://pic1.16xx8.com/allimg/171031/1104153G3-25.thumb.png

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

http://pic1.16xx8.com/allimg/171031/1104152254-26.thumb.png

③运用布尔运算

http://pic1.16xx8.com/allimg/171031/11041515I-27.thumb.png

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

http://pic1.16xx8.com/allimg/171031/1104155026-28.thumb.png

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

http://pic1.16xx8.com/allimg/171031/11041550Z-29.thumb.png

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

http://pic1.16xx8.com/allimg/171031/1104152522-30.thumb.png

完成以上步骤最终成果

http://pic1.16xx8.com/allimg/171031/1104152523-0.thumb.png

同学们按照步骤做完了吗，是不是很喜欢，希望你在学习中也找到乐趣。http://www.16xx8.com/1diy/imges/wxapp_2wm.jpg

秃头小宝贝儿 发表于 2020-12-11 17:21:06

ICOIN

153796579 发表于 2020-12-14 11:20:44

多谢您的分享。

秃头小宝贝儿 发表于 2020-12-14 15:33:02

我的作业：是这个
页: [1]
查看完整版本: 绘制游戏图标