苹果图标制作深度解析
![](/attachment/Collect/11/4dcd384044200f33bbb7555af5355e3c.png) 外形好比人的骨架,骨骼精奇才能练就上乘的武功。
同样,我还要再将画外形也分成三个部分来讲。
扳手部分:
在工具箱中选择椭圆工具,按住Shift键绘制出一个正圆形
![](/attachment/Collect/11/e776d1e5f6546515635d6c1bf479d733.png)
在工具箱中选择圆角矩形工具,按下鼠标后向右下方拖曳,直至矩形的外形大小与圆形比例适合,按下键盘上的“↑”“↓”键,调整圆角的大小,调整完成后,释放鼠标键。
![](/attachment/Collect/11/0a5e0ba3e4955e6fc8c3f70799c2232b.png)
使用选择工具将两个外形都选中,单击对齐调板中的“垂直居中”按钮,使得圆角矩形与圆形对齐。
![](/attachment/Collect/11/64f104af129e6f1c2eaec8c241752f6e.png)
再按下路径查找器中的“与外形区域相加”按钮。
![](/attachment/Collect/11/13caea5be2784a3f45d3ad605d27608b.png)
单击路径查找器中的“扩展”按钮。此时两个简朴的外形就组合成了一个复杂的外形。
![](/attachment/Collect/11/37a7c75b3a1efb4cf74f21cef6116d8f.png)
使用多边形工具绘制一个8边形,按下鼠标后向右下方拖曳,按下键盘上的“↑”“↓”键,调整多边形边的数量,调整完成后,按住Shift键,拖曳至的外形大小与圆形比例适合,释放鼠标键。
![](/attachment/Collect/11/2fafc4d6390229ee379ff0b99dcafb23.png)
使用对齐调板对齐这两个外形
![](/attachment/Collect/11/ad56f280c1948a55b6c3622ff2253587.png)
使用直接选择工具,按住Shift键,将8边形上的四个锚点选中
![](/attachment/Collect/11/ca961b10bd123a0c331dfa34a092cb88.png)
按住Shift键,将这四个锚点向左拖曳
![](/attachment/Collect/11/16899e8354c3eec5d2d1b840429c8c75.png)
使用选择工具将两个外形同时选中,按下路径查找器中的“与外形区域相减”按钮。
![](/attachment/Collect/11/fe345761aa546e2029aaf0ba4dd5f00c.png)
单击路径查找器中的“扩展”按钮。此时扳手的外形就大体的出现了。
![](/attachment/Collect/11/8895d56894344dfca6a1552a4f2af88d.png)
为了使得扳手更加逼真,这里使用直接选择工具将扳手外形最右端的两个端点选中。
![](/attachment/Collect/11/4153014fb74e070e42d1438fe2a7752e.png)
按住Shift键稍稍向右移动。
![](/attachment/Collect/11/b8f20673eda4a0db6ddcb4cad7071bcb.png)
至此,扳手的外形就创建完成。记得存储一下我们的劳动成果。
![](/attachment/Collect/11/8c74e0fbd3f81c595462be6fb501a4bc.png)
螺丝刀部分:
使用多边形工具,绘制出一个6边形,在绘制过程中按住Shift键,可以使6边形水平放置,这会对以后对齐它有很大的帮助。
![](/attachment/Collect/11/80c0c2f89ee79a95673465aa4c6f76f8.png)
使用旋转工具来旋转这个外形,同样为了对齐6边形的边,在旋转的过程中始终是按住Shift键的。
![](/attachment/Collect/11/fb66f7ad7830dcc338cb1ee75c9c35d7.png)
使用直接选择工具选择右端的两个锚点。
![](/attachment/Collect/11/888d2f3e848212c54836b217e0e0b4b3.png)
按住Shift键向右拖曳。
![](/attachment/Collect/11/851932de051d305c709b6ac99736329a.png)
释放鼠标后,螺丝刀的刀头外形就大体出现了。
![](/attachment/Collect/11/6a5f3ebe35bcd1ca86e821714fee24d3.png)
使用圆角矩形工具,从左至右拖曳出一个圆角矩形,不要释放鼠标。
![](/attachment/Collect/11/8abf8975fefc3f904374601c7977dea1.png)
由于上一个步骤绘制扳手的时候,调整了圆角矩形的圆角大小,这里还是需要使用按下键盘上的“↑”“↓”键来调整圆角的弧度后,再释放鼠标键。
![](/attachment/Collect/11/e8a6edbe07ebceade4934fc403eb65bd.png)
以上一个圆角矩形的左侧边为起点,绘制出第二个圆角矩形,此时的圆角矩形的大小约是前面一个圆角矩形的宽2倍,高1/3。
![](/attachment/Collect/11/e3088bd91311e3b0995d966ac7882c15.png)
确认大小合适后,释放鼠标。
![](/attachment/Collect/11/d205ca2f36025bcf8e8f397dbd0ae0c7.png)
使用选择工具,将三个外形一起选中,按下对齐调板中的“垂直居中对齐”按钮。
![](/attachment/Collect/11/b4fb709cea7f028123ae460af9215420.png)
使用选择工具,将螺丝刀的刀头选中,将光标移至右上角的位置上,光标外形变为如图所示外形后
![](/attachment/Collect/11/4ab2b07298ef5c7d2ce2eb5eb49fe131.png)
按住Shift键,将刀头进行缩放。最左侧边的宽度略小于刀竿的宽度即可。
![](/attachment/Collect/11/f20eec89b78a4127892b6c2bfc8edced.png)
使用选择工具,调整螺丝刀把手的大小。
![](/attachment/Collect/11/4ae59607a9256cfec0f2c1f3995e31e3.png)
将刀竿与刀头的形砖选中,执行路径查找器中的“与外形区域相加”按钮。
![](/attachment/Collect/11/b7f9211a6e5e5a855ac478a89d0128fb.png)
单击“扩展”按钮。
![](/attachment/Collect/11/db076c66926e3c11b083fb9ba10af40a.png)
此时,完成了螺丝刀的形砖制作,记得存储一下我们的劳动成果。
![](/attachment/Collect/11/e23de272034c34188b7ba4cfb47d10fc.png)
圆标部分:
是用椭圆工具,按住Shift键,绘制出一个正圆。
![](/attachment/Collect/11/8c4eb36fab51e1ea0757e564165f0d2d.png)
使用矩形工具,绘制出一个矩形,矩形的比例大致为 长:宽= 3:1
![](/attachment/Collect/11/170ee54b835b5954b4cb0dec62b23ade.png)
双击旋转工具,弹出旋转对话框,在对话框中输入90,按下“复制”按钮
![](/attachment/Collect/11/598ec8bee776fcc7ae1c1075d40d7964.png)
使用选择工具,将两个矩形选中,单击路径查找器中的“与外形区域相加”按钮。
![](/attachment/Collect/11/d445b601c42bb10e80009c55300e9e17.png)
单击“扩展”按钮。
![](/attachment/Collect/11/51ed8e559790f4968a1fadc557327df3.png)
使用选择工具,将两个外形都选中,并按下对齐调板中的“垂直居中对齐”与“水平居中对齐”按钮各一次。
![](/attachment/Collect/11/b9bdbe03945b04609a2e88c56b8568cc.png)
使用选择工具,选择圆的外形,双击工具箱中缩放工具的按钮,设定缩放比例为95,然后单击“复制”按钮。
![](/attachment/Collect/11/b6ec503f0ebd6f7cf69a7a560bd011ac.png)
得到一个较小的圆
![](/attachment/Collect/11/24e21e3b24633c51457d4448bf9bcb6f.png)
使用直接选择工具,将最低端的锚点选中。
![](/attachment/Collect/11/5a991934e06f1c2026e0f9ea78a8db87.png)
向上拖曳
![](/attachment/Collect/11/1ef688e8d0d65d396e48e4a87c10b640.png)
改变圆形的外形。
![](/attachment/Collect/11/09969970e591c779b4d0723afbbde770.png)
使用选择工具,将光标移至图形的中下方,光标形砖变成如图所示
![](/attachment/Collect/11/83b255cf0bf7ee21ecd4ab57bc4985b3.png)
按下鼠标,将外形的一边向上拖曳
![](/attachment/Collect/11/e7bc17b73ab5126f41db04d61aa0ab98.png)
使用选择工具,将光标移至图形的右中侧,光标形砖变成如图所示
![](/attachment/Collect/11/f908ebb46592d9f187be37fd067040f1.png)
按下Alt键,向中间位置拖曳鼠标
![](/attachment/Collect/11/5b92e2a6f30133730cddb8332e932696.png)
至此,圆标的部分也绘制完成。保存一下我们的劳动成果。
![](/attachment/Collect/11/9e60556d23843ba5da5d39c0cea2c325.png)
![](/attachment/Collect/11/92323ab1f4b48f07f91bb323f5eeb7a1.png) 将扳手的外形选中,执行“对象>路径>偏移路径”命令,弹出“偏移路径”对话框,输入数值-0.4。 (注:-0.4的数值只是根据外形大小而来,偏移路径命令只能计算绝对数值,而不能计算相对数值,希望能在CS3的版本中能够有所更新,所以大家在使用该命令的时候,要尝试大小合适才行。)
![](/attachment/Collect/11/91567ddc281f1b1ec31a8298304c1d08.png)
单击“好”按钮,得到一个与外轮廓相似的外形。
![](/attachment/Collect/11/5c036e4f16189c58002faa185476666f.png)
将两个外形选中,使用美工刀工具将图形在图形的扳手头尾部割下一条轨迹,注重不要割到扳手头。
![](/attachment/Collect/11/bd37ebcd82dce14fbe1c0abf554c969e.png)
此外形将分为两截。可在图层调板中暂时将上面较小的外形关闭显示。
![](/attachment/Collect/11/41fdc7f7f2977c29323db8b75e9dcfb3.png)
将两个外轮廓同时选中,单击工具箱底部的渐变按钮
![](/attachment/Collect/11/6afda5d172ea25816be835544619a4c9.png)
使用渐变工具从上往下拖曳,在拖曳的同时注重渐变的变化
![](/attachment/Collect/11/86ee0dbe71cb5b17b84083da6ab43d11.png)
在渐变调板中,将左端的滑块相中央位置移动
![](/attachment/Collect/11/2c7e2c80afddd6439e6a161db4d244b0.png)
并在颜色调板中取一个深灰色
![](/attachment/Collect/11/475f6284d94a53e2264c721907d953f0.png)
单击渐变调板最左端的空白处,会自动添加一个渐变滑块
![](/attachment/Collect/11/0b5826dd986fc4ca18ffdd15b5a687c5.png)
并改变该滑块的颜色为浅灰色。
![](/attachment/Collect/11/6a60dead8583fedcd82efc652f549f16.png)
此时可以再使用渐变工具更改渐变的方向和位置
![](/attachment/Collect/11/980255db0ad655b06e5b7a1b6a75e757.png)
在图层调板中将隐藏的外形再次显示,并选中扳手头部分
![](/attachment/Collect/11/bdaf8ce096b180f18dccac1da557d4cc.png)
应用刚才创建的渐变,只是做渐变方向的改变而已
![](/attachment/Collect/11/6c2ba45faea1ba47a38f035deb655419.png)
同样,手柄部分也是渐变的方向改变
![](/attachment/Collect/11/36268297cc4817118839003c472f0bb1.png)
看看整体效果
![](/attachment/Collect/11/e9fbde3eaec61000a540069e32645e84.png)
选中扳手头内部的外形,执行“对象>路径>偏移路径”命令,同样位移的数值适合即可
![](/attachment/Collect/11/396fb4409753bbf4c96b852b470c42e0.png)
将得到外形填充为白色
![](/attachment/Collect/11/0364ce199c26661822064de265be2d0d.png)
用美工刀工具进行切割,注重切割的起点和终点,还必须保持一定的平滑度。
![](/attachment/Collect/11/971e9ec74d36c82997dca8f4243e9234.png)
切割后的结果,如不满足,可以按下Ctrl+Z返回上一步骤,重新切割。
![](/attachment/Collect/11/aa983d13404f61517b13d1ba2a1554f6.png)
使用直接选择工具,选择上半部分,并按DEL键删除
![](/attachment/Collect/11/f051628aed66f6ea459da233574561d6.png)
使用矩形工具绘制一矩形
![](/attachment/Collect/11/1324585074278fcb3892d6cb174daed0.png)
填充由上至下的渐变,此渐变为黑色到白色
![](/attachment/Collect/11/ac70c6b55d8205ec5056e78721df19de.png)
可以利用图层调板,按住Shift键将图中所示的两个外形选中。
![](/attachment/Collect/11/cb7c50d5539bf4c832e38b2d29391de3.png)
在透明度调板中执行“建立不透明蒙版”命令
![](/attachment/Collect/11/3932e1988dafb63138ad835cb8150b0e.png)
得到半透明的渐隐效果
![](/attachment/Collect/11/acfb3d248fc084be35cf5e9b57735dbf.png)
至此,扳手的部分立体化就完成了,我们可以将其全选,并执行Ctrl+ G命令。
![](/attachment/Collect/11/a7592b577445150ec1b8a8e85ea3986b.png)
将螺丝刀图形的手柄部分填充渐变如下所示,上面的讲解中已经具体讲解了渐变的创建,这里就不再累述。
![](/attachment/Collect/11/c2a65af80939b420e22e46d289e95faa.png)
使用渐变工具来改变渐变的方向
![](/attachment/Collect/11/acfb3d248fc084be35cf5e9b57735dbf.png)
选中刀杆的图形,使用美工刀工具一分为二
![](/attachment/Collect/11/6ba8597fb51e40f3e11644be064028f8.png)
左半部分填充渐变如图所示
![](/attachment/Collect/11/48a5eb46dc5316e7c8d0a3c773ee56b2.png)
右半部分填充渐变如图所示
![](/attachment/Collect/11/180dc2291339af3ecd81463355210347.png)
并执行“对象>路径>偏移路径”命令,得到的新外形填充为灰色
![](/attachment/Collect/11/4aa293dbe2a791a7e54892b5036669a9.png)
再次执行“对象>路径>偏移路径”命令,得到的新外形填充如图所示渐变
![](/attachment/Collect/11/c52aa540d72ea7019ac3eeab049248f2.png)
选中这两个路径偏移得到的外形,按住Alt键,并移动它
![](/attachment/Collect/11/8601378cee131eccf798d71cc55f9ca2.png)
复制得到一样的两个外形
![](/attachment/Collect/11/af7c4a2023e0d774b7272f15bd2af836.png)
执行路径查找器中的“从外形区域中减去”按钮,并按下“扩展”按钮
![](/attachment/Collect/11/2e37a9fa6d876099c194f7b98666f6b6.png)
使用美工刀进行切割
![](/attachment/Collect/11/d96c436448c59921e57c6077188cb573.png)
将下半部分删除,上半部分改填色为白色,并使用选择工具将其位移到如图所示位置
![](/attachment/Collect/11/91a42d1e9d55ff2141a8cb65a98b72b7.png)
至此,螺丝刀的部分立体化就完成了,我们可以将其全选,并执行Ctrl+ G命令。
![](/attachment/Collect/11/4184b473ae5a913a3f69b3144f363d07.png)
打开图标的部分
![](/attachment/Collect/11/13ab8103b1afaf268cd3e0ef8fd6c4dd.png)
创建两个绿色的辨别,注重这两个绿色尽量颜色相近。
![](/attachment/Collect/11/7e69d8d8c55530225915308e6211ecdc.png)
选择圆形,并创建渐变如图所示
![](/attachment/Collect/11/9dab90ef8e8906cc0260dd002cf2e4cb.png)
更改渐变的类型
![](/attachment/Collect/11/2b3d3a9db92421a0827cc9b0554f33d9.png)
将上方菱形的渐变滑块进行向右移动
![](/attachment/Collect/11/c804bd62a6e5c86eeddc80080999a5c5.png)
使用选择工具选择图中豌豆的外形,单击右键,在弹出的关联菜单中选择“排列>置于顶层”
![](/attachment/Collect/11/df758a009d75fa4e1a235b9954565e79.png)
将其填充成白色
![](/attachment/Collect/11/36cc82dc88798059ecbdda915467820f.png)
绘制矩形,大于豌豆的外形,并应用渐变如图所示
![](/attachment/Collect/11/713636f6a91d437cff578908061aaccc.png)
选择矩形渐变和豌豆的外形,执行透明度调板中的“建立不透明蒙版”命令
![](/attachment/Collect/11/fa865a262ff014fe79c809de18971bdd.png)
得到结果如图所示
![](/attachment/Collect/11/cf1492143bd29dca908867aa4f3e0eaf.png)
至此,螺丝刀的部分立体化就完成了,我们可以将其全选,并执行Ctrl+ G命令。
![](/attachment/Collect/11/96fbed1ee89605828b4394a83fc79b3f.png)
我们可以再次存储文件,下一节我们将讲解外形的组合以及外形的治理部分。
![](/attachment/Collect/11/f4c2cf884eb726585c05a74f61cf95c2.png)
继承上一讲,我们将组件都完成后,就可以开始组合这些组件了。
![](/attachment/Collect/11/84ab0eb0bb5ac83490657a5475f91782.png)
对于初学者来说,养成一个好的习惯是异常重要的,不要觉得你自己是一个设计人,只要能做出好看的东西就可以了,而不需要管这个是怎么做出来的。其实一个好的习惯是举手之劳而已,这会给你以后的设计带来无穷的便利,而不要等到你学有所成的时候,再来意识到这个好习惯会给自己带来的优势,而再想调整过来就很难了。
在这里,我将每一个组件都用一个图层来进行装载,对每个图层都进行命名,这就是我说的好习惯。
![](/attachment/Collect/11/9168d341ac531a1056584d3363d55879.png)
将螺丝刀的图层选中,使用选择工具将其移至扳手处,并将左端对齐扳手的左端
![](/attachment/Collect/11/8bcea0d6ceb069294b1674fc2b09d603.png)
调整螺丝刀的大小,尽量让螺丝刀轻微大一点点
![](/attachment/Collect/11/775aaa54fc235c09ee591b80cf2bb0ff.png)
双击旋转工具,在弹出的对话框中输入数值 -45
![](/attachment/Collect/11/ce07cba77ecf427e6d3c87b7b3fd3ef0.png)
单击“确定”按钮
![](/attachment/Collect/11/efc6a325d1644e36bc0656304dbe00a1.png)
选中扳手的图层,双击旋转工具,这次旋转的是 45度
![](/attachment/Collect/11/fb50d5b209c4e08caf15247368b21106.png)
按下“确定”按钮后,使用选择工具来调整其位置
![](/attachment/Collect/11/995c0b06742fe3446b10b712146af98c.png)
使用选择工具,调整图标的位置
![](/attachment/Collect/11/9802edafc1febd2de504d705b767b6a5.png)
单击选择图层调板中的图标图层,按下鼠标后,向图层调板的上方拖曳,直至顶端
![](/attachment/Collect/11/dddb064ce0fa3bb48c0da6dc5deee722.png)
释放鼠标键,图标就以致螺丝刀和扳手的上方
![](/attachment/Collect/11/000d05c701d3dcddae0bfcb025daee0b.png)
调整这三个外形的位置
![](/attachment/Collect/11/3eaa8e0b755dda530587d3158e00b099.png)
基本的组合就完成了,保存一下我们的劳动成果,稍后我们继承。
![](/attachment/Collect/11/5d9c923b54644f6ffb9c7643bb50b130.png)
在图层调板的最上方新建一个图层,并命名为:加深
![](/attachment/Collect/11/0a6818389037e95e2a371c8053f2858f.png)
并将其填色改为如图所示的渐变,渐变的创建在上一节中已经具体讲解过,这里就不再重复了。
![](/attachment/Collect/11/47e09fe51404642ac830f8af4b483c5b.png)
在透明度调板中将其改为:颜色加深
![](/attachment/Collect/11/7e01c0586826dc0e5657f790b242acd6.png)
使用钢笔工具将其外轮廓大致的选折一遍
![](/attachment/Collect/11/6a53119e7f0c7231c3b755fb15c43664.png)
同时选中这两个外形
![](/attachment/Collect/11/83814f1f8f08bc520daefbc3d1161baa.png)
执行“对象>剪切蒙版>建立”命令
![](/attachment/Collect/11/d40f88babbadca29cb384750ee008461.png)
将加深图层移至图标图层的下方
![](/attachment/Collect/11/1bdecf5445b7c2c6fd9990fd7b338345.png)
看到了没,这样就可以对靠近图标位置的地方有投影的感觉
![](/attachment/Collect/11/2f853b8febadd5fda40ccc9ee35e2f02.png)
使用椭圆工具,按住Shift键绘制一个正圆
![](/attachment/Collect/11/98bbce42c48d1a7e8a40bb276a0b97a9.png)
将其填色改为渐变。假如还记得上一节中作过的渐变,假如当时我们将其储存到色板调板中,现在就可以直接拿来用了。
![](/attachment/Collect/11/9527a3332a15d1dba26b437efcf0d43f.png)
按下Shift+Alt键,移动这个圆
![](/attachment/Collect/11/2c55d94225085242d143790c042333bb.png)
就能在45度角的方向上得到一个新的圆
![](/attachment/Collect/11/c5c160a84cbd3718e20d4c6b03c944c0.png)
更改其填色为白色
![](/attachment/Collect/11/0aad76358706d7138618c130f858ac66.png)
为了更好的操作,我们将图层调板中所有图层都进行锁定,并在最低端的位置新建一个投影图层,使用矩形工具绘制出一个填色为白色的矩形。
![](/attachment/Collect/11/80c2ceeb6a9403f5e12f52cb7c1592d4.png)
使用网格工具单击创建一个网格点,并将网格点改为灰色
![](/attachment/Collect/11/d5431227ebc025cc01ff1e471e5fb33b.png)
整加第二个网格点
![](/attachment/Collect/11/004f7ea2b132489cd9c05bf657ccd075.png)
在中央位置整加第三个网格点,并将这个点的颜色改为更浅的灰色
![](/attachment/Collect/11/2d40011c5f36f0d234612c72cbfba6bd.png)
使用铅笔工具绘制一个不规则的长条形 注重绘制快结束时,按下Alt键,将自动闭合路径
![](/attachment/Collect/11/2a9e7e7f92a5d6d2f7e2bd60d0cb7253.png)
使用平滑工具,将这条路径平滑一下
![](/attachment/Collect/11/9cc31d8938faa2319fbbfc6a8bfc3d1e.png)
选中这两个外形
![](/attachment/Collect/11/a6a09858e8eb0ae49f18059447fa5c92.png)
执行“对象>封套扭曲>用顶层对象建立 ”命令
![](/attachment/Collect/11/67e7c1700df0ebb9b9eb71821c5824de.png)
这样投影就不规则了,这样看起比较自然
![](/attachment/Collect/11/3c72be9b92789e346522074f1a62d2ea.png)
调整一下大小,并调整一下不透明度
![](/attachment/Collect/11/9397d02ec438b2afd104697cfdc345b3.png)
大功告成。
返回类别: Illustrator教程 上一教程: Illustrator绘制精致iTunes矢量图标 下一教程: Illustrator基础教程:绘制五角星
您可以阅读与"苹果图标制作深度解析"相关的教程: · Illustrator制作矢量3D图标 · AI打造苹果风格图标之外形的建立 · Illustrator QQ2005风格小图标 · Illustrator CS设计矢量精致图标步骤详解 · Illustrator CS绘制矢量精细图标详解
|