别神化工具!来看PS欺骗设计师视觉的四个方面(附纠正方法)

2016-01-29 09:21 10 1 收藏

别神化工具!来看PS欺骗设计师视觉的四个方面(附纠正方法),在Photoshop中,即使看起来非常科学的对齐、同样的形状大小和色值,也可能与我们现实中感受到的完全不一样。优秀的设计师应该感受到这些细微的差别,并且懂得去纠正它们,以今天这四个方面为例,以前没注意到的同学赶 ...

【 tulaoshi.com - PS 】

在Photoshop中,即使看起来非常科学的对齐、同样的形状大小和色值,也可能与我们现实中感受到的完全不一样。优秀的设计师应该感受到这些细微的差别,并且懂得去纠正它们,以今天这四个方面为例,以前没注意到的同学赶紧来涨个姿势!

以前我在做设计的时候,我靠Photoshop和Css告诉我对错:如果Photoshop显示两个图形对齐了,那么他们就是对齐了;如果两个不同形状的图形大小是一样的,那么他俩就是一样大的;如果两个颜色有同样的色值,那么他们看起来就是一样的颜色。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/ps/)

这个方法看起来很理性,但是其实是错误的工作方法。

软件是很理性的,但是软件不能把人类感知也加进影响计算的因素中——这就是说,软件并不能理解在上下文情境中的物体和物体之间的关系,在整体视觉语言的环境下和人类如何感知物体。

人类非理性的思维会判断物体看起来是否视觉上正确,因为我们可以看到和理解上下文环境,而这正是计算机无法做到的。了解这些细微的差异,并且知道如何调整他们的设计师才是好的设计师。很少人会注意到,大部分人会忽略。

下面让我们来看几个例子。

对齐+视觉权重

计算机没有计算视觉权重的精确方式,他只能依赖某些确定的信息,比如长宽,x/y轴坐标。作为设计师,我们需要通过一些被称之为光学调整的东西来弥补这一点。

播放按钮的三角形是对其圆的中心吗?并不是。绘制一个辅助的长方形可以看出来,三角形的中心并不在圆形的中心。

7gh20151218

左边的按钮是中心对齐的,但是看起来却不在中间。

颜色

颜色的光学调整更细微。再一次重申,这是关于视觉权重和颜色何如展现。

实心的图标和文字用了相同的颜色填充,但是他们其中的一个颜色会看起来会淡一点。

6gh20151218

左边的图标和文字使用了相同的色值,右边的组合用了不同的色值。

你可以发现图标的颜色细微的比文字要重,为了调整它,可以让图标颜色变浅一些,或者让文本变暗一些。

5gh20151218

我建议在使用设计软件的时候,使用HSB色值代替RGB色值。好处就是可以调整颜色的明暗。

面积

面积是我们大脑感知物体的大小(包括文字)。如果我们用圆形和正方形来思考这个问题,一个120px长的正方形比一个120px半径的圆面积要大,如果要使他俩看起来一样大,圆的半径要稍微大一些才行。

4gh20151218

左边的形状都是120 x 120 px,远看起来小一些。右边的圆是126 x 126px,面积和正方形差不多了,看起来差不多大。

这也是一个很细微的调整,但是这很有利于整体的设计。这是对元素非常轻微的调整,上下调整1像素,可能感觉就对了。

3gh20151218

注意Didot字体的上部下部的曲线是怎么变化的,在字高之上,落到基线之下。在这7个字母上都有体现。

在字体设计上亦是如此。带有弯曲弯曲字母的上升或下降是在大写字高、基线等之上。如果你用garamond字体写了一行字,然后画一条基线,一条字高线,你可以看见弯曲的笔画时垂直于这些县的。如果没有超过,单个字符会显得比旁边的字母要小。

大写文字

最后,有一个视觉调整是必要的:如何排放大写文字和普通的大小写文字。大写文字比普通的文字要突出的多,需要调整来达到视觉平衡。

2gh20151218

上面的大写文字似乎比旁边的普通文字要大,下面的大写文字调整了2像素,让他们看起来一样大。

除非目的是让大写的文字更佳突出,大写文字应该始终减少几个像素,例如16px减少到14px,或者12像素减少到11像素。

当在做大型项目的时候,每一个细节的设计会叠加起来影响整体的设计。好的设计需要我们对细节的关心。

一旦他们称为工作流程的一部分,文字大小减少2像素,或者轻移三角心10个像素让他去到合适的位置,就是这种细微的调整会让设计看起来更完美。

1gh20151218

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/ps/)

电脑或者人工智能无法完全理解设计的上下文情境,所以他们不能做出准确的调整而设计师却可以。直到有计算机能对设计情境中分离出来的独立的组成部分做出合理的判断,我们都不能只是依赖计算机给予我们设计的解决方案。我们不能依赖计算机告诉我们所有的想法,我们可以依赖我们的眼睛和我们的直觉。设计师在日常工作中磨练自己的直觉,所以我们信任我们的直觉,即使计算机告诉我们相反的答案。

来源:http://www.tulaoshi.com/n/20160129/1478976.html

延伸阅读
曾经发表过多篇关于管理、设计和产品团队运作相关文章的Facebook产品设计总监Julie Zhuo,最近发表了一篇文章,探讨究竟怎么样才是一个好的产品经理,以及一些设计师可以学习的地方。 所以,设计师可以从产品经理那边学到什么? 答案:如何穿西装。第一步:如何挑选与衬衫搭配的领带 不管他们的职称是什么,那些创造出伟大产品的人们总是...
年底各大公司都在进行绩效考核了,今天华为的EDC尤原庆同学将这几周的设计师绩效访谈总结了一下,归纳出8个优秀设计师必备的关键能力,新年不断进步,来看看你合格了哪几个吧。 设计师绩效评价主要来自几个维度:设计产出、项目结果、工作态度、专业技能、能力成长、设计展现、用户满意度、客户满意度、业务方满意度等。所以业务方满意度是设...
相信大家对于婚检并不陌生,现在国家对于婚前检查不是特别严格。但是,做婚检对于婚后的幸福生活有着极大的意义。因此,在结婚之前还需了解一下婚前检查的项目以及需要注意的事项。今天就让图老师小编告诉大家一些关于婚检方面的知识吧。 婚前检查是夫妻双方领证之前需进行的一项身体检查,通过体检可了解自己及爱人的身体情况,...
优秀的设计师手艺不一定比你好,但效率肯定比你高。想提升设计效率,完全可以从积累素材、设计过程、完稿、文档的整理下手。具体的让Ping 老师手把手来教你吧。 最近明明(人家真叫明明)和我抱怨说:老大总是说我设计东西慢,效率低,真是烦死了,要知道设计的好又快的东西这个世界上是没有的!然后发了一张大家都看过很多遍的图片: 在安慰...
在设计项目的时候,你是否常为色彩搭配而苦恼?为了帮助设计师加快工作速度,如今网络上也有越来越多的色彩搭配工具可供设计师们使用。本期给童鞋们带来了12个好用的在线色彩搭配工具,来看看哪款工具更适合你。 色彩搭配工具 Kuler 对于Adobe Kuler,相信很多人都很熟悉这套工具。你不仅可以在上面寻找到预置的配色方案,也可以创建属于自...

经验教程

296

收藏

95
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部