案例1  金属按钮设计

案例1 金属按钮设计

案例综述

在智能手机中按钮图标是经常出现的图标,本例重点制作金属拉丝效果、立体效果以及利用光影知识制作发光效果。

设计规范

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

案例分析

本例首先使用椭圆工具绘制正圆,然后添加图层样式体现按钮的金属质感以及金属的拉丝效果。

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

操作步骤:

01 新建文件 执行“文件>新建”命令或按快捷键Ctrl+N,弹出“新建”对话框01,设置前景色为深蓝色(R:25,G:31,B:46),按下快捷键Alt+Delete填充颜色02。

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

02 绘制形状 选择工具箱中的椭圆工具978-7-111-48550-6-Part02-372.jpg,在选项栏中设置工作模式为“形状”、填充颜色为深灰色(R:26,G:28,B:35),按住Shift键在页面上绘制正圆。然后双击该图层,在弹出的“图层样式”对话框中选择“内阴影”“渐变叠加”选项,设置参数,为其添加效果03 04 05。

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

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

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

03 绘制形状 使用同样的方法继续制作正圆06 07。

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

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

04 绘制形状 继续使用椭圆工具绘制正圆,得到“椭圆3”图层,然后双击“椭圆3”图层,在弹出的“图层样式”对话框中选择“渐变叠加”选项,设置参数,为其添加效果08 09。

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

05 绘制形状 使用同样的方法绘制其他正圆10 11。

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

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

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

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

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

07 绘制形状 使用同样的方法制作其他效果,并为其创建一个组,将纹理图层放到组中,在“图层”面板中将组的不透明度调整为13%15 16。

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

08 绘制形状 使用同样的方法制作其他效果。选择工具箱中的钢笔工具978-7-111-48550-6-Part02-385.jpg,设置工作模式为“形状”、填充颜色为深灰色(R:95,G:103,B:121),在页面上绘制形状。然后双击该图层,在弹出的“图层样式”对话框中选择“内阴影”选项,设置参数,为其添加效果,并为该按钮创建组,命名为“左边按钮”17 18。

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

09 绘制形状使用同样的方法制作右边按钮19 20。

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