Photoshop绘制卡通风格的APP图标教程(2)

UI / UI设计教程 / PS教程 /      

uimaker
UI设计师 / 江苏 南京

来源:网络   作者:西湖鱼

关键词

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

Photoshop绘制卡通风格的APP图标教程

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

Photoshop绘制卡通风格的APP图标教程

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

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

Photoshop绘制卡通风格的APP图标教程

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

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

Photoshop绘制卡通风格的APP图标教程

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

Photoshop绘制卡通风格的APP图标教程

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

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

Photoshop绘制卡通风格的APP图标教程

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

Photoshop绘制卡通风格的APP图标教程

选区变换大小如图作参考

Photoshop绘制卡通风格的APP图标教程

Photoshop绘制卡通风格的APP图标教程

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

Photoshop绘制卡通风格的APP图标教程

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

Photoshop绘制卡通风格的APP图标教程

 收藏