设计一个风扇主题的图标教程
本篇教程主要分享一款风扇主题的UI图标设计方法，教程比较详细，想学习风扇图标设计的同学赶紧学习分享吧。先看看效果图：http://pic1.16xx8.com/allimg/161010/0955193R4-0.jpg
www.16xx8.com
练习重点：这次练习主要练习光影、颜色对形体、空间的塑造，对这块运用不熟练的小伙伴，值得动手练习一下。整个教程分为【背景】【机身】【扇叶】【扇框内投影】【光-颜色】五个部分，每个部分在完成以后都进行了编组，所以你们要注意图层分组。我们首先从背景层开始。作者：杨洋-XHM 出处：微博 步骤一：打开你的Adobe Photoshop，创建一个新文档。宽度：400 px高度：300 px分辨率：72 px制作拟物图标背景：温馨提示：这主要是用渐变工具(G)，整体扯出差不多的效果过就可以啦。底层渐变：径向 -#ededed"#b1adaa近景亮色：线性 - #e1e0df"#b1adaa
http://pic1.16xx8.com/allimg/161010/0955193054-1.jpg
步骤二：制作【风扇机身】：温馨提示：用圆角矩形工具(U)，该图层命名为【风扇机身】，颜色填充#e2e1e0。宽度：180 px高度：180 px半径：8 px赋予【风扇机身】光感，制造体积感：
http://pic1.16xx8.com/allimg/161010/0955192M7-2.jpg
温馨提示：用图层样式时，尽量都【不要使用全局光】，因为使用后，在添加相同样式，制作不同角度的效果时，会有影响。图层样式：内阴影 模式：滤色 颜色：#b4785a 不透明度：75% 角度：90° 距离：5px 大小：5px图层样式：内阴影 模式：正片叠底 颜色：#8f8696 不透明度：76% 角度：-52° 距离：4px 大小：5px图层样式：渐变叠加 模式：正常 样式：线性 颜色：#b4b6bb " #f2eee9 角度：103°图层样式：投影 模式：正片叠底 颜色：#22272a 不透明度：20% 角度：90° 距离：2px 大小：2px
http://pic1.16xx8.com/allimg/161010/095519D05-3.jpg
步骤三：制作电扇【圆形扇框】：温馨提示：用 椭圆工具 (U)，该图层命名为【圆形扇框】，颜色填充#e2e1e0。宽度：138 px高度：138 px赋予【圆形扇框】光感，制造体积感：
http://pic1.16xx8.com/allimg/161010/09551963J-4.jpg
温馨提示：用图层样式时，尽量都【不要使用全局光】，因为使用后，在添加相同样式，制作不同角度的效果时，会有影响。图层样式：描边 大小：2px 位置：外部 填充类型：渐变 颜色：#757e8a " #ccd4dc 角度：-68°图层样式：内阴影 模式：正片叠底 颜色：#5e6f84 不透明度：75% 角度：90° 距离：1px 大小：12px图层样式：渐变叠加 模式：正常 样式：径向 颜色：#636363 " #bdccdb 角度：90° 缩放：127%
http://pic1.16xx8.com/allimg/161010/0955194Z2-5.jpg
步骤四：制作电扇【 圆形扇框2 】：温馨提示：用 椭圆工具 (U)，该图层命名为【圆形扇框2】，颜色填充#e2e1e0，注意对齐中心。宽度：112 px高度：112 px赋予【圆形扇框2】光感，制造体积感：
http://pic1.16xx8.com/allimg/161010/095519B64-6.jpg
温馨提示：用图层样式时，尽量都【不要使用全局光】，图层样式：描边 大小：2px 位置：外部 不透明度：30% 填充类型：渐变 颜色：#535050 " #826969 角度：-59°图层样式：渐变叠加 模式：正常 样式：径向 颜色：#f2eee9 " #b4b6bb 角度：103° 缩放：150%图层样式：投影 模式：滤色 颜色：#ffffff 不透明度：36% 角度：114° 距离：4px
http://pic1.16xx8.com/allimg/161010/09551a118-7.jpg
步骤五：制作电扇【扇格部分】：温馨提示：用椭圆工具(U)的描边来做，粗细自己定。该图层命名为【扇格部分】，颜色填充#ffffff
http://pic1.16xx8.com/allimg/161010/0955192222-8.jpg
赋予【扇格部分】光感，制造体积感：
http://pic1.16xx8.com/allimg/161010/0955191L4-9.jpg
图层样式：渐变叠加 模式：正常 样式：线性 颜色：#323b49 " #b9c0c7 角度：-61°图层样式：投影 模式：正常 颜色：#f6f0e8 不透明度：45% 角度：90° 距离：1px
http://pic1.16xx8.com/allimg/161010/0955196259-10.jpg
步骤六：整理图层面板：
http://pic1.16xx8.com/allimg/161010/09551921T-11.jpg
温馨提示：做到这里，【机身组】的内容已经完成了。你们可以通过上图的图层面板，命名、 整理、 分类你的图层，这是一个很重要的好习惯，它能让你更有效率的进行工作。 步骤七：制作电扇【扇页】：温馨提示：用圆角矩形工具 (U)来做，大小比例自己定。该图层命名为【扇页】，颜色填充#ffffff
http://pic1.16xx8.com/allimg/161010/0955193030-12.jpg
分解图：
http://pic1.16xx8.com/allimg/161010/09551952I-13.jpg
赋予【扇页】光感，制造体积感：温馨提示：扇叶的基本型做好以后，依次添加三个样式，并根据光线，给扇叶添加一个光影效果。
http://pic1.16xx8.com/allimg/161010/0955194455-14.jpg
图层样式：内阴影 模式：正片叠底 颜色：#ede2d9 不透明度：75% 角度：90° 距离：1px图层样式：渐变叠加 模式：正常 样式：径向 颜色：#cfd1d5 " #e6e2de 角度：90° 缩放：127%图层样式：投影 模式：正常 颜色：#814f23 不透明度：25% 角度：105° 距离：9px
http://pic1.16xx8.com/allimg/161010/0955196350-15.jpg
制造【扇页】暗部：温馨提示：我们根据光线给扇叶推导出扇叶的大致光影效果，用钢笔工具(P)钩出阴影。钢笔工具不会用的同学，戳→ 【Ps基础-钢笔工具】
http://pic1.16xx8.com/allimg/161010/0955192055-16.jpg
扇叶阴影主要分为上面四个部分。我们图层命名为【扇叶阴影1"4】颜色任意填充，然后依次调整它的设置和效果。
http://pic1.16xx8.com/allimg/161010/0955191F0-17.jpg
页:
[1]
2