今天是 搜索
我要找人设计

跟着网页轮播图学设计

2019-11-16 12:12 发布 

加入专辑
设计文章资讯 / 举报
本作品由会员 DO22G 发布,如侵犯了您的版权请与设友网官方联系
[10推广币/天] 购买
[comiis_subject]
  • [comiis_views]人浏览[comiis_user] 发布于[comiis_time]

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

0055394938-0.jpg.jpg

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


0055394524-1.jpg.jpg

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


00553a2U-2.jpg.jpg

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


00553923Q-3.jpg.jpg

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


0055391593-4.jpg.jpg

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


00553924D-5.jpg.jpg

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


0055393140-6.jpg.jpg

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


0055394461-7.jpg.jpg

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


0055392502-8.jpg.jpg

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


00553955c-9.jpg.jpg

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


00553962Y-10.jpg.jpg

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


00553aP7-11.jpg.jpg

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


0055394310-12.jpg.jpg

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


0055394392-13.jpg.jpg

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


0055395O3-14.jpg.jpg

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


0055393218-15.jpg.jpg

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


0055392R1-16.jpg.jpg

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


00553a558-17.jpg.jpg

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


0055393557-18.jpg.jpg

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


0055394921-19.jpg.jpg

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


00553a444-20.jpg.jpg

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


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

00553a3b-21.jpg.jpg

0055393K6-22.jpg.jpg

0055394415-23.jpg.jpg

00553aD6-24.jpg.jpg

0055395619-25.jpg.jpg

005539B42-26.jpg.jpg

00553915c-27.jpg.jpg

0055395c2-28.jpg.jpg

0055396428-29.jpg.jpg

0055391c0-30.jpg.jpg

00553944P-31.jpg.jpg

0055392914-32.jpg.jpg

0055394K5-33.jpg.jpg

0055395123-34.jpg.jpg

0055391Z2-35.jpg.jpg

0055395249-36.jpg.jpg

0055392R7-37.jpg.jpg

0055396395-38.jpg.jpg

00553910C-39.jpg.jpg

0055391292-40.jpg.jpg

00553913F-41.jpg.jpg

00553a2M-42.jpg.jpg


B Color Smilies
名片隐藏 等待作者开启>>
设友网
[5推广币/天] 购买
设计师论坛
[2推广币/天] 购买
设计师联盟
[2推广币/天] 购买
跟着网页轮播图学设计 
[2推广币/天] 购买
快速回复 返回顶部 返回列表