如何设计好网站banner广告条

2016-02-17 02:43 8 1 收藏

下面,图老师小编带您去了解一下如何设计好网站banner广告条,生活就是不断的发现新事物,get新技能~

【 tulaoshi.com - 平面设计 】

当今,无论任何一款互联网产品,都需要搭载PC平台进行推广,Banner更是推广的一大利器,怎么将Banner设计好就成为一个需要探讨研究的课题。

Banner规格尺寸大小不一,文件大小也有一定的限制,这就使得在设计上增加了许多障碍,颜色不能太丰富,否则会在文件大小的限制下失真,软文不能太多,否则会没有重点,得不偿失,怎么在方寸间把握平衡,变得十分重要。接下来,我为大家总结累一些,如有鄙陋,请指正,万分感谢。

第一部分:颜色

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/pmsj/)

1.Banner与环境对比

试想如果在一个以浅色调为基准的网站上投放Banner,是不是从明度上拉开对比会很好的提高用户的注意力呢(相反亦然)。

如何设计好网站banner广告条,PS教程,图老师教程网

以此也可推想出,如果在一个有颜色基调的网站上投放补色或者对比色的Banner,效果就会变得更瞩目(补色和对比色案例)。

如何设计好网站banner广告条,PS教程,图老师教程网

2.Banner颜色简单至上

(1)试想一个Banner五颜六色,是不是就能够吸引眼球了呢?首先,先对比一下

如何设计好网站banner广告条,PS教程,图老师教程网

哪个更吸引你的注意力呢?大多数人肯定会觉得后者给用户带来的视觉传达力更强,简洁明确、朴素有力的效果,给人一种重量感和力量感。前者颜色虽多,却没有带来更好的视觉传达效果,为什么呢?颜色过度使用会打乱色彩节奏,并且,减弱了颜色间的对比,使整体效果变弱。

(2)其次, 使用颜色越多,最后保存时文件体积越大,加载起来越慢,让用户等待就意味着和用户说再见了,如果靠降低品质来达到Banner的上传要求,那展现给用户的是低质量的banner,也一样会丢失一些用户。

如何设计好网站banner广告条,PS教程,图老师教程网

所以,颜色简单有力,加载清晰快速,对于banner的视觉传达很重要,只要让用户产生点击欲望,我们推广的目的就达到了。

第二部分:构图

1.构图的定义及规则

构图其实说白了就是经营画面,进行布局,如何在你构图的引导下吸引用户点击,产生欲望,了解内容,如果都能达到,那说明你的构图成功了。构图的基本规则是:均衡对比视点

均衡:均衡不是对称,是一种力量上的平衡感,使画面具有稳定性。

如何设计好网站banner广告条,PS教程,图老师教程网

均衡不是对称

对比:在构图上来说就是大小对比,粗细对比,方圆对比,曲线与直线对比等等。

如何设计好网站banner广告条,PS教程,图老师教程网

白色线条的对比产生了空间感

视点:就是如何将用户的目光集中在画面的中心点上,我们可以用构图去引导用户的视点

如何设计好网站banner广告条,PS教程,图老师教程网

将视点集中引导到slogan上

介绍完构图的基本规则,举例子检视下:一张X-MEN的宣传banner,这张banner人物排布既平衡又不对称,人物大小不一,产生出对比,突出了部分剧中人物。Banner正中一个大大的X,把视点集中到了画面的最中心,很好的利用基本构图规则进行banner设计。

如何设计好网站banner广告条,PS教程,图老师教程网

2.构图的样式

构图大概分以下几种:(1).垂直水平式构图 (2).三角形构图(正三角和倒三角)(3)渐次式构图 (4).辐射式构图 (5).框架式构图 (6)对角线构图

(1)垂直水平式构图:

平行排列每一个产品,每个产品展示效果都很好,各个产品所占比重相同,秩序感强,此类构图给用户心情:产品规矩正式、高大、安全感强。

如何设计好网站banner广告条,PS教程,图老师教程网

(2)正三角形和倒三角构图:

多个产品进行正三角构图,产品立体感强,各个产品所占比重有轻有重,构图稳定自然,空间感强。此类构图给用户心情:安全感极强、稳定可靠。

如何设计好网站banner广告条,PS教程,图老师教程网

多个产品进行倒三角构图,产品立体感极强,各个产品所占比重有轻有重,构图动感活泼失衡,运动感空间感强。此类构图给用户心情:不稳定感激发用户心情,给用户运动的感觉。

如何设计好网站banner广告条,PS教程,图老师教程网

(3)对角线构图:一个产品或两个产品进行组合对角线构图,产品的空间感强,各个产品所占比重相对平衡,构图动感活泼稳定,运动感空间感强。此类构图给用户心情:动感十足且稳定。

如何设计好网站banner广告条,PS教程,图老师教程网

(4)渐次式构图:多个产品进行渐次式排列,产品展示空间感强,各个产品所占比重不同,由大及小,构图稳定,次序感强,利用透视引导指向slogan。此类构图给用户心情:稳定自然,产品丰富可靠。

如何设计好网站banner广告条,PS教程,图老师教程网

(5)辐射式构图:多个产品进行辐射式构图,产品空间感强,各个产品所占比重不同,由大及小。构图动感活泼,次序感强,利用透视指向slogan,此类构图给用户心情:活泼动感,产品丰富可靠。

如何设计好网站banner广告条,PS教程,图老师教程网

(6)框架式构图:单个或多个产品框架式构图,产品展示效果好,有画中画的感觉。构图规整平衡,稳定坚固。此类构图给用户心情:稳定可信赖,产品可靠。

如何设计好网站banner广告条,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/pmsj/)

3.软文(Slogan)

(1)俗话说得好话不在多,精辟就行当今炙手火热的微博就是一个例子140字概括你要说的,Slogan也是一样。

(2)要言之有物,第一要抓住用户的心里,了解用户的想法很重要。第二我们要推给用户什么,用户对什么感兴趣。下面举个例子:

如何设计好网站banner广告条,PS教程,图老师教程网

Slogan只有四个字,终于来了,白色iphone4吊足了apple迷门近两年的胃口,这四个字恐怕是他们最想听到的。用户从不会质疑apple的性能,科技领先性及用户体验性,他们最想的恐怕就是拥有自己梦寐以求的白色iphone4。所以,apple的slogan简约而不简单。

来源:https://www.tulaoshi.com/n/20160217/1577754.html

延伸阅读
标签: PS PS基础
本期教程中我们将设置图层样式效果来制作一个内部具有斜纹效果的网页广告条,制作中主要使用了外发光、渐变叠加、图案叠加等图层样式效果。具体的方法读者可跟随教程同步制作并逐步了解。 开始实例的学习之前,可以先下载实例的配套素材,然后跟随操作步骤进行学习。 素材: MissYuan_教程素材.rar (1)运行Photoshop CS5,执行文件→打...
关于网页UI,UE之类的论点文章网上太多了,更多大师将这些大师分析到极致,无论是开发领域还是设计领域,这些真正的大师所发表的文章都从不卖弄自己,更多的分析而无私的供献自己的独道见解,他们所写博文与其它政治、娱乐、商业等领域所发表的博文完全不同类型,我不是大师,但我很崇拜大师。 一个页面最醒目最吸引用户的应该是Banner了,尤其是Web...
标签: ASP
  function ShowAd(){   var Ad_Img=new Array(10);   var Ad_Link=new Array(10);   var Ad_Showtime=new Array(10);   var Totle_Showtim=0;      //投放广告的图片路径   Ad_Img[0]="/img/banner/01.jpg";   Ad_Img[1]="/img/banner/...
网站banner从最开始的旗帜广告开始,现在已经有许多网站把banner作为网站设计的一部分,本文主要介绍这些精美的banner设计网站,告诉我们banner是如何设计和其构成部分分解,很有启发意义,推荐大家都阅读一下。 当用户访问一个网站的时候,第一屏的信息展示是非常重要的,很大程度上影响了用户是否决定停留,然而光靠文字大面积的堆积,很难...
动画型广告是最显眼的广告方式,可以在花花绿绿的网页中让浏览者无意中注意到广告内容,以达到宣传的目的,这样可以提高广告的点击率。 本例思路 .导入汽车素材,然后制作出汽车出现动画广告。 .在Flash的辅助软件SWiSHmax中制作文字动画。 .导入汽车剖面图素材,然后制作出汽车剖面图广告。 Part 1 制作汽车...

经验教程

395

收藏

46
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部