分享

如何创作资料夹矢量图

 闲之寻味 2012-07-06
如何创作资料夹矢量图

教程说明

使用应用软件:Adobe Illustrator CS5

难度:中级

预估完成时间:2小时



成品 - 作完成后的最终图样

在接下来的教程里,你们将学习如何创作资料夹的矢量标识。我们只需要使用一些基本的矢量图形工具和路径查找器工具就可以完成资料夹图标的创作了。轮廓画好之后,接着我们需要在各部分细节处用渐变工具上色来润饰矢量图的明暗效果。在设计过程中,还将用到一些别的插画家工具以至工作精确到每一象素。


-----------------------------------------------------------


第一步:按下CTRL+N键快速新建一个空白文档。这时会弹出新建文档的选项框,在宽度处敲入数字600(Width:600),高度为500(Height:500),接着点击高级展开隐藏选项(Advanced),选择RGB颜色模式(Color Mode: RGB)栅格化效果为屏幕(72ppi)(Raster Effects: Screen(72ppi),并注意最底下的物体对准栅格(Allign New Objects to Pixel Grid)的选项未被选择,然后再点击OK

激活显示网格(视图>显示网格 View>Show Grid...Ctrl+"),同时也激活对齐网格(视图>对齐网格 View>Snap to Grid...Shift+Ctrl+")。接下来,在网格线间隔里输入5象素(Gridline every: 5px)。这步完成后,还需要点击编辑>预设>标尺和网格(Edit>Prferences>Guides&Grid),在网格线间隔(Gridline every)里填入5,在子网格里(Subdivisions)填入1。


要即时预览下所创建的形状的大小和位置,你可以打开信息面板(窗口>信息 Window>Info)。还有一点需要强调,别忘了将衡量单位改成象素,打开编辑>预设>单位>常规(Edit>Preferences>Unit>General)。在正式进入创作前,更改这些选项能极大地提高工作效率。


第二步:选取矩形工具(Rectangle Tool),快捷键为M,创建一个宽75象素、高205象素的形状,随便给它上个什么色。再点击选择这个图形,选取增加描点工具(Add Anchor Point Tool),快捷键为+。首先在图形顶部的两个边角进行放大,在下图2标示的位置处新增两个新描点,然后再在图形的底部进行同样的操作。



第三步:确保上一步所创建的图像仍有选中,接着点击直接选取工具(Direct Selection Tool),快捷键为A。选取图形顶部的左边和右边的所有描点,然后向下拉5象素(即一个网格的距离);再选取图形底部的左边和右边的所有描点向上拉5象素。这次又一样,只要你设定了对齐网格,那么工作就简便多了。最后你修改后的图形就如下图2标注的一样。




第四步:重新选定上一步编辑过后的图形,然后再选择效果>风格化>圆角(Effect>Stylize>Rounded Corners)。在半径的右边输入1象素,然后点击OK,接着再选择对象>生成外观(Object>Expand Appearance)。选择最终成像的图形,复制这个图像并重叠至原图前面,可以使用快捷键Ctrl+C > Ctrl+F。下一步的操作力将会用到。



第五步:选择矩形工具(M),创建一个宽65象素,高215象素的图形,随意着色,并将它置于如下图标注1的位置。选中它,连同上一步创建的图形副本一起选中,打开路径查找器,然后点选交叉(Intersect)。



第六步:再次选中上一步创建的图形,并给它加上线性渐变效果,如下图所示。渐变色的白色浮标代表的是渐变条的位置比例。



第七步:再次选定上一步编辑好的图形,复制这个图形并置于原图的前面(Ctrl+C > Ctrl+F)。选中它,连同在第一步里创建的图形一并选中,然后再打开路径查找器,点击按前置对象裁剪(Minus Front)。再将光标移至图层面板,你会发现一个新组里面有两个简单图形,解除这两个图形的群组使用快捷键Shift+Ctrl+G,并给左边的图形以RGB模式着色为R=50、G=50、B=50,右边的图形以R=30、G=30、B=30。



第八步:取消对齐网格,选择视图>对齐网格(View>Snap to Grid),接着再进入预设选项板,编辑>预设>常规(Edit>Preferences>General),确保键盘增量(Keyboard Increment)为1象素。重新选择上一步设置好后的位于左边的图形,并复制2个副本图形置于前面。选中最前面的副本图形,并向上移动2象素。重新选取这两个副本图形,打开路径查找器,点击按前置对象裁剪(Minus Front)。接下来再按照下面的图示来给最终成型的图形应用线性渐变效果。



第九步:再次选中上一步修改过的位于右边的图形,做两个副本,选择最顶上的副本图形并向上移动2象素。接着再选中这两个副本图形,打开路径查找器,点击从前面剪切(Minus Front),并给这个两个图形按下图图示应用线性渐变效果。



第十步:下面我们再回到第一步创建的图形上,选择它并复制两个副本,置于顶部(Ctrl+C > Ctrl+F)。选中最上面的这个图形并向下移动1象素,再选中这个两个副本图形,打开路径查找器,点选从前面减去(Minus Front)。


接着再给这个合并的图形加上如下图所示的线性渐变的效果,并选择效果>扭曲>下弧(Effect>Warp>Arc Lower)。输入下图所示的数据,然后点选OK,接着再去生成外观,点击对象>扩展外观(Object>Expand Appearance)。



第十一步:再选中这个主图形,复制两个副本并置于前面(Ctrl+C > Ctrl+F),选择这两个副本图形并向上移动1象素,再打开路径查找器,点击从前面减去(Minus Front),接着再给这个合并过后的图形应用如下图一样的线性渐变效果,完成之后再进入效果>扭曲>下弧(Effect>Warp>Arc Lower),填入下图所示的数据之后点选OK退出对话框,然后再去对象>扩展外观(Object>Expand Appearance)。




第十二步:再次选定这个主要图形,复制两个副本并置于前面。选中最前面的副本图形,向右移动1象素。再选中这两个副本图形,打开路径查找器,点选从前面减去(Minus Front),并按下面的图示来给图形填充线性渐变效果。



第十三步:再次选中这个主要图形,复制出两个副本。选择最上面的副本图形并向右移动2象素。重新选取两个副本图形,并打开路径查找器,点选从前面减去(Minus Front),接着再按下面的图示来填充线性渐变色。



第十四步:再选择主要图形,复制两个副本,选中最前面的副本图形并向左移动1象素。然后再将两个新副本图形一并选中,打开路径查找器,点选从前面减去(Minus Front),接着再如下图所示应用线性渐变效果。


第十五步:再选择修改过后的主要图形,复制两个副本。选择最上面的副本图形并向左移动2象素,然后再选中两个新副本图形,打开路径查找器,点选从前面减去(Minus Front),这之后再按下图所示应用线性渐变效果。



第十六步:打开对齐网格,进入视图>对齐网格(View>Snap to Grid)。下一步的操作里,你需要设置每个网格的间隔为1象素,那么就单击编辑>预设>向导和网格(Edit>Preferences>Guides&Grid),然后在网格线间隔(Gridline every)里填入1。


点选椭圆形工具(Ellipse Tool),快捷键为L,创建一个直径为24象素的圆形,随便你自己喜欢给它上色,并将这个图形置于如下图标注1的位置,把它选中连同主图,然后再打开路径查找器,点选从前面减去(Minus Front),接着将这个合并后的图形送至最下面,按下Shift+Ctrl+[可以快速做到。



第十七步:再次选取椭圆形工具,创建一个新的直径为24象素的圆形,并将它置于上一步创建好的圆形的上面,要重叠置于上面,给这个图形填充透明色,不过加上3pt厚的描边,随便给这个描边涂上一种颜色,向内对齐,然后再去对象>路径>轮廓描边(Object>Path>Outline Stroke),然后再按下图所示给这个最终成型的图形应用上线性渐变效果。



第十八步:重新选中上一步制作的图形,复制两个副本并置于顶部。再选中这两个复制品并向下移动1象素,打开路径查找器,点选从前面减去(Minus Front),选中最上面最后生成的图形并用白色填充,然后再选择下面的图形并填入R=215、G=215、B=215。



第19步:重新选择在第17步建立的图形,然后点击效果>风格化>倒影(Effect>Stylize>Drop Shadow),并填入下图所示的数据后点击OK离开对话框。放大这个图形,然后给它应用上1pt厚的描边,设置颜色为R=25、B=25、G=25,并向外对齐。



第20步:选取矩形工具,创建一个宽49象素,高125象素的图形,并按下图所示填充一个线性渐变色,并按下图所示排列。为这个图形加入1pt厚的描边,将颜色值设置为R=255、G=255、B=255,向内对齐。确保这个新图形是选中的,然后点击效果>风格化>圆角(Effect>Stylize>Rounded Corners),填入1象素的半径值,然后点击OK。



第21步:重新选择上一步创建的图形,注意看外观面板,然后再点击新增填充按钮(Add New Fill)给它再加上个描边,这个按钮位于面板底部的只有一点白方框的图标。


选择这个新填充,将它拉到外观面板图层的最底部,然后进入效果>路径>偏移路径(Effect>Path>Offset Path),偏移值为1象素,然后再点击OK离开。下图中的黄色数字0代表的是透明度。



第22步:继续将焦点放在上一步里修改好的图形上,接着加上第3个填充层,选中这个图形,并将它拉到外观面板图层的最下面,再应用下图所示的线性渐变效果,完成之后再进入效果>路径>偏移路径(Effect>Path>Offset Path),输入2象素的偏移值,点击OK离开。



第23步:选取矩形工具,创建五个宽39象素高1象素的图形,颜色填充为R=255、G=255、B=255,然后将它们分别置于如下图所示的位置。



第24步:选择矩形工具,再创建一个宽3象素高26象素的形状,并按下图所示给它应用线性渐变效果。



第25步:重新选择这个在上一步创建的图形,复制两个副本并置于顶部。选中最上面的副本图形,向左移动1象素,然后再选中两个,打开路径查找器,点选从前面减去(Minus Front),接着给这个合并后的图形填充R=175、G=175、B=175的颜色。



第26步:重新选择这两个在上一步里创建的图形,群组它们,确定是选中状态,然后进入效果>扭曲和变形>变形(Effect>Distort&Transform>Transform),输入如下图所示的数据,然后按下OK键离开。



第27步:重新选择这个在上一步里创建的图形,将其置于最后面(Shift+Ctrl+[),然后将它置于如下图标注1的位置,最后选取文字工具(Type Tool),并入下图所示键入一些简短文字。


-----------------------------------------------------------


制作完成


经过27步的操作后,那么你的资料夹图标制作完成了。下图为你按部就班操作过后的最终样式。


    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多