首图（Banner）设计技巧

banner,banner图一般来说指的就是网站页面的横幅广告图、它处于网页首要位置，故也有人习惯称之为首图。banner广告图的设计好坏，在很大程度上能影响到用户对网站的去留，所以，网站的Banner广告设计是十分重要的，电商网站更是如此，它甚至能影响到用户的购买欲望…

Banner map一般是指网站页面的Banner广告图，在网页的顶部，所以有人习惯称之为头部图。横幅广告地图的设计会极大地影响用户在网站上的停留时间。所以网站的横幅广告设计非常重要，尤其是对于电子商务网站，甚至可以影响到用户的购买欲望！…

Banner map一般是指网站页面的Banner广告图，在网页的顶部，所以有人习惯称之为头部图。横幅广告地图的设计会极大地影响用户在网站上的停留时间。所以网站的横幅广告设计非常重要，尤其是对于电子商务网站，甚至可以影响到用户的购买欲望！

大概国内很多设计师其实都注意到了，网页设计做得好不好，除了网页本身的布局和配色之外，很大程度上取决于画图的应用技巧。但是，即使你把辛辛苦苦得来的好图在网页上传播出去，恐怕也很难取得巧妙的效果。因此，如何设计第一张图片是网页设计中一个非常重要的问题。为此，我们奉献8个设计技巧，全部来自实践经验，以期与大家共同探讨。

一、双色冰淇淋渐变

当第一张图作为全屏出血图处理时，你可以把图片涂成双色渐变，有点像我们吃的双色冰激凌球。选择一组你认为能刺激心理氛围的颜色，最好是对比色，会带来强烈的视觉落差。因为是作为背景存在的，所以整体的颜色亮度应该和文字的颜色不一样。这里推荐的方法，使用PS中的“渐变贴图”工具就可以轻松获得。

在上面展示的设计中，我们不仅使用了这种双色映射，还使用线条来创建视觉焦点，引导用户的视线。

二、线条引流

没错，延续上例使用的方法，这也是第一张图的一种设计方法。在第一张图中，让线条引导实现穿过你希望焦点停留的地方。

上图所示的设计侧重于模型和人物。所以我们采用了数字9的行方向，利用了这条线的圆周运动，最后从上到下走完了字符。这里的心理预期是写完9笔，所以你是不可能跳过字的。

三、动态情景

对于第一张图片的选择，可以重点看动态场景。这种动态场景会因为自身模型的动态建模，调动观众的运动神经，激发页面的活力。

可以想象，如果把上图中的主角换成静物，效果会不一样。这里改变模型的方向，然后再次降低透明度的做法，带来了一定的虚实结合的感觉。

四、谨慎配色

我们希望您在使用第一张图片时，尽量不要接触普通的风景图片。自然风光虽好，但大面积的景物会呈现出饱和的色彩叠加。事实上，它在网页中的应用有点不集中。因为你要对最终图片使用后出现的颜色负责，所以尽量把颜色控制在三种颜色以内。相信设计师都会认同这个原则。所以这里的图片颜色要克制。

比如这个设计，整个画面呈现一大片灰色，其实就是色彩控制的技巧。当然，你有一件大花外套也无伤大雅。关键是要注意元素的颜色，还要警惕第一张图片本身的颜色。

五、虚拟现实

g>

当然，我们这里谈的不是虚拟现实（VR），而是在首图设计时，试着将静物表现得更为“现实”，好像它们就在你的屏幕上，随手可以取到。但这个表达法，最紧要的是要为虚拟寻找出口，也就是说，不能完全写实，要让用户看出虚拟的破绽，从而让形象更为立体。这类表达技巧在首图中有手机，利用APP产品展示等最为常见。

这是我们今年出的一款开源的轻移动口袋杂志，展示这个设计的时候，我们就运用了虚拟现实的设计方式，增加背景图案，并让咖啡和太阳镜作为一种“休闲”的视觉提示物件，让用户能感受到它们的现实的同时又能从背景中看出“破绽”。

六、文字本身的美

每张首图也许我们都希望能配上文字，其实文字本身也能成为一种风景，有时候适当运用一些具有图像风格的文字，更能传递文字本身的能量。

如果能将文字看作图像，书法文字是最合适不过了。书法本身的随意潇洒，和普通的印刷字体相比有着不可比拟的个性感。这里，运用了书法作为主角，本身书法作为传统国粹，在东方传统的行业里运用非常应景。当然，这里的书法本身还可以写得更好。

七、静止的力量

对称能带来一种庄重静止的力量，因此，在首图设计中，你不妨采用对称的布局方式来设计首图。但由于对称本身略显得静止呆板，因此在设计上更需要多一些匠心，增加一些比较能突破规则小细节。

对称的布局最好采用倒三角的构图，这样视线会更灵活，从上往下会显得更流畅，否则就会有一种滞涩不前的感受。

八、左图右文

首图的设计除了全屏展示，还有一种方式是可以放左边图片右边文字的方式，这样的设计技巧带来的好处就是可以分割图文，特别在图片信息也同样重要的时候，如果把图文混合，双方都不够凸显，不如左右各凸出主角，跟随先左后右的视线也能传递本身的视觉效果。

如上图所示，左右结构的传达效果更为清晰明确。你不会错过图片中美食的细节，也不会忽略文字的描述。色彩是鲜艳欲滴的橙色，食物和文字背景浑然一体。

首图的设计技巧千变万化，这里只分享一小段，你的下一个设计如果苦于没有灵感，不妨看看本文。下一次我们将继续分享。

资料来源：http://www.ifeiwu.com/blog/design/1424