心若在家便在 發表於 2018-4-28 15:34:19

Photoshop制作一个可爱的质感小饼干icon图标教程

<p align="center"><img alt="" src="https://img.jbzj.com/file_images/photoshop/201804/20180428151253149.png" /></p>
<p>Hello,琼殿技术社区的朋友们，不露又和大家见面了，今天给大家带来的是Photoshop制作一个可爱Q弹的质感小饼干icon图标教程~看起来是不是非常像块饼干是吧~但做起来非常简单哦，感兴趣的朋友快打开PS一起躁起来吧。先来看看效果图：</p>
<p><span style="color: #ff0000"><strong>效果图：</strong></span></p>
<p align="center"><img alt="" src="https://img.jbzj.com/file_images/photoshop/201804/20180428151253150.jpg" /></p>
<p><span style="color: #ff0000"><strong>具体步骤：</strong></span></p>
<p>步骤1：打开PS，新建一个800*600的画布。给画布填充颜色：#6807ae，在画布中间建一个尺寸为360*360；圆角为60的圆角矩形；填充颜色：#ffffff。</p>
<p align="center"><img alt="" src="https://img.jbzj.com/file_images/photoshop/201804/20180428151253151.png" /></p>
<p>步骤2：在圆角矩形左上角建一个90*90的矩形，填充渐变色：#fc7f26~#fcc277；角度：-45&deg;。</p>
<p align="center"><img alt="" src="https://img.jbzj.com/file_images/photoshop/201804/20180428151253152.png" /></p>
<p>步骤3：复制出剩下的15个；然后选中这16个渐变小色块右建&mdash;创建剪切蒙版，得到下图：</p>
<p align="center"><img alt="" src="https://img.jbzj.com/file_images/photoshop/201804/20180428151254153.png" /></p>
<p>步骤4：用钢笔工具勾出上面的白色&ldquo;淋面&rdquo;，颜色为#ffffff(记得添加剪切蒙版哦）。用路径选择工具选中这个形状后在它的右上角画一个椭圆，尺寸随意。画这个圆的时候按住ALT键即可完成布尔运算的减法运算；另外画两个正圆在&ldquo;淋面&rdquo;的左下方，画圆的时候按住SHIFT键即可完成布尔运算的加法运算。</p>
<p align="center"><img alt="" src="https://img.jbzj.com/file_images/photoshop/201804/20180428151254154.png" /></p>
<p>步骤5：现在给底部圆角矩形加图层样式：</p>
<p align="center"><img alt="" src="https://img.jbzj.com/file_images/photoshop/201804/20180428151254155.png" /></p>
<p align="center"><img alt="" src="https://img.jbzj.com/file_images/photoshop/201804/20180428151254156.png" /></p>
<p align="center"><img alt="" src="https://img.jbzj.com/file_images/photoshop/201804/20180428151254157.png" /></p>
<p align="center"><img alt="" src="https://img.jbzj.com/file_images/photoshop/201804/20180428151254158.png" /></p>
<p align="center"><img alt="" src="https://img.jbzj.com/file_images/photoshop/201804/20180428151254159.png" /></p>
<p align="center"><img alt="" src="https://img.jbzj.com/file_images/photoshop/201804/20180428151254160.png" /></p>
<p>步骤6：现在给白色&ldquo;淋面&rdquo;加图层样式：</p>
<p align="center"><img alt="" src="https://img.jbzj.com/file_images/photoshop/201804/20180428151254161.png" /></p>
<p align="center"><img alt="" src="https://img.jbzj.com/file_images/photoshop/201804/20180428151254162.png" /></p>
<p align="center"><img alt="" src="https://img.jbzj.com/file_images/photoshop/201804/20180428151254163.png" /></p>
<p align="center"><img alt="" src="https://img.jbzj.com/file_images/photoshop/201804/20180428151255164.png" /></p>
<p align="center"><img alt="" src="https://img.jbzj.com/file_images/photoshop/201804/20180428151255165.png" /></p>
<p>步骤7：好啦~简简单单的几步下来~一个可爱的icon就这么诞生了可以加点装饰在背景上，显得更生动~</p>
<p align="center"><img alt="" src="https://img.jbzj.com/file_images/photoshop/201804/20180428151255166.png" /></p>
<p>小伙伴们可以通过学习上面这种质感小图标的做法，尝试着做出不同样式的图标（例子如下）；技巧包括：添加渐变提升质感，添加内阴影/斜面浮雕等图层样式打造出厚度感。最后记得交作业哦~爱你们。</p>
<p align="center"><img alt="" src="https://img.jbzj.com/file_images/photoshop/201804/20180428151255167.jpg" /></p>
<p>教程结束，以上就是关于Photoshop制作一个可爱的质感小饼干icon图标教程的全过程，希望大家喜欢！</p>
<p>作品作者：NestStrix Design</p>
<p>教程作者：不露</p>
<p>来源：学UI网 &raquo; 饼干icon教程</p>
<p><span style="color: #ff0000"><strong>相关教程推荐：</strong></span></p>
<p>Illustrator简单绘制一个可爱的小饼干图标</p>
<p>PS制作红色拟物化时钟icon图标教程</p>
<p>ps制作拟物胶囊药丸icon图标教程</p>
頁: [1]
查看完整版本: Photoshop制作一个可爱的质感小饼干icon图标教程