国内有大部分设计师称之为Banner，但我的概念中Banner图还是一条长长的横幅广告。国外的设计师把首图成为Hero图，Hero字面意义也就是英雄，但直接叫英雄图片恐怕带来误解，不如叫首图。首图，地位第一，又位于首页，意思直达，大家能理解就好。

大概很多设计师其实已经觉察到了，网页设计做得好不好，除了网页本身的布局、配色以外，很大程度上依赖的是配图的运用技巧。但是就算将千辛万苦淘来 的好图往网页上一摊就完事，恐怕也难取得巧妙地效果。因此，如何设计首图，又是网页设计之中一个非常重要的问题。为此，我们就此特献出八条设计技巧，全是来自深圳网站建设小编的实际经验，以期和大家共同探讨之。

一、双色冰淇淋渐变

首图当作全屏出血大图处理时，你可以将图片调色成为双色渐变，有点像我们吃的双色冰淇淋球，选一组你认为能激发心理氛围的配色，最好是对比色，带来 强烈的视觉落差。由于要作为背景而存在，整体的色彩明度要区别于文字的颜色。这里推荐的这一方式只需要利用PS中的“渐变映射”工具，就能轻松获得。

上图所示的设计中，我们不仅采用了这种双色映射，还利用线条创造了视觉焦点，引导了用户的视线。

二、线条引流

没错，延续上一个例子所用的方法，这也不失为一种首图设计方式。在首图中让线条来引导实现去穿越你想要焦点停留的地方。

上图所示的设计，重点是模特和文字，因此，我们采用了9这个数字的线条方向，利用这个线条的环绕运动，最后从上至下游走过文字。这里的心理预期是要把9笔画完成，因此你没有可能跳过文字。

三、动态情景

对于首图的选择，你可以焦距到动态场景。这类动态场景由于本身模特的动态造型，会调动观众的运动神经，激发页面的活力。

大家可以想象，如果将上图的主角换成一个静物，效果将是不同的。这里将模特的方向加以改变后重新降低透明度的做法，带来一定的虚实结合的感受。

四、谨慎配色

我们希望大家在运用首图时，尽量不要去触屏普通的风景图。自然风光虽然好，但大片风景会表现出一团饱和的颜色堆叠，其实运用在网页中略显得没有重 点。因为你要为最终配图运用以后所出现的颜色负责，色彩尽量控制在三种颜色之内，这条道理相信设计师们都会赞同，因此，这里的配图的色彩最好也能有所节 制。

如这个设计中，整个图片都呈现大片灰白，其实正是对颜色进行管控的技巧。当然你也要来个大花袄也无伤大雅，关键是运用时除了要注意元素的色彩，还要对首图的色彩本身也足够警惕。