正在阅读:平面设计师参考!网页banner广告设计技法平面设计师参考!网页banner广告设计技法

2009-10-17 11:59 出处:PConline 作者:logo设计在线 陈汉聪 译 责任编辑:chenzhenjia

  利用文字来组织图片

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

 如何设计网页小广告(banner)
图11

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

 如何设计网页小广告(banner)
图12

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

 如何设计网页小广告(banner)
图13

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

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

 如何设计网页小广告(banner)
图14

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

 如何设计网页小广告(banner)
图15

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

 如何设计网页小广告(banner)
图16

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

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

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

 如何设计网页小广告(banner)
图17

如何设计网页小广告(banner)
图18

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

键盘也能翻页,试试“← →”键

相关文章

关注我们

最新资讯离线随时看 聊天吐槽赢奖品