PS教程：6个矢量图标绘制设计实用技巧.pdf

PS 教程:6 个矢量图标绘制设计实用技巧 介绍 6 个图标绘制招数，简单易懂，但功效卓著。久习可得奇效，达到任 何矢量图形都易如反掌，无论各种横的，竖的，奇形怪状的图形都信手拈来。(以 下界面演示以 Photoshop CC 为演示工具) 第一形状图层 PS 是一个像素处理软件，可以做到和 AI 一样绘制各种复杂的矢量图形。 有读者会问为什么不用 AI，而要学习PS 绘制路径，因为 PS 才是适合 UI 设计的 工具软件，且各种图形 PS 可以做到像素对齐，AI 绘制的路径导入 PS 还是要二 次调节。所以下面教你如何通过形状图层来绘制矢量图标。 ① 前景色选择黑色，前景选择的颜色就是绘制出形状图层的颜色 ② 工具模式选择路径，一定要选择路径，而不是形状，因为直接生成的形 状黑乎乎一大片，非常不利于二次编辑路径。 ③ 形状属性面板中可以设置圆角。 这是 Photoshop CC 版本中一个非常棒的功能。尤其是对 UI 设计师而言。形 状属性位于属性面板中，我们可以自由设置各种参数。 例如：图形尺寸、填充颜色、描边颜色、描边宽度、描边样式 (包括虚线、 对齐方式、线段端点和合并类型)、圆角半径选项(对椭圆形不可用) 一个矢量的圆角矩形就画好了。 第二、 自定义形状工具 PS 里内置了非常多的形状，很多基础图形不需要自己绘制，直接在使用相 应的图形即可。 首先新建一个图层，然后使用多边形工具，选择 3 边 然后用形状图层工具绘制一个三角形 如图： 第三、布尔运算 一些复杂的图形，都是靠各种图形相加相减得到的。所以我们需要灵活运用 布尔运算工具，来达到组合最终图形的目的。 按住 Ctrl 同时选中图层形状 1、形状 2 直接按住 Ctrl+E 合并两个路径： 通过合并得到一个对话框图形。 菜单顶部有路径组合工具，可以尝试不同的路径组合，体会一下不同路径 组合布尔运算的效果。 第四、 分层绘制 很多复杂的基本型不要在一个层上绘制，可以分层绘制，通过各个层的分别 绘制，最终再整体合并。 新建图层，画三个圆形矢量图形，必须要新建一个图层哦。如果直接绘制路 径，新的路径和原有的路径混在一起，调整非常不方便，路径约复杂，你会感受 分层绘制的好处! 选中圆圈图形的图层，Ctrl+C 在圆角矩形层上 Ctrl+V，圆圈路径粘贴在圆角矩形层上： 然后： 第五、路径选择工具 当编辑图标中一堆复杂路径的时候，想要快速选中某个路径可能不是一件非 常轻松的事情，这时候可以使用路径选择工具。 这 2 个箭头有什么区别了，黑色箭头可以选中全部路径，而白色箭头可以选 中局部路径。 第六、 钢笔工具 有一些图形的形状，造型奇异，比如下面这个茄子，不可以直接通过基本图 形得到，这时候只能使用大招，钢笔工具!掌握钢笔工具，可以自由的画出各种 图形。 选择钢笔工具 绘制一下弧形路径，按住 Alt 键点选这个路径的端点，为什么需要点选一下? 大家可以试验一下，假如不切换这个端点，绘制的下一个路径就会有一个弧度。 不能按照自己想法绘制相应方向的路径。 点选后的路径如下 然后我们再绘制下一段路径 再次点选路径的端点 依次绘制出如下的路径 再绘制一个切割图形的路径，并用布尔运算工具切除： 最后用钢笔工具用如上的步骤绘制茄子的把子。 最终得到这个茄子的矢量图形：