如何用Illustrator CS设计质感图标.doc

如何用Illustrator CS设计质感图标网上有不少跟图标设计有关的教程，但有些初学者看了笔者的图标后（笔者何尝又不是一个初学者呢），希望笔者能写一下相关的教程。应网友的要求，笔者就写了以下教程。本教程以最近的图标的练习(下图)中的一个图标作为例子给大家讲述一下图标制作的过程，教程中所应用到的软件是Adobe Illustrator CS。（图00） 图00 1、打开Adobe Illustrator CS，新建一个文档，然后选取工具栏上的圆角矩形工具 A，单击画板上任意位置，在弹出的窗口中设定圆角矩形的属性 B，面板上将会出现图形 C。（图01）图01 2、然后选取工具栏上的选择工具 A，单击选择图形 C，接着我们用渐变色给这个图形上色，让它带有金属质感，用Gradient面板 B，这里采用的是从上至下的线形（Linear）渐变，并在工具栏上设置图形的描边为白色 D，在Stroke面板 E 设置描边大小为1pt，最后效果如图形 C。（图02）图02 3、按照上面的两个方法新制作一个图形 A，同样采用的是从上至下的线形（Linear）渐变，并设置图形的描边为白色1pt，在色彩方面同样让它带有金属质感。（图03）图03 4、接着选择图形 A，单击鼠标右键，执行Transform - Scale功能 B，在弹出的窗口中设定为Uniform，Scale:98 C，然后单击Copy按钮，复制一个新的图形作为图标的高光部分。（图04）图04 5、复制得到的图形 A，同样设置其色彩是从上至下的线形（Linear）渐变，然后选取选择工具，全选所有的图形 B，执行Align面板的水平居中对齐和垂直居中对齐功能 C，对齐所有的图形。（图05）图056、按照第4部的方法设置Scale:85，复制得到图形 A，将图形 A 向上移动到适当的位置，然后单击鼠标右键执行Arrange - Send to Back功能 B，将图形 A 放置在所有图层的底部。（图06）图06 7、接着使用直线工具 A，在高光图形上画一条直线，然后同时选择高光图形和直线，执行Pathfinder面板中的分割功能 B，将图形分为上下两部分。（图07）图07 8、然后使用直接选取工具 A，分别分割后的图形 B C 填充渐变颜色，接着同样使用直接选取工具 A，将图形 B D 各向下移动一个单位，选取图形后按一下键盘的键就可以了，使层次效果更加明显。（图08）图089、随后制作图标的细节部分，按照第3步的方法，制作图形 A，并将其复制一个放置与它的下面，填充色为白色 B，并向左下方各移动一个单位，同样让它更具立体感。（图09）图09 10、这步同样按照上面的方法继续制作图标细节的部分。（图10）图10 11、然后为图标添加标志性的图形，这里以五角星为例，选取工具栏上的星形工具 A，单击画板上任意位置，在弹出的窗口中设定星形的属性，并为星形图形添加渐变颜色，最后对齐就可以了，到了这步图标的制作基本完成了，最后就是给整个图形添加黑色的边框。（图11）图11 12、选取选择工具全选所有的图形，按下Ctrl+G将所选的图形作为一个组合，并按住键盘上的Alt键同时拖动选取后的图形，这样就可以复制选取后的图形 A，然后执行Pathfinder面板上的合并图形功能 B，接着单击Expand按钮 C 将所选的图形合并为单一的图形。（图12）图12 13、接着执行Object - Path - Offset Path功能 A，将合并后的图形 B 向外扩展2px得到图形 C，然后将图形 B 删除。（图13）图13 14、最后将上面的图形 C 填充色设置为黑色，并将它放置在最底层（快捷键：Ctrl+Shift+）和对齐，这样完成了图标矢量图，最后导