怎么设计网页banner

Banner规格尺寸大小不一，文件大小也有一定的限制，这就使得在设计上增加了许多障碍，颜色不能太丰富，否则会在文件大小的限制下失真，软文不

能太多，否则会没有重点，得不偿失，怎么在方寸间把握平衡，变得十分重要。接下来，我为大家总结累一些，如有鄙陋，请指正，万分感谢。

第一部分：颜色

1．Banner与环境对比

试想如果在一个以浅色调为基准的网站上投放Banner，是不是从明度上拉开对比会很好的提高用户的注意力呢(相反亦然)。

以此也可推想出，如果在一个有颜色基调的网站上投放补色或者对比色的Banner，效果就会变得更瞩目(补色和对比色案例)。

2．Banner颜色简单至上

(1)试想一个Banner五颜六色，是不是就能够吸引眼球了呢?首先，先对比一下

哪个更吸引你的注意力呢?大多数人肯定会觉得后者给用户带来的视觉传达力更强，简洁明确、朴素有力的效果，给人一种重量感和力量感。前者颜色虽多，却没有带来更好的视觉传达效果，为什么呢?颜色过度使用会打乱色彩节奏，并且，减弱了颜色间的对比，使整体效果变弱。

(2)其次， 使用颜色越多，最后保存时文件体积越大，加载起来越慢，让用户等待就意味着和用户说再见了，如果靠降低品质来达到Banner的上传要求，那展现给用户的是低质量的banner，也一样会丢失一些用户。

所以，颜色简单有力，加载清晰快速，对于banner的视觉传达很重要，只要让用户产生点击欲望，我们推广的目的就达到了。

第二部分：构图

1．构图的定义及规则

构图其实说白了就是经营画面，进行布局，如何在你构图的引导下吸引用户点击，产生欲望，了解内容，如果都能达到，那说明你的构图成功了。构图的基本规则是：均衡、对比和视点。

均衡：均衡不是对称，是一种力量上的平衡感，使画面具有稳定性。

均衡不是对称

对比：在构图上来说就是大小对比，粗细对比，方圆对比，曲线与直线对比等等。

白色线条的对比产生了空间感

视点：就是如何将用户的目光集中在画面的中心点上，我们可以用构图去引导用户的视点

将视点集中引导到slogan上

介绍完构图的基本规则，举例子检视下：一张X-MEN的宣传banner，这张banner人物排布既平衡又不对称，人物大小不一，产生出对比，突

出了部分剧中人物。Banner正中一个大大的X，把视点集中到了画面的最中心，很好的利用基本构图规则进行banner设计。

2．构图的样式

构图大概分以下几种：(1).垂直水平式构图 (2).三角形构图(正三角和倒三角)(3)渐次式构图 (4).辐射式构图 (5).框架式构图 (6)对角线构图

(1)垂直水平式构图：

平行排列每一个产品，每个产品展示效果都很好，各个产品所占比重相同，秩序感强，此类构图给用户心情：产品规矩正式、高大、安全感强。

(2)正三角形和倒三角构图：

多个产品进行正三角构图，产品立体感强，各个产品所占比重有轻有重，构图稳定自然，空间感强。此类构图给用户心情：安全感极强、稳定可靠。

多个产品进行倒三角构图，产品立体感极强，各个产品所占比重有轻有重，构图动感活泼失衡，运动感空间感强。此类构图给用户心情：不稳定感激发用户心情，给用户运动的感觉。

(3)对角线构图：一个产品或两个产品进行组合对角线构图，产品的空间感强，各个产品所占比重相对平衡，构图动感活泼稳定，运动感空间感强。此类构图给用户心情：动感十足且稳定。

(4)渐次式构图：多个产品进行渐次式排列，产品展示空间感强，各个产品所占比重不同，由大及小，构图稳定，次序感强，利用透视引导指向slogan。此类构图给用户心情：稳定自然，产品丰富可靠。

(5)辐射式构图：多个产品进行辐射式构图，产品空间感强，各个产品所占比重不同，由大及小。构图动感活泼，次序感强，利用透视指向slogan，此类构图给用户心情：活泼动感，产品丰富可靠。

(6)框架式构图：单个或多个产品框架式构图，产品展示效果好，有画中画的感觉。构图规整平衡，稳定坚固。此类构图给用户心情：稳定可信赖，产品可靠。

3．软文（Slogan）

(1)俗话说得好“话不在多，精辟就行”当今炙手火热的微博就是一个例子“140字概括你要说的”，Slogan也是一样。

(2)要言之有物，第一要抓住用户的心里，了解用户的想法很重要。第二我们要推给用户什么，用户对什么感兴趣。下面举个例子：

Slogan只有四个字，终于来了，白色iphone4吊足了apple迷门近两年的胃口，这四个字恐怕是他们最想听到的。用户从不会质疑apple的性

能，科技领先性及用户体验性，他们最想的恐怕就是拥有自己梦寐以求的白色iphone4。所以，apple的slogan简约而不简单。

制作网站广告banner设计的步骤是什么？

广告banner设计是最常见的设计需求之一，也是一个快速考量设计师基本功的项目。如何在短时间内做一个高质量色彩丰富内容有针对性的banner呢?下面与大家一起分享怎样设计广告banner。

首先明确设计的网站广告banner主题

要突出产品主题，让用户一眼就能识别广告含义，减少过多的辅助干扰元素。切忌，banner被切割的太细碎，内容繁多，没有浏览重心。很多广告主往往会认为传达的信息越多，用户越有兴趣，其实并不然，什么都想说的广告，就是什么都没说好。

其次要做到网站广告里的重点文字突出

用文字进一步的告诉用户，是打折或还是新货上市?如果我们最大的买点就是“4.1”折起，那么毫无疑问，“4.1”折的字样一定要大，要醒目，其余的则需要相应的弱化。

三、从上到喜爱的阅读习惯

阅读视线要符合用户从左到右、从上到下的浏览习惯。

四、网站广告设计的关键在于吸引用户的注意力

用户浏览网页的集中注意力时间一般也就几秒，所以不需要太多过场动画，需第1时间进行产品的展示，命中主题。并配以鼓动人心的措辞口号引导用户。

五、色彩不要过于要醒目、夸张

有些广告主要求使用比较夸张的色彩来吸引访问者眼球，希望由此提升网站广告Banner的关注度。实际上，”亮” 色虽然能吸引眼球，但往往会让访问者感觉刺眼、不友好甚至产生反感。所以，过度耀眼的色彩是不可取的。

六、产品数量不宜过多

很多广告主总是想展示更多产品，少则4-5个，多则8-10个，结果使得整个广告Banner变成产品的堆砌。Banner的显示尺寸非常有限，摆放太多产品，反而被淹没，视觉效果大打折扣。所以，产品图片不是越多越好，易于识别是关键。

七、信息数量要平衡

很多人总认为信息多就，觉得所有信息都很重要，都要求突出，结果其反。如果网站banner上满是吸引点，那用户只会被注意，所以在Banner的有限空间内做好各种信息的平衡和协调非常重要。

八、留空

网站广告画面中需要留空,留空可以使图形和文字有呼吸的空间。

通过以上总结出，我们在设计制作网站广告Banner设计时，需要注意以下几点

1.突出产品及其特征，采用有吸引力的宣传用语，适当弱化公司名称和标识;

2.图片并非越多越好，突出重点是关键，必要的产品说明不能少

3.合理安排画面内容，做到主次对比鲜明

4.颜色不宜过度夸张，努力营造愉悦、舒服的感观感受

怎么制作banner

步骤/方法

1 首先打开软件，我们看到界面如下，左边部分是选项部分，可以切换到各种设置。

2 我们选择“尺寸声音”选项，进行相关的设置。长宽根据自己的需求进行设置，如果想插入背景音乐的话自己设置就可以了。

3 选择“背景设置”，我们设置一下背景为渐变色，如果需要插入图片或者其他flash元素的自己设置就行了。

4 选择“选择设置”，进行flash背景效果的选择，这里我选择了一个飘动的蒲公英。

5 选择“文字图像”选项，我们编辑banner上显示的文字等元素。首先我选择第一个网址，然后更改成百度经验的网址。

字体和文字的颜色可以点击下面的“编辑字体风格”进行编辑。

然后，我们改写第二行文字，把它改成“百度经验”我使用的是百度综艺体，字体和颜色设置好以后就切换到“选择效果”选项卡，我们选择喜欢的文字效果。

切换到“位置”选项卡，我们可以调整文字在banner中的位置

分别切换到“网络链接”和“定时”选项卡，进行相关的设置

6 文本中选择第三行文字，改写成“为经验献计献策”然后设置好效果。这里我选择了一个行星闪动的效果。其他项目设置可以参照上面的讲解。

7 选择“网站链接”选项，进行相关设置

8 选择“发布构建”选项，点击“发布”按键输出自己设计好的flash banner。

9 弹出输出格式选择对话框，我们选择swf格式，点击“确定”

10 弹出“保存”对话框，我把这个banner命名为1，保存。

11 保存完毕以后，主界面显示红色提示语，告诉我们怎么正确使用这个banner。好了整个flash banner的制作就算是完成了。

12 为了给大家展示一下这个banner，我又另存了一份gif格式的，因为这个软件也是支持发布为gif格式的，我们来看一下效果，还是很不错的。

END

网站怎样做好banner设计?

1、突出产品主题，避免繁琐

关于广告的主题，很多人会犯一个错误，认为传达的信息越多，用户越有兴趣，其实不然，现在人们的时间很有限，信息泛滥的时代，如何能突出产品主题，让用户一眼就能识别广告含义，才是最重要的，避免繁锁内容，减少客户的阅读负担。

2、要善于突出重点文字

文字描述是用来给用户看的，所以一定要把重点文字突出，比如五一打折活动，一定要把五一吐出来，字样一定要大，要醒目，其余的则需要相应的弱化。

3、按照客户的阅读习惯来设计

一般人们的阅读习惯都是从左到右、从上到下的，所以网站设计网站banner时候也要遵循这个规律，不要相反，会让人很不舒服。

4、产品展示要能激发客户的欲望

信息爆炸的时代，客户浏览网页的注意力是几秒钟，所以要第1时间进行产品的展示，命中主题。

5、过度的色彩不要太耀眼

色彩搭配固然重要，但是不能太过夸张，会让访问者感觉刺眼、不友好甚至产生反感。产品图片，色彩不是多多益善，适合最重要，易于识别是关键。如果太多，产品信息就会被淹没，视觉效果大打折扣。

怎么设计网页banner?

设计网页banner的方法如下：

1、以文字为主

虽然现在网站的图片大多都提倡图文并茂，这样能够提高用户体验，但是我们现在看到很多网站上的图片很多都是以图片为主，这样就是容易陷入一个误区：banner图只是为了用图片的形式来展示网站的主要产品或者企业的总体形象。其实这样的banner是很难能吸引到用户的。因为有些用户还是需要一定的文字来理解广告中的内容的。如果是文字为主，做到言简意赅，这样的图文并茂才能有利于提高点击率。

2、不要出现价格信息

一般的消费者对于价格都是非常敏感的，除非是你的产品价格相比同行业的产品价格低出很多，很有价格上的优势，否则不建议在banner上出现价格信息。因为价格一旦不是用户心理能接受的，这个banner就会被用户无视。

3、添加免费或者巨大优惠等字样

根据众多消费者的消费心理，他们对于那些物美价廉的产品都是非常热衷的。对于企业网站的推广和banner的设计也是这样，在banner上添加免费或者巨大优惠等字样也是能很有效地吸引到用户。

4、设计带有行为号召力

我们平时上网看到有些banner上会有个类似点击的按钮或者链接，潜意识会有着想点击的念头，可能会情不自禁地点击进去。这种方法也能很好地提高点击率。

网站banner图怎么设计？

我们通常打开网站会看到很多长方形形状的广告图片，称之为网站banner，网站的Banner可以放在网站不同的位置，在访客浏览网站的时候，吸引访客的关注，从而获得宣传和销售的效果，我们常常看到的网站百叶窗也是网站banner的一种。一般banner的设计和制作可以找万商云集等一些企业网站建设相关的服务公司，但一定要注意其中的沟通，明确要求和主题，才能达到好的效果。

Banner广告对于增加在线流量至关重要，但如何才能设计出大家想要点击的网页Banner？网页Banner设计的重点是通过应用基本的设计准则，系统地创建有效的Banner广告。接下来我们就来说说banner的设计要点。

网站的Banner图虽然看起来只是整个网站当中很小的一个方面，但对于网站给用户塑造的印象和体验效果来说，却是至关重要的。毕竟用户来到网站当中，首先映入眼帘的便是网站Banner图，如果Banner图不好的话，那么用户对网站的第一印象就会下降，用户很可能就会因此而跳出离开。所以，只有设计好网站的Banner图，才能使网站的用户吸引力更强，这样网站也才能获得更多用户支持。

一.首先了解你的banner设计需求

确定banner文案的内容，包括定位和主题，以及将会涉及到的设计素材、包括准备投放在什么平台以及它的尺寸大小，这些前期的工都是需要先定下来的。因为这些基本的因素如果没有被确定下来，会阻碍设计师的设计灵感，在设计的过程中也会给设计师带来很多不确定的因素，而且会让banner设计出来可能不符合要求。

二、一定要选用高清图片

图片的清晰度一定要有保证，一定不要出现图片模糊的情况，清晰度低的图片让人容易产生疏离感和塑料感，影响网站的整体质感。高清图片能够让用户准确地获得信息，让人看着更加舒服，更加高级。

三、保持层次结构

Banner广告设计依赖于每个广告之间的正确平衡，所以要注意你的层次结构。有效的Banner广告是为了提高品牌知名度和增加网站流量而设计的。它们有三个基本组成部分:（1）公司Logo（2）价值主张（3）CTA按钮

四、网页设计注意排版网页设计中，使用全屏照片作为网站背景固然简洁漂亮，干净利落之余设计师需更要考虑到整个网页的布局，如何在大幅照片上进行排版，设置栏目，与照片背景颜色不产生冲突，又不影响用户的阅读体验。

总之，banner在网页设计中占据着重要作用，精美的图片配之以绝妙的文案能给网站获得漂亮的加分。而作为背景的照片只有足够精彩漂亮才会给用户留下深刻印象，所以设计师在选择照片时要注意图片的质量问题。此外还要重视图片展示的内容与网站主题的相关性，于此网站的主题内容才会在第一时间传达给访问用户。