PS教程!6个矢量图标绘制设计的实用小技巧

2016/05/11 19588

vector-icon-design-6-skills-1

今天竹子要介绍的这6个图标绘制招数,简单易懂,但功效卓著。久习可得奇效,达到任何矢量图形都易如反掌,无论各种横的,竖的,奇形怪状的图形都信手拈来。(以下界面演示以Photoshop CC为演示工具)

第一剑 少商剑 形状图层

特点:剑路雄劲,颇有石破天惊,风雨大至之势。

PS是一个像素处理软件,可以做到和AI一样绘制各种复杂的矢量图形。有读者会问为什么不用AI,而要学习PS绘制路径,因为PS才是适合UI设计的工具软件,且各种图形PS可以做到像素对齐,AI绘制的路径导入PS还是要二次调节。所以下面教你如何通过形状图层来绘制矢量图标。

① 前景色选择黑色,前景选择的颜色就是绘制出形状图层的颜色

② 工具模式选择路径,一定要选择路径,而不是形状,因为直接生成的形状黑乎乎一大片,非常不利于二次编辑路径。

3dca573031ca32f87586275877c5.jpg

③ 形状属性面板中可以设置圆角。

1lmsj20160512

这是Photoshop CC版本中一个非常棒的功能。尤其是对UI设计师而言。形状属性位于属性面板中,我们可以自由设置各种参数。

例如:图形尺寸、填充颜色、描边颜色、描边宽度、描边样式(包括虚线、对齐方式、线段端点和合并类型)、圆角半径选项(对椭圆形不可用)

3lmsj20160512

4lmsj20160512

一个矢量的圆角矩形就画好了。

第二剑 中冲剑 自定义形状工具

特点:大开大阖,气势雄迈

PS里内置了非常多的形状,很多基础图形不需要自己绘制,直接在使用相应的图形即可。

5lmsj20160512

首先新建一个图层,然后使用多边形工具,选择3边

6lmsj20160512

然后用形状图层工具绘制一个三角形

7lmsj20160512

如图:

8lmsj20160512

第三剑 商阳剑 布尔运算

特点:巧妙灵活,难以捉摸。

一些复杂的图形,都是靠各种图形相加相减得到的。所以我们需要灵活运用布尔运算工具,来达到组合最终图形的目的。

按住Ctrl同时选中图层形状1、形状2

9lmsj20160512

直接按住Ctrl+E合并两个路径:

10lmsj20160512

通过合并得到一个对话框图形。

12lmsj20160512

菜单顶部有路径组合工具,可以尝试不同的路径组合,体会一下不同路径组合布尔运算的效果。

11lmsj20160512

第四剑 关冲剑  分层绘制

特点:以拙滞古朴取胜。

很多复杂的基本型不要在一个层上绘制,可以分层绘制,通过各个层的分别绘制,最终再整体合并。

新建图层,画三个圆形矢量图形,必须要新建一个图层哦。如果直接绘制路径,新的路径和原有的路径混在一起,调整非常不方便,路径约复杂,你会感受分层绘制的好处!

13lmsj20160512

选中圆圈图形的图层,Ctrl+C

14lmsj20160512

在圆角矩形层上Ctrl+V,圆圈路径粘贴在圆角矩形层上:

15lmsj20160512

然后:

16lmsj20160512 17lmsj20160512

第五剑 少冲剑  路径选择工具

特点:轻灵迅速

当编辑图标中一堆复杂路径的时候,想要快速选中某个路径可能不是一件非常轻松的事情,这时候可以使用路径选择工具。

18lmsj20160512

这2个箭头有什么区别了,黑色箭头可以选中全部路径,而白色箭头可以选中局部路径。

19lmsj20160512

第六剑 少泽剑 钢笔工具

特点:忽来忽去,变化精微

有一些图形的形状,造型奇异,比如下面这个茄子,不可以直接通过基本图形得到,这时候只能使用大招,钢笔工具!掌握钢笔工具,可以自由的画出各种图形。

20lmsj20160512

选择钢笔工具

21lmsj20160512

绘制一下弧形路径,按住Alt键点选这个路径的端点,为什么需要点选一下?大家可以试验一下,假如不切换这个端点,绘制的下一个路径就会有一个弧度。不能按照自己想法绘制相应方向的路径。

22lmsj20160512

点选后的路径如下

23lmsj20160512

然后我们再绘制下一段路径

24lmsj20160512

再次点选路径的端点

25lmsj20160512

依次绘制出如下的路径

26lmsj20160512

再绘制一个切割图形的路径,并用布尔运算工具切除:

27lmsj20160512

最后用钢笔工具用如上的步骤绘制茄子的把子。

28lmsj20160512

最终得到这个茄子的矢量图形:

29lmsj20160512

今天的课程就讲到这里,不知道通过这个六脉神剑的招数大家可以自由绘制各种矢量图形了吗?

看的多不如去练习一下,大家可以以这个茄子去练习一下作业。

欢迎关注作者的微信公众号:liaosheji2010

fwzqr

【字体设计经验三部曲】

Step 1:先从基础的字体结构学起!
《字体科普文!手把手带你认识最基础的字体结构》

Step 2:再了解字体设计的方法大全!
《推荐:17种设计字体的创意方法》

Step 3:实战经验帮你全面掌握!
《经验分享:超详细的字体设计方法+案例分析》

作者:凤尾竹

yestone-uisdc-2

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量112万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/vector-icon-design-6-skills

界面设计 HTML5 素材 交互设计师 好文 UI 用户体验设计 转场动效 设计师专访 设计师 排版布局 扁平化设计 设计规范 素材下载 视觉设计 职场 产品设计 设计趋势 配色 web前端开发 海报设计 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 ui设计 用户体验 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里