【官网改版】科技风banner的设计要点

之前写的文章提到公司正在做官网改版，banner图作为第一屏展示的内容，用户第一眼看到的东西，当然是重中之重。

之前版本的banner图全部使用摄影图作为背景，设计感较弱，如下图人才招聘页面：

改版前

改版后的banner图是“深色背景+亮色图形”组成的，科技感和设计感更强。

侧脸由拼图组成，刚好缺了一块，象征着"公司就缺你这个人才啦，快到碗里来"，如下：

改版后

但一共有20多个banner要设计，工作量大不说，统一视觉关系也是难点，掌握了一下几个设计要点，能够大大提高设计效率，保证设计质量~

一、背景简单、最好是深色或者科技蓝

纯色背景或者带有微渐变，去掉多余的装饰。

美团云

二、文字简单，对比明显

字体为非衬线体，善于运用大小对比、粗细对比和明暗对比等，体现文字层级。

网易云

三、图文分开

左文右图或者左图右文。图形虽然看起来抽象，但是也是和文案相契合的。

微软Azure

阿里云

四、图形最好带有光感

利用Photoshop图层效果中的内发光、渐变叠加等等功能可以很好的做出带有发光感的效果。但是得注意透明度、色相等等的选择，需要根据感觉慢慢调整~

举个栗子：

首先，绘制一个无填充无描边的矩形，进行变形，使之成为轴测的效果；

然后，添加图层效果“内发光”，选择亮蓝色，调整透明度和发光大小；

一个带有发光效果的四边形基座就完成了，

丰富一下基座的层次，添加细节。

其余部分的绘制也是非常简单，图中的“眼睛”采用蓝绿色到蓝色的渐变，增加投影和透明度丰富层次，也能产生发光效果。

点缀的小图形，适当羽化，制造光感。

最终的整体效果如下：

五、统一色彩

不管是临近色搭配，还是对比色搭配，都要统一所有banner图使用的颜色的色值。

分享一个小窍门~Photoshop中有一个叫做“色板”的工具。可以进行自定义：

我所有的banner图都只用了这三个色彩，无非通过改变透明度的值来控制明暗关系。色板的好处就在于吸色取色时非常方便、大大节省了时间，而且还保证了视觉统一。

最后，汇总一波这段时间做的banner

http://www.zcool.com.cn/work/ZMjIyMjA4MTI=.html