![突破平面Photoshop UI界面设计与制作剖析](https://wfqqreader-1252317822.image.myqcloud.com/cover/726/52842726/b_52842726.jpg)
2.1.4 绘制立即购买按钮
本节介绍立即购买按钮的绘制方法。为了给按钮添加层次,可以执行复制、移动等操作,并更改图形的填充颜色,利用位置、颜色的对比表现按钮的层次感。灵活地运用图层样式,可以增加按钮的质感。
■绘制形状
01 启动Photoshop应用程序,执行“文件”|“新建”命令,打开“新建文档”对话框。设置参数后单击“创建”按钮,新建文件。
02 选择矩形工具,设置填充颜色为黄色(#ffd909),描边为无,设置圆角半径值,拖曳光标绘制矩形,如图2-51所示。
03 选择矩形,使用Ctrl+J组合键向下移动复制。更改填充颜色为橙色(#ff9000),重定义圆角半径值,如图2-52所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P34_3550.jpg?sign=1739438435-oyaAndrRAaiEnV8cl0bsoXGFbmiUL0JU-0-eeff929a2ac2b2f148c927a5a61d7678)
图2‑51
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P34_3551.jpg?sign=1739438435-cj1VfXazy7WeDTlVLXZnqD8yawcStiNQ-0-2933039b9dec24ec4f2fe7801a2504a3)
图2‑52
04 选择在步骤(2)中绘制的黄色(#ffd909)矩形,使用Ctrl+J组合键向上复制,更改填充颜色为白色,并调整图形的尺寸,如图2-53所示。
05 双击白色矩形,打开“图层样式”对话框,添加“内阴影”样式,设置参数如图2-54所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P34_3572.jpg?sign=1739438435-Bd34a0pQl8LrBfHG91KMVw7bWcj4aDPH-0-01897d11906b84b9c5cf9c07841f3514)
图2‑53
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P34_3573.jpg?sign=1739438435-zAD5mZugu0knyLWeWQB4sKeuO1tyGU4O-0-d970cd6c5f1fae94f35f697f8bb6bdcd)
图2‑54
06 再添加“渐变叠加”样式,参数设置如图2-55所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P34_3585.jpg?sign=1739438435-SqV3D612qnrt00mEwSJTdCMVkNmqwAKv-0-7306f7b98a2261e027e69d3f02650f68)
图2‑55
07 单击“确定”按钮关闭对话框,为矩形添加样式的效果如图2-56所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P34_3597.jpg?sign=1739438435-pgDKvhYASmo5h7pLK0KnGvUNZ7UzGVP7-0-dafefd7e5a2f3d85b6d51585e0e1f35f)
图2‑56
08 选择已添加样式的矩形,使用Ctrl+J组合键向上复制,删除图层样式。更改填充颜色为橙色(#ff9c01),如图2-57所示。
09 继续使用Ctrl+J组合键复制橙色(#ff9c01)矩形,更改矩形的填充颜色为白色,如图2-58所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P35_3627.jpg?sign=1739438435-nwmZIu0kstg5yESjA6FjmYqXeHBJltmb-0-08c42353a434d50874b736a1bef96f57)
图2‑57
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P35_3628.jpg?sign=1739438435-hRpZ9Hw1AnzKpLQtIuZH9u5EEHHpVEvY-0-72ee75c4820b0dacb37ed1b5c163c73c)
图2‑58
提示
创建白色矩形的目的是创建选区,通过执行减去选区内容的操作,得到表示厚度的图形。
10 按住Ctrl键单击白色矩形图层缩览图,创建选区,如图2-59所示。
11 选择在步骤(8)中创建的矩形,右击,在弹出的快捷菜单中选择“栅格化图层”选项。按Delete键删除选区内容,最后关闭白色矩形图层,效果如图2-60所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P35_3650.jpg?sign=1739438435-4wYJskywnRChSzLghGTkKjUxUMvVACeB-0-0bcbc04a99f4e3e9d3ee65a1a4796172)
图2‑59
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P35_3651.jpg?sign=1739438435-KH7lwjI9y4qZjRvKpKOrBV4TXwDJUlJJ-0-c6e2913cebe4a61a70b3c22cd4bac8fe)
图2‑60
12 选择椭圆工具,设置填充色为黄色(#ffb401),描边为无,绘制的椭圆如图2-61所示。
13 打开在步骤(9)中创建的白色矩形,按住Ctrl键,单击白色矩形图层缩览图,创建选区,如图2-62所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P35_3675.jpg?sign=1739438435-Lt6A9sg15mImmiJitYBfNuRDg97GuQC8-0-80fc33d6d8cbc026cd86821040170263)
图2‑61
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P35_3676.jpg?sign=1739438435-iusR1LtVlmd4hr95r9kVTXHw4buBmoUx-0-6c641135fbfae4adecf55828bdc089a8)
图2‑62
14 选择“椭圆1”图层,单击图层面板下方的“添加图层蒙版”按钮,遮挡部分椭圆的效果如图2-63所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P35_3691.jpg?sign=1739438435-HUErFKw2YORjL72cEIsoeNDUn8C5S80V-0-798fcfc9705dcf7523e7781a88a20e07)
图2‑63
■绘制按钮
01 选择椭圆工具,设置填充色为红色(#e14a00),描边为无,按住Shift键绘制正圆,结果如图2-64所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P35_3710.jpg?sign=1739438435-OZEskdA07X8bsnwB0HcQiTVPfIkyYFeH-0-319bea7888677e56a24bb40469c814ff)
图2‑64
02 双击正圆,打开“图层样式”对话框,添加“内阴影”“投影”样式,参数设置如图2-65所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P35_21178.jpg?sign=1739438435-ViFcvHEIRoi1uA4APpzACuzvkWwc94xc-0-b266c431747ff252d5c71515587f0480)
图2‑65
03 单击“确定”按钮关闭对话框,正圆添加样式的效果如图2-66所示。
04 选择自定形状工具,设置填充色为白色,描边为无,在形状列表中选择三角形,按住Shift键绘制图形,如图2-67所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P35_3747.jpg?sign=1739438435-6ezO5vmjpd8g2bKMdOmcsjdLWzfLld1e-0-6044ecac2bb16071de6486eabb410e46)
图2‑66
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P35_3748.jpg?sign=1739438435-jGIFgQCfsq48SDZ3z2naTiZAkQLISqRm-0-32946e03f988b570bb750d5bf8d83610)
图2‑67
05 双击三角形,在“图层样式”对话框中添加“投影”样式,参数设置如图2-68所示。
06 单击“确定”按钮关闭对话框,三角形的显示效果如图2-69所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P36_3774.jpg?sign=1739438435-0i165cOQyZE4RGfVctFVhjFeSzFlpbXi-0-8099447aa7a197159d36753fe032d244)
图2‑68
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P36_3775.jpg?sign=1739438435-DTzX6Mr25RRpcYzywKJrX9FoZ9ZC52uD-0-275e8c77f257b4caa57132c5c5a666a0)
图2‑69
■最终结果
01 选择横排文字工具,选择合适的字体与字号,输入文字如图2-70所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P36_3792.jpg?sign=1739438435-CeB3FORQJfFQ8tUKSmzc3tIccr647cGc-0-21255dd5311f415cb1193ffa87ac33b6)
图2‑70
02 双击文字,在“图层样式”对话框中添加“投影”样式,参数设置如图2-71所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P36_3804.jpg?sign=1739438435-18xbtm4zZAt3H16bndSZkpgyoVAhNsw0-0-97842d9198b6456a53556c123249850b)
图2‑71
03 单击“确定”按钮关闭对话框,完成按钮的绘制,最终结果如图2-72所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P36_3816.jpg?sign=1739438435-wlyr2NQixNcfAlLe9zy3FA6Wl896ogyd-0-2a55c12c2b01e9b608c075b82adb4377)
图2‑72