网站banner制作（制作网店banner）

简单且完整的设计

当Larry Page和Sergey Brin向潜在投资者介绍他们的产品——“Google”的时候，他们将Adwords作为后备选择——万一他们不能获取任何利润的话。最后他们采用了后备计划，同时我们也看到了他们的选择是多么明智。是什么让枯燥乏味的广告得这么成功?与其他广告不同的是，他们既没有唤起浏览者的好奇心也没有影响网页的主流思想。事实上，其相反面是正确的。Adwords看起来像搜索结果的一部分，让人们感觉这些广告是由需而生的。这个简单的设计不仅帮助Google提升了他们的搜索引擎同时也促进了Adwords广告的发展，对此我们毫无疑问。

参与互动

Banner设计者会巧妙地运用一些类似Flash的工具设计一种可以邀请用于参与互动的banner。让用户参与互动的方法多种多样。一些网站设计者利用一种在以前很流行的游戏元素设计banner。我们都知道pacman(吃豆人)这个很流行的游戏。我以前见过一个我最喜欢的banner就是让pacman去“吃”美元。结果就是出现了一个很漂亮的标语要求你开储蓄帐号，帮助你用固定的利率存钱。这个互动banner后面的目的很简单就是让用户参与互动，然后当他们的意志不是很坚定的时候在恰当的时机向他们介绍销售信息。

经过实践证明这些互动banner是很有效果的。这样的banner的最大的缺点就是大部分网站管理者不允许在他们的网站上使用。因为他会影响网页内容。

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

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

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

2、要善于突出重点文字

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

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

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

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

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

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

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

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

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

7、学会留空

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

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

网站banner制作（制作网店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设计，虽然都是由图片加文字组成，但也绝不是“1＋1＝2”那么简单地叠加。如同一首乐曲，可以是古典交响乐，可以是流行电子乐，亦或民间小调，形式多样，手法不一。有时候需要像作诗般字斟句酌，有时候也会有妙手偶得的惊喜。受制于互联网视觉设计的特点，往往需要通过设计师的经验思考，在较短的时间内制作出能够通情达意的作品。下面为一运用Photoshop软件进行的网店Banner设计与制作方法举例。

（1）运行Photoshop软件，执行“Ctrl”＋“N”命令创建一个新文件，设置新图像文件的大小为宽度1920像素，高度为260像素（高度要根据具体情况来定），图像分辨率为72像素／英寸，颜色模式为RGB模式，背景色为白色。（2）搜索Banner设计的背景图片，注意背景图像的宽度必须大于或等于1920像素，选择好背景图像后，在Photoshop中打开图像文件。（3）将选择好的背景图像，应用软件的移动工具拖进第一步创建的Banner图像文件中，并运用移动工具进行位置的调整，把需要的部分图像放置在合适的位置。（4）在Photoshop软件的图层面板，设置背景图像所在的图层不透明度为40%，以降低图像的不透明度，使背景图像与白色的背景图层融合。（5）把事先拍摄好的、事先计划好要重点推荐与推销的商品图像在软件中打开，运用Photoshop软件中的魔术棒选择工具，先在图像的白色区域进行选择，然后执行“Ctrl”＋“Shift”＋“I”反选命令把无线路由器产品图像选中。（6）运用软件的移动工具分别把上一步选择完成的无线路由器侧面图与无线路由器背面图拖移到Banner文件中，执行“Ctrl”＋“T”命令对无线路由器图像进行大小与位置调整。（7）接下来运用文本工具添加文本，选择字体为“方正兰亭特黑”，字体大小为72点，设置字体为“斜体”，字体颜色为“蓝色”，RGB数值为（6、68、182），字体显示模式为“犀利”，输入“数码惠聚”几个字。(8)执行“Ctrl”＋“T”自由变换命令，对“数码惠聚”文字进行旋转调整，转动一定的角度。(9)继续运用文本工具输入文字，选择字体为“方正兰亭特黑”，字体大小为24点，设置字体为“斜体”，字体颜色为“蓝色”，RGB数值为（53、98、4），字体显示模式为“犀利”，输入促销文字，然后执行“Ctrl”＋“T”命令对文字的角度与位置进行调整。(10)运用上一步的方法与技巧，继续输入文本，除“1212”四个字的大小为30点，颜色为RGB（192、6、6）以外，其他文字属性与上一步相同，然后一样进行位置与角度调整。(11)继续运用文本工具输入文字，选择字体为“方正兰亭特黑”，字体大小为24点，设置字体为“斜体”，字体颜色为“蓝色”，RGB数值为（6、68、182），字体显示模式为“犀利”，输入如下图所示的促销文字，然后执行“Ctrl”＋“T”命令对文字的角度与位置进行调整。(12)运用软件的多边形选择工具，在工具属性栏中设置羽化值为0。(13)在图层面板新建一个图层，并且用RGB数值为（6、68、182）的蓝色对三角形选区进行填充颜色。并对这个图层进行图层样式设置，图层样式为“斜面与浮雕”中的“内斜面”，方式为“雕刻清晰”。(14)设置好图层样式后，执行“Ctrl”＋“D”取消选择命令。(15)把上面创建的三角形样式所在的图层进行4个复制，分别放置在如图所示的位置，同时运用“Ctrl”＋“T”命令适当调整三角形样式图像的角度、大小、位置与不透明度，完成Banner设计。

网页设计中的 Banner设计其实是我们接触互联网工作后，最常见一种工作。那么Banner到底是什么呢？Banner的核心使命其实是吸引用户关注，然后被点击。他的主旨就是主题明确，突出关键内容，抓住用户眼球。一个Banner他是由“背景、主视觉和标题文字”三部分组成，在我刚刚接到需求的时候，我首先分析他的重点词、字，想要表达什么，分析好了后可以在纸上画下草稿，在大脑里有个大概的视觉效果，想法多的话可以画几版不一样的，最后根据草稿定一个定稿，接下来就可以找素材着手做了。在做期间，还要注意整体的美观，让人看起来舒服。

关于Banner的设计，相信已经有很多人都看过这方面经验的分享了，我来公司也做过了一些Banner的设计，那在这其中通过不断的学习、实践积累了自己的一些小小经验和方法，下面给大家浅浅的分享下我总结的Banner设计经验。如有错误，尽管拍砖。下面从这三部分逐一给大家分享下。

一、背景

我们画画的同学可能都知道，一个画面不可能都面面俱到，重点的需要细致刻画，有的一笔带过即可。设计一个Banner有时候就像画画似的，首先要有大的环境，那Banner的背景就好比大环境，其实主要是起到衬托、烘托气氛的作用。一个新需求过来，首先我们考虑要营造一个什么样的环境，什么样的气氛，是欢快的、悲伤的、可爱的还是…比如过年，可能就用红橙色，比如儿童类的，颜色上就要纯一点，活泼点等等。

但是需要注意一点，背景不能太花，否则会影响整体的一个可读识性，简单，清晰即可。

二、主视觉元素

设计中的主视觉要清楚，符合主题，元素不可太多，否则看起来跟人感觉就会乱。有的人在做时只要是有地，就全放满，其实页面适当的“留白”也是提升画面品质的一个好方法。视觉元素不论是人物，还是其他，一定要清晰，在我们找素材的时候也要找像素质量高的。

东西太多，想表达的也太多，这时候需要用户去花时间思考它想告诉我们什么，而往往这时候用户是不愿意是思考的，一是画面不知道他要表达什么，二是整体上没有吸引住用户的眼睛，这种情况下这个Banner设计是做到比较失败的。

三、标题文字

标题文字非常重要，是整个Banner的主题，重点文字一定要在背景中突出出来，不论用颜色对比、放大、变形设计还是即便做立体效果等等。（这里我分享一个经验，就是在页面上新建一个黑色的图层，样式改成饱和度，整体上成黑白的效果后一眼就能看出来了）

最后总结几点：

1.画面整体统一，颜色搭配的看起来舒服；

2.页面元素要以组为单位；（如文字和文字之间的间距不要过大，让人看起来是一组）

3.采用吸引力的用语，或者添加“火速参与”等刺激性的词语按钮等，让用户在最短的时间内有去点击他的欲望。

4.主次对比分明，合理安排页面布局；

5.输出K数不宜过大，否则加载速度会慢；