第第4章章Logo和和Banner的设计与制作的设计与制作2本章目标本章目标n了解网站中了解网站中Logo和和Banner的作用与重要性的作用与重要性n掌握掌握Logo的的设计与制作与制作n掌握掌握Banner的的设计与制作与制作34.1网站网站Logo的制作的制作标志志-用一种文字或用一种文字或图形来代表另外一种事物的符号形来代表另外一种事物的符号标志的志的类别:（1）从用途上分）从用途上分:纪念念标志：志：1979年国年国际儿童年儿童年城市城市标志：德国基志：德国基尔城城徽、城城徽、罗马城徽城徽会会议标志：奥运会志：奥运会标志志商商业标志：志：代表企代表企业公司形象公司形象*代表企代表企业产品品牌（品品牌（简单介介绍标志志设计及及艺术设计对经济的促的促进作用）作用）公共公共图形：形：贴近生活，服近生活，服务社会，于人社会，于人们的日常生的日常生活息息相关活息息相关（2）从造型特点上分：）从造型特点上分：n具象型具象型标志（特点：形象自然、生志（特点：形象自然、生动活活泼、有直、有直观趣味感趣味感)n抽象型抽象型标志（特点：造型志（特点：造型严谨、寓意深刻，是把无、寓意深刻，是把无形的事物形的事物转化化为有形的可表意的形象有形的可表意的形象n字字图型型标志（特点：运用广泛、志（特点：运用广泛、传播速度快。播速度快。4标志设计的主要原则标志设计的主要原则n简：简明易明易认，一目了然（采用美国百氏可，一目了然（采用美国百氏可乐饮料料公司公司标志的五次志的五次变革来革来说明明标志志设计从繁到从繁到简的的过程）程）n准：内容准确、形象直准：内容准确、形象直观n奇：独奇：独树一一帜、不能雷同、不能雷同n美：符合美：符合艺术美的美的规律、符合大众普通的律、符合大众普通的审美情感美情感5标志设计的艺术表现方式标志设计的艺术表现方式n（1）形象高度夸）形象高度夸张、概括、概括、简洁、几何形化（采、几何形化（采用太阳神口服液用太阳神口服液标志和捷克音志和捷克音乐学院学院标志志说明）明）*n（2）运用）运用联想、比想、比喻的方式（采用阿根廷市政的方式（采用阿根廷市政银行和某人寿保行和某人寿保险公司公司标志志说明（明（*n（3）运用象征的方式（波）运用象征的方式（波兰和平委和平委员会会标志）志）*n（4）运用民族）运用民族艺术表表现形式形式6案例分析案例分析n中国民航中国民航标志志说明：明：在在创作构思上，作者突出了作构思上，作者突出了标志志设计的民族性特点，它以中国固有民族的民族性特点，它以中国固有民族图腾形形象之一象之一“凤凰凰”作作为构构图的主体，体的主体，体现出中国出中国传统文化的血脉滋文化的血脉滋润与独特内涵。与独特内涵。n从造型特点上看，具有极从造型特点上看，具有极强的的现代代设计意意识，完，完全符合上述全符合上述标志的志的现代代设计原原则。是一幅。是一幅传统民族民族文化与文化与现代美原代美原则和和谐统一的杰作。一的杰作。78nA中国中国铁路路标志介志介绍：*“工人工人”点明点明铁路行路行业之属性，即之属性，即铁路是属于工人路是属于工人阶级的，而工人的，而工人阶级又是又是国家的主人，它洋溢着国家的主人，它洋溢着铁路工人当家作主的自豪感路工人当家作主的自豪感责任感。任感。n“人工人工”：在建国初期，中国：在建国初期，中国处于一于一穷二白的二白的阶级，而而这一一标志的含志的含义恰在恰在说明广大明广大铁路工人乃至中国人路工人乃至中国人民勇于民勇于战天斗地，不畏天斗地，不畏艰难险阻，誓与阻，誓与“天公天公”一比一比高的豪高的豪迈之气，歌之气，歌颂了了“人人”改造自然的力量和精神。改造自然的力量和精神。n在具体形象上，在具体形象上，“工工”字取字取铁轨横截面之形，整个横截面之形，整个构构图外形上外形上组成了一个完整的火成了一个完整的火车头形象，它形象，它夺面而面而来，来，蕴含了磅礴的气含了磅礴的气势，孕育着无，孕育着无穷的力量的力量910n一、一、标识整体造型整体造型质朴朴简约、静、静动相生、相生、线条流条流畅，富有富有动感。字母感。字母趋势线的的变化化组合，具有合，具有强烈的烈的时代感和代感和视觉冲冲击力，力，传达出一个达出一个现代通信企代通信企业的的崭新形象。新形象。n二、整个二、整个标识以字母以字母C为主体元素，两个主体元素，两个C在明快的在明快的节奏中交奏中交织互互动，直接代表着，直接代表着“中国中国电信集信集团公司公司”，同，同时共同共同组成了一个运成了一个运动的的“中中”字。字。n三、两个开口的字母三、两个开口的字母C向向远方无限延伸，仿佛方无限延伸，仿佛张开开的双臂，又似地球的的双臂，又似地球的经纬，传递着中国着中国电信的自信信的自信和和热情，象征着情，象征着阔达的胸襟、开放的意达的胸襟、开放的意识、长远的的目光、豪目光、豪迈的气的气势，意味着四通八达，意味着四通八达，畅通、高效通、高效的的电信网信网络连接着世界的每一个角落，服接着世界的每一个角落，服务着更多着更多的用的用户。C作作为英文英文“用用户、企、企业、合作、合作、竞争争”的第一个字母，的第一个字母，11n它的交融互它的交融互动，也，也强烈表达了中国烈表达了中国电信信“用用户至上，至上，用心服用心服务”的服的服务理念，体理念，体现了与用了与用户手拉手、心手拉手、心连心的美好情感。同心的美好情感。同时也也蕴含着中国含着中国电信全面信全面创新，新，不断超越自我，以更不断超越自我，以更宽广的胸广的胸怀与社会各界与社会各界协手合手合作，共同促作，共同促进中国信息中国信息产业进步和繁荣的良好心愿。步和繁荣的良好心愿。n四、高高挑起的两角，凸四、高高挑起的两角，凸现出出简洁而充而充满活力的牛活力的牛和振翅和振翅飞翔的和平翔的和平鸽图案。既表案。既表现了中国了中国电信脚踏信脚踏实地、求真地、求真务实、辛勤耕耘的精神，又展、辛勤耕耘的精神，又展现了中国了中国电信与信与时俱俱进、蒸蒸日上、蓬勃、蒸蒸日上、蓬勃发展的良好前景。展的良好前景。n五、五、标识以代表高科技、以代表高科技、创新、新、进步的步的蓝色色为主色主色调。文字采用。文字采用书法体，法体，显得有生命力、感染力与得有生命力、感染力与亲和力，与国和力，与国际化的化的标识相相衬，使古典与，使古典与现代融代融为一一体、体、传统与与时尚交相尚交相辉映。映。12n标志延伸雅客的品牌精神，以志延伸雅客的品牌精神，以红黄黄为主色主色调，传达甜蜜的味达甜蜜的味觉感受，象征感受，象征雅客雅客热情的服情的服务。n标志呈现抽象的标志呈现抽象的“花花”的造型，花象征新鲜、甜美，的造型，花象征新鲜、甜美，寓意产品属性，以及企业从事甜蜜的事业。美丽的寓意产品属性，以及企业从事甜蜜的事业。美丽的花朵代表甜丝丝的糖果带给人们好心情，心花怒放，花朵代表甜丝丝的糖果带给人们好心情，心花怒放，心满意足。心满意足。“幸福之花幸福之花”代表事业的发展、家庭的代表事业的发展、家庭的和谐、生活的惬意，令人们喜笑颜开。它也寓意浓和谐、生活的惬意，令人们喜笑颜开。它也寓意浓浓的亲情、真挚的友情、甜蜜的爱情，使每个人如浓的亲情、真挚的友情、甜蜜的爱情，使每个人如沐春风。正待开放的花蕾象征人们对未来的期待，沐春风。正待开放的花蕾象征人们对未来的期待，象征等待我们的美好明天：崭新的一天，幸福之花象征等待我们的美好明天：崭新的一天，幸福之花将绽放出无尽的色彩。两笔弧线构成细致的花萼，将绽放出无尽的色彩。两笔弧线构成细致的花萼，小心托起花朵，代表企业兢兢业业，呵护消费者的小心托起花朵，代表企业兢兢业业，呵护消费者的健康与愉悦。健康与愉悦。n1.标志的主体志的主体图形取意于中国古代祈求丰年的天形取意于中国古代祈求丰年的天坛，表明，表明北京北京银行在北京行在北京诞生、成生、成长，未来将以北京，未来将以北京为中心走向全中心走向全国、国、迈向世界。向世界。2.标志志设计体体现了中国了中国传统文化与文化与现代社会代社会发展的和展的和谐统一。代表一。代表诚信的信的圆形形红色印章造型色印章造型蕴含了中国含了中国传统文化中文化中重重视信用、遵守承信用、遵守承诺的良好品德。源于中国古代的良好品德。源于中国古代钱币的的设计理念，与中国悠理念，与中国悠远金融文化一脉相承。金融文化一脉相承。标志志设计还加入加入现代社会代社会发展的元素，酷似展的元素，酷似造型，体造型，体现了北京了北京银行在行在网网络信息化信息化时代的代的崭新形象。新形象。3.整个整个标志志设计动静静结合，内外兼合，内外兼顾，有如中国，有如中国书法般流法般流畅、遒、遒劲，寓意着北京，寓意着北京银行行顺畅的管理体制与运行机制，的管理体制与运行机制，象征京行人象征京行人执行有力，气魄非凡。行有力，气魄非凡。4.标志中志中B的造型体的造型体现了北京了北京银行英文名称行英文名称BankofBeijing的的缩写要素。火写要素。火红的的颜色色预示着北京示着北京银行充行充满希望希望的未来。的未来。164.1.1Logo的特点与设计原则的特点与设计原则nLogo的特点的特点（1）功用性）功用性（2）识别性性（3）显著性著性（4）多）多样性性（5）艺术性性（6）准确性）准确性（7）持久性）持久性174.1.1Logo的特点与设计原则的特点与设计原则nLogo的的设计原原则（1）设计应在在详尽明了尽明了设计对象的使用目的、适用范畴及有象的使用目的、适用范畴及有关法关法规等有关情况和深刻等有关情况和深刻领会其功能性要求的前提下会其功能性要求的前提下进行行（2）设计须充分考充分考虑其其实现的可行性，的可行性，针对其其应用型式、材用型式、材料和制作条件采取相料和制作条件采取相应的的设计手段。手段。（3）设计要符合作用要符合作用对象的直象的直观接受能力、接受能力、审美意美意识、社会、社会心理和禁忌。心理和禁忌。（4）构思）构思须慎重推慎重推调皮，力求深刻、巧妙、新皮，力求深刻、巧妙、新颖、独特，表、独特，表意准确，能意准确，能经受住受住时间的考的考验。（5）构）构图要凝要凝练、美、美观、适形（适、适形（适应其其应用物的形用物的形态）。）。（6）图形、符号既要形、符号既要简练、概括，又要、概括，又要讲究究艺术性。性。（7）色彩要）色彩要单纯、强烈、醒目。烈、醒目。184.1.1Logo的特点与设计原则的特点与设计原则（8）遵循）遵循标志志艺术规律，律，创造性的探求恰切的造性的探求恰切的艺术表表现形式和手法，形式和手法，锤炼出精当的出精当的艺术语言使言使设计的的标志具有高度整体美感、志具有高度整体美感、获得最佳得最佳视觉效果，是效果，是标志志设计艺术追求的准追求的准则。n符号美符号美n特征美特征美n凝凝练美美194.1.2Logo设计实例设计实例n如如图所示是清所示是清华同方同方Logo。204.2网站网站Banner的制作的制作n4.2.1Banner的的标准与准与设计原原则当用当用户访问一个网站的一个网站的时候，第一屏的信息展示是候，第一屏的信息展示是非常重要的，很大程度上影响了用非常重要的，很大程度上影响了用户是否决定停留，是否决定停留，然而光靠文字大面然而光靠文字大面积的堆的堆积，很，很难直直观而迅速的告而迅速的告诉用用户来到来到这里会得到什么有用的信息，因此网里会得到什么有用的信息，因此网页Banner设计在在这里起到了至关重要的展示作用，里起到了至关重要的展示作用，特特别是是对于首于首页Banner，有效的信息，有效的信息传达达让用用户和文字之和文字之间的互的互动变得生得生动而有趣，。而有趣，。一、一、Banner的构成与设计形态的构成与设计形态自然界的万物形自然界的万物形态构成都离不开点、构成都离不开点、线、面。它、面。它们是是视觉构构成的基本元素，具有不同的情感特征，因此要善于采用不成的基本元素，具有不同的情感特征，因此要善于采用不同的同的组合去体合去体现不同不同Banner的情感的情感诉求求na.点的聚合点的聚合点的排列所引起的点的排列所引起的视觉流流动，引入了，引入了时间的因素的因素,利用点的利用点的大小、形状与距离的大小、形状与距离的变化，可以化，可以设计出富于出富于节奏韵律的画奏韵律的画面。点的面。点的连续排列构成排列构成线，点与点之，点与点之间的距离越近，的距离越近，线的的特性就越特性就越显著。点的密集排列构成面，同著。点的密集排列构成面，同样，点的距离越，点的距离越近，面的特性就越近，面的特性就越显著。著。b.线的流的流动线分分为四四类：直：直线、曲、曲线、折、折线以及三者的混合。以及三者的混合。直直线又有水平又有水平线、垂直、垂直线、斜、斜线三种形式。其中，三种形式。其中，水平水平线给人平静、开人平静、开阔、安逸的感受；垂直、安逸的感受；垂直线给人人崇高、挺拔、崇高、挺拔、严肃的感受；曲、折、弧的感受；曲、折、弧线具有具有强烈烈的的动感，更容易引起感，更容易引起视线的前的前进、后退或、后退或摆动。c.面的分割面的分割面在面在设计中的概念，可以理解中的概念，可以理解为点的放大，点的点的放大，点的密集或密集或线的重复。的重复。Banner元素在不同大小色元素在不同大小色块元元素的素的风格格对比下，能比下，能获得清晰、条理的秩序，同得清晰、条理的秩序，同时在整体上也在整体上也显得和得和谐统一一二二.Banner设计的形式美法则设计的形式美法则na.有机形的柔和与美有机形的柔和与美有机形是由一定数量的曲有机形是由一定数量的曲线组合而成，是自然物外合而成，是自然物外力与内力相抗衡而形成的形力与内力相抗衡而形成的形态。有机形富有内在的。有机形富有内在的张力，力，给人以人以纯朴、温暖而富有生命力的感朴、温暖而富有生命力的感觉。曲。曲线与个性化的插与个性化的插图形成形成强烈的烈的对比。比。b.偶然形的独特魅力偶然形的独特魅力偶然形是力的作用下随机形成的偶然形是力的作用下随机形成的图形，它具有天然形，它具有天然成趣的效果，利用偶然因素提成趣的效果，利用偶然因素提炼美的方法，美的方法，让Banner设计更加与众不同更加与众不同n三三.有效的有效的设计创意方法意方法a.预留大面留大面积的的Banner空空间创作作Banner设计占用很大的空占用很大的空间，且占用的空，且占用的空间是重是重要而有价要而有价值的面的面积，那么你需要万分小心的去，那么你需要万分小心的去处理，理，但是如果但是如果处理的好的理的好的话，它将会事倍功半，而且信，它将会事倍功半，而且信息息传达非常有效。达非常有效。b.有效的措辞与行有效的措辞与行为导向按向按钮在在banner设计中通中通过真真实产品的展示，并配以鼓品的展示，并配以鼓动人心的措辞口号及醒目的可以直接人心的措辞口号及醒目的可以直接诱导用用户点点击的的行行为导向按向按钮，让网网页获得更多的用得更多的用户点点击和关注和关注目光。目光。c.插插图及清新手及清新手绘让页面倍感面倍感亲切切d.引入肢体引入肢体语言言让画面画面变得生得生动e.丰富的丰富的产品展示品展示组合效果合效果用堆用堆积这种效布局特效来展示不同的作品示例，种效布局特效来展示不同的作品示例，并附上一条介并附上一条介绍性性质的口号，网的口号，网页变得更有得更有说服力，服力，丰富而富有丰富而富有层次感。次感。f.特殊肌理的特殊肌理的组合合适当的运用肌理以及拼适当的运用肌理以及拼贴效果，效果，让画面画面变得有得有质感且意味深感且意味深长，是，是让Banner与众不同的好与众不同的好办法之法之一。一。g.让资讯循循环动起来起来使用滑使用滑动效果来将更多信息填效果来将更多信息填进到到Banner区域。区域。这对于有很多特性和丰富于有很多特性和丰富产品品线的网站很有用，通的网站很有用，通过一些很有用的一些很有用的Javascript库及其插件，及其插件，让这类效果效果更加活灵活更加活灵活现。334.2.1Banner的标准与设计原则的标准与设计原则n1997年第一次年第一次标准公布准公布规格（像素）格（像素）名称名称46860全尺寸全尺寸banner39272全尺寸全尺寸带导航条航条banner23460半尺寸半尺寸banner125125方形按方形按钮12090按按钮1或小或小图标12060按按钮2或小或小图标8831小按小按钮或或banner120240垂直垂直banner344.2.1Banner的标准与设计原则的标准与设计原则n2001年第二次年第二次标准公布准公布规格（像素）格（像素）名称名称120600“摩天大楼摩天大楼”形形160600宽摩天大楼摩天大楼形形180150长方形方形300250中中级长方形方形336280大大长方形方形240400竖长方形方形250250“正方形正方形弹出式出式”广告广告12060，这种广告种广告规格主要用于做格主要用于做LOGO使用。使用。12090，主要，主要应用于用于产品演示或大型品演示或大型LOGO。125125，这种种规格适于表格适于表现照片效果的照片效果的图像广告。像广告。23460，这种种规格适用于框架或左右形式主格适用于框架或左右形式主页的广告的广告链接。接。39272，主要用于有，主要用于有较多多图片展示的广告条，用于片展示的广告条，用于页眉或眉或页脚。脚。46860，应用最用最为广泛的广告条尺寸，用于广泛的广告条尺寸，用于页眉或眉或页脚。脚。8831，主要用于网，主要用于网页链接，或网站小型接，或网站小型LOGO354.2.1Banner的标准与设计原则的标准与设计原则n广告条尽量广告条尽量选择国国际标准尺寸。如果不是用来准尺寸。如果不是用来进行交行交换，或或仅仅针对单独的独的页面面n一个一个页面内不宜有超出两个面内不宜有超出两个46860像素的全尺寸像素的全尺寸Bannern大尺寸大尺寸Banner要注意配合要注意配合页面面设计n因因为8831像素的像素的Banner尺寸小，网站之尺寸小，网站之间互互换时常采用常采用n确定是确定是动态还是静是静态的的BannernBanner的的“重量重量”要要轻，以，以46860像素的像素的Banner为例，大例，大小最好是小最好是20KB左右左右n不要超不要超过35KB；而；而8831像素的像素的Banner大小最好在大小最好在5KB左左右，不要超右，不要超过7KB。当然随着网。当然随着网络宽带的普及的普及36本章总结本章总结n了解网站中了解网站中Logo和和Banner的作用与重要性的作用与重要性n掌握掌握Logo的的设计与制作与制作n掌握掌握Banner的的设计与制作与制作