banner设计,具体的步骤是怎样的

突出卖点:

如何突出卖点，可借助Photoshop将背景处理，例如淡化背景/渐变遮挡部分背景;2、处理文案，给文案添加纯色背景，将其与背景隔离开

如何完成一个Banner的设计

无论你要做什么样的设计，都要将你所能联想到的图像记录下来，选取素材，进行设计。下面的图仅供参考。

三、如何做好这个Banner

图过于单调，颜色使用大量粉的颜色，使整体感觉不和谐，而且不能达到视觉上的冲击感，我们可以photoshop等软件来做，增加整体质感，可以左图。

四、关于中英文字体在设计中的应用

善于用字体设计，在整个网页中如果随意将英文字体更换成中文，多多少少会有些影响，因为中文没有英文字体看起来节奏强，当然善于用字体，也可以弥补这一方面的，例如衬线字体更换成宋体等。

不管是在做宝贝设计还是店铺设计，都需要考虑店铺整体的氛围感，不要让人刚看到你的设计，就感觉是进入了杂货铺一样，对你产品产生质疑。

我们通常打开网站会看到很多长方形形状的广告，称之为网站banner，网站的Banner可以放在网站不同的位置，在访客浏览网站的时候，吸引访客的关注，从而获得宣传和销售的效果，我们常常看到的网站百叶窗也是网站banner的一种。一般banner的设计和制作可以找万商云集>

在网站设计的时候，关于网站banner设计，是非常考验设计师的水平的，因为很多客户既要求节约成本，又要效率高，短时间可以设计出出彩的作品。那么，网页设计如何做好banner设计呢今天就跟随小编一起来了解下吧!

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

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

2、要善于突出重点文字

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

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

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

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

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

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

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

6、做好信息的平衡和协调

信息并非越多越好，不要把所有信息都突出，要做好各种信息的平衡和协调，才能真正地吸引人。

7、学会留空

在banner画面中，有经验的设计师都会留空，从而使图形和文字有呼吸的空间，视觉效果更胜一筹。

以上就是小编今天给大家整理分享的关于“网页设计如何做好banner设计”的相关内容，希望对正在备考的你有所帮助。为了帮助各位小伙伴更快的上手工作，小编特此还整理了平面设计小白入门宝典，需要的自取哦!

网站banner设计文字排版方法如下：

1、文字的基本排列混搭：设计banner时候，千万不要不加思索的就把一行文字硬生生的放上去，那会让banner直接显得呆板木讷。往往很多新手设计师容易犯这样的错，就算字体颜色样式处理的很好，也会看上去很无趣、很僵硬。这时候就需要做一些文字排列混搭的设计。

2、横竖编排组合：标题组合的编排一般都会使用基本的编排方式：横编排，竖编排或横竖编排。这是比较容易掌握，也是使用较为广泛的方式，给人一种严谨正规的感觉。而横竖编排都会遵从对齐，如左对齐、右对齐、居中对齐、两端强制对齐。只要做到对齐，基本都能做出好的标题组合。

3、线框编排组合：如果觉得单纯的横竖编排过于单调，不妨添加一些线框。在文字中插入线或其他图形元素，使整个标题变化更丰富。在使用中需要注意线的粗细和长度，考虑它们与信息间起到什么作用，而并非随意添加。

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简约而不简单。

1、banner设计中的文字注意事项
一般来说，网站制作一个banner分为两个部分，文字和辅助图。虽然辅助图站的面积比较大，但如果不加入文字说明的话，客户就会看不懂你做的banner要表现什么、要说明什么，所以文字是整个banner的主角，我们在制作banner的时候特别要注意对文字的处理和摆放。

2、Banner有动态和静态两种。在浏览网页的过程中，虽然闪烁的图案会产生瞬间记忆刺激，引起注意，但这种记忆往往为压迫性的，久之易产生负面效应，从而模糊记忆。而稳定的画面不易引发特殊的关注，但如果有良好的界面引导和内容，可产生良性的记忆，持久而牢固。根据粗略统计，100个Banner里面有1/3是静态的。

3、Banner的“重量”要轻。以468×60的Banner为例，最好是15K左右，不要超过22K。而88×31的Banner最好在5K左右，不要超过7K太大的会引起网页打开速度，导致浏览下降，这里面也有个量的问题，太多的广告而影响浏览者浏览网页，导致反感这也是一个问题。所以放广告条的时候要考虑到广告的大小和多少，还有就是搭配问题。

4、从banner设计上来看，需要注意：
①Banner的文字不能太多，用一两句话来表达即可。
②广告语要朗朗上口，可以第一时间的让人捕获表达的重点。
③图形无须太繁杂，文字尽量使用黑体等粗壮的字体，否则在视觉上很容易被网页其他内容淹没。
④图形尽量选择颜色数少，能够说明问题的事物。
⑤如果选择颜色很复杂的物体，要考虑一下在低颜色数情况下，是否会有明显的色斑。
⑥尽量不要使用彩虹色、晕边等复杂的特技图形效果，这样做会大大增加图形所占据的颜色数，增大体积。
⑦产品数量不宜过多。很多广告主总是想展示更多产品，少则4-5个，多则8-10个，结果使得整个Banner变成产品的堆砌。Banner的显示尺寸非常有限，摆放太多产品，反而被淹没，视觉效果大打折扣。所以，产品不是越多越好，易于识别是关键。

1、了解banner图的组成要素以及风格。这一方面要是根据企业的整体特点来进行定位，为的就是能够设计知出更加符合企业形象以及企业理念的banner图。

2、banner图的排版。这一点个人觉得不光是banner图在设计时才注意，在网站排版、网页排版时都应该注意。

3、banner图的切片。这一点必须注意，因为没有处理好，在一定程度上会影响网站的访问速度，网站的访问速度如果不是很好，就会影响网站的浏览量以及点击率。道还有就是图内片的显示大小以及兼容性，使能在大部分的浏览器以及设备上展示出来，这样就不会影响网站的整体美感，方便用户的查看。

4、banner图的字体可以混搭容。字体混搭能够更好的展示相关信息以及更加吸引用户的注意力。

在banner设计当中，主要有以下几种排版形式：重心型、分割型、倾斜型、满版型、曲线型、对称型、三角形、四角型。这几种形式会比较常出现在banner设计当中，所以我们一一来分析以下几种排版方式。

1、重心型

重心型版式的banner容易让浏览者产生视觉焦点，界面效果强烈且突出。
2、分割型

分割型主要可以分成上下分割和左右分割。因为banner一般是高度比较窄，所以左右分割型会比较常见。上下分割的banner会比较少见。

上下分割，顾名思义，就是把整个版面分为上下两个部分。可以在上半部或下半部配置，另一部分则配置文案。配置有的部分感性而有活力，而文案部分则理性而静止。上下部分配置的可以是一幅或多幅。上下分割的banner布局比较少见，上下分割之后，版面的设计要求也比较高。

左右分割，就把整个版面分割为左右两个部分，分别在左或右配置文案。当左右两部分形成强弱对比时，则造成视觉心理的不平衡。不过，倘若将分割线虚化处理，或用文字进行左右重复或穿插，左右图文则变得自然和谐。左右分割布局在banner的设计中最为常见。

3、倾斜型

倾斜型的banner比较偏个性化一些，多在一些设计公司或是运动品牌的网站中出现。版面的主体形象做倾斜设计，造成版面强烈的动感和不稳定因素，这种设计比较引人注目。
4、满版型

满版型的banner比较好理解，通常是版面以图象充满整版，主要以图象为诉求，视觉传达直观而强烈。文字的配置压置在上下、左右或中部的图象上。满版型给人以大方、舒展的感觉。
5、曲线型

或文字在版面结构上作曲线的编排构成，产生节奏和韵律。多出现在运动型的banner设计中。
6、对称型

对称的版式给人稳定、庄重理性的感觉。对称有绝对对称和相对对称。一般多采用相对对称。以避免过于严谨。banner对称一般以左右对称居多。
7、三角形

在圆形、四方形、三角形等基本形态中，正三角形(金字塔形)是最具安全稳定因素的形态，而圆形和倒三角形则给人以动感和不稳定感。

8、四角型

四角型指在版面四角以及连接四角的对角线结构上编排的图形。这种结构的版面，给人以严谨，规范的感觉。下图是四角型的一种，同时也用到了左右分割的排版设计。
以上简单给大家分析讲解了常见的几种版式形式，每种版式设计并非以一种表现形态出现，比如四角型的banner可能会结合对称性的出现或是中轴型，所以大家在分析banner的时候不要以单一的一种视角去分析。因为一张banner的设计可能同时存在好几种版式形式。

不同的排版可以给人不同的视觉感受，好的排版会让banner更加的出彩。版式也没有绝对的好坏，只有适合和不适合。希望今天给大家分享的内容可以帮助到大家。

---