平面设计技巧

为什么一张图片比三张图片更有力量?如何设计产品使用指南?如何在设计中通过各种对比产生层次感?如何使设计内外统一协调?如何设计一个独一无二的签名式 LOGO ?本文继续发扬实用主义,对这些问题给出了解决办法。五个设计技巧,开拓你的设计视野。

封面设计:小即是多

当你在设计时手头上有三张照片,你会如何处理?你会将这三张照片都用上,对吧?其实没必要!一张照片就已经能够使设计信息有效传达。在这个例子中,校区里的塔楼就已经能够传达出这所学校的本质,比用上三张效果更好!标题单独一行,文字中的背景颜色区域静静地传达出有关信息。


.

设计师有三张照片,但如果在版面上都用上这些照片,那你还要对这三张照片进行剪切,然后将它们挤进版面里。但出来的效果却是,这三张照片在版面中的样式很相似(相似的图片元素及图案),文字阅读起来很费力。所以,设计师又不得不将字体变得很粗,字体变粗后,又要找个地方放置学校的名字,所以在最下方设计师又加上一个紫色区域来突出学校名称。设计师越“设计”,封面就越虚弱。无论是学校信息还是所要传达的文字信息都在这些复杂的、太多人工痕迹的元素中消失得一干二净。封面可以说是成为“被侮辱及被损害”的对象。为什么会这样?因为设计师做过头了!解决办法:只让一张图片来说话!

平面设计技巧(一)

记住,在设计中,小即是多。学校的塔楼已经可以传达很多信息。简单的居中设计,就是直接让这张照片“说话”,然后加上文字就行了。注意在上图中,文字的背景区域并没有横跨整个版面,因为我们要让图片由上至下都可以流动。而上图右,学校的主色(紫色)及褐色与树的绿色形成吸引人的视觉效果,留意这三种颜色在色轮中的位置关系,绿色及褐色是紫色的补色的邻近色,听起来很复杂?紫色的补色是色轮中相隔 180 度的草绿色,而草绿色的两边邻近色就是绿色及褐色(留意色轮中的线条)。我们将这种颜色关系称之为“补色分割”( Split complementary )。

排版:文字应该与图片紧密配合

我们经常会接触到一些与电器、高科技产品,而设计一个描述式的版面其实充满乐趣。



a

a

原来的设计使版面变得复杂。对于这种小型产品的使用指南,我们的目标是要追求简单易读,让使用的人一看就知道文字是指哪一部分。但上面的设计却使这种联系断裂,也使到这张说明卡片的元素呈一个平放的“ L ”型,在上图中,图片放在一边,而文字说明则放在另一边。结果就是,产品显得很单薄,而页面中间那么重要的空间却空无一物。读者为了看明白这张卡片,不得不来来回回仔细对照。

平面设计技巧(一)

平面设计技巧(一)

在修改后的版面中,产品显得靠前,而且居中。我们将产品尽可能拉大,然后将各个要说明的部位用引线在其周围说明。非衬线字体容易辩认阅读。文字对比不强烈,整个版面显得干净清爽。并不需要象原图一样采用数字来说明。

最底部的联系信息排成一行,呼应产品的水平感。而文字都是同一种字体,只是样式不一样而已――用粗体和细体来形成对比。

版面:差别产生层次

哈钦斯大街广场酒店( Hutchins Street Square Hotel )是举行会议、宴会、接待及其它活动的理想场所,但如果你只是看它的这张价格宣传单张,没有人会觉得这家酒店有什么优点。它的版面缺乏生气,字里上的文字同一种字体,同一种尺寸,同一种的样式,同一种颜色,但都迷失在白色的海洋中――虽然页里上写满信息,但毫无生命力。

这种低调的设计很容易让人忽略,但你要记住,对于酒店来说,很多顾客第一个看到的东西就是它(也可能是最后!)。还是让我们花点时间来设计,使人瞥上一眼就能知道它要说什么。

平面设计技巧(一)

这个设计让人看起来并不象是一家酒店,反倒象是一个电子邮件的宣传版面,所有东西都是相同的,缺乏变化,而图表的细线看起来就象是用铅笔画出来一样,没有层次,没有视觉焦点。宣传的对象倒是美轮美奂(见下图),但问题是,如果这张价格牌本身不能吸引别人阅读从而使顾客走进这家酒店,里面再漂亮,也没有人知道!这张平淡的单张使所有的信息都变得暗淡。

平面设计技巧(一)

看一下我们改造后的效果:

平面设计技巧(一)

通过字体创造出层次感:只需要简单的对字体、字体样式及颜色作一些调整,就可以轻易使版面变得吸引。上图中:

1, 此处让人一看就知道是标题,其字体轮廓与桌子上的摆设有共同的特征;

2 及 3 ,粗体突出主要信息,而黑和白则告诉你这是两个不同的信息;

4 ,细体是具体的描述文字;

5 ,线条用了白色而不是黑色,线条不明显,使整个图表给人一种以行排列的感觉。

平面设计技巧(一)

(点击上图看修改后大图)

平面设计技巧(一)

 

通过颜色来创造层次:深中浅三色是用吸管在这张宴会厅的图片上取色的,我们用这三种颜色安排版面,轻易创造出层次感。深色用在图表的上方,而另外两种用来区分每一行。由于这三种颜色来自于酒店图片,使到颜色直接与酒店产生了联系。

版面:由外到内

要使设计的内部与外部有着相同的风格需要一定的技巧。怎么做?简单,将封面的字体、颜色、图片风格及主要的版式都搬到里面去。注意各种元素的比例,如绿色的使用比例及图片的大小,具体看一下效果:

平面设计技巧(一)

平面设计技巧(一)

平面设计技巧(一)

平面设计技巧(一)

人物采用轮廓形图片,没有背景,使到其不规则的边缘显得更有活力。对一张大图片来说,采用这种轮廓形的设计,可以加强图片的力量,使图片充满流动感。模糊的边缘传达了一种开阔及健康的气息。留意,两张图片在实际应用中都有一个直角形的部分,即图片直接去到出血位区域。而文字无论是左对齐还是右对齐,都与这种直角区域相似。留意设计中的标题,采用了一种非常幼细的字体,这种字体充满清新,一如版面的风格。两者配合,天生一对。

签名 LOGO :

还有什么图案比你自己的签名显得更独一无二?它完全属于你自己。所以当你有一项业务或项目是需要你最终来确认的――一个典型的例子就是公证人――那你为什么不直接用你的名字作为一个 LOGO ?

平面设计技巧(一)

一个签名式 LOGO 很容易制作。你只需要在纸上签个名,扫描进电脑,然后用钢笔工具描边。一个独一无二的 LOGO 就完成了。可以象上图一样,将白色的 LOGO 放在灰色背景上,当然,你也可以艺术一点――选择一种您喜欢的颜色。

平面设计技巧(一)

平面设计技巧(一)

字体调整:我们可以通过对字体进行恰当的调整及选择来加强设计。在这个例子中,经典的 Adobe Garamond 传达了一种久远、传统及权威的感觉,而粗壮的 Franklin Gothic 粗体加强视觉的传达效果。因为上述这些都是差别很大的字体,所以为了使它们在一起能够协调配合,我们需要对个别字体进行调整。在这个例子中,我们将 Franklin 缩小一些。留意在上图名片中,白色的标题放在灰色区域中,显得特立独行。

本文所用颜色数值:

平面设计技巧(一)

如何通过分割圆形区域来设计 CD 上的文字与图案?面对一组长名单时如何排版才显得吸引而不凌乱?如何将一张照片变成一个有趣故事?如何通过组建一个模板来设计册子?四个技巧,与大家分享。 

版面:将 CD 版面分成四等份使设计更加轻松

CD 已经成为大家都经常用到一种储存媒介,但其圆形的区域有时令设计师感到头痛。在这里,我们将整个版面分为四等份,能够使你轻易完成设计。

平面设计技巧(二)

将区域分成四等份:

平面设计技巧(二)

经过四等份的划分,整个 CD 形成了四个区域,使你在排版时能更好安排元素――图片在其中一个,文字在另一个,而标题或文字则占据第三个。在上图中,文字背景的颜色是从图片取色――这是最快获得颜色和谐搭配的办法。

平面设计技巧(二)

希望有更多的区域来表现图片?简单,将相邻的两个区域合并即可,有四种排版形式(见下图)。留意在下图中,所有四种设计中的文字都为了配合 CD 的边缘弧线而作了调整。

平面设计技巧(二)

平面设计技巧(二)

避免上图这两种排版形式:如果图片占用了三个区域,则使图片的视觉效果过于强烈,导致整个版面不平衡。图片对角摆放,虽然显得活泼,但也显得过于复杂,而且使整个版面缺少一个视觉焦点。

文字:两种方法安排名单

通过漂亮的文字及排版来安排名字及职位――包括工作人员、捐赠人、赞助商及参与者等,是向这些人最好的敬意。其中的关键是在设计名单时要简朴正统,不张扬,不夸张,为了达到这个目的,我们只使用一种经典的字体,尺寸要小,而且处于版面的主要位置,两种方式:

1:象电影演员表一样

无数部电影在安排演员名单时都采用这一种模式:名字及职位各向中间对齐,通过字体的粗细来区分名字及职位。而在颜色上则非常接近。我们可以简单地在矢量软件中使用“制表位”工具来调整。

平面设计技巧(二)

平面设计技巧(二)

博物馆职员名单的设计

2 ,将名单合并成一个整体区域。

平面设计技巧(二)

这种排版会使读者在阅读时速度减慢,但却显得更有艺术气息。用圆点来区分各个名单。整体形成一个矩形(上图红色直角处)。我们在段落面板中选择“所有行齐行”按钮即可实现(上图),为了达到最佳的效果,你可能需要对个别文字进行一些细节调整。

平面设计技巧(二)

出来的效果清新优雅

平面设计技巧(二)

版面:划分图片区域,使图片讲述更多的故事。

无论你采用的是什么图片,图片中的每个人、每个对象及每个元素都有他们各自的故事。这就是我们为什么会对这种技巧情有独钟,爱不释手。通常,当人们要对一张图片进行说明时,都是将所有文字结合在一起来说明。而在这里,我们反其道而行之,打散这些说明,将文字各就各位,各自去到具体要描述的对象上,这种手法非常有趣,而且阅读起来也更加明了,而且由于文字区域较大,非常适合我们这些总是感觉时间不够用的现代人阅读。文字可放置在描述的对象的上方或者旁边,或者兼用也行:

平面设计技巧(二)

点击上图看大图

平面设计技巧(二)

如果你想让这张照片透露更多的信息,你还可以象上述一样,在你还要发挥的地方编号,然后将所要交代的背景在图片外说明,如上图中, 1 的文字为:活动中心,虽然活动中心设备乏善可陈,但却还是深受欢迎; 2 : JAVA 小姐,这已经是她的第三杯咖啡了,而现在还只是早上八点。她在上第二节课前还要喝第四杯……。这些信息你可以随意发挥,让整张图片显得更加有趣,还带点幽默。

版面:建立页面模板令你快速完成一本协调的册子设计

产品手册设计要从一而终!在设计时应该能够使你快速协调各个版面,而且能够经受得起无数次的“最后一分钟”(甚至最后一秒!)的修改。 Crate & Barrel 公司在设计产品手册时应用了一种效果良好的版面安排,使它可以轻易达到这个目标。在这一小开本尺寸的产品手册中,每个版面都被分成 6 个正方形区域(这就是一个页面模板)。每一个正方形区域中都放置图片或文字,但同一个正方形区域中绝对没有同时放置文字及图片。文字全部采用同一尺寸,而图片都是采用同一种类型及风格的照片,而且没有经过繁琐的特效加工。出来的结果就是:整本册子显得干净清新,就象他们的产品给人的感觉一样――而且做起来也一点不难,只要按着模板摆放元素就行了。

平面设计技巧(二)

平面设计技巧(二)

字体采用一种简单清晰的字体,与图片相比,文字形成了一个低调的区域。只用一种字体尺寸,一种样式类别(如在整本小册子中,正文文字采用 Helvetica 细体,标题用粗体,而价钱用粗黑体)。这种文字安排使其没有与图片互相挤压,让人看起来很舒服。

平面设计技巧(二)

对于整个展开页来说,整个版面就有 12 个正方形的区域模板。图片可以占据其中一个,也可以占据九个,象上图一样,图片的排放是可以很灵活的,使每一页中图片与文字都产生空间上的对比(大与小,多与少)。特别留意一点:上图中,文字没有“包围”图片,而是与文字的直线边缘直接对齐。页面小标题及页码放在最上方一个细小区域中。

本文所用颜色数值如下:

平面设计技巧(二)

如何既保持网页整齐又能提供尽可能多的产品信息?为什么很多文字我们设定为对齐时,但眼睛却还是感觉不整齐?如何利用空白的区域来产生具冲击力的作品?如何制作一张充满个性的卡片?利用简单的几个步骤,我们可以制作出充满现代质感的价格牌设计。五个小技巧,与大家分享。 

网页:图片自动翻页的设计传达更多的信息

Alien Skin 软件的网页在展示众多的产品时仍能保持版面整洁干净。他们使用了图片自动翻页的技巧来实现这一目的――当鼠标指针移到图片上时,图片便转换成产品说明。

平面设计技巧(三)

不需要点击图片,便会自动出现产品说明。 Alienskin.com 的介绍产品的网页通过整齐的网格来安排版面。每一个产品都有另一张文字说明图片,让观众能够更深入了解。只需要将鼠标放在图片上,不需点击,便会出现产品的简要说明。

平面设计技巧(三)

利用 Adobe Golive 创建自动翻页效果

这种特效需要对每一种状态都建立一张单独的图片:正常状态,鼠标滑过时状态,点击状态及鼠标移开后的状态等。每一张图片都必须是相同的尺寸。首先对一张正常状态时用的图片起一个名,比如 product1.gif ,然后在其它状态下根据这个名称安排其它文件(如, product1_over.gif, product1_down.gif 等)。将它们都放在同一个文件夹中。将正常状态时显示的图片拖到 Golive 页面上, Golive 软件会自动按你起的名称安排好不同状态下显示的图片(见上图)。

字体:如何“真正”对齐文字

你是否有注意到,当你在电脑排版中,将文字对齐后,但却感觉有点不对劲?这是因为,你对齐的是边缘,字母并没有完全对齐,因为不同的字母结构不一样,有的是弧线边缘,有些又有一些小横杆突出来(如 t ),有时还有一些引号,这些都导致设定为对齐时仍然感觉不自然。在 Indesgin 软件中的“ Optical Margin Alignment ”功能可以弥补这一不足。

平面设计技巧(三)

在使用“ Optical Margin Alignment ”功能前的效果。你的电脑认为它们上述已经是对齐的,但你的眼睛告诉你说,好象还不齐啊。字母及引号使到边缘产生起伏不平的感觉。

平面设计技巧(三)

使用“ Optical Margin Alignment ”功能后的效果。我们在 Indesign 软件中,选择 Type>story> Optical Margin Alignment ,然后看一下有什么变化――你会看到有些字母中会超出对齐线一些。有趣的是,这个时候,你看起来倒是真正对齐的样子。在该功能的对话框中设置的参数 , 一般来说,应该与字体的大小一样。

图片剪切:大小及位置决定一切

图片以不同的大小及不同的摆放位置来排版的话,可以产生不同的冲击力。在下图中,我们将一张尺寸较小的肖像图片放置在一个空白区域的下方,完美地与标题文字的意思搭配。

平面设计技巧(三)

空白区域的力量:这种排版方式使版面中的各个元素一目了然。虽然空白的区域占了大部分,但给你的感觉却一点也不单薄,相反,充满了力量感。这位不幸的 CEO 肖像背后是一块厚重的黑色区域,使该人物给观众形成一种分离感及距离感。之所以能够产生这样的视觉效果,关键是人物图片的尺寸很小,而且放得很低。她深色的外套在这个设计中可以说是一个有利因素,使到给人的感觉是她的身体与黑色的背景混为一体,使其与她那忧郁的面部表情形成强烈的对比。标题设计不能设计得过于夸张显眼,应该平实一些,标题的位置同样应该以平实为主(否则标题会使整个版面显得过于紧张,从而削弱了下方肖像所传达的力量)。

碎纸片组成的卡片设计

为了向亲朋好友宣布他们的儿子 Drew 终于来到这个世界上,我们的朋友阿丹与米高这对夫妇希望以个人卡片的形式来传达这个喜讯――还有什么东西比你自己书写的文字显得更个性化?看一下我们为他们所做的设计:

不需要剪刀哦。虽然碎纸片看起来象是贴上去了,但这只是在电脑中的效果。这个卡片刚好可以用您的那台桌面打印机打印。首先写上一些活泼有趣的词语,然后将这些词语扫描进电脑中。然后用 Photoshop 软件剪切成一片片,再应用一些阴影效果,再将这些碎片置入你的版面中,排好它们,就可以打印出来了。这种设计没有复杂的技巧,但绝对充满个性化,值得一试 !

平面设计技巧(三)

平面设计技巧(三)

平面设计技巧(三)

Adobe Illustrator :焕然一新的价格牌

宝马汽车( BMW )的网页横幅中,清晰及有趣的价格牌模仿收银机的价格显示吸引着观众的眼睛。这个设计很有趣――旧式的价格显示设备,古典的字体,陈旧的颜色,但明暗的处理却赋予它现代的质感。

平面设计技巧(三)

BMW 网页广告横幅

平面设计技巧(三)

第一步:画三个圆角矩形。在图片面板中,双击图层 1 ,将其命名为“ Tabs ”。然后复制这三个矩形。接着,应用阴影效果: Effect>Stylize>Drop shaodw ,打开预览,输入的数值如下:模式: Multiply ,不透明度: 50% ; X 偏移: 0 ; Y 偏移 Op2 ;模糊: Op2 ,颜色为黑色。然后按 OK ,应用阴影特效。在图层面版上将该图层锁上。然后,再创建一个新图层,命名为“ Highlight ”,将刚才复制的三个矩形粘贴到该图层上。最后,再创建一个文字图层,输入价格牌上的文字。将这个文字图层拖到“ Highlight ”图层的下方。

平面设计技巧(三)

第二步:在 Highlight 图层中,我们用钢笔工具画一条平滑的曲线横跨三个矩形。然后在 Pathfinder 面板中,点击 Pide 图标(上图黄色处)。这样我们就将这三个矩形分成六个区域。

平面设计技巧(三)

第三步:在选择这六个区域时,将它们填充为白色。用直接选择工具(空白箭头)选择下面的三个区域选择,然后删除。再选择上方的三个区域,除低其不透明度,我们设置的数值为 60% 。

一个耀眼的价格牌就做好了。

本文所用颜色数值如下:

平面设计技巧(三)

如何仅仅利用简单的线条设计一个充满典雅风格的封面?在版面上如何放置多张图片?在一张大图片上加上多个说明文字区域,出来的效果永远吸引人。如何将你公司枯燥的产品名称变得更加吸引?如何通过矩形区域元素来制作一个漂亮的网页?让我们一起继续杂谈!

图片:线条构成文件

用线条(技术上说,是一条线)描绘的元素可以传达出非常漂亮或电子信息感的印象,它可以将复杂的图片简化,并将本来平淡的元素变得有趣。对于一些原来缺乏冲击力的图片,这样处理是一种非常不错的补救办法,如果应用在网页上,在信息交换上也效率十足。

平面设计技巧(四)

居中排版:如果说,设计一个典雅的封面有什么技巧,那就是,用一种温和的颜色,字体尺寸要小,有大面积的开放空间,并用线条来描绘元素(包括边框),线条的粗细均相等。

平面设计技巧(四)

不同的线条:

找一张有清晰轮廓的照片,用钢笔工具沿边缘描线。你可以将不同的照片结合在一起也行。如果是对字母、数字及符号进行描边,那更加容易。线条可以是多种多样的,可以应用细线,粗线,点线或加上各种颜色的线条(见上图的几个例子,从左到右:描边,粗线条,点线,重叠)。一般来说,线条越细,出来的效果显得越经典,很有艺术味。

封面:设计一张图片相框式的封面

最近你有没有去过售卖艺术品的商店?用多张相片放在一起组成的相框现在特别热销!它们显得干净整洁,象网线排列,挂在你家的墙上,蓬荜生辉,当然,应用在页面上,效果同样不错。设计师长期以来都在使用网格线来安排版面,所以借用一下也合情合理。

平面设计技巧(四)

多张相片整齐放在相框里,效果当然要比那些在墙上挂满尺寸参差不齐的相框出来的效果要好很多。应用在设计上,同样有这种效果。注意上面大图中这个版面的层次感:背景区域是采用一种中性的颜色,可以同时与图片中的深色及浅色形成对比,从而使整个版面呈现深、中、浅的层次感。

平面设计技巧(四)

要应用这种方法时,首先要确保在一个版面中所有的图片尺寸要一样大。然后再根据图片的数量来组织成行或列或组,位置可以是向页面中心对齐(稳定、平静)或偏向一边(紧张、兴奋)。

平面设计技巧(四)

字体要小!均中或偏向某一边,效果一样不错。

版面:在一种特别的照片用上多个说明

在我们前面的一篇文章中,我们曾经告诉你我们是很喜欢这种在图片上加上多个说明的排版技巧的,要记住的是:一定是要多个说明文字,而不是仅仅一块文字。这种技巧用在一些大图片上,效果特别不错,象是在同步传达图片的信息,但我们使用这种技巧最大的原因是,每一张照片我们都有“很多个故事”要讲给观众听。

平面设计技巧(四)

(点击上图看大图)

半透明的文字背景:

这张照片魅力十足,所以在使用上,照片应该尽可能放大,然后直接在图片上方使用说明文字。背景框线条一定要细,字体形式要简单,切忌使用花里花俏的字体,某些背景设为半透明(可以填充浅灰色,再设置不透明度),使图片局部传达一种若隐若现及灵巧的感觉。

名称:在名字中加进图片

有时候,产品名称与产品本身就是天生一对,试一下这种技巧,将文字与图片紧密结合,可以比单独的文字给人留下更深刻的印象。

平面设计技巧(四)

有两种情况:一种是将图片直接插入,如上图中,盆景是一个说明性的图片,很容易“阅读”,加进 IKKO 的名称中。从上图示意图可以看出,要将图片当作是一个字母来对待,各个间隔要相等。

第二种情况:将图片代替其中的一个字母

平面设计技巧(四)

这种情况不是总会发生,即你的产品不仅仅配合文字意思,而且其形状还与名称中其中一个字母形状接近,如上面的例子,其产品刚好形成其中一个“ h ”,或者一个边缘圆滑的球形成为一个“ o” 。虽然你不一定总这么好运,但如果碰上了,尝试一下,不亦乐乎?

网页:矩形组合

如果你将一个元素、颜色或者位置组合作为一个视觉元素来重复应用,那你就无形中创造了一种“风格”。如果这种重复应用能够给人留下印象,那你就可以将它作为一个主题。主题比文字更容易“阅读”,还能够给人留下深刻印象。为了说明这一点,我们看一下 Parc Rittenhouse 公司是如何利用矩形及春天的颜色来作为它们网站的主题:

平面设计技巧(四)

平面设计技巧(四)

大矩形,小矩形:

上图大图中,五个小的正方形组成了导航区域,而页面中一个大的矩形区域就放置着大标题。在每一个矩形中,白色的文字都是放置于左下角,形成一种图案美。上图小图中,当你点击其中一个小矩形链接,该区域就会变成白色,同时,下方大矩形背景颜色会变成与点击的小矩形原来一样颜色,而且,文字标题同样是位于左下角。而以树叶构成弧线边缘的标志,则与所有的矩形形成了鲜明的对比。

本文所用颜色数值:

平面设计技巧(四)

如何让标题与图片合二为一?阴影并不仅是一个不起眼的元素,完全可以充当大任;如何为多彩的 iPod 产品搭配颜色?一个简单的人体轮廓却能产生极佳的视觉效果;如何利用照片来安排职员名单?五个实用招式,助你开阔设计视野。

版面:设计漂亮的单行标题

标题当然很重要,但在设计中如果图片也很重要时,你如何将两者合二为一?试一下这招:将标题设成单行,这一行要非常细,但却很宽。全大写的字母传达了庄严和力量,而字体较小则显得权威感十足。这种设计关键是文字背景要设成透明,使标题及图片合二为一。

平面设计技巧(五)

平面设计技巧(五)

单行标题可以与图片完美融合,虽然文字很小,但其位置放在靠近版面的中间位置,自然使其成为观看的焦点。做起来不费吹灰之力,首先我们画一个很宽但很细的区域,降低其不透明度(这里我们选择了 70% ),并且加上一点阴影,在上面放置文字标题,增大字符间距(我们选择 200% ,见下图)。

平面设计技巧(五)

LOGO :当阴影成为故事的另一半

就象身体语言传达另一种意义一样,阴影同样诉说着另一种“声调”,利用阴影,我们可以使版面增加更多的信息。一些全实色的轮廓图片非常适合用来制作阴影的效果。

平面设计技巧(五)

经典的衬线字体传达了三圣颂( SANCTUS )宗教般的优雅与威严,采用小写字母可以弱化这种字体锋利的线条。天使的阴影元素传达了一种沉默及神圣的信息。如果采用一个常规清晰的天使形象,整个标志的力量感反而削弱。

平面设计技巧(五)

下面是利用阴影设计的另一个例子:

平面设计技巧(五)

蓬松的棕榈树叶的阴影形成一架喷气式飞机,传达了一种间接的信息。你可能需要看上一两眼才会留意到飞机的存在。棕榈树及飞机都是一些剪贴画的素材,我们将原来黑色的飞机素材减低其不透明度至 20% ,并在 PS 里采用高斯模糊对其边缘进行软化。出来的效果就是:一虚一实的两个素材既形成协调统一,而且信息也互相得到加强。

颜色: iPod 好色!

颜色永远不会单独存在,它总是受到周围其它颜色的互相影响。在设计多彩的 iPod shuffle 展示版面时, Apple 公司采用了强对比效果使其小小的 iPod shuffle 突围而出!

利用补色搭配创造强烈对比:

平面设计技巧(五)

在本网站“透视色轮”一文中,我们已经讲述过,互为补色的两种颜色能够形成强烈对比,特别是这两种颜色区域一大一小搭配时效果最佳。上述的设计正是对这种颜色关系的最好说明(最右边图接近补色搭配)。为什么补色能够形成强对比?因为互为补色的两种颜色,在颜色关系上它们两者之间不存在共同的颜色,从而形成了一种紧张的对比关系。

利用颜色明暗来形成对比:

平面设计技巧(五)

上图左的设计是将明亮的颜色放在黑色区域上形成强烈对比,而上图右将银色放置在灰色的背景中传达了一种协调之美。

图片:设计人体模特效果

说到 iPod ,那我们可以再谈谈同样具有 iPod 风格的设计,你可能已经在一些有关 iPod 的广告中看到过这种风格,在广告中的人物只有轮廓,没有细节。这一招我们可以拿来在其它地方用一下,比如,作为衣服展示的人体模特:我们将模特的所有细节都去掉,只留下身上的衣服,不用想都知道:这件衣服理所当然会成为读者的视觉焦点。

平面设计技巧(五)

上图左的图片,说不上好也说不上坏,反正就是没有什么特色,显得很普通。而象上图右这样的处理,则效果完全不一样,极具视觉冲击力!

但你有没有注意到一点:原来图片中的这个模特的发型太过淑女 Feel ,而我们希望是一个辣女形象来配合这些服装宣传。自己当一回发型师吧,在 PS 里用橡皮胶工具或其它涂抹工具对她的发型动一下:

平面设计技巧(五)

在实际的推广中,你可以只保留一件衣服或两件同时用上也可以:

平面设计技巧(五)

这种设计在实际中其实还有一个好处:使你寻找图片更加灵活,长得漂不漂亮没关系啦,反正两眼一抹黑。

如何做这种效果?其实并不难,不过所用的图片必须是有清晰的轮廓,里面的衣服等元素没有被其它元素阻断。 PS高手就可以跳过下面的制作过程说明了,新手就看看吧:

平面设计技巧(五)

一、创建选区:在 PS 里,将前景色设为白色,背景色设为黑色。用钢笔工具或其它工具将整个轮廓勾好并作为一个选区,将所选区域复制到一个新层上(图层 1 ); PS :图层 > 新建 > 通过拷贝的图层。

平面设计技巧(五)

二、填充背景:选择背景图层,将该背景图层填充为白色。接着,在图层 1 中,将想突出的衣服的区域勾出来并激活选区,并同样复制到一个新层上(图层 2 ); PS :图层 > 新建 > 通过拷贝的图层。

平面设计技巧(五)

三、填充整体轮廓:选择图层 1 ,按住 Ctrl 键并点击图层面板上的缩略图载入选区。接着建立一个新层(图层 3 ,见上图)。按下 X 键将前景色变成黑色,然后按下 Alt+BackSpace 键填充黑色。取消选择,将图层 1 隐藏。大功告成。

其实这种效果还有一个变化,即,里面不是填充黑色,而是用线条表现:

平面设计技巧(五)

用相片设计名单:

很多时候我们在设计公司管理层人员名单时,除了简单的将名字单调地列出,并没有多少变化。在下面的例子中一个关于某大学的人类学部门的职员名单设计,我们采用每个人的照片来设计,显得更加亲切,而且整体给人更象一支团队的感觉。要注意的是:无论是图片的剪切、字体及颜色都要统一,切忌凌乱。

平面设计技巧(五)

点击上图看大图

协调一致:在一个有很多琐碎元素的版面中,一定要保持统一协调,不要有太多的变化,如在上图这个设计中的照片,不要心血来潮,将一些相片设计成矩形,另一些又是圆形。照片及人员介绍的边框尺寸一样,连阴影都要保持一致。照片中,人物的脸部区域在照片中所占比例也大致相同。颜色呼应使用,字体重复应用。整体版面象是一个具有爆发状的元素,充满能量:

平面设计技巧(五)

本文所有颜色数值如下:

平面设计技巧(五)

封面上需要采用非常多的职员图片时,如何显得更有活力?用图片代替图表上的数字使表格显得更有趣;如何轻松让一个正方形的封面设计得更有吸引力?水平移动的网页设计给人另一种的视觉效果;如何设计简单醒目的海报?五个实用技巧,即学即用!

图片设计:有很多张图片要放在版面上?给它们增添点活力!

有什么更好的方法比仅仅放上相关人员的照片来更好地表现一家公司的“智力资本”( intellectual capital )? 卡耐基 ? 梅隆大学的软件工程学院 2006 年度报告的封面设计上,我们看到了上面有很多快乐的面孔及精心的设计。与我们平时所见的一般年鉴设计相比,它虽然也采用了很多职员相片作为设计的切入点,但它并没有安于现状,这使到整个设计充满了视觉活力。

平面设计技巧(六)

平面设计技巧(六)

平面设计技巧(六)

对图片精心安排使到这个封面充满能量!如何设计?第一步,为了让封面产生一种前中后的感觉,我们必须对挑选的图片进行适当的选择及剪切,并使他们分成前中后三种类型。然后,我们就将各行水平错开移动,注意,不要移成象砖墙那样的静态图案。最后,对个别图案拉大或拉小。

图形:用图案代表数字

图表上的图案比单独的文字及数字要传达出更多的信息。在下次你设计图表时,忘掉那些毫无生气的表格,我们可以用各种图片来代替里面的数字,就象这样:

平面设计技巧(六)

使用很多图案:上面是一家公司人员的工作职责统计图,上面的人物图案数量与数字相等。由于图案比较密,所以我们并不需要用上太多的人物细节,只需要象上图一样,采用人物轮廓图即可。

平面设计技巧(六)

使用很少图案:如果数量非常大,你当然无法按实际数量来放置图案,我们可以用每一个图案代表多少千多少万作为单位使用。

平面设计技巧(六)

既然是玉米,我们就要找一张一眼看起来就知道玉米的图案,简单直观的图案才能达到最好的信息沟通。

版面:设计正方形封面

下面这个封面设计使用了图片本身的网格元素来安排版面!将一个正方形的版面分成四个区域,将图片的视觉焦点放在其中一个区域中,而标题则放在对角的那个区域,轻易使版面产生有趣生动的视觉效果。

平面设计技巧(六)

平面设计技巧(六)

首先要安排好网络:我们可以将整个图案一分为四,注意,为了让图片的视觉焦点处于其中的一个区域中,我们需要对原来的图片仔细剪切。边框线为白色,使区域显得更清晰。其实,在图片上简单加一个边框,就已经足够引起读者的注意。你可以在以后的设计中尝试一下,使用边框可以使多个元素产生结合、连接、聚集的视觉效果。当然,边框所传达的信息与图片本身及版面结构有密切关系。

平面设计技巧(六)

平面设计技巧(六)

左上角是我们选定的焦点区域,在右下角,我们可以将这个区域填充,填充的颜色取自于图片(上图中是用吸管在草地上取了一种草绿色的颜色),然后再降低该区域的不透明度,降低不透明度突出图片是为了保持视觉的完整性。最后就可以加上标题了。标题应该放在该区域的左上角,与整个版面的结构配合。

网页设计:“横行霸道”

如果你设计的网页内容并不需要打印,我们可以考虑将其设计成水平轨迹这样的版面,点击上面的任何一张图片可以观看大图。

平面设计技巧(六)

点击上图看大图

平面设计技巧(六)

去艺术馆看过画展吗?单独的一行并列的图片非常适合表达那种有时间先后顺序或不断发展的主题(如公司的发展轨迹、工程项目的进度)。留意设计中的所有图片的基座都处于同一水平线,图片说明要保持同一宽度,文字低调,简单清晰,是设计这种网页的关键。其实,水平横看更符合我们眼睛的观看习惯!当我们已经习惯了上下拖动网页时,适当来一个这样的设计,会给人耳目一新的感觉。

海报:简单、有力、醒目

为什么简单的东西如此有力量?答案同样很简单:因为我们生活在一个凌乱不堪的视觉环境中,看一下你周围的环境,错综复杂的街道、规划不一的城市、每一天你都在接受各种混乱的画面,所以,对于那些简约的设计,我们都会情不自禁投去更多的关注。特别在设计海报时,这种效果更强烈。一句话,保持你的设计简单、有力、醒目。

平面设计技巧(六)

(上图为美国加州沙滩排球协会的宣传海报)

平面设计技巧(六)

相似的元素,就象双手,再加上鲜艳的颜色,立即就能使两者产生联系。两只手的颜色采用类比色搭配,背景为接近分裂补色的冷色。这样简洁的版面,无需你去叫卖,自然就会引起别人的注意。留意海报中单行的白色标题是如何清晰地突围而出。

本文所用颜色数值:

平面设计技巧(六)

如何使版面显得更快更干净?当版面存在两个焦点时,如果处理让它们能够和谐共处?如何利用粗壮的字体加强设计的力量?如何利用简单的元素设计一个醒目漂亮的封面?如何让你的网页显得既清晰又平易近人?五个实用设计技巧,即刻奉上。

版面:组织元素

我们的朋友理查德一直热爱飞行,所以他集资买了一架飞机并在西海岸开展专机包租业务。我们可以轻易知道他的心思放在哪里:他所驾驶的喷气式飞机拥有各种高端技术设备,但他所设计的商业名片却让人感觉有点……。让我们看一下是否能够按照原来的基本版面改进一下他的设计,让他的名片与他的飞机看起来一样快!

平面设计技巧(七)

飞机生产厂商已经提供了一张非常捧的图片,但理查德却犯了一下我们经常会碰到的错误:他只是将版面中一些空白的区域填上文字。这些文字极大的阻碍了飞机的飞行,缺乏层次,文字信息支离破碎。他将自己的名字设为天蓝色――这一点似乎在设计与有关航空时都是一种本能选择,但对于一张颜色饱和度不是非常高的照片来说,这种天蓝色显得过于刺眼。 Times Roman 字体用于文字当然是一种不错的选择,但对于飞机这种圆滑流畅的对象来说,则显得过于琐碎,加了阴影的设计进一步增加文字的复杂感。

平面设计技巧(七)

让版面加快:我们将文字都移到上方的条状区域里(也更符合我们的阅读习惯)。轻巧的细细斜体看起来“更快”。左上角的旗状区域在视觉上支撑着卡片。黑色及灰褐色传达出中性及商业气息,与照片互为补充。现在飞机周围没有什么东西挡住它的去路,终于可以自由飞翔。简单的调整后出来的效果就是:层次分明,够 sharp 的设计!

平面设计技巧(七)

版面:分割区域

设计广告版面时,我们经常会碰到的一个问题是:版面同时有两个焦点要突出,如我们所谈到的这个化妆品广告版面,一个焦点是冲击力十足的照片,另一个是醒目的名称,你如何安排两个焦点但同时又不会互相产生冲突?解决办法很简单:分开他们!将照片放在一个区域里,而名称放在另一个区域。但颜色及对齐要保持协调,就象这样:

平面设计技巧(七)

平面设计技巧(七)

细心的读者或许会留意到,从照片取色是我们很多篇文章中所经常采用到的一个技巧。象这个版面一样,由于文字颜色均来自图片,所以既形成局部对比,但同时整个版面在视觉上仍然是一个统一的整体。技巧无所谓老土,实用就行啦。

版面:强壮的字体使封面更有力

Giza Nine Five 字体线条如此的粗壮,使其文字看起来象是一块坚实的区域,既传达出一种强有力的气息,也让设计变得更容易。关键是要配合好这种字体的力量感:

平面设计技巧(七)

平面设计技巧(七)

矩形状衬线:上图是 Giza 字体家族中五种最粗壮的字体。其中 Nine Five 字体的线条厚重到几乎没有形成负空间。所以我们象堆积木一样轻易应用这些字体。在上面这个设计中,他们互相紧靠,整个设计非常充实,没有给纸张留出多余的空位――四个元素把持着各自的阵地!

平面设计技巧(七)

留意四个元素区域有各自的“纹理”及色调。最上方的字体最黑, FIRE 这个字体呈短平粗状,正文呈细致纹理。不同的感觉既使各个元素没有互相干扰,但同时又组成了一个强有力的视觉吸引力。

平面设计技巧(七)

视觉焦点:矩形区域的特点是:给人稳重、平实的感觉,同时对角位也趋向于中心点,使视线自然地向内聚集。而这张照片本身呈矩形,同时其图片的元素也呼应了这种特性――这张角度独特的照片使整个封面的力量感进一步加强。

版面:设计醒目的套入式封面

你需要一个既醒目又容易设计的封面用于一份简单的文件上?想一下我们所戴的袖章――或者很多新书封面中间都会加上一个套纸来推介书本――这种技巧我们完全可以应用在设计上。画一个水平摆放的区域,然后将文字直接放在上面,就是这么简单!象这样:

平面设计技巧(七)

平面设计技巧(七)

元素的对齐是其中的关键:将整个页面分成多栏,然后将文字与其中的栏线对齐,再加一个水平的区域。颜色要符合主题(上方的主题是保险业――注),留意题目的颜色与背景形成最强烈的对比,如果你希望将这个水平区域应用一点阴影也可以,感觉会更象一个纸套。下图中,不对称的分布使版面更具动态,居中的分布显得过于静态。

平面设计技巧(七)

如果这个封面你要在桌面打印机输出,但却担心不能打印到页面边界?我们可以调整一下:

平面设计技巧(七)

设置页边距,四边间距应该相等,然后加上一个浅色背景填充,这样才能够“重新定义”空间。

网页:向浏览者打招呼

Syd Lieberman 是一个专业讲故事的人,同时也是一名教师及作家――而他的业务也完全与此有关。为了让人了解他的相关情况,他象一位老朋友一样,“站在门口与你打招呼”,好象他又有什么有趣的故事要讲给我们听,让我们看一下他的网站是如何给人留下美好的第一印象:

平面设计技巧(七)

平面设计技巧(七)

温馨的颜色:三个水平区域分别应用于标题、导航栏目及简介。网页采用的一种温馨的大地色,下方采用了缓和的轻微渐变色,而上方区域应用了一些阴影效果。几乎处于页面高度中间的导航区域显得不同寻常,也非常有效!

平面设计技巧(七)

轮廓式的人物图片阻断水平线的延伸,截停你的视线,使你不禁打量起这位学识渊博的人。人物图片采用了细细的阴影,产生了深度。留意人物 SYD ,标题及文字周围都有很开阔的空间,这使到几个元素都能够轻易捕捉。

平面设计技巧(七)

一张大图片,如果充斥太多鲜艳颜色,出来的效果可能会吓人一跳。但这个网页中,这张人物颜色非常平实,呈不饱和状(上图四个矩形是从人物身上所取的颜色),背景的颜色同样使用这些类似色调,使整个版面显得温馨朴实,平易近人。

内页重复首页的元素――但尺寸变小:

在内页中,导航条移到上方,首页上方的设计显得简约,而在内页中,同样延续这种风格,这使到下方可以展示各个主题。

平面设计技巧(七)

平面设计技巧(七)

延续性在设计中是非常重要的,其实也正如讲故事一样,在情节上同样需要有延续。在内页中,将首页的几种元素(人物、标题、导航条)等集中在上方,并以此作为一种基本样式延续到每一页。

平面设计技巧(七)

漂亮典雅的文字是设计中的关键元素。留意 Syd 老兄的名字是固定放在左边,而其余描述性文字则固定放在右边,并随着不同的主题而改变,非常简洁的设计,信息传达上也非常有效率。

平面设计技巧(七)

轻微渐变:内页的渐变与首页略有不同,显得更浅,因为在内页中有很多信息要放置,一个较浅的背景也使其能够与各种图片、文字及按钮等各种元素形成更好的对比。

本文所用颜色如下:

平面设计技巧(七)

如何避免让标志的文字意义与视觉意义产生冲突?小小的创意就让一张普通的卡片发挥最大的宣传效果――设计师其实也应该成为营销高手。如何让客户了解你的创作成果?在网页的首页里如何让每一个浏览者都能够清晰了解你的服务项目?如何选择最适合的背景色用于你的各种照片展示?

标志:视觉矛盾

当你的文字说的是一件事,但你的图片表达的却是另一件事时,会出现什么样的结果?看一下下面这个牙医诊所的招牌。名字起得不错,叫Gentle Dental(亲善牙医),读起来还蛮押韵的。但留意一下它的标志设计,字体充满尖锐的轮廓,那些线条象针一样刺眼,再加上过于正规的商业颜色及血淋淋的一个牙齿,已经足够让那些想来光顾的客户扭头就跑。其实留意一下我们周围的设计,这种字面意义与图象元素产生矛盾的现象比比皆是,其实要解决这种冲突并不复杂:

平面设计技巧(八)

平面设计技巧(八)

Gentle Dental这人名字给人一种温馨友好的感觉。我们可以感觉到,设计师是有意设计成这种手写式的字体效果,估计也花了不少心血,但问题是这种字体处处都呈尖角形,给人一种毛刺感及剃刀的锋利感。红色对于牙齿来说并不是什么好事――牙龈出血?配上商业蓝也使整个标志给人一种咄咄逼人的感觉。

平面设计技巧(八)

上面是最简单的解决办法。说到亲善温和,我们需要一种圆滑温柔的字体――象一个舒服的枕头。颜色不要太浓烈,给人一种平静柔和的感觉。我们还要来点清新感:水一般的浅绿及浅蓝,再让整个文字形成波浪形――清新健康的形象已经扑面而来。现在,文字与图像元素表达的是同一个意思。如果你希望加一个牙齿在上面,那就加一个闪闪发亮的洁白牙齿!

商业卡片:漂亮加实用的设计

这个设计值得每一个设计师深思:设计如何与营销完美结合?事实上,这个看起来并不起眼的设计获得了多方的赞誉。这是一张商业卡片,但也同时是一个小信封,里面装着一些草的种子样品。同时,这个设计的颜色、纸张纹理及视觉元素都充满传达出一种大自然的环保气息,而且采用人工凸版印刷,纸张采用再生纸,可循环利用。

平面设计技巧(八)

平面设计技巧(八)

平面设计技巧(八)

作品展示卡:一次只展示一种

作为一家设计公司,你总有一些设计成果希望给顾客观看,让他们能够更好地了解你的实力。你或许有很多不同的作品,你如何将所有东西都展示给客户?别骂我,其实你并不需要这样做。与其将所有东西都挤在一起,不如象Langton Cherubino Group设计公司一样,只选择一种东西,然后做成一个邮寄包裹状的信封邮寄给潜在的客户。如果你要展示多个作品,那就做多几个这样的东西。这样的设计最大的好处就是让人容易理解你,了解你,并且喜欢上你。

平面设计技巧(八)

平面设计技巧(八)

网页:一览无遗

艾丽西娅将她自己的工作称作“动物辅助疗法”。你从来没有听说过?当你有一个并不为人熟悉的信息要向别人传达时,那你就要立即让人在最开始接触你的时候就向大家解释。她建立的Kindred Spirits网站确实做到了这一点:在首页中,她从里面三篇不同的文章中引用几句话放在前面,帮助大家能够立即认识她所做的工作。

平面设计技巧(八)

平面设计技巧(八)

网页中由三个引言构成,所引用的文字均来自网页中其它版块的内容,加上图片,立即就让人对这个网站及服务项目有一个清晰的了解,这三个引言的安排得整洁统一。而在最上方是一句简洁的文字介绍(简洁非常重要!)让人知道这个网站的背景情况。引言的标题精心选择,这些元素构成的网页显得清晰、简单及平和,非常漂亮的排版方式。

颜色:背景色的选择

你将很多照片集合一起做成了一个图片库来展示你多彩的生活,你需要一种适合的背景色。你会采用什么颜色?中性的颜色是最佳的选择。白色显得干净整洁,黑色显得生动富张力,而灰色,则最具层次感。就象这样:

平面设计技巧(八)

平面设计技巧(八)

平面设计技巧(八)

白色显得干净清新,制作简单。如果你要用白色,就一定要用纯白。不过用纯白作为背景,看起来又感觉有点普通,给人一种并没有设计的感觉。白色的边缘(上图A)与背景溶合无法分清。黑色显得醒目高级,在电脑屏幕上显示能够非常突出你的照片。黑色边缘(上图B)与背景溶合。灰色在这里显得灵活实用,可以同时配合较亮及较深的照片边缘。另外灰色有一个好处是象上图最下面的图所显示的,你可以玩一下效果,加点阴影也行,加条白边增强照片效果也行。而白色及黑色在同时处理这种效果时就容易受到限制。注意一点的是,我们所说的中性色并不一定就是灰色。

本文所用颜色数值如下:

平面设计技巧(八)

创造出负空间,封面才能更具冲击力。你手头上只有一张图片,一样可以创造出多张图片的效果,而且还显得非常特别。将动感的图片加进动感的元素中,能量将会加倍。小小的三角形是如何成为视觉的焦点?手风琴式的小册子优雅经典。五个设计技巧,为你的灵感加油。

封面:更少的硬币产生更好的封面效果

负空间往往被人忽略,但如果没有负空间,图片就缺乏冲击力。让我们看一下这个螺旋扣装订的封面是如何设计的:

平面设计技巧(九)

密不透风,缺乏冲击力:这种将所有版面空间都挤得满满的设计让观看的眼睛无从停靠,发散的视觉效果注定其缺乏冲击力。

平面设计技巧(九)

将硬币弄少一些,立即改头换面。现在版面有了呼吸的空间,而且硬币的摆放位置还巧妙地引导视线去到标题上。

平面设计技巧(九)

图片:一张变多张

与其满地去找各种各样的图片,有时不妨将注意力只放在一张图片上。

平面设计技巧(九)

平面设计技巧(九)

你当然可以说上面只是一张图片,但重叠的框架却使照片变得非常有趣,传达出一种视觉深度及层次感,还传达出更多的感觉。非常巧妙的设计。

平面设计技巧(九)

做这样的效果并不难,无论是在矢量软件还是在PHOTOSHOP这些软件里都可以轻易实现。虽然三张照片出来的效果是倾斜的,但实际中我们并没有对原图进行倾斜。

图片:加进动感

平面设计技巧(九)

平面设计技巧(九)

留意一点:原图本身就是跳舞的人物轮廓图,加进去的图片也要配合这种情景,才能使效果最大化。

小三角形的威力:

平面设计技巧(九)

上图中,在主图片边框外的下方形成一个小三角形,将图片中的引言文字指向说话者的名字。你的眼睛无法忽视它。

平面设计技巧(九)

下划线效果:颜色线条增加一个三角形指向名字,有趣而且简单。

平面设计技巧(九)

与第一张图片相反,上述的设计将三角形指向里面。由于其框内的元素相对显得低调,所以这个三角形所形成的指示效果是非常强烈的。你甚至还可以在一系列的作品中使用,当然,位置可以是非常灵活。如下图所示:

平面设计技巧(九)

连接的内页产生经典的视觉效果:

我们的朋友在结婚时自己动手做了一个节目单。合起来时象一本小册子,但打开时去象手风琴的效果,平淡之中出人意料,而且出来的效果非常典雅。

平面设计技巧(九)

将17英寸宽的纸张折叠并象手风琴效果一样粘在黑色卡纸上。背面没有文字。你既可以将它当作一本小册子来阅读,也可以拉伸开来形成一种全景式的视觉效果,非常优雅的展示。简单的黑白显得经典,文字容易设计,成本低廉。文字居中,用激光打印机就可打印。所有文字的尺寸都是一样。


据这个朋友说,他们一家人用了一个晚上一起来做这些节目单――这也是自己动手的魅力,制作的过程也是十分温馨的。作为一个设计人员,本应比别人更有资格来享受这种温馨!

模板尺寸:

平面设计技巧(九)

平面设计技巧(九)

平面设计技巧(九)

平面设计技巧(九)

本文所用颜色数值如下:

平面设计技巧(九)

如何将产品的特点在名片中得到延续?面对越来越多轻而易得的各种丰富设计元素,一个设计师往往容易迷失其中,最终使一个设计版面变得拥挤不堪。排版中的一些小细节一不留意就会造成信息传达的不清晰。一张便条纸贴在“网页”上使信息更加有效传达,轨道式的排版形自然形成了一个视觉焦点。

名片:重复形状

平面设计技巧(十)

努比优格(Nubi Yogurt)是一家新兴的奶酷连锁店,它的奶酷产品显得明亮新鲜。你如何将这种产品特色也在一张名片上体现?非常简单:使用一条线,一个弧线,一种亮色。

平面设计技巧(十)

平面设计技巧(十)

平面设计技巧(十)

名片:一个对象的设计

现在网上有很多图案及图片素材可以轻易下载,它们在不断地引诱你将名片、手册、广告及网页的版面填满,所以充斥着太多图形的版面设计随处可见。但你千万不能成为其中的受害者!有时一张图片已经胜过十张,而且设计起来更加简单,不要自讨苦吃。

平面设计技巧(十)

平面设计技巧(十)

单个元素传达更多:各种各样的工具对于房屋修建工程虽然很有用,但对于设计来说却恰恰相反。原来的毛笔手写体多少有点女性味道,而且各种工具显得模糊不清,其实这些图片只能产生嘈音。而我们修改后的名片,字体(ITC Machine字体)显得粗壮并呈角状,传达出一种与行业相符的特色。而最底下一把简单的卷尺已经传达出一种专业、阳刚及果断的气息。

平面设计技巧(十)

一个元素已经足够触动人心:一个普通的毛线球是否具有足够的美感?答案是肯定的。如果仔细打量,毛线球的纹理、颜色及触感已经呈现丰富的细节,也只有在只放一个元素的卡片上,你才会留意到这些细节。优雅的字体(Sloop Script One字体)与毛线球形成恰到好处的互补:其流畅的字母线条象是织针,而颜色则取自于毛线球的图片。

图案:便条纸

谁能忽视一张黄色的小小便条纸?没有人!便条纸显得轻巧简单,并且它们可以贴在很多地方――包括你的网页!让我们看看出来会是什么效果?

平面设计技巧(十)

价廉物美的设计:便条纸象一个不速之客,它让你无法不注意它。你可以自己设计你喜欢的版面,然后作为“特别告示”之类的信息贴一两张在你希望别人看到的地方。记住一点:它是一个最先会被注意的元素。如果你在同一个网页用过,那以后更换信息时最好也贴在同一个地方,不要过于兴之所致。

你可以在网上下载一张便条纸的图片,不过你如果想方便灵活应用,你也可以自己做一张,在PS中只费你十分钟的时间。上面的字体,可以是html文字,或者自己手写后再扫描上去,当然,也可以直接用一种手写字体直接打上去。

平面设计技巧(十)

顺序:排列空间

对于一些排版细节,如果你稍一不注意,就会导致版面让人手足无措。要记住,你认为理所当然的东西并一定也是读者认为理所当然的。

平面设计技巧(十)

平面设计技巧(十)

封面:焦点轴心

一本关于烹饪配方及香料的书籍封面需要一个象碟子一样明亮的风格,而且还要传达芳香的味道。解决办法:多个圆环围绕一个焦点图案。

平面设计技巧(十)

圆套圆:整体显得优雅,而且构成相当简单:碗、盘子、薄荷叶及黄色玻璃杯都不对称地环绕着中间那碗呈绿色的汤。而水平的文字与页面的角位形成视觉联系,白色主导版面。整体出来版面象香气那样轻巧,引导眼睛不断去到中间的文字上。圆形形成一个视觉焦点,水平元素形成了互补元素。

平面设计技巧(十)

标题放置在汤的上面,这正是引人注目的地方。而白色的一行小标题文字显得低调,使其没有干扰上面圆环的“轨道运转”。

本文颜色如下:

平面设计技巧(十)

如何让简单的折扣推广做出新意?数据表格其实可以做得更简单。为配合经常变动的销售价格,店内价格牌如何做得更灵活一些?图片配合推广,更加直观吸引。加点创意,数据对比让人更加印象深刻。

文字:不易觉察的巧妙变化

在你下一次做折扣海报时,你可以将OFF这个字与百分比结合在一起,变成一个意思仍然清晰及干净的字体组合,小小的变化已可见你的心思。

平面设计技巧(十一)

平面设计技巧(十一)

饼形统计图:一种颜色即足够

你的设计软件可以产生无数种颜色,但这并不适合在你的饼形统计表上使用。一种低调的颜色已经可以让你的数据显得优雅大方,而且让所有人的眼睛都只集中在你的对象上。

平面设计技巧(十一)

修改前:修改前的这种幸运轮式的颜色设计,虽然让每一个数据都分得清清楚楚,但同时也带了太多的嘈音。因为颜色在这里明显用得太多了。每一种颜色代表不同的数据,反而使整个图片让人无法卒读,而且在这个设计中,还会产生误导。其实里面全部都只是医疗费用支出。

平面设计技巧(十一)

修改后:将颜色简化成一种色调,而且因为是从相关图片上取色,颜色也与主题相呼应。为了使图饼色调显得饱满,我们可以在上面填充一个低调的两色渐变,深色在下,浅色在上,显得更呼应实际情景的色调。如果你要强调某一个部分,将这种颜色加深即可。

店内展示牌:混搭使用的纸板牌

为了配合价格经常变动,GAP OUTLET服装店采用了这种成本低廉但看起来相当经典的设计,价格牌信息可以轻松变化:

平面设计技巧(十一)

平面设计技巧(十一)

非常简单的设计。产品名称印在大纸板上,而小块纸板则印上价格,两张纸板插入展示架上,价格可以随时灵活变化。休闲短裤(CARGO SHORTS)价格这个星期是15.99美元,而下个星期则可以改为打7.5折。左右两个纸板的颜色,既可以是一个色调通过深浅形成对比(如在这里所用的),也可以是不同的颜色形成对比。这个设计师深谙简约主义的设计风格,有效地利用了负空间将顾客的眼睛集中在文字上(上面示意图所示)。

店外展示牌:让你的图片说话

图片传达的信息比文字要快,而且他们传达的信息还更多。如果你要在店外设计一个展示牌,希望让那些匆忙的路人能够注意到,要确保你的图片充分发挥沟通的作用。

平面设计技巧(十一)

平面设计技巧(十一)

图表:用图片配合你的数据

简单清晰的图表能够有效传达你的数据,但如果你希望让数据看起来更具有生活气息,你需要一张图片来帮忙。在设计这种图表前,要问一下自己:如何让读者能够体验我的数据?有了答案后,就用图片表达出来。

平面设计技巧(十一)

修改前:上面的数据简单清晰,已经可以说明问题。但当你在展示这些数据时,你的听众可能打起瞌睡来。我们疏忽了什么?真实的生活体验。你上面的图表元素展示的是长度,而不是亮度,而且所用的颜色也毫无意义。采用图片,让顾客与你一起来感受一下亮度。

平面设计技巧(十一)

修改后:如果在一个漆黑及大雾的夜晚开着车,那亮度能够增强300%意味着可能是救命的事。你如果没有看清前面那个“此路不通“(DEAD END)的告示牌,后果不堪设想。观众就这样被你吸引了。上面的告示牌真的比另一个亮度增强了300%?这一点都不重要,重要的是观众开始听你在说什么,这才是美好的!

平面设计技巧(十一)

本文所用颜色数值如下:

平面设计技巧(十一)

大尺寸的门票同样产生大印象;单纯由文字构成的标志一样可以做得好看;与其用文字说明,不如用图片传达,能够让一张宣传卡片耳目一新;由线条构成的标志及字体使你轻易能够设计一个够酷的标志;通过个人照片的排版,我们可以设计出令人印象深刻的团队宣传。

一、门票:大门票产生大印象

读者特利发给我们一张他设计的洗车券,这张洗车券是他希望为他儿子的游泳队筹集在游泳池训练的各种费用而举行的一次洗车筹款,而它的有趣之处就在于其尺寸相当抢眼:

平面设计技巧(十二)

没有人会对它视而不见:这张洗车券是一般门票尺寸的两倍之大,设计起来也很容易,从视觉上也非常能吸引有兴趣的消费者。大图片及大标题使这张洗车券产生一张海报的视觉效果,效果当然不错。

平面设计技巧(十二)

平面设计技巧(十二)

二、名片:单纯由文字构成的名片一样可以设计得好看

无论是什么样式,花些心思设计的名片总会比简单将文字放上去的名片要传达出更多的东西,我们如何将一张单纯由文字构成的名片设计得更漂亮?

平面设计技巧(十二)

修改前的名片并没有经过“设计”,只是堆彻。就象你在屋里摆放家具一样,只是将家具随意摆到角落里,没有精心的“布置”。这张名片,全部信息都一目了然,但这些信息并不吸引人,米色的背景也显得很普通,就象在人群中的一个普通人,没有人会注意你。

平面设计技巧(十二)

而上图,同样的信息,却是经过设计的。自信的名字及职务在白色的卡片上左对齐,突出了Glorietta本人,而不是那个了无生气的企业名称,并且该老兄是一名科技作家,有意识的排版突出了“写作”这一抽象意义。较大的文字自动传达有效的信息沟通。通过对比(大/小,衬线体,非衬线体)形成有组织、有目的的构成,传达出一种简朴的风格,但并不乏味。如果还想更引人注目,可以象下面一样更换一下颜色区域:

平面设计技巧(十二)

三、烹饪配方卡片:用视觉来传达营养

你如何设计一张与烹饪配方相关的宣传卡片?不要将那些用料简单地用文字列出,显示它们!这个方式适用于任何指引性的设计项目。

平面设计技巧(十二)

修改前:简单地将各种用料用文字罗列出,显得简单,但也显得普通,如果我们用具体的图片来表示出其用料,看看效果如何?

平面设计技巧(十二)

修改后的版式充满色彩及味道!关键是它还显得独特。虽然你也知道芫荽是什么东西,但用图片表示出来后,通过视觉辅助,我们对这道菜式会比单纯看文字有更多的味觉想象。留意我们的各种配料都是在白色背景上干净地呈现出来,每一种都加上一些阴影,进一步加强了视觉的真实性。看了修改后的卡片,你是不是已经食指大动?

四、标志:线条构成显得更酷

我们很喜欢DELO小岛烧烤店的菜单,因为在我们的眼中它显得很酷,它只是由黑白线条(没有灰度)构成,这些线条构成了餐厅的标志及名称。既经典又实惠的设计!

平面设计技巧(十二)

平面设计技巧(十二)

平面设计技巧(十二)

(上图是在Indesign软件中制作,但其描绘功能与AI基本相同,或其它的矢量软件均一样可轻易制作)

五、照片排版:团队精神

你有一个团队,但却没有一张合影照,那如何在设计中显示团队精神?我们将个人照片并列,但选择一个人作为其中的领头人物,这种设计既灵活又给人印象深刻。

平面设计技巧(十二)

合影照片当然很适合表现团队精神,但它又会限制表现每个人的个性。更加灵活的选择是将每个人的单独照片合起来形成一个令人印象深刻的排版。如果照相时的背景你可以选择,尽可能让每个人的背景及灯光接近,照的时间不要仅照头部,最好拍到整个上身,照片清晰度要高。

平面设计技巧(十二)

最后,这个学生会成员的设计就变成上图这样,其中学生会主席的形象显得更加重要且成为一个焦点。该设计主要通过三个步骤即可完成:

平面设计技巧(十二)

第一步是将照片剪切得基本一致,头部尺寸及眼睛水平线都应该尽可能一样(当然,由于各人姿态不一样,允许有一些差异)。

平面设计技巧(十二)

一旦定下各人的尺寸后,最重要的第一个人物不要剪切,但去掉其身后的背景。

平面设计技巧(十二)

平面设计技巧(十二)

富冲击力的排版使这张学生会成员介绍的设计显得非常突出,它比普通的那种傻乎乎的团队照效果更好,因为设计师可以灵活安排其中每个人的照片,使到整体既具有一种团队的氛围,但同时又能显示出每个人的特性。使这些学生与观看的人在情感上距离更近。这样的排版另外的好处就是能够让你在版面空间的安排上更灵活,并且有更多的空间给你的放置标题及文字。

本文颜色数值如下:

平面设计技巧(十二)

一、封面:与图片线条配合

Chico’s》时装杂志的夏季服装展示封面设计之所以能够吸引我们的眼睛,是因为他们大胆地将名称与图片自然形成的线条配合,而不是让名称固定不变。看看他们如何做的:

平面设计技巧(十三)

矩形状:站立的模特分成的三个部分(面部―衬衣―牛仔裤,上图左)靠在一面砖墙上使整个图片形成多个矩形,标题自然摆放,并堆放在照片上,文字同样形成了矩形块。整个图片及各个元素都呈现水平及矩形的感觉,所以整体看起来自然和谐。

平面设计技巧(十三)

垂直:而在另一期产品介绍上,图中模特的长袖衫衣、V形开襟及一个伸展流动的造型使整个图片形成了一个由上至下的流畅线条,为了配合图片的特性,品牌名称也是大胆地垂直摆放,顺应了图片的特性,使你一眼就被封面吸引。
二、排版:一个空格还是两个空格?

在英文文字排版中,在一个句子(句号)后,我们需要空一格,这是为什么呢?

平面设计技巧(十三)

文字排版:在近600年的印刷历史中,一些字体如Garamond(见上方)(甚至包括一些手写体),每个字母都有自己的比例构成。所以每个字母根据本身的结构,使到不同的字母所占的宽度是不一样的,这样当文字排在一起时,我们感觉文字能够自然流动并可清晰阅读,中间感觉不到障碍,整体也很漂亮。在句子后空一个空格(称作“法式间隔”)延续了文字的流动性,可以说是一种设计。

平面设计技巧(十三)

打印文字:但用打字机打出来的英文文字并不规范。上图中,A,当打字机在19世纪发明时,各个字母所占的宽度都是相同的,如上方,M的宽度与一个i字母及句号的宽度都是一样的,在打字机中,句子后面是留了两个间隔的。B,在那时,当人们习惯阅读打字机打出来的文字时,大家认为在句子后空多两个格(空两格被称作“英式间隔”)可以使在打字机打印出来的文字更加容易阅读。习惯成自然,后来在打字机中空两个格也就成为了打字中一条不成文但必须遵守的规定,但现在打字机也已经基本被淘汰了,所以在目前排版中并不需要这样做。

三、标题:匆忙一瞥也让人记住

现在的读者比以前需要有更多的信息需要处理,所以帮助那些匆忙的观众能够清晰地阅读你的内容,我们通过强调某些词语从而使标题创造了一个二级小标题。

平面设计技巧(十三)

平面设计技巧(十三)

双重功能:最上图,利用白色文字突出二个词语,我们创造了一个更短但意思与完整标题相似的另一个小标题“变化中的萨克拉门托“Changing Sacramento)。这种技巧在一些需要较远距离观看时效果更加突出(上左)。被强调的词语也可单独表达自己的意思。上右,在Happy Cog’s的网站上,在简介中通过强调四个词语,形成一个主要的导航链接,被强调的词语通过颜色及全大小写字母来突出,所以一眼望去,你已经知道意思所在。

四、字体:需要一张特别的图片?可以尝试一下字母!

较大的字母在排版中常见于在文章中第一个字母的下沉应用,但“超大”字体则已经可以单独成为一个吸引视线的告示牌,而且设计起来也很有趣,基本的技巧如下:

平面设计技巧(十三)

粗状的字体:你需要一种非常粗状的字母或某种特别的字体,这样字母本身才能拥有足够的地方来承载文字(上图我们选择的是Giza Five Five字体)。而加上一张小图片则可增加整个设计效果的视觉趣味性,同时提供给读者更多的信息。图片可直接放在上面(如上图葡萄)也可放在稍侧一点(如上图人物),为了突出文字信息,留意这里我们大字母本身采用比较深沉的颜色,而正文则采用比较亮的颜色。

平面设计技巧(十三)

粗状的数字:在这个贷款购车零利率的小广告中,数字0是一个可以充分应用的元素,也增加了一个图像焦点,能够自然地吸引你的视线去到中央区域(上图采用的数字字体为Frutiger Black)。放在数字上方形成叠加效果的汽车营造了一种尺寸对比、视觉纵深及一种宽广的视觉氛围。
五、混合大写字母

你已经懂得利用斜体、而不是全大写字母来作为一种强调,但如何对付那些令人有点讨厌的全大写首字母缩写?全设定为大写字母显得有点大,但小型大写字母(Small Caps)则显得有点小,看我们如何在细节上处理:

平面设计技巧(十三)

平面设计技巧(十三)

上图中:
A,全大写字母:“PDF”及“DVD”与相邻的小写字母对比显得太大;
B,小型大写字母:真正的小型大写字母*是以小字字母的尺寸来呈现大写字母,在文字可往往可趣到漂亮的效果,但作为标题,它有时又显得太小。
C,自定义:我们的解决办法将大写字母减少15%。
什么是“小型大写字母”?

在很多端庄优雅的字体中都可设定为小型大写字母。如下面的JUNE(注意不是“June”),真正的小型大写字母(在AI的字符面板中可设定)其大写字母与小写字母粗细是一样的,而一些非真正的小型大写字母,是自己将普通的大写字母缩小形成的,这就会导致字母粗细不一,实际上搭配起来也不漂亮。

平面设计技巧(十三)

通过如在Adobe Illustrator这样的软件中,我们是可以在排版中方便地将某些词语设为“小型大写字母”。下图是AI CS4 中文版中设定小型大写字母的面板(红框处)的截图:

平面设计技巧(十三)

附件列表


→如果您认为本词条还有待完善,请 编辑词条

上一篇弗兰克·劳埃德·赖特 下一篇2013央视春晚节目单

词条内容仅供参考,如果您需要解决具体问题
(尤其在法律、医学等领域),建议您咨询相关领域专业人士。
88

词条信息

baike
baike
超级管理员
最近编辑者 发短消息   

相关词条