![突破平面Photoshop UI界面设计与制作剖析](https://wfqqreader-1252317822.image.myqcloud.com/cover/726/52842726/b_52842726.jpg)
2.2.2 绘制图标式导航
本节介绍图标式导航的绘制方法。简单的图标可以通过图形组合得到,再为其更改颜色、添加样式,得到比较理想的表现效果。复杂的图标绘制完成后可以存储至计算机中,方便后续工作过程中随时调用。
■绘制形状
01 启动Photoshop应用程序,执行“文件”|“新建”命令,打开“新建文档”对话框。设置参数后单击“创建”按钮,新建文件。
02 选择矩形工具,设置填充色为深蓝色(#00374c),描边为无,调整矩形左下角与右下角的圆角半径值,拖曳光标绘制矩形,如图2-76所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P38_3884.jpg?sign=1739253224-svHHRdQFD2HXgQlm095BWtHnNvN6ryqF-0-73c39c8e53bdc447418486c1a63c4411)
图2‑76
03 继续绘制矩形,更改填充色为青色(#00b8c8),设置左上角与右上角的圆角半径值,绘制结果如图2-77所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P38_3896.jpg?sign=1739253224-GUAQ5xqviUNWlIq5fPiuiAXGrhtz5w2m-0-d2fc0307f430c3b931a02cde4b7c654d)
图2‑77
04 使用Ctrl+J组合键向下复制青色矩形,更改填充色为灰色(#c5c5c5),利用键盘中的↑键向上移动矩形,如图2-78所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P38_3908.jpg?sign=1739253224-v45L1SxZVFfUENEeCi8rxhdKe8Pq91ZL-0-f68eaf8bd99e081a8c4f74677fb82dd2)
图2‑78
05 选择椭圆工具,设置填充色为无,描边为白色,按住Shift键绘制正圆,如图2-79所示。
06 选择横排文字工具,选择合适的字体与字号,输入+,如图2-80所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P38_3935.jpg?sign=1739253224-cq6xO1YR78QTk5HuMwRh4fo8nGGT4HIc-0-b4ad96a39cb5c28e2301b17575295779)
图2‑79
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P38_3936.jpg?sign=1739253224-nkH7BWxhrwheJpcbYnfT0o9ob8ZeOVzR-0-ab877f258247d5976981521851275387)
图2‑80
07 选择圆形与加号,使用Ctrl+G组合键创建组。双击组,打开“图层样式”对话框,添加“投影”样式,参数设置如图2-81所示。
08 单击“确定”按钮关闭对话框,图形的显示效果如图2-82所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P38_3958.jpg?sign=1739253224-hrr32rMb3eCmB8ZGHwKcknFHUbQbmd8u-0-cb41f907500b032a5cf0d1ee0a9171f6)
图2‑81
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P38_3959.jpg?sign=1739253224-TZAyuaUpLKAanmC8GZGnEtKFspEAkg9x-0-30d0576b8822f78b18b3e45583fad0aa)
图2‑82
09 选择钢笔工具,设置填充色为青色(#2c9099),描边为无,在青色矩形上绘制如图2-83所示的图形,重命名为“光影”。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P38_3975.jpg?sign=1739253224-ecLqamhipjU7dARXYVNox3EljuCCIlEO-0-e137b15ebc7a6de0fab4246bf3bf5f8a)
图2‑83
10 使用Alt+Ctrl+G组合键,创建剪贴蒙版,隐藏图形的多余部分,结果如图2-84所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P38_3988.jpg?sign=1739253224-shGdVPlgBy0Q8rzNXssyN1qCxIQ6XdG0-0-251dcec45870d9e11492880c3c04dbb3)
图2‑84
■添加按钮
01 选择矩形工具,设置填充色为无,描边为白色,拖曳光标绘制如图2-85所示的图形。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P38_4005.jpg?sign=1739253224-yhUYoBsQdErqTscYl48If1jtD7n5Ewjx-0-d90bb532def86191d4d32c248d3dbf1f)
图2‑85
02 选择直线工具,设置填充色为白色,描边为无,按住Shift键绘制水平线段,如图2-86所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P39_4025.jpg?sign=1739253224-E5GPCE39USPeObRu7ZVCpJqFb5CVJVB4-0-05b336f533d2b214e41c26da1193e513)
图2‑86
03 选择绘制完毕的矩形与直线,使用Ctrl+G组合键创建组,重命名为“便签”。双击组,在“图层样式”对话框中添加“投影”样式,参数设置如图2-87所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P39_4037.jpg?sign=1739253224-701O3NNGXlNbOu2UwHfs1SQboEUgsR2r-0-5ae3ec2bce5cbcd0b2ea7287efa3db80)
图2‑87
04 单击“确定”按钮关闭对话框,为图形添加投影的效果如图2-88所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P39_4050.jpg?sign=1739253224-BtLd36fgjvHgN64KvUNK6K66OP8pLrRy-0-0fa4b5bff9cfa0a2c837a5fc82aaac93)
图2‑88
05 选择椭圆工具,设置填充色为无,描边为白色,按住Shift键绘制正圆,如图2-89所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P39_4065.jpg?sign=1739253224-r7jbtn88WK1MrARLcjCJKUEGaNInzDtQ-0-8c1668b01f61d0c1649463022f275f00)
图2‑89
06 选择矩形工具,设置填充色为白色,描边为无,绘制矩形并旋转45°,如图2-90所示。选择绘制完毕的圆形与矩形,使用Ctrl+G组合键创建组,重命名为“放大镜”。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P39_4080.jpg?sign=1739253224-917ixvVu0ETVYnxJDlOCyhLcIr5CSN99-0-18b0a12bb9b6f1c334e2da7453739d06)
图2‑90
07 选择矩形工具,设置填充色为无,描边为白色,拖曳光标绘制矩形,如图2-91所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P39_4095.jpg?sign=1739253224-ea6SGNVHmkvG1OIUbi4FgMplfq9wMKKe-0-2f8f59e2e5085b6d3d2d20882629735c)
图2‑91
08 选择钢笔工具,设置填充色为无,描边为白色,在矩形内绘制线段,如图2-92所示。选择绘制完毕的矩形与线段,使用Ctrl+G组合键创建组,重命名为“邮箱”。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P39_4110.jpg?sign=1739253224-JcrSZRWeaoh4fYBVkVRbPhdTOeqlw7w8-0-3516d9f786eab27e0fd27d89217cfc38)
图2‑92
09 选择便签组中的“投影”样式,按住Alt键不放拖曳至放大镜组、邮箱组,复制样式的效果如图2-93所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P39_4122.jpg?sign=1739253224-PvGfEr4YIQ9Mq8A7vUm92tbAxpLxic1O-0-a0bbaca8128ceedcd23e3c214c4d45bb)
图2‑93
10 添加投影样式后图形的显示效果如图2-94所示。
11 选择钢笔工具,设置填充色为无,描边为白色,绘制如图2-95所示的形状。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P40_4153.jpg?sign=1739253224-zjWOwbc6HSEuOBzRpQmIz5buJ3rT5yUi-0-6e36aca3d0f8b56ebd3e93783d7386da)
图2‑94
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P40_4156.jpg?sign=1739253224-bPu8ZKhWNJZJKjGrIQELpoR5ro1VbH38-0-d005d7b34b97527703d843c905f13681)
图2‑95
12 选择多边形工具,设置填充为白色,描边为无,边数为3,按住Shift键绘制三角形,如图2-96所示。
13 选择矩形工具,设置填充色为白色,描边为无,绘制矩形与三角形相连,如图2-97所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P40_4183.jpg?sign=1739253224-y9msnnxD0XM5ZQrHYnZuidgMzhdV6eoN-0-cc23b872b96759f109fe71f7516bde29)
图2‑96
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P40_4184.jpg?sign=1739253224-qkOsqppPAx2SX5KMO8dQFSNlotUPFqvG-0-9f29fbd98b29607407f2350c80e78711)
图2‑97
14 选择绘制完毕的形状、三角形与矩形,使用Ctrl+G组合键创建组,重命名为“云下载”。双击组,在“图层样式”对话框中添加“渐变叠加”“投影”样式,参数设置如图2-98所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P40_4197.jpg?sign=1739253224-bn3zCFBOUzyDg0TvhZhelsqq3VBbl1Cm-0-1259c18f140cfe200410cd89f9f05ffa)
图2‑98
15 单击“确定”按钮关闭对话框,图形的显示效果如图2-99所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P40_4210.jpg?sign=1739253224-vZ16hAz9I9vHFRBJB3s6OwECQiDvMf5P-0-19931a28f74f8c0ac05d5f28fe366b2e)
图2‑99
16 图标式导航栏的最终效果如图2-100所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P40_4222.jpg?sign=1739253224-gnNPYedwMaJeCRE0ckYVdUN1E7bWYp0T-0-9398fae6e0318ac776d3300cdac62b82)
图2‑100