建站常识
如何设计网页小广告(banner)
2009-10-16 14:44:00
【译者的话】 网页上的小广告(banner)已经成为一种宣传推广的重要形式,但这些小广告除了版面༺细小外,图象的表现还受到象素较♈低等其它因素影响,给传统的平面设计师带来了新挑战。如何让你的小广告在混乱无章的网页中脱颖而出?本文介绍了几种解决的思路。
原文出处:www.bamagazine.com
如何在细小的空间设计出视觉效果吸此人的广告(banner)?
第一步:使用简单的照片
对付一些区域狭窄的空间需要涉及一些特别的要求,第一步,就是采用一张简单但又能传达很多信息的照片。
一般的广告总是采用整张图片加上文字配合,而网页上一个标准的小广告的尺寸是 12 0 × 90 象素,分辨率为 72dpi 。空间💝确实很小。你如何在这个小地方加进你想要的东西?象上图,难道你想让整个纽约市都塞进这个小空间里?那只会让这些建筑物变成一个个斑点而已。当我们面对这些小广告的版面时,并不应该只是将整张图片简单缩小——因为空间已经很小,分辨率又很低。而一般的网页上总是充斥着很多混乱的信息,将图片只是简单地缩小,那些细微的东西完全不会此起人们的注意。所以我们要思考的是:简单、醒目及简短。我们并不需要使用整张纽约市的照片才能代表纽约,我们应该要运用这个城市的一些象ܫ征符号来传达这种信息,比如:自由女神像,帝国大厦,当然,你还可以自己决定其它的东西。
我们要寻找一张具有象征意味的照片,构图要简单,颜色要醒🌃目,角度要明显,对比要强烈,当然,💟最好是所有这些因素都能够在一起。
第二步:简单的版面
使用简洁的文字,将文字与其它素材简单结合。
网上培训课程的登记涉及到很多硬件,但我们并不需要将所有的东西都全部显露出来,而是……
上图左,使用一张简单且常见的象征图片,将背景设为黑色,使其与白色的鼠标形成强烈对比,但鼠标本身并不能传达ಞ网上报名注册这一信息,所以……
还要加上文字。只有加上文字,所有的信息才是完整的。大文字同样采用白色,而大学名称采用🎃金黄色,使其让人知道这是两个不同信息♏。
我们说排版要尽可能简单。留意上图左图,文字与鼠标高度相同,使两者ꦇ成为了一个整体,而右图表明,每个元素之间的间隔距离都是相等的。
#p#将剪切工具变成一种设计工具
通过对图片进行恰当的剪切,您可以控制图片所传达出不同的效果。🙈剪切过程虽然简单,但在剪切时却要很多细节要考虑。
上图大图是一张漂亮的原始图片,通过你不同的处理方式,可以让它传达不同的信息。如小图,我们只保留左边的一半,使到整张图片变得更加有冲击力,同时🌼还留出了空间♏给文字。
当然,还有很多种剪切方式:
中心构图使整张图片显得稳定。她的目光直接面对着你,透着一种优雅迷人的气息。
偏离中心的构图打破了空间的平衡,传达了一种略为紧张的气氛
呈角度的构图,这使到图片中人物的眼神变得更加煽情,使你更加容易注意她。
这是一种更强烈的剪切方式,剪切的边缘去到她的眼睛,而且还呈角度,比上一张更加容易引起人们的注意,张力十足。
利用文字来组织图片
在版面非常狭窄的时候,文字与图片必须谨慎配合,避免让人产生两者分离的感觉。事实上,文字与图片必须形成同一种信息。记住,字体也是一种图形,所以你可以充分利用字体的样式、形状、粗细及颜色ඣ来补充和加强图片的力量。
一🍎张全景图注定不会简单,文字 “ EI Capitan ”与这座作为焦点的花岗岩山♏峰分开。当然,我们可以通过剪切来作进一步的处理,但有一个问题,这座山峰的美丽正是要有一定的距离感及它周围的细节才体现出来。而下方的那个绿色实色区域使到文字与图片分离,避免了整张图片变得过于复杂。
上图的图片经过剪切,使其更加收紧。现在山峰给人一种更加强烈的高耸感而不是开阔感。阴影也使图片形成了纵深。同时采用了一种缩窄的大写字母,使到文字与图片形成一个有机的整体,使读者的眼睛看上🥂一眼就能够留意。
上图采用名信片的设计样式,尽管图片没有改变,但这种处理方式却使整个设计显得更加宁静,也更有画廊的气息。灰色的字体在🔯白色区域上仍然能够✅容易被辨认,开阔的白色区域也使到图片有一种水平感。
再来看一下实际大小的效果:
让我们进一步来探讨上述的设计:
首先将一张大图片缩小到合适的尺寸( 1 )。
将图片的宽度变成标准的 120px ,而图片高度要少于 90px ,因为🦄我们下方还要加上文字区域( 2 )。
用一种实色填充下方ꦬ区域,同时这个区域也与图片有一些重叠。颜色来自于图片꧂,用吸管在图片取色( 3 )。
最后加上文字( 4 )。当您要面对一种复杂的或者有太多细节的图片时,这种处理方式是比较理想的。
这里,我们对图片进行剪切,为该图片创造出一个视觉焦点。然后再寻找一种能够加强该图片传达的字体。在这个例子中,我们采用一种又高又窄的字体填满下方整个区域来加强这座山峰的特点。留意上方的那行细字,山峰是叠在这行文字上方的,加强了图片的层次感。也使到这座花岗岩山峰有更加靠前🔥的感觉。
#p#利用文字来补充图片
在🌞这里,我们这张充满动感的图片由于受到背景的影响而削弱了对比的强度。背景与人物都呈同一种色调,同时背景也还有很多细节,使到图中人物不能成为焦点图案,挽救的途径是利用文字来对这张图片进行补充。
创造焦点的第一步是通过剪切,尽可能将注意力放在这个滑板的运动员身上( 1 ),背景虽然显得有点杂乱,但在视觉也挺有趣,你可以直接在背景上加文字( 2 ⛎)。出来⛄的效果虽然有艺术感,但文字并不容易阅读。
为了弥补这种缺陷,我们将背景换成高对比度的黑色( 3 ),同时仍保留( 2 )的字体图案。
( 4 )是另一种选择,为了进一步改善视觉效果及强调原来🎐的背景图案,我们可以直接将原来背景的图案用在文字中。
本文所用颜色数值如下:
翻译原文://www.logosky.net/♎webpage/artreview/small_adv_in_webpage120060731.htm
近期更新
- [2025-02-11 14:34:54] 加拿大预测网-在线预测:青岛高端网站定制化设计
- [2023-06-25 23:22:29] 加拿大预测网-在线预测:优秀网站设计的五大特点
- [2023-04-27 14:05:55] 加拿大预测网-在线预测:Html 5 响应式网站设计制作
- [2023-04-10 11:07:30] 加拿大预测网-在线预测: 网站建设制作流程知多少
- [2022-10-14 10:11:30] 加拿大预测网-在线预测:做网站设计应该更看重框架搭建还是视觉观感?
- [2022-08-09 15:57:48] 加拿大预测网-在线预测:以“产品”思维搭建网站!
- [2022-08-08 09:12:57] 加拿大预测网-在线预测:一家公司的网站应该有哪些板块内容?
- [2022-08-05 09:28:06] 加拿大预测网-在线预测:企业网站建设为什么要设置新闻板块?
- [2022-07-04 15:58:06] 加拿大预测网-在线预测:网站加拿大预测网-在线预测设计的好看,这个网站就成功了一大半!
- [2022-05-20 09:34:19] 加拿大预测网-在线预测:网站后台管理系统是什么?有什么作用?
- [2022-05-17 11:29:32] 加拿大预测网-在线预测:作为消费者,应该如何选择一家水平高的网站建设公司
- [2022-05-17 11:27:01] 加拿大预测网-在线预测:高端网站定制与模板化网站应该怎么选择?
延伸阅读
- [2010-09-25 15:08:00] 加拿大预测网-在线预测:浅淡BANNER设计
- [2010-09-26 08:05:00] Banner设计
- [2007-07-19 22:31:00] 加拿大预测网-在线预测:Banner设计手册(译)
- [2009-11-26 09:17:00] 加拿大预测网-在线预测:浅析Banner构成与创意设计
- [2010-07-27 09:05:00] 加拿大预测网-在线预测:如何做得Banner通情达意
- [2009-11-06 22:41:00] 加拿大预测网-在线预测:设计72变—寻求banner制作的变化
- [2010-07-27 08:10:00] 加拿大预测网-在线预测:BANNER中的字体结构分析
- [2010-08-10 16:17:00] 加拿大预测网-在线预测:浅谈网页UI之Banner篇
- [2009-07-04 18:22:00] 加拿大预测网-在线预测:Banner字体设计与应用
解决方案
加拿大预测网-在线预测: 轮胎行业网站设计解决方案 加拿大预测网-在线预测: 机械行业网站设计解决方案 加拿大预测网-在线预测: 房地产行业网站设计解决方案 加拿大预测网-在线预测: 科技企业网站设计解决方案 加拿大预测网-在线预测: 电子家电网站设计解决方案 加拿大预测网-在线预测: 食品行业网站设计解决方案 加拿大预测网-在线预测: 集团公司网站设计解决方案 加拿大预测网-在线预测: 企事业单位网站设计解决方案 加拿大预测网-在线预测: 外贸行业网站设计解决方案 加拿大预测网-在线预测: 健身运动网站设计解决方案 加拿大预测网-在线预测: 美容与化妆品网站设计解决方案 加拿大预测网-在线预测: 建筑设计行业网站设计解决方案 加拿大预测网-在线预测: 物流行业网站设计解决方案