Banner 是我们最常聊到的设计元素，它是一个网页的招牌，是使用者最容易看到的视觉元素。

今天，我们来聊聊 Banner 中的急先锋，网页 banner(首图)，它的设计之道。

网页设计设计过程中，banner 图是整个网页中，图片面积最大，位置最显眼的区域，甚至一个好看的网站就取决于 banner 的设计。

现主流 banner 的尺寸主要是分为这三种， 1. 显示位置是固定尺寸的，比如 1200*560，1200*360 2. 显示位置是居中的，比如 1920*560，其实主题显示的内容是 1200*560，用这种尺寸只要是正对大屏的显示器，两边不会显得很尴尬，也是现在的常用的尺寸 3. 显示位置是整个屏幕，比如 1920*1000 banner 的设计和海报设计其实可以统称成一样，设计的原理还是相同的，只是 banner 要考虑整体网站的结构，是否协调，设计上相对平面设计要简单很多。

我这里的设计方式是一张好看的背景图，合理的元素，漂亮的文字效果，颜色的统一，合理的搭配我觉得就可以了。

banner 最头疼的地方主要是版面的排版上， 常用的 banner 排版，有这几种： 1 是居中型，不光是文字还是图示，图形，居中显示在内容的中心部分，这种设计对于宽度不宽，但是有点高的海报比较合适，如果是网页 banner 就要考虑背景图片和元素的融合，因为您不能让元素占满整个空间。

2 两端对称型，文字和元素相对 3，叠加型，主要是元素背景和文字信息之间有个层叠的效果，通过阴影，底纹，将整体风格表现出视觉上的立体感， 我们在设计的时候，不要把整个空间都占满，适当的留白让作品看著更舒服，元素和文字大小的比例也很重要，一个漂亮的背景图片也是不可或缺的的组成部分，我在在做图的时候，总是觉得很死板，原因的话，可以分为这几种： 一个是背影颜色土，背景图片不行，字型太普通，元素太单调，一东西天多，感觉狠花等等，我们在设计字型，元素的时候可以通过阴影，样式，变形，渐变色让元素活动起来，背景图片，通过模糊，颜色的明度，来搭配，字型可以通过底纹，边框，变形，高光来让字型动起来； 网页设计师都明白，网页对于使用者的第一印象是非常重要的，而网页给使用者的第一印象很大程度上取决于网页的视觉设计。

现在的网页虽然多种多样，但是出于视觉化设计的目的，大多会使用大图背景，或者超大尺寸的 Banner 。

当使用者一开启网页的时候，映入使用者眼帘的 Banner ，是影响视觉设计的关键因素