网页设计 » 视觉设计 » 跟着网页轮播图学设计

跟着网页轮播图学设计

发表于: 视觉设计. 评论
Sponsor

轮播图或者说banner图是用户在网站首页最先看到的画面,所以品牌方和设计师都会比较重视,再加上网页设计自带互联网属性,又是RGB颜色模式,所以有很多优秀的作品,是学习排版、构图、形式、配色的好对象,以下便是葱爷最新收集的一波banner图设计作品,来看看它们分别有哪些设计技巧值得我们学习。

跟着网页轮播图学设计

▲用斜色块横跨背景,然后把主体压在色块上是一种很经典的设计形式,能够有效增强视觉冲击。

跟着网页轮播图学设计

▲在灰黑的背景上搭配以白色为主、暖色为辅的主体元素。

跟着网页轮播图学设计

▲把特写人物或动物五官的图片作为画面主体,全貌图则缩小作为点缀即可,背景尽量简单、模糊一点,这种形式具有很强的吸引力和感染力,但对图片质量要求比较高。

跟着网页轮播图学设计

▲把具有重复元素的图片平铺当成背景,如草丛、树丛、花丛、森林、沙滩等等,通常会有不错的效果。

跟着网页轮播图学设计

▲低饱和度深蓝色搭配香槟金,字体选用衬线体,老高级了。

跟着网页轮播图学设计

▲去底的大图与不去底的小图形成内容上的呼应,既能增强对比,又能加强画面的整体性。

跟着网页轮播图学设计

▲大面积的紫色与小面积蓝色、白色、黄色、玫红色搭在一起,会显得比较时尚、年轻。

跟着网页轮播图学设计

▲把同类型的2-3张图片分别嵌入到大小相同的圆内,然后把图片交叉的部分裁成直边,错位组合,并把图片与图片交接处用直线隔开。此形式给人的感觉既统一又具有变化。

跟着网页轮播图学设计

▲在黑色背景中搭配高饱和度的渐变色块,色块的布局要有大小和疏密对比。

跟着网页轮播图学设计

▲把背景等分成三份,任意相连两个色块使用近似色,另一色块使用与其对比较强的颜色(可以是色相对比、明度对比或饱和度对比),然后把主体置于形成对比关系的两个色块交汇处。另,在标题中建立文字的粗细对比会显得更精致。

跟着网页轮播图学设计

▲把背景分为对比鲜明的两个色块,还是把主体置于色块交汇处,然后把图片属于相应色块的部分调成与色块同色系。

跟着网页轮播图学设计

▲把标题与内文左对齐,然后用短线把二者隔开,标题与内文距离短线的高度控制在内文文字高度的2-4倍为最佳。

跟着网页轮播图学设计

▲把去底图片嵌入圆形色块中,并把图片颜色与色块颜色统一,在排版时,可以把部分标题文字叠加在色块上。

跟着网页轮播图学设计

▲把照片叠印在背景色块中,并使用比较低的透明度,可以使画面更有细节和空间感。

跟着网页轮播图学设计

▲把文字或图形作为产品图片的背景,可以增加设计感。

跟着网页轮播图学设计

▲当主体位于横版画面的中间时,把主要信息集中排在一侧,另一侧可以保留大量的留白,只需把标题横跨左右两边,并在留白的一侧尾端添加一点小元素就能保持版面的平衡。

跟着网页轮播图学设计

▲还是横版,还是主体位于中央,此时两次的元素可以集中在一个矩形内排版,并严格对齐,而主体元素可以适当打破矩形,这样做可以做到既平衡统一,又有对比和变化。

跟着网页轮播图学设计

▲用几何色块以及图片排版时,色块大小不要太平均,而是要有大小对比,(把图片也看作色块。)

跟着网页轮播图学设计

▲用描边字做底,然后在其基础上排列文字,把主体元素的另一个形态作为背景。

跟着网页轮播图学设计

▲用几何形摄影图片与去底的辅助元素(树枝、水草、花草等等)组合在一起,一简一繁、一刚一柔形成强烈的对比,具有不错的视觉效果。

跟着网页轮播图学设计

▲把场景中的元素抠出来一点叠在文字上方,可以加强图片与文字的关联,以及画面的空间感。

好看的作品下面还有很多,大家慢慢看,我就不一一分析了:

跟着网页轮播图学设计

跟着网页轮播图学设计

跟着网页轮播图学设计

跟着网页轮播图学设计

跟着网页轮播图学设计

跟着网页轮播图学设计

跟着网页轮播图学设计

跟着网页轮播图学设计

跟着网页轮播图学设计

跟着网页轮播图学设计

跟着网页轮播图学设计

跟着网页轮播图学设计

跟着网页轮播图学设计

跟着网页轮播图学设计

跟着网页轮播图学设计

跟着网页轮播图学设计

跟着网页轮播图学设计

跟着网页轮播图学设计

跟着网页轮播图学设计

跟着网页轮播图学设计

跟着网页轮播图学设计

跟着网页轮播图学设计

作者:葱爷(微信ID:congyenanian)

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:结交更多有才华的设计师?请加入UI设计QQ群,与50000名设计师交流设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }