之前写的文章提到公司正在做官网改版，banner图作为第一屏展示的内容，用户第一眼看到的东西，当然是重中之重。
之前版本的banner图全部使用摄影图作为背景，设计感较弱，如下图人才招聘页面：
改版前
改版后的banner图是“深色背景+亮色图形”组成的，科技感和设计感更强。
侧脸由拼图组成，刚好缺了一块，象征着"公司就缺你这个人才啦，快到碗里来"，如下：
改版后
但一共有20多个banner要设计，工作量大不说，统一视觉关系也是难点，掌握了一下几个设计要点，能够大大提高设计效率，保证设计质量~
一、背景简单、最好是深色或者科技蓝
纯色背景或者带有微渐变，去掉多余的装饰。
美团云
二、文字简单，对比明显
字体为非衬线体，善于运用大小对比、粗细对比和明暗对比等，体现文字层级。
网易云
三、图文分开
左文右图或者左图右文。图形虽然看起来抽象，但是也是和文案相契合的。
微软Azure
阿里云
四、图形最好带有光感
利用Photoshop图层效果中的内发光、渐变叠加等等功能可以很好的做出带有发光感的效果。但是得注意透明度、色相等等的选择，需要根据感觉慢慢调整~
举个栗子：
首先，绘制一个无填充无描边的矩形，进行变形，使之成为轴测的效果；
然后，添加图层效果“内发光”，选择亮蓝色，调整透明度和发光大小；
一个带有发光效果的四边形基座就完成了，
丰富一下基座的层次，添加细节。
其余部分的绘制也是非常简单，图中的“眼睛”采用蓝绿色到蓝色的渐变，增加投影和透明度丰富层次，也能产生发光效果。
点缀的小图形，适当羽化，制造光感。
最终的整体效果如下：
五、统一色彩
不管是临近色搭配，还是对比色搭配，都要统一所有banner图使用的颜色的色值。
分享一个小窍门~Photoshop中有一个叫做“色板”的工具。可以进行自定义：
我所有的banner图都只用了这三个色彩，无非通过改变透明度的值来控制明暗关系。色板的好处就在于吸色取色时非常方便、大大节省了时间，而且还保证了视觉统一。
最后，汇总一波这段时间做的banner
http://www.zcool.com.cn/work/ZMjIyMjA4MTI=.html
网友评论