非凡资讯

网页设计培训资讯>上海普陀Web网页设计培训班老师教你轻松做出漂亮的网页Banner设计

上海普陀Web网页设计培训班老师教你轻松做出漂亮的网页Banner设计
发布日期:2020/7/23 13:41:36    上海普陀Web网页设计培训班 2 分享
网页设计中,banner应该是最耗时间的模块了,很多学习Web前端设计培训课程的学员都比较头疼这一块,其实没有大家想象的那么难,看下面一幅图,你看到了什么?
上海网页设计培训
上图就是典型的网页banner,从图中,我们看到了产品(鞋子)、文案(勇攀高峰等)、背景(山、天、树、石等),其实百分之八九十的banner就包括这三个方面,我们简单概括为三步骤:搭背景、输文案、放产品。接下来,Web前端设计培训课程老师从这三个步骤分别分析其中的易错点。

一、搭背景

1、搭背景-合成细节
先来对比以下两款banner(只看背景部分)。
上海网页设计培训上海网页设计培训
问题1:图一搜索的素材有平视有仰视比较错乱,图二透视关系是对的;
问题2:图一明度从左到右一致,图二明暗关系有层次;
问题3:图一色系太多显得有点花,图二配色会比较舒服。
综上,搭背景要注意合成细节,要看起来像是一整幅画那么和谐,而不是硬生生的拼凑到一起,要二次处理,主要体现在视角、明暗和色调。

2、搭背景-是否抢镜
先来对比以下两款banner(只看背景部分)。
上海网页设计培训上海网页设计培训
问题1:图一素材占比重比较大,抢文案的镜,图二背景稍显利索;
问题2:图一金币的种类比较杂乱,图二相对单一;
问题3:图一素材铺的特别满,图二能够给画面留一些空隙,疏密合适。
综上,搭背景要注意不要抢产品和文案的镜,banner的主角是文案和产品,背景只是陪衬,所以不能抢镜,主要体现在太花、太乱和太满。

3、搭背景-有无层次
先来对比以下两款banner(只看背景部分)。
上海网页设计培训上海网页设计培训
问题1:图一只有宽度高度而没有厚度,图二有远近透视,让画面有了厚度;
问题2:图一背景铺的微微的渐变,图二有虚实明暗大小远近的层次关系。
综上,搭背景要注意有层次,让画面不止有宽度和高度,还要有厚度,主要体现在三维概念和明暗虚实。

二、输文案
 
1、输文案-整体整齐
先来对比以下两款banner(只看文案部分)。 
上海网页设计培训上海网页设计培训 
问题1:图一有水平、有倾斜有些许乱,图二整体左右对齐。
综上,输文案要注意整体整齐,注意不是每一句话都对齐,只要整体整齐就足矣,这样才显得利索。这个最简单了,无非就是左对齐、右对齐、居中对齐、两端对齐。

2、输文案-紧凑清晰
先来对比以下两款banner(只看文案部分)。
上海网页设计培训上海网页设计培训
问题1:图一文案放的满画面都是,图二文案放的比较紧凑集中;
问题2:图一文字有部分看不清,图二清晰明了。
综上,输文案要注意紧凑清晰,在这个快节奏的社会里,文案要遵循扫描式阅读,让用户一眼就能抓取到信息,主要体现在不满屏放、文字识别度要高。

3、输文案-是否有主次
先来对比以下两款banner(只看文案部分)。
上海网页设计培训上海网页设计培训
问题1:图一字号一致,没有主次,图二有明显的主次关系;
问题2:图一文案普通,没有创意,图二有文案创意,比较新颖。
综上,输文案要注意主次,只有体现出主次,才能有懒人阅读法的作用,如果让人印象深刻,主文案最好有文案创意,主要体现在字号、颜色、文案创意。

三、放产品
 
1、放产品-是否精修
先来对比以下两款banner(只看产品部分)。
上海网页设计培训上海网页设计培训
问题1:图一产品在画面中比较飘,图二产品在背景图上比较稳;
问题2:图一产品色调有点暗淡不像新品,图二比较清亮吸引人。
综上,产品要注意精修,不能止于抠图,要把拍出来的产品精修出高大上的感觉,让产品在画面中很协调,主要体现在立体性、光影的变化。

2、放产品-是否高清
先来对比以下两款banner(只看产品部分)。
上海网页设计培训上海网页设计培训
问题1:图一模特图比较模糊,图二产品比较清晰。
综上,产品一定要注意高清,想必不做设计的人员也不会喜欢模糊的图,所以这是最基本最简单的,主要体现在不模糊、不水印、不变形。

3、放产品-是否融入画面
先来对比以下两款banner(只看产品部分)。
上海网页设计培训上海网页设计培训
问题1:图一产品与模特跟背景不融合,图二比较协调;
问题2:图一产品识别度不高,图二产品清晰可见;
问题3:图一产品大小比重比较低,不能够引起用户的注意,图二产品比例合理。
综上,产品要注意与背景的融合度,不能各自为营,互不干涉,要融为一体,在一块合情合理,主要体现在色调、大小、比例和前后层次。
 
通过以上的讲解,相信大家也会觉得banner其实并不难,跟套公式一样,每项注意就可以,我们来总结一下:
第一:搭背景,注意合成细节、是否抢镜、层次感
第二:输文案,注意整体整齐、紧凑清晰、有主次
第三:放产品,注意是否精修、是否高清、融合度
Web前端设计培训课程老师整理的以上总结,希望能帮助大家设计出既有效率又有质量的网页banner。

上海Web前端设计培训
本文来源:上海非凡进修学院。整理:Web前端设计培训课程老师。更多资讯【请关注微信号:feifanxueyuan】(版权声明:推送文章和图片我们都会注明作者和来源,除非无法确认。部分文章和图片推送时未能与原作者取得联系,若涉及版权,烦请原作者联系小编更正,谢谢!)
相关文章:
上海普陀Web网页设计培训班老师教你轻松做出漂亮的网页Banner设计
上海徐汇Web前端开发网页设计师培训机构学校地址,地铁站到校路线
上海网页web前端设计培训网页制作网站建设培训暑假班课程报名中,优惠送大礼
上海闵行七宝web前端工程师培训班多少费用,网页前端网站重构原因有哪些
网页前端培训机构非凡教育教你轻松消除Dreamweaver热点边框
免费试听热门课程
在线客服
免费试听
助学分期
学费查询
开班查询
就业薪资