鞋帽服饰

当前位置:云顶国际 > 鞋帽服饰 > 这张不起眼的收据被大神重新设计,演绎母爱的

这张不起眼的收据被大神重新设计,演绎母爱的

来源:http://www.paisapatin.com 作者:云顶国际 时间:2019-10-13 18:32

爱设计,爱分享

爱设计,爱分享

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

推荐: cyRotel    2014/11/24    in PS 教程 & 设计文章   

云顶国际登录网址 1

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

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

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

作者是个90后呦,关于他的奋斗故事与经验分享:

《这才是大学生活!90后设计师的成长记事录》
《求职季必读!聊聊设计师找工作的那些事儿》

最终线条图标:

今天跟大家分享关于「收据」的可视化设计,虽然不属于UI设计主题,但里面的设计思想值得我们学习,如果你是会思考的设计师,我想这个文章会对你有些启发。

今天是母亲节

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

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

云顶国际登录网址 2 云顶国际登录网址 3

以下是文章原文:

百度和 Google 都出了自家的主题 LOGO

一、任务

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

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

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

2 px 的图标

云顶国际登录网址 4 云顶国际登录网址 5

3 px 的图标

云顶国际登录网址 6

关于这个收据的概念设计是Netflix数据工程师的一个附带项目,还不适用于实体店操作,需要进一步探索。

先看看百度的母亲节插画很不错

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

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

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

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

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

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

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

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

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

采用的构图方法:减法。

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

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

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

云顶国际登录网址 7

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

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

云顶国际登录网址 8 云顶国际登录网址 9

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

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

云顶国际登录网址 10

假设几个你或许会熟悉的场景:你去百货超市,只是为了买几样东西。一瓶洗发水,一些熟香蕉。然后你去结账但不知为啥花了180美元。你盯着账单仔细看,加起来好像没毛病,但你的钱到底去哪了?如果收据能图形可视化会不会更好?如此一来比单独列出一行行数字的易读性会更好。

背景的树就是 Baidu 的英文字母

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

绘制路径时用到的工具:

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

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

云顶国际登录网址 11

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

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

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

云顶国际登录网址 12

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

云顶国际登录网址 13

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

云顶国际登录网址 14

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

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

云顶国际登录网址 15

我们继续!!

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

云顶国际登录网址 16

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

云顶国际登录网址 17

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

云顶国际登录网址 18

这样一个图标就完成了。

云顶国际登录网址 19

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

云顶国际登录网址 20

设计师Susic Lu的一个新概念就是如此。在日常工作中,Lu是Netflix的一名高级数据可视化工程师。在业余时,她画风景画,也画幽默的连环画。在过去的几个月里,她利用业余时间,一直在重新审视当代的购物方式。今天,收据不过是我们大多数人丢掉的一张纸。但如果它真的能被设计成用来解释我们的购物行为,久而久之,也许能教我们更理智的购物。

动画方面比较简单,但也符合主题

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

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

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

云顶国际登录网址 21

小结:

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

课后小作业:

找一套线性ui图标,一个一个模仿。来这里,总有一款你喜欢的:《图标素材哪里找?1000 图标资源打包免费下载!》

天气线稿图标可下载PSD,只提供学习哦。

云顶国际登录网址 22

【UI设计学习三部曲】

Step 1:腾讯设计师的新人培训教程!初学者必备!
《传承设计经验!图标设计初阶的3大关键入门知识点!》

Step 2:到顶尖UI设计师集聚地吸收经验与灵感!
《设计师必读!玩转Dribbble终极指南》

Step 3:每天一练!技巧都学全!
《PS AI制作精致可爱的毛线风格图标》

投稿者:@Micu设计

 

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

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:。
设计微博:拥有粉丝量86万的人气微博@优秀网页设计云顶国际登录网址, ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

非特殊说明,本文版权归原作者所有,转载请注明出处 

Lu说:”我不得不去思考如何利用数据可视化重新设计日常体验,在我头脑里把所有物品过一遍之后,收据是我最有兴趣下功夫的一个。“

估计设计师大部分时间都用在绘制插图了吧

于是她购入了一台低分辨率的热敏打印机,那种大部分商店都会使用的,从编码的加工和设计开始。她用自己之前的商店收据作参考,制造了一个更好的收据€€€€由三种不同的元素组成。最重要的是,它以气泡图为特色,支出按类别逐项列出。在她的单子上,“肉类&海鲜”属于同个气泡,而“零食”是一个仅占10%的小气泡。

Google 最喜欢用扁平化风格

在下面还有一个标准的项目列表作为参考。但每一件商品都会有独立的条形图,代表它相对于同类商品的价格。一份13美元的肋眼牛排能填满整个吧台,但一份4美元的鸡肉墨西哥胡椒肠却远远不够。总的来说,这个按项目分类设计可以让你对你的支出一目了然。

同时还用了3个非常简单的动画

Lu说:“我发现按类别了解我自己如何支出是最有效的方法,我会乐意经常去商店观察并且了解每周的变化趋势。”

却能展示出母爱的伟大€€

这个项目看起来比成品困难得多,很大程度是因为那无处不在的热敏打印纸的分辨率很低并且颜色不均匀,跟我们做 APP 和网站相比,是一种小规模的媒介。在创作过程中,我们发现打印机无法绘制水平线,这意味着只能使用像素级的视觉来创造图形图标。

大家能看懂这三个动画的含义吗?

但是最终的结果非常棒。这是一个清晰的,有帮助的,甚至还有点奇怪的€€€€一个完美的三合一的设计,对于任何一个想要将客户服务做的更人性化的大型商铺都是一个很有价值的设计。对于Lu来说,她没有将这个项目进一步的计划,但她希望尽快发布另一个项目,那就是利用数据可视化重塑一种全新的日常生活体验。

祝所有妈妈们母亲节快乐~

原文: Wilson译者:詹飘

//////END//////

//////END//////

€€€€往期好文€€€€

本文由詹飘翻译投稿,并获得设计达人提供的¥50现金红包奖励。成为分享达人并获得奖励?请加小编:Commyleung

设计规范&经验分享

打赏本文译者

2分钟透视实用小教程

€€€€往期好文€€€€

这组摄影作品被无数人点赞

10个最具影响力的艺术运动,至今还在使用!

设计师自我修养-图标篇

美工必须要学的PS抠发丝技巧

阿里巴巴普惠体:含中文西文的免费商用字体

设计规范&经验分享

2019-2020 设计趋势:图形篇

2分钟透视实用小教程

简单却很美观的标题排版方法,让设计作品不再low~

这组摄影作品被无数人点赞

[AI教程]绘制一枚多肉植物扁平风线体插画

设计师自我修养-图标篇

只会堆砌素材?送你5个整体设计技巧

阿里巴巴普惠体:含中文西文的免费商用字体

干货来袭!淘宝设计师谈动效的高效设计与交付

2019-2020 设计趋势:图形篇

€€

简单却很美观的标题排版方法,让设计作品不再low~

将本公众号设为星际不错过任何高品质

[AI教程]绘制一枚多肉植物扁平风线体插画

设计素材、经验、灵感及超级福利

只会堆砌素材?送你5个整体设计技巧

更多灵感&素材网站,请浏览设计导航

干货来袭!淘宝设计师谈动效的高效设计与交付

€€

将本公众号设为星际不错过任何高品质

设计素材、经验、灵感及超级福利

更多灵感&素材网站,请浏览设计导航

本文由云顶国际发布于鞋帽服饰,转载请注明出处:这张不起眼的收据被大神重新设计,演绎母爱的

关键词: