四Logo和Banner的设计与制作.ppt

《四Logo和Banner的设计与制作.ppt》由会员分享，可在线阅读，更多相关《四Logo和Banner的设计与制作.ppt（87页珍藏版）》请在三一文库上搜索。

1、网页美工设计商业典型案例,第4章 Logo和Banner 的设计与制作,了解网站中Logo和Banner的作用与重要性 掌握Logo的设计与制作 掌握Banner的设计与制作,本章目标,4.1 标志（Logo）,什么是标志(logo) 标志,徽标,商标(logo)是现代经济的产物,它不同与古代的印记,现代标志承载着企业的无形资产,是企业综合信息传递的媒介. 标志作为企业CIS战略的最主要部分,在企业形象传递过程中,是应用最广泛,出现频率最高,同时也是最关键的元素.企业强大的整体实力,完善的管理机制,优质的产品和服务,都被涵概于标志中,通过不断的刺激和反复刻画,深深的留在受众心中.,LOGO参考

2、报价,50 150 元 / 每个,TITLE LOGO参考报价 100 300 元 / 每个,4.1.1 Logo的特点与设计原则,Logo的特点 功用性 : 经过艺术设计的标志虽然具有观赏价值,但标志主要不是为了供人观赏,而是为了实用. 标志有为人类共用的,如公共场所标志,交通标志,安全标志,操作标志等; 有为国家,地区,城市,民族,家族专用的旗徽等标志; 有为社会团体,企业,仁义,活动专用的,如会徽,会标,厂标,社标等; 有为某种商品产品专用的商标; 还有为集体或个人所属物品专用的,如图章,签名,花押,落款,烙印等, 都各自具有不可替代的独特功能. 具有法律效力的标志尤其兼有维护权益的特殊

3、使命.,4.1.1 Logo的特点与设计原则,Logo的特点 识别性 ：标志最突出的特点是各具独特面貌,易于识别.显示事物自身特征,标示事物间不同的意义、区别与归属是标志的主要功能。 各种标志直接关系到国家、集团乃至个人的根本利益，决不能相互雷同、混淆，以免造成错觉。因此标志必须特征鲜明，令人一眼即可识别，并过目不忘。,4.1.1 Logo的特点与设计原则,Logo的特点 显著性 ：显著是标志又一重要特点，除隐形标志外，绝大多数标志的设置就是要引起人们注意。因此色彩强烈醒目、图形简练清晰，是标志通常具有的特征。,4.1.1 Logo的特点与设计原则,Logo的特点 多样性 标志种类繁多、用途广

4、泛，无论从其应用型式、构成形式、表现手段来看，都有着极其丰富的多样性。,4.1.1 Logo的特点与设计原则,Logo的特点 多样性 应用形式：有平面的 ，还有立体的 。 构成形式：有直接利用物象的，有以文字符号构成的，有以具象、意象或抽象图形构成的，有以色彩构成的。多数标志是由几种基本形式组合构成的。 表现手段：其丰富性和多样性几乎难以概述，而且随着科技、文化、艺术的发展，总在不断创新。,4.1.1 Logo的特点与设计原则,Logo的特点 艺术性 经过设计的非自然标志都具有某种程度的艺术性。既符合实用要求，又符合美学原则，给予人以美感，是对其艺术性的基本要求。一般来说，艺术性强的标志更能吸

5、引和感染人，给人以强烈和深刻的印象。 标志的高度艺术化是时代和文明进步的需要，是人们越来越高的文化素养的体现和审美心理的需要。,4.1.1 Logo的特点与设计原则,Logo的特点 准确性 标志无论要说明什么、指示什么，无论是寓意还是象征，其含义必须准确。首先要易懂，符合人们认识心理和认识能力。 其次要准确，避免意料之外的多解或误解，尤应注意禁忌。让人在极短时间内一目了然、准确领会无误，这正是标志优于语言、快于语言的长处。,4.1.1 Logo的特点与设计原则,Logo的特点 持久性 标志与广告或其它宣传品不同，一般都具有长其使用价值，不轻易改动。,曾有人断言:“即使一把火把可口可乐的所有资产

6、烧光,可口可乐凭着其商标,就能重新起来“. 因此,具有长远眼光的企业,十分重视logo设计同时了解标志的作用,在企业建立初期,好的logo设计无疑是日后无形资产积累的重要载体,如果没有能客观反映企业精神,产业特点,造型科学优美的标志,等企业发展起来,在做变化调整,将对企业造成不必要的浪费和损失. 中国银行进行标志变更后,仅全国拆除更换的户外媒体,就造成了2000万的损失.,百事可乐logo的变更史,4.1.1 Logo的特点与设计原则,Logo的设计原则 1设计应在详尽明了设计对象的使用目的,适用范畴及有关法规等有关情况和深刻领会其功能性要求的前提下进行. 2设计须充分考虑其实现的可行性,针对

7、其应用型式,材料和制作条件采取相应的设计手段.同时还要顾及应用于其它视觉传播方式(如印刷,广告,映像等)或放大,缩小时的视觉效果. 3设计要符合作用对象的直观接受能力,审美意识,社会心理和禁忌.,4构思须慎重推调皮,力求深刻,巧妙,新颖,独特,表意准确,能经受住时间的考验. 5构图要凝练,美观,适形(适应其应用物的形态). 6图形,符号既要简练,概括,又要讲究艺术性. 7色彩要单纯,强烈,醒目. 8 遵循标志艺术规律,创造性的探求恰切的艺术表现形式和手法,锤炼出精当的艺术语言使设计的标志具有高度整体美感,获得最佳视觉效果,是标志设计艺术追求的准则.,4.1.1 Logo的特点与设计原则,标志的

8、艺术规律 符号美 ：标志艺术是一种独具符号艺术特征的图形设计艺术。它把来源于自然、社会以及人们观念中认同的事物形态、符号（包括文字）、色彩等，经过艺术提炼和加工，使之结构成具有完整艺术性的图形符号，从而区别于装饰图和其它艺术设计。,4.1.1 Logo的特点与设计原则,特征美 ： 特征美也是标志艺术独特的艺术特征。 标志图形所体现的不是个别事物的个别特征（个性），而是同类事物整体的本质特征（共性），或说是类别特征。通过对这些特征的艺术强化与夸张，获得共识的艺术效果。,4.1.1 Logo的特点与设计原则,凝练美 ： 构图紧凑、图形简练，是标志艺术必须遵循的结构美原则。标志不仅单独使用，而且经常

9、用于各种文件、宣传品、广告、映像等视觉传播物之中。具有凝练美的标志，在任何视觉传播物中（不论放得多大或缩得多小）都能显现出自身独立的完整的符号美。,标志的表现手段,1,表象手法:采用与标志对象直接关联而具典型特征的形象,直述标志目瞪口呆的.这种手法直接,明确,一目了然,易于迅速理解和记忆. 如表现出版业以书的形象 表现铁路运输业以火车头的形象 表现银行业以钱币的形象为标志图形等,2,象征手法:采用与标志内容有某种意义上的联系的事物图形,文字,符号,色彩等,以比喻,形容等方式象征标志对象的抽象内涵. 如用交叉的斧头象征工农联盟 用挺拔的幼苗象征少年儿童的茁壮成长 象征性标志往往采用已为社会约定俗

10、成认同的关联物象作为有效代表物. 如用鸽子象征和平,用雄狮,雄鹰象征英勇,用日,月象征永恒,用松鹤象征长寿,用白色象征纯洁,用绿色象征生命等等.这种手段蕴涵深邃,适应社会心理,为人们喜闻乐见.,3,寓意手法:采用与标志含义相近似或具有寓意性的形象,以影射,暗示,示意的方式表现标志的内容和特点. 如用伞的形象暗示防潮湿,用玻璃杯的形象暗示易破碎,用箭头形象示意方向等. 4,模拟和法:用特性相近事物形象模仿或比拟所标志对象特征或含义的手法. 如日本全日空航空公司采用仙鹤展翅的形象比拟飞行和祥瑞,日本佐川急便车采用奔跑的人物形象比拟特快专递等.,5,视感手法:采用并无特殊含义的简洁而形态独特的抽象图

11、形,文字或符号,给人一种强烈的现代感,视觉冲击感或舒适感,引起人们注意并难以忘怀.这种手法不靠图形含义而主要靠图形,文字或符号的视感力量来表现标志. 如日本五十铃公司以两个棱形为标志,李宁牌运动服将拼音字母“L“横向夸大为标志等. 为使人辨明所标志的事物,这种标志往往配有少量小字,一旦人们认同这个标志,去掉小字也能辨别它.,欣赏：,人物图形和文字域名的结合,具象图形和文字域名的结合,英国威尔士政府印章式图案的标志,形象化的西餐厅标志,字母错位，使用不同的颜色加以变化,圆形符号突出文字组成的标志,Logo设计,1.纯文字 最直接的表达方式，不作修饰和掩盖.,2.文字加点缀 洁简的文字加上创意的矢

12、量图形点缀.这类风格Logo使用最广泛。,3.带3D元素和质感 3D质感的logo相对比较少，除了流行趋势外，主要是和网络产品文化有关。,4.暖色简洁矢量 优秀Blog和个人站点比较常用的风格 。,经典logo设计分析：,经典logo设计分析：,设计拓展,客户要求：制作房产项目logo 1.房产案名为“水景嘉园” 英文名称“WATER BANK GARDEN” 2.体现传统文化的底蕴 体现水景景致 体现城市特色 颜色体现中国传统,作前分析：头脑风暴 具体实施方法： 1.找形象代言的元素（海选） a：水景元素 b：传统文化元素 c：城市形象元素 d：传统色彩元素,2.筛选相关元素（复赛） 筛选各

13、个元素的具有代表性的元素。 3.整合（决赛） 再次筛选出各个能彼此联系的元素进行组合。组合方式方向：形、意、色。制作成初稿。,BANNER参考报价,80 250 元 / 每个,4.2.1 Banner的标准与设计原则,关于Banner： 1、什么是Banner？ 可以是网站页面的横幅广告，也可以是游行活动时用的旗帜，还可以是报纸杂志上的大标题。Bnner主要体现中心意旨，形象鲜明表达最主要的情感思想或宣传中心。 即网络广告，是一个表现商家广告内容的图片，放置在广告商的页面上，通常大小为468*60像素，往往做成动画形式，这样更具有吸引力。,2、做一个有吸引力的 Banner 比什么都重要。广告

14、Banner要能在几秒甚至是零点几秒之内抓住读者的注意力，否则网上漫游者很快就会进入其它链接。 3、动画Banner(横条)比静态或单调的Banner更具优势。统计表明动画图片的吸引力比静止画面高三倍。 4、网幅广告, 旗帜广告, 横幅广告 (网络广告的主要形式, 一般使用GIF格式的图像文件, 可以使用静态图形, 也可用多帧图像拼接为动画图像),1997年第一次标准公布 规格（像素） 名称 46860 全尺寸banner 39272 全尺寸带导航条banner 23460 半尺寸banner 125125 方形按钮 12090 按钮1或小图标 12060 按钮2或小图标 8831 小按钮或b

15、anner 120240 垂直banner,2001年第二次标准公布 规格（像素） 名称 120600 “摩天大楼“形 160600 宽“摩天大楼“形 180150 长方形 300250 中级长方形 336280 大长方形 240400 竖长方形 250250 “正方形弹出式“广告,4.2.1 Banner的标准与设计原则,BANNER设计原则： 尽量选择国际标准尺寸，也可以根据页面空间来制定特殊广告位和广告条大小。 一个页面内不宜有超出两个46860像素的全尺寸Banner。 8831像素的Banner：网站之间站长互换时长采用，它可以代表网站的形象，有时候甚至真正起到像标识一样的作用，一个

16、设计好的互换Banner，应该能够概括一个网站的风格。,设计Banner时应该致意以下几点。 确定是动态还是静态的Banner。 Banner的“重量”要轻，以46860像素的Banner为例，大小最好是20KB左右，不要超过35KB；而8831像素的Banner大小最好在5KB左右，不要超过7KB。当然随着网络宽带的普及，以后在“重量”方面的压力会逐渐减小。 Banner的制作方法有很多，对于不同创意的导航条，也应选择不同的制作方法。只要保证Banner的视觉效果好，制作出“重量”最轻的方法，就是最好的方法。,广告并不便宜。确信你的广告被第一时间读到。 一个经过精心设计的Banner和一个创

17、意平淡Banner在点击率上将会相差很大。在广告文案方面，用一两句广告语来表达即可。 广告语要琅琅上口，图形无需太复杂，文字尽量使用黑体等粗壮的字体，防止在视觉上被网页中其他内容所淹没。,当用户访问一个网站的时候，第一屏的信息展示是非常重要的，很大程度上影响了用户是否决定停留，然而光靠文字大面积的堆积，很难直观而迅速的告诉用户来到这里会得到什么有用的信息，因此网页Banner设计在这里起到了至关重要的展示作用，特别是对于首页Banner，有效的信息传达让用户和文字之间的互动变得生动而有趣，下面就让我们通过大量优秀的设计案例走进Banner设计，走进设计师们的灵感挥洒空间。,一.Banner的构

18、成与设计形态分解 自然界的万物形态构成都离不开点、线、面。它们是视觉构成的基本元素，具有不同的情感特征，因此要善于采用不同的组合去体现不同Banner的情感诉求。 a.点的聚合 点的排列所引起的视觉流动，引入了时间的因素,利用点的大小、形状与距离的变化，可以设计出富于节奏韵律的画面。点的连续排列构成线，点与点之间的距离越近，线的特性就越显著。点的密集排列构成面，同样，点的距离越近，面的特性就越显著。,无数图形的点聚合在一起，增强画面的韵律感,b.线的流动 线分为四类：直线、曲线、折线以及三者的混合。直线又有水平线、垂直线、斜线三种形式。其中，水平线给人平静、开阔、安逸的感受；垂直线给人崇高、挺

19、拔、严肃的感受；曲、折、弧线具有强烈的动感，更容易引起视线的前进、后退或摆动。,c.面的分割 面在设计中的概念，可以理解为点的放大，点的密集或线的重复。Banner元素在不同大小色块元素的风格对比下，能获得清晰、条理的秩序，同时在整体上也显得和谐统一,二.有效的设计创意方法 a.预留大面积的Banner空间创作 Banner设计占用很大的空间，且占用的空间是重要而有价值的面积，那么你需要万分小心的去处理，但是如果处理的好的话，它将会事倍功半，而且信息传达非常有效。,b.有效的措辞与行为导向按钮 在banner设计中通过真实产品的展示，并配以鼓动人心的措辞口号及醒目的可以直接诱导用户点击的行为导

20、向按钮，让网页获得更多的用户点击和关注目光。,c.插图及清新手绘让页面倍感亲切,d.引入肢体语言让画面变得生动,e.丰富的产品展示组合效果 用堆积这种效布局特效来展示不同的作品示例，并附上一条介绍性质的口号，网页变得更有说服力，丰富而富有层次感。,f.特殊肌理的组合 适当的运用肌理以及拼贴效果，让画面变得有质感且意味深长，是让Banner与众不同的好办法之一。,g.让资讯循环动起来 使用滑动效果来将更多信息填进到Banner区域。这对于有很多特性和丰富产品线的网站很有用，通过一些很有用的Javascript库及其插件，让这类效果更加活灵活现。,h.线条与光线 渐变的背景在融入线条元素，让Banner更加动感夺目，单色或多色的光线让线条和背景更加炫彩，使Banner充满迷幻进一步刺激用户的探索欲望。,i.纯文字内容的Banner 不需要华丽的背景,更不需要图片的点缀,只需要一段文字加上单调的背景色,了解网站中Logo和Banner的作用与重要性 掌握Logo的设计与制作 掌握Banner的设计与制作,本章总结,作业：,根据本章的学习制作 1、设计特色logo3-5个。 2、设计特色Banner静态、gif、flash各一个。,