1.4.1 课堂案例：用常用工具制作手机图标

素材位置　　 无

实例位置　　 实例文件>CH01>课堂案例：用常用工具制作手机图标．ai

视频名称　　 课堂案例：用常用工具制作手机图标．mp4

学习目标　　 掌握用Illustrator绘制图标时常用工具的用法

本案例是在Illustrator中用常用工具制作手机中常见的图标，效果如图1-64所示。读者可以通过这个案例，简单了解图标设计的过程。

01 启动Illustrator，单击“新建”按钮，在弹出的“新建文档”对话框中选择“网页-大”预设，如图1-65所示。单击“创建”按钮，会生成一个画板。

提示

使用Illustrator绘制图标时对画板的尺寸没有要求，读者可以创建任意大小的画板。

02 使用“矩形工具” 在画板上绘制一个尺寸为48px×48px的浅灰色矩形，设置“描边”为无，如图1-66所示。

提示

如果所绘制矩形的边长单位不是px，可以执行“编辑>首选项”菜单命令，在弹出的“首选项”对话框中选择“单位”选项卡，然后设置“常规”为“像素”，如图1-67所示。

03 绘制信号图标。信号图标由5条长度不同的竖线组成。使用“矩形工具”绘制一个尺寸为6px×6px的矩形，设置“填充”为黑色，“描边”为无，如图1-68所示。

04 将上一步绘制的矩形复制4份，并均匀排列，如图1-69所示。

05 选中复制的4个矩形，依次增加其高度，如图1-70所示。

06 使用“钢笔工具”绘制图1-71所示的辅助线，其描边的宽度不要设置得太粗。

07 使用“直接选择工具”逐一调整矩形的角点，使其贴合辅助线，如图1-72所示。

08 选中辅助线并删除，然后全选所有的矩形，执行“窗口>路径查找器”菜单命令，打开“路径查找器”面板，单击“联集”按钮将其合并为一个图形，如图1-73所示。

09 按住Shift键并拖曳选框的角点，将其均匀放大到合适的大小，如图1-74所示。

10 绘制Wi-Fi图标。Wi-Fi图标由4个大小不同的同心圆弧组成。复制一份浅灰色背景，使用“椭圆工具”在背景内绘制一个尺寸为48px×48px的圆形，设置“描边粗细”为2pt，如图1-75所示。

11 将上一步绘制的圆形复制两份，设置其尺寸分别为36px×36px和24px×24px，效果如图1-76所示。

提示

圆环超出背景范围没有关系，在后面的步骤中会解决此问题。

12 使用“直接选择工具”选择图1-77所示的最外侧圆形的两个锚点，然后按Delete键将其删除，如图1-78所示。

13 按照同样的方法处理另外两个圆环，效果如图1-79所示。

14 全选3个圆弧，将其旋转90°，然后均匀放大到合适的大小，如图1-80所示。

15 使用“椭圆工具”绘制一个尺寸为6px×6px的圆形，设置“填色”为黑色，“描边”为无，如图1-81所示。

16 同时选中3个圆弧，执行“对象>路径>轮廓化描边”菜单命令，如图1-82所示。

17 选中所有的图形，在“路径查找器”中单击“联集”按钮，将其合并为一个图形，如图1-83所示。

18 绘制电量图标。电量图标由不同大小的圆角矩形组成。使用“矩形工具”绘制一个尺寸为46px×20px,“圆角半径”为10px,“描边粗细”为2pt的圆角矩形，如图1-84所示。

19 将上一步绘制的圆角矩形复制一份，设置“宽度”为42px,“高度”为16px,“圆角半径”为8px，然后设置“填色”为黑色，“描边”为无，如图1-85所示。

提示

执行“轮廓化描边”命令后，再进行“联集”操作就不会出现图形变形的问题。

20 使用“直接选择工具”选择黑色圆角矩形左侧的锚点并删除，如图1-86所示。

21 选择黑色圆角矩形左侧的两个锚点，并向右移动一段距离，如图1-87所示。

22 使用“矩形工具”绘制一个尺寸为8px×16px的矩形，设置“填色”为黑色，“描边”为无，如图1-88所示。

23 将上一步绘制的矩形向左复制一份，如图1-89所示。

24 选中圆角矩形的外框，执行“对象>路径>轮廓化描边”菜单命令，如图1-90所示。

25 选中所有图形，单击“联集”按钮将其合并为一个图形，如图1-91所示。