设计中的图片运用技巧:简单清晰

2016-02-17 04:12 17 1 收藏

在这个颜值当道,屌丝闪边的时代,拼不过颜值拼内涵,只有知识丰富才能提升一个人的内在气质和修养,所谓人丑就要多学习,今天图老师给大家分享设计中的图片运用技巧:简单清晰,希望可以对大家能有小小的帮助。

【 tulaoshi.com - 平面设计 】

你如何展示一张非常不错的照片?非常简单,保持清晰,所有无关的元素都不要出现在页面上。

设计中的图片运用技巧:简单清晰,PS教程,图老师教程网

Ambient摄影俱乐部出版了它们自己的月刊杂志来提升俱乐部的影响力。因此,他们希望杂志的视觉效果能够显得更加专业,以迎合范围更广的读者。Ambient是一本内部自己使用大幅激光打印机打印的杂志,这也意味着打印的质量相当高,而且能够使用全幅面无边距输出。版面主要以图片为主,文字为辅。

那你如何展示那些摄影作品?其实这与你要展示其它东西一样将所有无关元素清理出版面!具体在这个案例中,就是将那些边界、阴影、复杂的字体及暧昧的信息传达替换成简洁的字体及干净开阔的空间。

看一下我们是如何改造:

设计中的图片运用技巧:简单清晰,PS教程,图老师教程网

这本杂志,有个好名称,有张好照片及少量的文字,但上面的设计,却显得过于喧哗。版面上有太多复杂的元素使到你无法将注意力放在照片上!柯达黄如果是小面积使用效果非常不错,但在这里,却显得过于抢眼。杂志名称使用粗体及全大写字母,而且还有描边效果及使用了阴影,这与Ambient一词所传达的意义是背道而驰的。而照片,感觉漂浮的效果及加边框的设计,再加上那些过于飘逸的字体,都使到整个版面显得过于造作及不真实。让我们将这些复杂琐碎的东西通通扔掉,直接让图片来成为一号主角。

繁琐复杂的设计

Ambient杂志的封面有太多毫无必要的细节,这些细节除了让眼睛感到眼花缭乱外,对信息的传达毫无用处。

设计中的图片运用技巧:简单清晰,PS教程,图老师教程网

设计中的图片运用技巧:简单清晰,PS教程,图老师教程网

描边及阴影

描边及阴影效果是一把双刃剑,一不留神,就会造成杯具。在我们的想象中,这些效果应该是一种悦目的装饰,会让元素显得更加整齐并且让文字更加突出。但在原设计中,我们的眼睛感受不到这种悦目。与一个简单直观的边距设计相比,我们在看原设计时,眼睛穿越了三个不连贯的区域及三条边界线,再加上阴影及三种颜色。而字母(上方右图),还有很多角位区域在阻碍着我们的视线。一句话:版面拥挤并且涣散。

互相抵触的字体:

不协调的字体大而无当的杂志名称区域与矫揉造作的花体标题放在一起,使整个版面显得嘈杂不堪。

设计中的图片运用技巧:简单清晰,PS教程,图老师教程网

作为名称的字体,采用粗体并没有什么不妥,但问题是这种字体在这里并不起作用。Bauer Bodoni Condensed字体显得过于厚重及拥挤,其中的粗壮区域阻碍了阅读的节奏(上图)。而那些细小的衬线及非常幼细的线条也让眼睛无从适应。字母所形成的正负区域基本一致也增加了整体视觉的平淡感。描边效果使视觉效果显得更差。

设计中的图片运用技巧:简单清晰,PS教程,图老师教程网

上图所显示的文字负空间区域的形状让我们可以更加清晰观看到其中所形成的一些琐碎及毫无意义的凹位及突出的细小元素。

设计中的图片运用技巧:简单清晰,PS教程,图老师教程网

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

标题采用了Apple Chancery字体,它给人卖弄姿色及浮夸的感觉,这种字体多见于一些邀请函、宣言及私人文件中。问题在于这种字体过于活跃及没有半点正经,象钢笔效果的线条随意飘散,而且其角位的形状也是千奇百怪(见下图),使到文字形成不了一种节奏感。这两种字体加在一起,只会让读者的眼睛受不了。

设计中的图片运用技巧:简单清晰,PS教程,图老师教程网

简单化:

改造从清理这些无关元素开始。

设计中的图片运用技巧:简单清晰,PS教程,图老师教程网

简单,安静,漂亮:将刚才我们所说的各种闲杂人员清理出场!第一步:将字体扔掉;第二步:将颜色及阴影去掉;第三步:见下图,将白色边框拆掉,将图片放下来,去到边缘上。这个时候,仍然形成了两个区域,图片不再放在白色背景上,而且我们也开始留意到照片的美感。

设计中的图片运用技巧:简单清晰,PS教程,图老师教程网

选择颜色:

在照片上不同区域取色会形成不同的视觉感观。

设计中的图片运用技巧:简单清晰,PS教程,图老师教程网

设计中的图片运用技巧:简单清晰,PS教程,图老师教程网

设计中的图片运用技巧:简单清晰,PS教程,图老师教程网

设计中的图片运用技巧:简单清晰,PS教程,图老师教程网

设计名称:

使用一种简洁的字体来与简单的版面相呼应。Helvetica Neue Ultra Light作为一种经典字体,既传达出空灵的感觉,也具有精致感。

设计中的图片运用技巧:简单清晰,PS教程,图老师教程网

设计中的图片运用技巧:简单清晰,PS教程,图老师教程网

设计中的图片运用技巧:简单清晰,PS教程,图老师教程网

调整文字:

为了使整个版面的声音降低,呈现一种优雅的视觉感,我们整个杂志封面都使用了Helvetica字体系列。文字后退,照片成为主角。

设计中的图片运用技巧:简单清晰,PS教程,图老师教程网

原设计的版面中,文字只是简单的放上出,缺乏精心的设计。

原来的文字排版是任何一个人都可以做到的,这里左对齐,那里右对齐,然后个别再缩进一些。这样的文字排版仅仅是起到传达信息的作用,但没有吸引力。通过对文字的精心安排,我们可以使文字传达出一种美感、优雅及权威。在下图,标题文字均采用同一种尺寸,只是粗细的区别,并且采用了中间对齐的排版,象电影职员表的设计。其中的文字长度会随着内容不同而改变,整个文字区域显得非常有趣,而且每一期给人的感觉都有所不同。几个小标题就已经对整个背景空间形成了不规则的分割。期刊号、出版日期及价格等文字尽量缩小,放在了上方名称的字母间,而且文字采用了细体,并呈灰色,由于位置的独特,所以他们虽然尺寸很小,但仍然能够轻易阅读,并且成为了一个视觉点。

设计中的图片运用技巧:简单清晰,PS教程,图老师教程网

视觉统一:

对于杂志来说,每一期的图片、标题及颜色都会有所不同,但整体结构却是固定的。重复版面的构成会快速建立强有力的而且连贯的视觉形象。

设计中的图片运用技巧:简单清晰,PS教程,图老师教程网

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

设计中的图片运用技巧:简单清晰,PS教程,图老师教程网

轻巧、清新及干净的视觉形象:

在白色背景上放置照片效果永远出色。就算在高对比的版面上,纤细的杂志名称仍然统领着整个空间。标题(留意其呈现后退的浅色)在使用时为了使边距统一,左右会相应作移动。留意上方两个封面设计中,字体颜色均来自于图片中的颜色,这可以确保任何时间,整个版面都形成一种和谐的视觉效果。

没有出血位?

对于一些打印机来说,可能不能实现无边距打印,那下方的版面结构就非常适合。我们让照片与纸张保留清晰的边距,一般来说,大约四分之一英寸。

设计中的图片运用技巧:简单清晰,PS教程,图老师教程网

设计中的图片运用技巧:简单清晰,PS教程,图老师教程网

应用白色背景,使到其设计可以适用于在任何打印机上输出。如果有一系列非常捧的照片按这种版式排版,出来的效果将具有一种强烈的画廊展示氛围。

名称太长?

这个版面的结构及Helvetica字体已经足可应付任何长度的名称!如果名称太长,不要将文字随意挤窄或者变成两行,只需要将文字变小一点即可。

设计中的图片运用技巧:简单清晰,PS教程,图老师教程网

两种色调的名称:两个词中间不要留间距,使整体看起来更具现代感。而两个词所用的颜色略有差别(见上方),传达出文字的两个意思。在这里,采用类比色关系的红色及橙色,使整个图片显得温暖热烈。

设计中的图片运用技巧:简单清晰,PS教程,图老师教程网

进入论坛参与讨论和交作业

来源:http://www.tulaoshi.com/n/20160217/1578379.html

延伸阅读
标签: 摄影技巧
光,作为摄影的基础,其光质和光位在人像摄影中对摄影作品有着非常重要的影响,尤其是人像写真。那么,如何利用不同的光质和光位拍出同样优质的照片,下面将会为您介绍人像写真中光的运用技巧。 一、用硬光拍摄 所谓硬光,是指那些能够在景物表面产生明暗对比的阴影光线形成。这是在人像拍摄中,特别是拍摄人物写真这类题材的时候很少使用的...
标签: PS基础
一个好的网页设计会给用户带来记忆深刻,好用易用的体验。从网页设计的版式、信息层级、图片、色彩等视觉方面的运用,直接影响到用户对网站的最初感觉,而在这些内容中,色彩的配色方案是至关重要的,网站整体的定位、风格调性都需要通过颜色,给用户带来感官上的刺激,从而产生共鸣。 从色彩研究的方向来看,色彩分为色...
标签: PS PS教程
在学习中遇到问题可以到 论坛PS求助研讨 发贴交流! 相关PS数码后期教程阅读: Photoshop数码后期教程专题 相关教程阅读:简单运用PS让你的照片更清晰(二) 简单使用PS的高级锐化(一)——提高锐化精度    锐化水平:只要你明白点Photoshop图层,能找到“编辑”、“滤镜”菜单,会把PS的图像存...
本文作者Mark Praschan是一位具有将近十年经验的网页设计师,Web开发师,Web项目经理人。 文中强调复杂的高级效果能为设计增色不少,但如果用得不对,只会影响用户对重点内容的关注。高级效果可能正好是一项好的设计的冲击力所在,但即便如此,也还是需要一些更简单的效果与其配合。 简单的效果和技巧是建造当今设计的基石。比方说,如果你都...
标签: logo设计
基色要相对稳定 强调色彩的形式感 强调色彩的记忆感和感情规律 合理使用色彩对比构成空间层次 重视色彩的注目性 更多精彩内容请看: LOGO设计需要注意什么 LOGO设计注意事项

经验教程

100

收藏

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