一分钟玩转PS路径描边轻松画图标

YonngArlene · 发布于 2016-05-17 · 字数6813 · 浏览 1279 · 评论 0

@Micu设计 :Photoshop的路径工具和钢笔工具,很容易被人忽视,功能很强大,一直很低调。今天咱一块唠唠怎么用路径和钢笔,快速绘制简易线状图标,这个看了都能做噢,哪怕是第一天学PS,也能做到。

有人说UI难学,摸不到门路,那就从这一课开始吧。

(心急的同学,直接翻到中下位置,教程部分即可,先练练手)

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

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

一、任务

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

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

风格:线条简单,图形指示意义明确。

2 px 的图标

3 px 的图标

二、任务分析(思考和困难)

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

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

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

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

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

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

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

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

采用的构图方法:减法。

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

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

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

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

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


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

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

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

绘制路径时用到的工具:

  • 钢笔工具——绘制路径。
  • 路径选择工具——调整路径大小使用。
  • 直接矛点选择工具——调整矛点位置。
  • 转角工具——调整路径圆角和角度使用

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

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

1,在ps中新建一块画布。(快捷键:Ctrl+N)

2,用矩形路径画出两个矩形(快捷方式:画一个圆角矩形,然后按住Alt键拖动图层即可进行复制)。

3,使用-路径选择工具-框选所有的路径,找到PS右上角的填充和描边,把填充隐藏,描边设置2个点像素。

m_bf915472972c0000013f174729b2

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

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

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

我们继续!!

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

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

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

这样一个图标就完成了。

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

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

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

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

小结:

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

本文系作者 YonngArlene 授权问说网发表,并经问说网编辑,转载请注明出处和 本文链接

相关文章

  • 2015-10-20Manifesto在HTML5中离线应用程序缓存校验工具
  • 2015-05-24如何在WordPress文章和单页中运行PHP代码
  • 2017-01-19用JavaScript实现给出的盒子的序列是否可连为一矩型
  • 2016-12-02FlyJSONP轻量级的跨域AJAX请求插件
  • 2016-03-11IE6下最大宽度最小宽度最大高度和最小高度
  • 2016-12-02Response JS创建高性能的支持移动设备的网站
  • 2016-05-15准备好了么?成为设计师之前你得知道的8件事
  • 2016-05-17Illustrator绘制可爱的猪脸图标
  • 发布评论

    为您推荐

    问说网 · 发布于 2016-01-13

    Sidetap轻量级跨平台Web应用开发框架

    Sidetap 是一个简单的框架,可以帮助你快速的开发跨平台的移动 web 应用。一款简洁轻量级的移动Web应用开发框架(缩减压缩后只有2KB)。它专注于提供类…

    问说网 · 发布于 2016-01-18

    Nodemailer基于Node.js简单易用的邮件发送模块

    Nodemailer 是一个简单易用的 Node.JS 邮件发送模块(通过 SMTP,sendmail,或者 Amazon SES),支持 unicode,你可…

    用JavaScript实现给出的盒子的序列是否可连为一矩型
    AustenJuliet · 发布于 2017-01-19

    用JavaScript实现给出的盒子的序列是否可连为一矩型

    by cpglkg <script>var arr=[5,10,15];function rect(arr,width){ arr.sort(fun…

    构建自己的内存池

    开发人员往往会自己使用平台提供的内存分配函数分配自己想要的内存空间,但某些嵌入式平台可能并不提供相应的内存管理机制,对于系统分配的一大块内存地址空间,为了有效的…

    • 构建自己的内存池
    • 构建自己的内存池
    • 构建自己的内存池
    • 构建自己的内存池
    问说网 · 发布于 2016-03-17 · 浏览 1371 · 评论 0

    使用Photoshop创建复古裂纹文字效果

    在这个教程中,我会向你展示,如何使用Photoshop创建复古裂纹文字效果,最近的一段时间,很多粉丝,喜欢这种复古字体效果,而且这种富有创造力的效果,很多通过游…

    • 使用Photoshop创建复古裂纹文字效果
    • 使用Photoshop创建复古裂纹文字效果
    • 使用Photoshop创建复古裂纹文字效果
    • 使用Photoshop创建复古裂纹文字效果
    问说网 · 发布于 2016-04-20 · 浏览 1289 · 评论 0
    问说网 · 发布于 2016-12-02

    Response JS创建高性能的支持移动设备的网站

    Response JS 是一个轻量级的 jQuery 插件,用来创建高性能的支持移动设备的网站。它提供了一套语法用来根据不同的设备环境动态替换HTML代码。例如…

    设计师注意了!10个最常见的PHOTOSHOP误区

    今天我们总结了10个最常见的Photoshop误区,以及避开的方法,设计朋友们快来看看哦!操作菜单变成灰色?颜色看起来不对劲?当你遇到这些问题的时候,应该停下来…

    • 设计师注意了!10个最常见的PHOTOSHOP误区
    • 设计师注意了!10个最常见的PHOTOSHOP误区
    • 设计师注意了!10个最常见的PHOTOSHOP误区
    • 设计师注意了!10个最常见的PHOTOSHOP误区
    半硬不烂不熟 · 发布于 2016-05-14 · 浏览 961 · 评论 0
    李谈红 · 发布于 2016-05-17

    【来点新鲜的】国内十个奇葩网站,你去过几个?

    【来点新鲜的】国内十个奇葩网站,你去过几个?今天给大家推荐的这些网站都很有意思,都是比较有特色,具有代表性的网站,大家可以进来看看肯定能找到你感兴趣的内容,希望…

    问说网手机版

    躺着 站着 跪着轻松访问

    更多详情 关于作者

    YonngArlene

    在深刻爱情来临之际 我们都懂得 预言了结束时的泪流成河 冷战对你来说是种负荷 我们都承认 就干脆怨恨 会比较好分

    97 文章
    0 评论
    人气

    更多 热门话题

    APP界面

    关注 APP界面

    文章 41506 · 浏览 3203

    APP欣赏

    关注 APP欣赏

    文章 41427 · 浏览 2958

    APP手机界面

    关注 APP手机界面

    文章 41417 · 浏览 3079

    图片素材

    关注 图片素材

    文章 29463 · 浏览 2488

    高清图片

    关注 高清图片

    文章 26530 · 浏览 2700

    更多 推荐作者

    关注 秋天的孤寂

    文章 99 · 评论 0

    关注 惢碎葬爱

    文章 96 · 评论 0

    关注 怎麽继续

    文章 90 · 评论 2

    关注 走了留下什么

    文章 110 · 评论 0

    关注 流浪的脚步

    文章 86 · 评论 0

    关注 籹孒不认输

    文章 94 · 评论 0

    
    顶部 反馈 评论 底部

    意见反馈

    感谢您对问说网的支持,提出您在使用过程中遇到的问题或宝贵建议,您的反馈对我们产品的完善有很大帮助。

    您的反馈我们已收到!

    感谢您提供的宝贵意见,我们会在1-2个工作日,通过您留下的联系方式将处理结果反馈给您!