七贝PS网

 找回密码
立即注册
快捷导航
七贝PS网 首页 基本操作 查看内容

矢量图标,Photoshop绘制矢量图标的6个实用小技巧

2021-6-16 10:13| 发布者: 七贝PS网| 查看: 732| 评论: 0

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

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

  第一剑 少商剑 形状图层

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

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

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

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

Photoshop绘制矢量图标的实用小技巧

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

Photoshop绘制矢量图标的实用小技巧

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

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

Photoshop绘制矢量图标的实用小技巧

Photoshop绘制矢量图标的实用小技巧

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

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

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

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

Photoshop绘制矢量图标的实用小技巧

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

Photoshop绘制矢量图标的实用小技巧

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

Photoshop绘制矢量图标的实用小技巧

  如图:

第三剑 商阳剑 布尔运算

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

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

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

Photoshop绘制矢量图标的实用小技巧

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

Photoshop绘制矢量图标的实用小技巧

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

Photoshop绘制矢量图标的实用小技巧

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

Photoshop绘制矢量图标的实用小技巧

  第四剑 关冲剑 分层绘制

  特点:以拙滞古朴取胜。

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

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

Photoshop绘制矢量图标的实用小技巧

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

Photoshop绘制矢量图标的实用小技巧

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

Photoshop绘制矢量图标的实用小技巧

  然后:

Photoshop绘制矢量图标的实用小技巧

Photoshop绘制矢量图标的实用小技巧

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

  特点:轻灵迅速

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

Photoshop绘制矢量图标的实用小技巧

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

Photoshop绘制矢量图标的实用小技巧

Photoshop绘制矢量图标的实用小技巧


路过

雷人

握手

鲜花

鸡蛋

Archiver|手机版|小黑屋|七贝PS网 ( 粤ICP备20019910号 )

GMT+8, 2025-8-3 08:11 , Processed in 0.074242 second(s), 17 queries .

Powered by Discuz! X3.4

Copyright © Tencent Cloud.

返回顶部