一分钟玩转PS路径描边，轻松画图标！（ps教程+psd下载）

Photoshop的路径工具和钢笔工具，很容易被人忽视，功能其实是很强大的，但是一直很低调。嘻嘻~那今天咱一块唠唠怎么用路径和钢笔，快速绘制UI中的线状图标，这个看了都能做哦！！！！也希望小伙伴能够用得上！还在等什么？赶紧学起来吧！

大背景：扁平化下的极简主义

自从苹果家扁平化后，整个世界都扁了。似乎被人们扔了很久的极简主义，一夜之间又流行起来了。看了下面的，是不是很清新，很直接呀。这样的图标适用于底部的标签栏中，及其顶部的左右按钮上。也许有人会说：这也叫图标，不就是些线条嘛嘛。呵呵，可别说，现在很多人就是好这口。在这样一个信息爆炸，App满天飞的年代，高效简洁自然有市场。扁平化代表了高效，我就是我，不需要多余的思考。

一、任务

这些线性图标难做吗？让我们分析一下它们的结构。

尺寸规格：一般线条为2px，也有的加强为3px的。

风格：线条简单，图形指示意义明确。

2px的图标

3px的图标

二、任务分析（思考和困难）

绘制不难，怎么快速绘制才是关键。

大家思考一下，这个线形图标是怎么做出来的呢？

很多同学会想用Illustrator进行绘制图形，但这样并不方便。在AI可能会出现绘制完后拖到PS中进行调整，会导致边缘线的大小变化，容易导致像素对不齐等情况。在迭代过程中不好保证图标描边大小的统一性，只能一个一个的到AI中进行更改非常的麻烦。折腾了半天画个线性图标，实在有些浪费。

如果用PS可行吗？先不要马上否定，好好想想路径工具和钢笔工具。

是用图层样式？选择工具？有人想到了样式描边的方法。貌似不行，因为未封闭的图标，用样式描边做出来却是封闭的…

那么问题来了，用封闭路径制作出来的图标在进行缩放时形状也会相应的等比缩放，这样会导致在需要不同大小的图形时，因缩放还需反复调整图标的路径边缘才能保证图标线条的一致性。因为整套图标要求线条都相对统一，调来调去太浪费青春！

好了，不拐弯抹角了，下面就给大家介绍一个构图快、一学就会、包教包会的方法。

记住三点：一是形状工具及填充，二是描边效果，三是用钢笔锚点工具删除无用路径。

采用的构图方法：减法。

其实在PS CS6出来后就已经新增加了一项描边功能。使用这个工具能使图标画出来非常的便捷，在绘制图标中主要有下面几大优势！

1.提高了图形的描边质量，描边更为圆滑。

我们在绘制图形采用图层样式做描边效果时，如果用到较大的数值，描边会产生分块曲线，边缘有锯齿感。那么我们通过矢量描边处理可得到完美的结果。我猜测这是因为，矢量描边是由原始的矢量形状图层数据而来，而图层样式的描边是由该形状的位图蒙版而来。二者采用的是完全不同的技术，这样就可以想明白了。

2.多种角度功能，在图标绘制中更为自由

使用常用的描边图层样式只可以是圆角的效果。但采用路径描边样式可以画出圆角，斜面，或者斜角。这会大大减少绘制图形的工作量。

3.通过描边路径可以绘制开放式的路径图标

我们在使用图层样式描边的时候会出现以下情况，描边都是封闭的。而绘制图标时会用到间断的路径。这时候可以采用路径描边样式，是支持开放路径描边的。

三、PS绘制线式图标详细过程

绘制路径时用到的工具：

钢笔工具——绘制路径。

直接矛点选择工具——调整矛点位置。

转角工具——调整路径圆角和角度使用

捎带了解几个快捷键，方便在作图中的使用。在选用钢笔工具绘制后你可以用Shift/Ctrl/Atl来回切换出需要使用的直接选择工具、锚点选择工具、倒角工具。

下面就一步一步教大家画线式图标。为了让初学者看明白，我尽量写的详细些。

  1. 在ps中新建一块画布。（快捷键：ctrl+n）

2.用矩形路径画出两个矩形（快捷方式：画一个圆角矩形，然后按住Alt键拖动图层即可进行复制）。

3.使用

4.使用直接选择工具删除多余的路径锚点，从而去除多余的路径线。

插播提醒：在需要删除中间一段路径的时候，需要先用钢笔工具进行添加锚点，然后用直接选择工具选中进行删除。

如下，我想删除红色区域的一段路径怎么办？

我们继续！！

5.使用椭圆工具绘制太阳（绘制过程中按住shift键即可画出正圆），钢笔工具进行绘制山脉部分。

6.完毕后调整路径描边的起终点的样式为圆角或直角。

7.选中需要调整的角，再使用描边选项里的角点为圆角，使图形更为圆润。

这样一个图标就完成了。

用路径描边还能区分图标的立体感。不同粗细描边的形状结合使图标更为丰富化。

四、后期修饰：让线条更圆滑

路径边缘的修正会给整个图标精致的感觉，尤其是出现单独线条和折角的时候，显得尤为重要。

路径描边还可以根据你的需要进行对其模式的选择，在路径外进行描边，还是中间，还是内部描边。这在路径描边图形的绘制中会经常使用到。

小结：

有时候真的是我们想多了，总想学一些复杂高级的东西，而基础的往往被忽视。

课后小作业：

找一套线性ui图标，一个一个模仿。

原文作者：王铎（Micu设计）站酷

赞 (0)

相关推荐

  • PS简单制作图钉一枚（附PSD下载）

    哈哈,小月今天乐此不彼哈...再给大家一篇简单易学的PS教程,制作简单图钉ICON一枚,虽然简单,但是还是需要耐心的..特别勾高光的时候...大家要按时交作业哈,同时希望大家能把做作业的心得写一下哈. ...

  • 10分钟绘制一个中国风灯笼icon（ps教程+psd下载）

    小编:对于UI设计初学者来讲,ps中特别难以理解的其中一项就有图层混合.高效.正确.合理的使用图层混合模式会让你有意想不到的效果.在学习之前我们要记住其原理为:"白色叠加可以提亮,黑色叠加可 ...

  • PsCoser怎么使用？PS启动图修改器使用图文教程(附下载地址)

    突然想修改 Photoshop 的启动画面,搜寻网络资源后发现,目前已有的方法和工具最多只适用于 Photoshop CC 2014,而最新的 CC 2015 并不适用,只能去分析 Photoshop ...

  • ps波纹曲线怎么画（ps波浪线形状怎么做）

    ps波纹曲线怎么画（ps波浪线形状怎么做）

    Photoshop软件很强大,可以制作出各种图案效果,比如波纹线条效果.这里说的波纹线条,是指由无数个椭圆形组成的一圈一圈的线条,因为和水波纹很像,所以叫它波纹线条.波纹线条的制作方法如下.(1)我们 ...

  • 火箭图标小教程（PS教程+PSD下载）

    火箭又来啦↖(^ω^)↗,为什么是又来了呢?大家在右上角的搜索栏里搜索"火箭"就知道了~~~今天的这个火箭小图标里同样也需要用到布尔运算,之前疯子老师也在YY上讲解过布尔运算的使用 ...

  • 橡皮擦包装质感ICON教程（PS教程+PSD下载）

    成功的捷径就是不停的耕耘!对于比较复杂的形态,捷径就是多看,多加效果~~今天小编给大家带来了一个橡皮擦包装质感ICON教程,对于初学者来说可能有点难度~但试着临摹下,绝对是有收获滴!制作塑料质感的快乐 ...

  • 30小时拟物壁纸刀速成记（ps教程+psd下载）

    小编:今天的教程是一枚壁纸刀拟物图标,细节雕刻非常精致,内含大量技巧,适合有有一定基础的同学进阶练习 .UI进阶却没有捷径,动手练起来吧!创作出带有你个人标签的小刀-- 站酷 原文作者:张小碗儿 Ph ...

  • ps怎么描边：[1]选区描边

    使用ps可以快速方便的对图形.选区以及路径进行描边,方法很简单,下面小编教大家ps选区描边怎么做. ps怎么描边 01 ps怎么描边?首先用ps创建一个画布,做出一个选区给大家演示. 02 在ps菜单 ...

  • PS双重画笔与路径描边打造完美的流动虚线

    关于虚线的画法,有不少方法.主要都是通过设置画笔来实现.其中个人觉得用双重画笔画出来的效果最好.而用PS动画制作流动虚线的方法,网上的教程不多,最终效果也是不尽如人意.经过学习,本人琢磨出一个用双重画 ...