虎课网为您提供字体设计版块下的web-高难度导航图标设计图文教程，本篇教程使用软件为PS（CC2019），难度等级为初级练习，下面开始学习这节课的内容吧！

本篇教程学习的是web网页导航设计·高难度导航图标设计，喜欢的一起来学习吧。

学完本课内容后，同学们可以根据下图作业布置，在视频下方提交作业图片，老师会一一进行解答。

那我们开始今天的教程吧。

1.本节课主要是通过实际案例进行实操演示，来详细讲解，具有高难度设计感的图标导航设计。

2.目录是概述高难度图标导航的使用场景，所谓高难度图标其实也就是基础的图标，去提升的一些难度。

3.打开【PS】，画一个【矩形】，关掉【关联】，加大【圆角】，输入文字，颜色【白色】，【Command+Shift+]】置于顶层，字体为【苹方】，把导航的边用辅助线固定起来。

4.把长的矩形【宽度/7】，【Ctrl+J】复制7份，把第七份挪到辅助线右边，选中所有矩形，点击【平均分布】，画一个方框，是图标要放进来的位置，文字全部【居中】，方框也复制7份，这就是基础的模板造型。

5.复制图标，打开【AI】，绘制一个【方形】，关掉【视图】-【对齐像素】，变成【描边】，拉出一个尖，这是基础房子的形状，画一个【方形】，旋转，进行调整，填充颜色，复制一个，点击【减掉顶层】。

6.选择【窗口】-【路径查找器】，选择【分割】，分组，点击【分割】把边删掉，把它【对齐】，复制房子，缩小，点击【底对齐】，拉出圆角，角可以用【钢笔工具】直接绘制，【镜像】过去。

7.也可以用【钢笔工具】直接画一个线，线条的地方选择【尖头的】，加粗【描边】，可以用【宽度工具】把尖加宽，把它变成【扩展外观】，画一个【圆】，做【分割】，合并，点击【减掉顶层】，选择【颜色叠加】，颜色改为【金色】。

8.做第二个icon，画一个【矩形】，用【钢笔工具】绘制，【描边】给它【圆角】，【描边】加粗，选择【中间宽两边窄】，用【宽度工具】调整宽度，把其它的也绘制出来，【端点】变为【平头端点】，改成【扩展外观】。

9.点击【减掉顶层】，把边上的角画出来，点击【联集】，把它删掉，右键进行【透视】调整，选择【颜色叠加】，修改颜色，绘制第三个图标，绘制一个【长方形】，复制一个缩小，点击【减掉顶层】。

10.绘制一个【正方形】，选中锚点，选择【比例缩放工具】，进行内对齐，用【钢笔工具】画出两个角，调整角度，画第四个图标，绘制一个【长方形】，在【锚点】加点变化。

11.画一条线，改为【圆角】，复制一个，加粗【描边】，绘制上面的角，复制，进行【镜像】，做一个【扩展】，点击【减掉顶层】。

12.如果不知道怎么去画，可以直接在网上搜索图片，用【钢笔工具】进行绘制，【端点】变成【圆头端点】，把它【扩展】，点击【减掉顶层】。

13.填充【黑色】，做一个【描边】，加粗【描边】，绘制角，去掉【描边】，调整角度，复制一个，放大，选择【分割】，把不需要的减掉，进行调整，把另一个手也画出来。

14.绘制下一个图标，画一个【方框】，变成【斜角】，调整【锚点】，用【钢笔工具】进行绘制，圈做成【圆头端点】，用【宽度工具】把它变得细一点。

15.做一个边，变成【白色】，改成【一边尖一边圆】，再画两个，能显示出它的厚度。

16.全部【扩展外观】，点击【减掉顶层】，复制圈，进行放大，做【分割】，合并。

17.【钢笔工具】画一个问号，进行调整，选择【扩展】，点击【减掉顶层】，进行调整。

18.绘制奖杯，选择【比例缩放工具】，拉长，绘制角，【镜像】过去，【对齐】，里面是一个房子，点击【减掉顶层】，合并。

19.二维码不需要自己画，通过【阿里巴巴矢量图标库】搜索出二维码，用【AI】打开，【边角】为【20】，绘制角，合并，放到【PS】，修改颜色。

20.同学们记得上传自己的作业哦！

以上就是web-高难度导航图标设计图文教程的全部内容了，你也可以点击下方的视频教程链接查看本节课的视频教程内容，虎课网每天可以免费学一课，千万不要错过哦！