ps自定义形状工具_PS教程!6个矢量图标绘制设计的实用小技巧

第一剑 少商剑 形状图层

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

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

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

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

28bb60502c2a7ae6e5909d24396ef673.png

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

89ae35a4f92e120076c7c8226cc779bc.png

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

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

5a27c990aed5b30110cb435506dafe25.png
02bc9d8e6612a0782f8d3186a41d2fc5.png

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

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

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

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

ef1519c57ede1e7d062f42ba603238bd.png

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

ad2247d563576440782e4f2ef8cfd5d6.png

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

c74c5e1306a2eb572b57e4d7ec4dacd3.png

如图:

e755182284277d2fdde881221f3a50bc.png

第三剑 商阳剑 布尔运算

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

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

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

7f55bc4c0f8845e7e0283efcb85c47f5.png

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

8d89e30adfb23a3979e59c026a3b12ff.png

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

36ada80659371a7b420db4f7af4ddeda.png

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

899582046a206173efab0aed3de91e92.png

第四剑 关冲剑 分层绘制

特点:以拙滞古朴取胜。

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

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

6fa0702823e3ce25ddcca39fd728b1bf.png

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

395457fab198934fcd49327f9a415222.png

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

5276e7669707d53411d044b98a2bd4a2.png

然后:

d98fdbd2e436782ba245d0c725c089f4.png
c1d9e735fd73dcce0fea905b8352e021.png

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

特点:轻灵迅速

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

873c98101c57fee5b51aa5b5c0794f4c.png

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

f57679f2398f1a11f9e875d25cea5c66.png

第六剑 少泽剑 钢笔工具

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

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

8c7c76d2a22611d7c169948279f5f708.png

选择钢笔工具

a17c61252c5eadf5692770af43082f09.png

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

c12fdb3a07dab90a5a0bbac3b0ec7e14.png

点选后的路径如下

78831a316a9eeb069d5fde2aaf86e35f.png

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

9bf22cc5619e6aa8341c080d2d9a7806.png

再次点选路径的端点

edaa676f474b4cbbadeb9b3d35d4d581.png

依次绘制出如下的路径

fd3c42aab447848f5c04bf6b955710f0.png

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

9bae852c2285311b6507fa62eed1a8d3.png

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

0748f4020655a089f75e66cb45b4dfaa.png

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

785827d4ecc4f622b82b7b36b82b8378.png

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

3f995f0022e986ad334b85ba45b0e934.png

图片来源、百度

记得关注哦

记得点赞哦

记得评论哦

记得转发哦

来源:优设/3年2班程远

注:仅用于交流学习,如有版权问题请第一时间联系后台处理。(最终版权归原著作者所有)

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值