平面设计师参考!网页banner广告设计技法

　【译者的话】网页上的小广告(banner)已经成为一种宣传推广的重要形式，但这些小广告除了版面细小外，图象的表现还受到象素较低等其它因素影响，给传统的平面设计师带来了新挑战。如何让你的小广告在混乱无章的网页中脱颖而出？本文介绍了几种解决的思路。

　　如何在细小的空间设计出视觉效果吸引人的广告(banner)？

　　第一步：使用简单的照片

　　对付一些区域狭窄的空间需要涉及一些特别的要求，第一步，就是采用一张简单但又能传达很多信息的照片。

图1

　　一般的广告总是采用整张图片加上文字配合，而网页上一个标准的小广告的尺寸是 12 0 × 90 象素，分辨率为 72dpi 。空间确实很小。你如何在这个小地方加进你想要的东西？象上图，难道你想让整个纽约市都塞进这个小空间里？那只会让这些建筑物变成一个个斑点而已。当我们面对这些小广告的版面时，并不应该只是将整张图片简单缩小——因为空间已经很小，分辨率又很低。而一般的网页上总是充斥着很多混乱的信息，将图片只是简单地缩小，那些细微的东西完全不会此起人们的注意。所以我们要思考的是：简单、醒目及简短。

　　我们并不需要使用整张纽约市的照片才能代表纽约，我们应该要运用这个城市的一些象征符号来传达这种信息，比如：自由女神像，帝国大厦，当然，你还可以自己决定其它的东西。

　　我们要寻找一张具有象征意味的照片，构图要简单，颜色要醒目，角度要明显，对比要强烈，当然，最好是所有这些因素都能够在一起。

图2

第二步：简单的版面

　　使用简洁的文字，将文字与其它素材简单结合。

图3

　　网上培训课程的登记涉及到很多硬件，但我们并不需要将所有的东西都全部显露出来，而是……

图4

　　上图左，使用一张简单且常见的象征图片，将背景设为黑色，使其与白色的鼠标形成强烈对比，但鼠标本身并不能传达网上报名注册这一信息，所以……

　　还要加上文字。只有加上文字，所有的信息才是完整的。大文字同样采用白色，而大学名称采用金黄色，使其让人知道这是两个不同信息。

图5

　　我们说排版要尽可能简单。留意上图左图，文字与鼠标高度相同，使两者成为了一个整体，而右图表明，每个元素之间的间隔距离都是相等的。

　将剪切工具变成一种设计工具

　　通过对图片进行恰当的剪切，您可以控制图片所传达出不同的效果。剪切过程虽然简单，但在剪切时却要很多细节要考虑。

图6

　　上图大图是一张漂亮的原始图片，通过你不同的处理方式，可以让它传达不同的信息。如小图，我们只保留左边的一半，使到整张图片变得更加有冲击力，同时还留出了空间给文字。

　　当然，还有很多种剪切方式：

图7

　　中心构图使整张图片显得稳定。她的目光直接面对着你，透着一种优雅迷人的气息。

图8

　　偏离中心的构图打破了空间的平衡，传达了一种略为紧张的气氛。

图9

　　呈角度的构图，这使到图片中人物的眼神变得更加煽情，使你更加容易注意她。

图10

　　这是一种更强烈的剪切方式，剪切的边缘去到她的眼睛，而且还呈角度，比上一张更加容易引起人们的注意，张力十足。

　利用文字来组织图片

　　在版面非常狭窄的时候，文字与图片必须谨慎配合，避免让人产生两者分离的感觉。事实上，文字与图片必须形成同一种信息。记住，字体也是一种图形，所以你可以充分利用字体的样式、形状、粗细及颜色来补充和加强图片的力量。

[page][page]
图11

　　一张全景图注定不会简单，文字 “ EI Capitan ”与这座作为焦点的花岗岩山峰分开。当然，我们可以通过剪切来作进一步的处理，但有一个问题，这座山峰的美丽正是要有一定的距离感及它周围的细节才体现出来。而下方的那个绿色实色区域使到文字与图片分离，避免了整张图片变得过于复杂。

图12

　　上图的图片经过剪切，使其更加收紧。现在山峰给人一种更加强烈的高耸感而不是开阔感。阴影也使图片形成了纵深。同时采用了一种缩窄的大写字母，使到文字与图片形成一个有机的整体，使读者的眼睛看上一眼就能够留意。

图13

　　上图采用名信片的设计样式，尽管图片没有改变，但这种处理方式却使整个设计显得更加宁静，也更有画廊的气息。灰色的字体在白色区域上仍然能够容易被辨认，开阔的白色区域也使到图片有一种水平感。

　　再来看一下实际大小的效果：

图14

　　让我们进一步来探讨上述的设计：

图15

　　首先将一张大图片缩小到合适的尺寸（1）。

图16

　　将图片的宽度变成标准的120px ，而图片高度要少于90px ，因为我们下方还要加上文字区域（2）。

　　用一种实色填充下方区域，同时这个区域也与图片有一些重叠。颜色来自于图片，用吸管在图片取色（3）。

　　最后加上文字（4）。当您要面对一种复杂的或者有太多细节的图片时，这种处理方式是比较理想的。

图17

图18

　　这里，我们对图片进行剪切，为该图片创造出一个视觉焦点。然后再寻找一种能够加强该图片传达的字体。在这个例子中，我们采用一种又高又窄的字体填满下方整个区域来加强这座山峰的特点。留意上方的那行细字，山峰是叠在这行文字上方的，加强了图片的层次感。也使到这座花岗岩山峰有更加靠前的感觉。

　在这里，我们这张充满动感的图片由于受到背景的影响而削弱了对比的强度。背景与人物都呈同一种色调，同时背景也还有很多细节，使到图中人物不能成为焦点图案，挽救的途径是利用文字来对这张图片进行补充。

图19

　　创造焦点的第一步是通过剪切，尽可能将注意力放在这个滑板的运动员身上（1），背景虽然显得有点杂乱，但在视觉也挺有趣，你可以直接在背景上加文字（2）。出来的效果虽然有艺术感，但文字并不容易阅读。

图20

　　为了弥补这种缺陷，我们将背景换成高对比度的黑色（3），同时仍保留（2）的字体图案。

　　（4）是另一种选择，为了进一步改善视觉效果及强调原来的背景图案，我们可以直接将原来背景的图案用在文字中。

　　本文所用颜色数值如下：

图21

　　翻译原文：