案例2  矢量ICON2——收音机图标

案例2 矢量ICON2——收音机图标

案例综述

本例讲解的是如何制作收音机图标,和上一个案例一样,在智能手机中,收音机图标也很常见,本例学习利用“图层样式”如何将图标设计得更加有趣。

设计规范

978-7-111-48550-6-Part02-335.jpg

案例分析

本例首先使用圆角矩形工具绘制收音机图标的形状,然后添加图层样式制作立体感。

978-7-111-48550-6-Part02-336.jpg

操作步骤:

01 打开文件 执行“文件>打开”命令,在弹出的对话框中选择“背景.jpg”素材01 02。

978-7-111-48550-6-Part02-337.jpg

02 绘制形状 选择工具箱中的钢笔工具978-7-111-48550-6-Part02-338.jpg,在选项栏中设置工作模式为“形状”、填充颜色为任意色,在页面上绘制形状,并将图层名称修改为“天线”03 04。

978-7-111-48550-6-Part02-339.jpg

03 添加效果 双击“天线”图层,在弹出的对话框中选择“斜面和浮雕”“渐变叠加”选项,设置参数,为其添加效果05 06 07。

978-7-111-48550-6-Part02-340.jpg

978-7-111-48550-6-Part02-341.jpg

978-7-111-48550-6-Part02-342.jpg

04 绘制形状 选择工具箱中的圆角矩形工具978-7-111-48550-6-Part02-343.jpg,在选项栏中设置工作模式为“形状”、填充颜色为浅灰色(R:239,G:238,B:233)、半径为80像素,在页面上绘制形状,并将图层名称修改为“收音机底部”。然后双击该图层,在弹出的“图层样式”对话框中选择“内阴影”、“渐变叠加”选项,设置参数,为其添加效果08 09 10。

978-7-111-48550-6-Part02-344.jpg

978-7-111-48550-6-Part02-345.jpg

978-7-111-48550-6-Part02-346.jpg

05 绘制形状 使用同样的方法制作出其他效果11 12。

978-7-111-48550-6-Part02-347.jpg

06 添加素材 执行“文件>打开”命令,在弹出的“打开”对话框中选择“声孔.png”素材,将其打开拖入到场景中,并放置到合适的位置13 14。

978-7-111-48550-6-Part02-348.jpg

07 绘制形状 选择工具箱中的椭圆工具978-7-111-48550-6-Part02-349.jpg,在选项栏中设置工作模式为“形状”、填充颜色为任意色,按住Shift键在页面上绘制正圆,将图层名称修改为“右边圆形按钮”,并在“图层”面板中设置填充为0%。然后双击该图层,在弹出的“图层样式”对话框中选择“描边”选项,设置参数,为其添加效果15 16 17。

978-7-111-48550-6-Part02-350.jpg

978-7-111-48550-6-Part02-351.jpg

978-7-111-48550-6-Part02-352.jpg

08 添加效果 在“图层样式”对话框中选择“内阴影”“投影”选项,设置参数,为其添加效果18 19 20。

978-7-111-48550-6-Part02-353.jpg

978-7-111-48550-6-Part02-354.jpg

978-7-111-48550-6-Part02-355.jpg

09 绘制形状 选择工具箱中的钢笔工具978-7-111-48550-6-Part02-356.jpg,在选项栏中设置工作模式为“形状”、填充颜色为黑色,在页面上绘制形状,将图层名称修改为“加号”,并在“图层”面板中设置填充为10%。然后双击该图层,在弹出的“图层样式”对话框中选择“内阴影”“投影”选项,设置参数,为其添加效果21 22 23。

978-7-111-48550-6-Part02-357.jpg

978-7-111-48550-6-Part02-358.jpg

978-7-111-48550-6-Part02-359.jpg

10 绘制形状 使用同样的方法制作出其他效果24 25。

978-7-111-48550-6-Part02-360.jpg

11 绘制形状 使用同样的方法制作出中间按钮。选择工具箱中的矩形工具978-7-111-48550-6-Part02-361.jpg,在选项栏中设置工作模式为“形状”、填充颜色为黑色,在页面上绘制矩形,并在“图层”面板中设置填充为10%。然后执行“图层>创建剪贴蒙版”命令,为其创建剪贴蒙版,再双击该图层,在弹出的“图层样式”对话框中选择“内阴影”、“投影”选项,设置参数,为其添加效果26 27 28。

978-7-111-48550-6-Part02-362.jpg

978-7-111-48550-6-Part02-363.jpg

978-7-111-48550-6-Part02-364.jpg

12 制作高光 使用同样的方法制作出按钮背景。选择工具箱中的钢笔工具978-7-111-48550-6-Part02-365.jpg,设置工作模式为“形状”、填充为白色到透明的渐变,在页面上绘制矩形,并将图层名称修改为“高光”,然后在“图层”面板中设置不透明度为65%29 30 31。

978-7-111-48550-6-Part02-366.jpg

13 制作文字 使用同样的方法制作出文字效果32 33。

978-7-111-48550-6-Part02-367.jpg

14 制作高光 使用同样的方法制作其他高光效果34 35。

978-7-111-48550-6-Part02-368.jpg