突破平面Photoshop UI界面设计与制作剖析
上QQ阅读APP看书,第一时间看更新

2.1.3 绘制撤销按钮

本节介绍撤销按钮的绘制方法。绘制具有透明质感的按钮,需要添加“内阴影”图层样式,并修改图层的填充值。必要时还可以利用渐变工具辅助绘制。通过降低图层的填充值,可以使图层中的图形具有通透的质感。根据需要的效果调整填充值即可。

■绘制轮廓

01 启动Photoshop应用程序,执行“文件”|“新建”命令,打开“新建文档”对话框。设置参数后单击“创建”按钮,新建文件。

02 选择椭圆工具,设置填充色为黄色(#f2b305),描边为无,按住Shift键绘制正圆,如图2-29所示。

03 双击圆形,打开“图层样式”对话框,添加“内阴影”样式,参数设置如图2-30所示。

提示

这里选择黑色背景,为的是能清楚地显示按钮通透的质感。

图2‑29

图2‑30

04 继续添加“渐变叠加”“投影”样式,参数设置如图2-31所示。

图2‑31

05 单击“确定”按钮,为圆形添加样式的效果如图2-32所示。

06 选择圆形,使用Ctrl+J组合键向下复制,删除图层样式,更改填充颜色为白色,如图2-33所示。

07 双击白色椭圆,在“图层样式”对话框中添加两个“内阴影”样式,参数设置如图2-34所示。

08 单击“确定”按钮关闭对话框。调整图层的填充值,图形的显示效果如图2-35所示。

图2‑32

图2‑33

图2‑34

图2‑35

■添加光影

01 选择椭圆工具,设置填充值为70%,圆形的显示效果如图2-36所示。

02 执行“滤镜”|“模糊”|“高斯模糊”命令,在“高斯模糊”对话框中设置半径值为8.2像素,如图2-37所示。

图2‑36

图2‑37

03 单击“确定”按钮关闭对话框,为圆形添加高斯模糊效果,如图2-38所示。

图2‑38

04 重复上述操作,继续绘制白色圆形并为其添加高斯模糊效果,结果如图2-39所示。

图2‑39

提示

此处绘制的椭圆不需要修改填充值,保持100%即可。

05 选择椭圆选框工具,按住Shift键创建圆形选区,如图2-40所示。

图2‑40

06 新建一个图层,重命名为“质感”。将前景色设置为白色,选择渐变工具,指定渐变类型为“从前景色到透明渐变”,在圆形选区内创建径向渐变,如图2-41所示。

图2‑41

07 使用Ctrl+D组合键取消选区,更改图层的混合模式以及不透明度值,如图2-42所示。

图2‑42

08 选择椭圆工具,设置填充颜色为橙色(#ed7f07),描边为无,按住Shift键绘制正圆,如图2-43所示。重命名椭圆图层为“标志”。

图2‑43

■绘制箭头

01 选择椭圆选框工具、矩形选框工具,绘制如图2-44所示的选区。

图2‑44

02 单击图层面板下的“添加图层蒙版”按钮,为标志图层添加图层蒙版。在选区内填充黑色,遮盖图形的效果如图2-45所示。

03 选择自定形状工具,设置填充色为橙色(#ed7f07),描边为无,在形状列表中选择三角形,如图2-46所示。

图2‑45

图2‑46

04 绘制三角形,并调整位置与尺寸,如图2-47所示。

图2‑47

05 选择绘制完毕的两个图形,使用Ctrl+G组合键创建成组。双击组,打开“图层样式”对话框,添加“内阴影”样式,参数设置如图2-48所示。

图2‑48

06 再添加“投影”样式,参数设置如图2-49所示。

图2‑49

07 单击“确定”按钮关闭对话框,结束按钮的绘制,结果如图2-50所示。

图2‑50