![突破平面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=1738868061-ccI43lcVU1DhFDhaAN4HogFUbhP4J8RJ-0-5777d0810851d4276f9fc8b2260a6d53)
图2‑76
03 继续绘制矩形,更改填充色为青色(#00b8c8),设置左上角与右上角的圆角半径值,绘制结果如图2-77所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P38_3896.jpg?sign=1738868061-3BuKxDRLOG7BfaxMpevBREli9hjnH30j-0-3eceb509860d777621cf6f1194893c48)
图2‑77
04 使用Ctrl+J组合键向下复制青色矩形,更改填充色为灰色(#c5c5c5),利用键盘中的↑键向上移动矩形,如图2-78所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P38_3908.jpg?sign=1738868061-Ly1YzAphNTRTZqpoBa4kQai8wusAO7H1-0-3419818bd466d06a5a399b1947120b26)
图2‑78
05 选择椭圆工具,设置填充色为无,描边为白色,按住Shift键绘制正圆,如图2-79所示。
06 选择横排文字工具,选择合适的字体与字号,输入+,如图2-80所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P38_3935.jpg?sign=1738868061-jFiNKkdE1Iu3WtEUjXil2p2o6TSBZHNF-0-3f5e3ef2d48e741af94432c51e0a69ae)
图2‑79
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P38_3936.jpg?sign=1738868061-V798PQshF5LKHTCdDqsBOpkXUAs8dqxE-0-6ee6f7cc4e88c6916fd52175636202ac)
图2‑80
07 选择圆形与加号,使用Ctrl+G组合键创建组。双击组,打开“图层样式”对话框,添加“投影”样式,参数设置如图2-81所示。
08 单击“确定”按钮关闭对话框,图形的显示效果如图2-82所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P38_3958.jpg?sign=1738868061-pbrP3foSij7o6HMYnaXIS7l59F2a4PIk-0-deafa00338bd5ca9e12931d223824202)
图2‑81
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P38_3959.jpg?sign=1738868061-5qOBASPOjM6LjDyHhZ7FdobSpibrRlbJ-0-20450d4e414493f009633ae76b67e270)
图2‑82
09 选择钢笔工具,设置填充色为青色(#2c9099),描边为无,在青色矩形上绘制如图2-83所示的图形,重命名为“光影”。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P38_3975.jpg?sign=1738868061-7pXb5xXUmydHCObI1WuahGm7nIYfOF9X-0-4c3dac9b7ec58620d9e54cc2954240a6)
图2‑83
10 使用Alt+Ctrl+G组合键,创建剪贴蒙版,隐藏图形的多余部分,结果如图2-84所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P38_3988.jpg?sign=1738868061-q3ehDwYQVfVeBL3YNUffZ51zY8tbUlL2-0-b422d8b307364aca7549864d8b654d01)
图2‑84
■添加按钮
01 选择矩形工具,设置填充色为无,描边为白色,拖曳光标绘制如图2-85所示的图形。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P38_4005.jpg?sign=1738868061-kYlbZmnmQd46OkGHTYCcFb5Cau7ufOXm-0-969e39a519733614533ad0689a839f03)
图2‑85
02 选择直线工具,设置填充色为白色,描边为无,按住Shift键绘制水平线段,如图2-86所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P39_4025.jpg?sign=1738868061-ayZFiBw1BgvNc5NreQzibvtXqfoNSXoj-0-ea7c215d2dbd32b108fe2e4bd11a699b)
图2‑86
03 选择绘制完毕的矩形与直线,使用Ctrl+G组合键创建组,重命名为“便签”。双击组,在“图层样式”对话框中添加“投影”样式,参数设置如图2-87所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P39_4037.jpg?sign=1738868061-CvY0TRM6pPtSyB13MtFHD2DQ3zihYLWo-0-7cf7465ba56844138792aa5f417b5132)
图2‑87
04 单击“确定”按钮关闭对话框,为图形添加投影的效果如图2-88所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P39_4050.jpg?sign=1738868061-KKIgoWCiLiZDbKKEQEVNhuYgA7aPtZgw-0-09d3b9b16e1bf5a178db2da8dfbcb9d2)
图2‑88
05 选择椭圆工具,设置填充色为无,描边为白色,按住Shift键绘制正圆,如图2-89所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P39_4065.jpg?sign=1738868061-2uXsuOqp2iQPU1EpR106bNqpmq6CT1Rz-0-ce3738c5124983f6d0d7c9c61316780b)
图2‑89
06 选择矩形工具,设置填充色为白色,描边为无,绘制矩形并旋转45°,如图2-90所示。选择绘制完毕的圆形与矩形,使用Ctrl+G组合键创建组,重命名为“放大镜”。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P39_4080.jpg?sign=1738868061-YEWzDeTnlG2JDnpv0uWWbtPtMdNZ3sMj-0-ebbd738ccbbfb2f5fbfb4b38505bf9d8)
图2‑90
07 选择矩形工具,设置填充色为无,描边为白色,拖曳光标绘制矩形,如图2-91所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P39_4095.jpg?sign=1738868061-FfyUhXbhagkHASkO1W2F5oWmrrNPvXfB-0-0dad99fd5dcc936adb9a4f1d9db1e0cf)
图2‑91
08 选择钢笔工具,设置填充色为无,描边为白色,在矩形内绘制线段,如图2-92所示。选择绘制完毕的矩形与线段,使用Ctrl+G组合键创建组,重命名为“邮箱”。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P39_4110.jpg?sign=1738868061-dkV5XEE35F6FZ5XiVIKcqHoErkRwCv3w-0-ec17d4fc809934b2988b24af04126640)
图2‑92
09 选择便签组中的“投影”样式,按住Alt键不放拖曳至放大镜组、邮箱组,复制样式的效果如图2-93所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P39_4122.jpg?sign=1738868061-CM3WmTXgMfrXILFYGMVk7o38ljtbkxWI-0-4b1fab37745d933fd188674e3e9b7e42)
图2‑93
10 添加投影样式后图形的显示效果如图2-94所示。
11 选择钢笔工具,设置填充色为无,描边为白色,绘制如图2-95所示的形状。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P40_4153.jpg?sign=1738868061-I9cAlMMcNjbCg3Py5OKHq9x9gHiFsyAa-0-9e53f0cb0544ac2504634ed5c93bce40)
图2‑94
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P40_4156.jpg?sign=1738868061-DKaOjdpt16pzllH2YDxLx2N3GOTSR3tD-0-7589d6936be4d09ce3a6164da0e6be44)
图2‑95
12 选择多边形工具,设置填充为白色,描边为无,边数为3,按住Shift键绘制三角形,如图2-96所示。
13 选择矩形工具,设置填充色为白色,描边为无,绘制矩形与三角形相连,如图2-97所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P40_4183.jpg?sign=1738868061-XgD2fAc3vneWeGVtetYPrSznjGv96wvA-0-ece641957dcecc9ffb1e6636283a19e1)
图2‑96
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P40_4184.jpg?sign=1738868061-BuUtY8uDChqZ0nBQZBl2mXu3cenUOQNt-0-a749a6b20707a5b1b817de95312501ec)
图2‑97
14 选择绘制完毕的形状、三角形与矩形,使用Ctrl+G组合键创建组,重命名为“云下载”。双击组,在“图层样式”对话框中添加“渐变叠加”“投影”样式,参数设置如图2-98所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P40_4197.jpg?sign=1738868061-ivCUbnjvcmD6wyMGVYSYr2Lt7kPoUdsD-0-18e68d205e209a5b5dcdd0834244a986)
图2‑98
15 单击“确定”按钮关闭对话框,图形的显示效果如图2-99所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P40_4210.jpg?sign=1738868061-CbPfcB2DUNJd9iivLlNB5kOXfdvlNQyp-0-0ce4b0ab966f2d17bed7716eac2c2874)
图2‑99
16 图标式导航栏的最终效果如图2-100所示。
![](https://epubservercos.yuewen.com/7146E1/31398167603038906/epubprivate/OEBPS/Images/Figure-P40_4222.jpg?sign=1738868061-eCUGpwVx6OskLNTL1ULrQYvdvsgRRoW6-0-6f2946172d7b337d9eb0b9f23ef4a37f)
图2‑100