![突破平面Photoshop UI界面设计与制作剖析](https://wfqqreader-1252317822.image.myqcloud.com/cover/726/52842726/b_52842726.jpg)
2.1.2 绘制开始游戏按钮
本节介绍开始游戏按钮的绘制。首先使用矩形工具绘制按钮的轮廓,接着在此基础上添加层次,如阴影、高光等,丰富按钮的表现效果。最后输入文字。为了增加文字的立体感还添加了投影。
■绘制轮廓
01 启动Photoshop应用程序,执行“文件”|“新建”命令,打开“新建文档”对话框。设置参数后单击“创建”按钮,新建文件。
02 在工具箱中选择矩形工具,设置填充色为蓝色(#1674e0),在属性面板中设置圆角半径,拖曳光标绘制圆角矩形,结果如图2-4所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P27_2548.jpg?sign=1739268848-CcErn7qf2uIOI0Jv6iKY4MKsWp3ZODiJ-0-48085120ca3d4e0752eaa814a74e2729)
图2‑4
03 新建一个图层,重命名为“渐变”。选择渐变工具,指定渐变类型为“从前景色到透明渐变”,双击
下拉按钮,打开“渐变编辑器”对话框,颜色参数设置如图2-5所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P27_2566.jpg?sign=1739268848-Wm9qdD7R4jmUDYxvBs91dhMNpUlIwN3f-0-bd78bd0126bc8889d05de01a75f2efc9)
图2‑5
04 选择径向渐变工具,拖曳光标创建渐变,效果如图2-6所示。
05 选择“渐变”图层,使用Alt+Ctrl+G组合键创建剪贴蒙版,并修改混合模式与不透明度,如图2-7所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P27_2590.jpg?sign=1739268848-MlPxxBtZ70mxyL8u5YXykYe7q0MwPMiW-0-78a5e1a3753e0016461fe940f515e5d2)
图2‑6
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P27_2591.jpg?sign=1739268848-JuiVNp7oRGsv3yQSts0uC86trbAfHsOq-0-3b81d594c0b201c94a78a41e47f72052)
图2‑7
06 执行上述操作后,图形的显示效果如图2-8所示。
07 选择圆角矩形,使用Ctrl+J组合键复制。更改复制矩形的颜色为白色,并向上移动矩形,如图2-9所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P27_2613.jpg?sign=1739268848-KklH9IXlOuZrQRkJnV8woRTmn0x2KiXp-0-9dab7608c4446059f7b227193afdf2af)
图2‑8
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P27_2614.jpg?sign=1739268848-Lnyh6zEL6RFP2jIYZVRrHjra8oZKLQlq-0-75d8dd574c85a1ea1c0df6b810fefbc6)
图2‑9
提示
径向渐变更改图层混合模式与不透明度后,显示效果并不明显。因为这只是为圆角矩形添加了局部效果,后续还要再添加其他类型的样式,最终得到一个效果丰富的按钮图形。
08 双击白色圆角矩形,打开“图层样式”对话框,添加“渐变叠加”“投影”样式,参数设置如图2-10所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P27_2627.jpg?sign=1739268848-plU7X5VMOURtqcPoToo6sagNtp2V9npa-0-644d6cfc8d2e83f6f59aa0224a355e9c)
图2‑10
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P28_2916.jpg?sign=1739268848-HISX3wIFnbk39MLqlxZNLZvPJxK9gCe6-0-2299c4f5ab0d7db253e4e624afd05e50)
图2‑10(续)
09 单击“确定”按钮,观察添加样式后矩形的显示效果,如图2-11所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P28_2928.jpg?sign=1739268848-MMeFo8LibUgtml2k89JXPmweGmUt5MWV-0-c133ac6110d7d8cbacd425836540e9bc)
图2‑11
10 向上复制圆角矩形,删除图层样式,更改填充颜色为青色(#60d3f0),如图2-12所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P28_2940.jpg?sign=1739268848-1hQ5YcAopUB58VJ1SqUVT4ne8ph7aqbb-0-8bf0849f9ea4ec30fa0898e80a483943)
图2‑12
11 选择在上一步骤中复制的青色圆角矩形,使用Ctrl+J组合键复制,为其添加黑色描边,并向上移动矩形,如图2-13所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P28_2952.jpg?sign=1739268848-v3StZgJLV53E6fynmEuUxytc6krHAG7O-0-6b89662d8d0a65ec8d8fafe1b1482cad)
图2‑13
12 按住Ctrl键,单击“圆角矩形3拷贝”图层的缩览图,创建选区,如图2-14所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P28_21098.jpg?sign=1739268848-tZJHsrx6w7G66hltOAmuneKn06ey6d3J-0-2452a88d810c2bed305568aa7e6068eb)
图2‑14
提示
为圆角矩形添加黑色描边,是为了方便识别。
13 选择“圆角矩形3”图层,右击,在弹出的快捷菜单中选择“栅格化图层”选项。按Delete键删除选区内容,并关闭“圆角矩形3拷贝”图层,如图2-15所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P28_2985.jpg?sign=1739268848-905aauOjzXYVjiCKp8Ptv1mTIwqvPBxP-0-667f5d6ae4850935b042fb15314448d0)
图2‑15
14 更改图层的混合模式与填充值,图形的显示效果如图2-16所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P28_2997.jpg?sign=1739268848-KcBKqwrLEbimrjkzGPJ9ofl9oDm37eco-0-77dd6ee7780ce9515b9f42d279d5d567)
图2‑16
15 将前景色设置为黑色。选择渐变工具,为“圆角矩形3”图层添加图层蒙版,在蒙版中绘制线性渐变,创造渐隐效果,如图2-17所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P29_3022.jpg?sign=1739268848-TFbK4uAzUiWmMOlZFfVqXonAREXh2S6d-0-eed8242b062316fc0f6fb54bc49e61b7)
图2‑17
16 按住Ctrl键单击“圆角矩形2”的缩览图,创建选区,如图2-18所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P29_3034.jpg?sign=1739268848-ecCYsoLngrGhld98ks1SnDl4P1rEdAIa-0-d0855762222d84c970b11e71a73a30ba)
图2‑18
17 新建一个图层,重命名为“质感”。选择渐变工具,设置填充类型为“从前景色到透明”,在“渐变编辑器”对话框中设置参数,如图2-19所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P29_3049.jpg?sign=1739268848-EGJupiV5Hw3hhmZKSSPxTRDTQmpZZaIP-0-65c576cb86c53f8a27bf2337c4e32555)
图2‑19
18 在选区的下方创建线性渐变,并调整图层的不透明度,操作效果如图2-20所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P29_3061.jpg?sign=1739268848-pQf0yTvy7wB36AWgnFD0X4LuANAa5yFE-0-06d22390f8a7af881a960c499894bd62)
图2‑20
■添加光影
01 选择钢笔工具,在图形的左上角绘制路径,如图2-21所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P29_3077.jpg?sign=1739268848-EVFLm3MGuuCQGok1coDHFdWUk53728Zn-0-f2c107f6f2cea4a547949f9b1009edca)
图2‑21
02 使用Ctrl+Enter组合键转换为选区,新建一个图层,重命名为“高光”,填充白色,如图2-22所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P29_3089.jpg?sign=1739268848-PmnAYPv99MwMm1TDrMElHB7OBgWsU63S-0-ee19f1cbdf44b9fa9a489c6d2d0cf57e)
图2‑22
03 为“高光”图层添加一个图层蒙版。选择渐变工具,设置前景色为黑色,指定渐变类型为“从前景色到透明”,在蒙版中绘制渐变,创建渐隐效果,如图2-23所示。
04 使用Ctrl+U组合键,打开“色相/饱和度”对话框,调整参数如图2-24所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P30_3116.jpg?sign=1739268848-FhLgnwop4j2JZwzn6i1dHSVGGuGmz7jz-0-9d50b6765c23f0b7e75be7bcbc5ae0a2)
图2‑23
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P30_3119.jpg?sign=1739268848-R9W1obof6F1urqSbvo15IjEoUoOnW8fY-0-8e5253ca1784661224e8e6ea104b6b36)
图2‑24
05 单击“确定”按钮关闭对话框,图形的显示效果如图2-25所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P30_3131.jpg?sign=1739268848-MQLxbgmq3o63S1gfgtyE52uCLFVSyqc8-0-dbe7a3580cc42bbd1e025d19e04b3c3a)
图2‑25
■最终结果
01 选择横排文字工具,选择合适的字体与字号,输入白色文字,如图2-26所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P30_3147.jpg?sign=1739268848-aQ4BFQ5BC1zXIfJ9tPCbV1V7hP6gINwL-0-b80596b4af63b0c867bf1d7047ea47a9)
图2‑26
02 双击文字,打开“图层样式”对话框,添加“投影”样式,参数设置如图2-27所示。
03 单击“确定”按钮关闭对话框,按钮的最终效果如图2-28所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P30_3168.jpg?sign=1739268848-ff7p5pegjakWIzmWhLiM71mMusct6XRI-0-46dfba44c8ee61b0efe1f04f75fe8044)
图2‑27
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P30_3171.jpg?sign=1739268848-rH8HobjVx41RBBkxB5L1jiH44eZnTirk-0-16bc1e95fb90372653a78268da2cce34)
图2‑28