PS绘制卡通风格的APP图标教学photoshop教程

PS绘制卡通风格的APP图标教学photoshop教程

PS绘制卡通风格的APP图标教学-photoshop教程

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

西湖鱼

先看看效果图

PS绘制卡通风格的APP图标教学photoshop教程插图我的爱 · 创-WODEAI.NET|3D打印机创意智造

PS绘制卡通风格的APP图标教学photoshop教程插图1我的爱 · 创-WODEAI.NET|3D打印机创意智造

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

PS绘制卡通风格的APP图标教学photoshop教程插图2我的爱 · 创-WODEAI.NET|3D打印机创意智造

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

PS绘制卡通风格的APP图标教学photoshop教程插图3我的爱 · 创-WODEAI.NET|3D打印机创意智造

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

PS绘制卡通风格的APP图标教学photoshop教程插图4我的爱 · 创-WODEAI.NET|3D打印机创意智造

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

PS绘制卡通风格的APP图标教学photoshop教程插图5我的爱 · 创-WODEAI.NET|3D打印机创意智造

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

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

PS绘制卡通风格的APP图标教学photoshop教程插图6我的爱 · 创-WODEAI.NET|3D打印机创意智造

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

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

PS绘制卡通风格的APP图标教学photoshop教程插图7我的爱 · 创-WODEAI.NET|3D打印机创意智造

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

PS绘制卡通风格的APP图标教学photoshop教程插图8我的爱 · 创-WODEAI.NET|3D打印机创意智造

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

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

PS绘制卡通风格的APP图标教学photoshop教程插图9我的爱 · 创-WODEAI.NET|3D打印机创意智造

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

PS绘制卡通风格的APP图标教学photoshop教程插图10我的爱 · 创-WODEAI.NET|3D打印机创意智造

选区变换大小如图所示作参考

PS绘制卡通风格的APP图标教学photoshop教程插图11我的爱 · 创-WODEAI.NET|3D打印机创意智造

PS绘制卡通风格的APP图标教学photoshop教程插图12我的爱 · 创-WODEAI.NET|3D打印机创意智造

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

PS绘制卡通风格的APP图标教学photoshop教程插图13我的爱 · 创-WODEAI.NET|3D打印机创意智造

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

PS绘制卡通风格的APP图标教学photoshop教程插图14我的爱 · 创-WODEAI.NET|3D打印机创意智造

1、小艾达可拆分如图所示:

PS绘制卡通风格的APP图标教学photoshop教程插图15我的爱 · 创-WODEAI.NET|3D打印机创意智造

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

PS绘制卡通风格的APP图标教学photoshop教程插图16我的爱 · 创-WODEAI.NET|3D打印机创意智造

PS绘制卡通风格的APP图标教学photoshop教程插图17我的爱 · 创-WODEAI.NET|3D打印机创意智造

② 用布尔运算绘制而成

PS绘制卡通风格的APP图标教学photoshop教程插图18我的爱 · 创-WODEAI.NET|3D打印机创意智造

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

PS绘制卡通风格的APP图标教学photoshop教程插图19我的爱 · 创-WODEAI.NET|3D打印机创意智造

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

PS绘制卡通风格的APP图标教学photoshop教程插图20我的爱 · 创-WODEAI.NET|3D打印机创意智造

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

PS绘制卡通风格的APP图标教学photoshop教程插图21我的爱 · 创-WODEAI.NET|3D打印机创意智造

2、萝尔可拆分如图所示

PS绘制卡通风格的APP图标教学photoshop教程插图22我的爱 · 创-WODEAI.NET|3D打印机创意智造

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

PS绘制卡通风格的APP图标教学photoshop教程插图23我的爱 · 创-WODEAI.NET|3D打印机创意智造

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

PS绘制卡通风格的APP图标教学photoshop教程插图24我的爱 · 创-WODEAI.NET|3D打印机创意智造

③运用布尔运算

PS绘制卡通风格的APP图标教学photoshop教程插图25我的爱 · 创-WODEAI.NET|3D打印机创意智造

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

PS绘制卡通风格的APP图标教学photoshop教程插图26我的爱 · 创-WODEAI.NET|3D打印机创意智造

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

PS绘制卡通风格的APP图标教学photoshop教程插图27我的爱 · 创-WODEAI.NET|3D打印机创意智造

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

PS绘制卡通风格的APP图标教学photoshop教程插图28我的爱 · 创-WODEAI.NET|3D打印机创意智造

完成以上步骤最终成果

PS绘制卡通风格的APP图标教学photoshop教程插图我的爱 · 创-WODEAI.NET|3D打印机创意智造

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

常见问题
疑难问题可以发起提问
通过导航菜单中的,创客问答-问题发布,进行提问,让更多的朋友看到并回答你的问题。
分享模型或FDM用机技术
可以通过,创客问答-技术分享,发布你的模型或技术知识,获得更多朋友的支持和点赞。
造机工坊分享机器图纸与固件
想制作同款FDM打印机的朋友,可以通过这个栏目下载机器设计图纸,BOM表单,源码固件等等,自行安装3D打印机了。
分享知识内容不收费!!!
本站始于爱好,止于收费,本站下载内容都不收费,感谢您的访问!
原文链接:https://www.wodeai.net/666181.html,转载请注明出处。如有侵权请联系邮箱:lianzhi0000#163.com (#=@) 删除,谢谢!
0
分享海报

评论0

请先
没有账号?注册  忘记密码?

社交账号快速登录

微信扫一扫关注
如已关注,请回复“登录”二字获取验证码