轻松做出漂亮的网页Banner设计

来源：上海非凡网页设计培训学校时间：2020/8/5 11:08:30

　　轻松做出漂亮的网页Banner设计，网页设计中，banner应该是耗时间的模块了，很多学员都比较头疼这一块，其实没有大家想象的那么难，看下面一幅图，你看到了什么？

　　上图就是典型的网页banner，从图中，我们看到了产品（鞋子）、文案（勇攀高峰等）、背景（山、天、树、石等），其实百分之八九十的banner就包括这三个方面，我们简单概括为三步骤：搭背景、输文案、放产品。接下来，我们从这三个步骤分别分析其中的易错点。

　　一、搭背景

　　1、 搭背景-合成细节

　　先来对比以下两款banner（只看背景部分）。

　　问题1：图一搜索的素材有平视有仰视比较错乱，图二透视关系是对的；

　　问题2：图一明度从左到右一致，图二明暗关系有层次；

　　问题3：图一色系太多显得有点花，图二配色会比较舒服。

　　综上，搭背景要注意合成细节，要看起来像是一整幅画那么和谐，而不是硬生生的拼凑到一起，要二次处理，主要体现在视角、明暗和色调。

　　2、 搭背景-是否抢镜

　　先来对比以下两款banner（只看背景部分）。

　　问题2：图一金币的种类比较杂乱，图二相对单一；

　　问题3：图一素材铺的特别满，图二能够给画面留一些空隙，疏密合适。

　　综上，搭背景要注意不要抢产品和文案的镜，banner的主角是文案和产品，背景只是陪衬，所以不能抢镜，主要体现在太花、太乱和太满。

　　3、 搭背景-有无层次

　　先来对比以下两款banner（只看背景部分）。

　　问题1：图一只有宽度高度而没有厚度，图二有远近透视，让画面有了厚度；

　　问题2：图一背景铺的微微的渐变，图二有虚实明暗大小远近的层次关系。

　　综上，搭背景要注意有层次，让画面不止有宽度和高度，还要有厚度，主要体现在三维概念和明暗虚实。

　　二、输文案

　　1、 输文案-整体整齐

　　先来对比以下两款banner（只看文案部分）。

　　问题1：图一有水平、有倾斜有些许乱，图二整体左右对齐。

　　综上，输文案要注意整体整齐，注意不是每一句话都对齐，只要整体整齐就足矣，这样才显得利索。这个简单了，无非就是左对齐、右对齐、居中对齐、两端对齐。

　　2、 输文案-紧凑清晰

　　先来对比以下两款banner（只看文案部分）。0

　　问题2：图一文字有部分看不清，图二清晰明了。

　　综上，输文案要注意紧凑清晰，在这个快节奏的社会里，文案要遵循扫描式阅读，让用户一眼就能抓取到信息，主要体现在不满屏放、文字识别度要高。

　　3、 输文案-是否有主次

　　先来对比以下两款banner（只看文案部分）。

　　问题2：图一文案普通，没有创意，图二有文案创意，比较新颖。

　　综上，输文案要注意主次，只有体现出主次，才能有懒人阅读法的作用，如果让人印象深刻，主文案好有文案创意，主要体现在字号、颜色、文案创意。

　　三、放产品

　　1、 放产品-是否精修

　　先来对比以下两款banner（只看产品部分）。

　　问题2：图一产品色调有点暗淡不像新品，图二比较清亮吸引人。

　　综上，产品要注意精修，不能止于抠图，要把拍出来的产品精修出高大上的感觉，让产品在画面中很协调，主要体现在立体性、光影的变化。

　　2、 放产品-是否高清

　　先来对比以下两款banner（只看产品部分）。

　　问题1：图一模特图比较模糊，图二产品比较清晰。

　　综上，产品一定要注意高清，想必不做设计的人员也不会喜欢模糊的图，所以这是基本简单的，主要体现在不模糊、不水印、不变形。

　　3、 放产品-是否融入画面

　　先来对比以下两款banner（只看产品部分）。

　　问题2：图一产品识别度不高，图二产品清晰可见；

　　问题3：图一产品大小比重比较低，不能够引起用户的注意，图二产品比例合理。

　　综上，产品要注意与背景的融合度，不能各自为营，互不干涉，要融为一体，在一块合情合理，主要体现在色调、大小、比例和前后层次。

　　通过以上的讲解，相信大家也会觉得banner其实并不难，跟套公式一样，每项注意就可以，我们来总结一下：

　　：搭背景，注意合成细节、是否抢镜、层次感

　　第二：输文案，注意整体整齐、紧凑清晰、有主次

　　第三：放产品，注意是否精修、是否高清、融合度

　　以上是上海非凡进修学院Web网页设计张老师的总结，希望能帮助大家设计出既有效率又有质量的网页banner。

尊重原创文章，转载请注明出处与链接：http://www.peixun360.com/3301/news/232818/违者必究！ 以上就是上海非凡网页设计培训学校 小编为您整理 轻松做出漂亮的网页Banner设计的全部内容。