Logo和Banner的设计与制作

1、2本章目标本章目标 n了解网站中了解网站中Logo和和Banner的作用与重要性的作用与重要性n掌握掌握Logo的设计与制作的设计与制作n掌握掌握Banner的设计与制作的设计与制作34.1 网站网站Logo的制作的制作标志标志-用一种文字或图形来代表另外一种事物的符号用一种文字或图形来代表另外一种事物的符号标志的类别标志的类别:（1）从用途上分）从用途上分:纪念标志：纪念标志：1979年国际儿童年年国际儿童年城市标志：德国基尔城城徽、罗马城徽城市标志：德国基尔城城徽、罗马城徽会议标志：奥运会标志会议标志：奥运会标志商业标志：代表企业公司形象商业标志：代表企业公司形象*代表企业产品品牌（简单介

2、绍标志设计及艺术设代表企业产品品牌（简单介绍标志设计及艺术设计对经济的促进作用）计对经济的促进作用）公共图形：贴近生活，服务社会，于人们的日常生公共图形：贴近生活，服务社会，于人们的日常生活息息相关活息息相关（2）从造型特点上分：）从造型特点上分：n具象型标志（特点：形象自然、生动活泼、有直具象型标志（特点：形象自然、生动活泼、有直观趣味感观趣味感)n抽象型标志（特点：造型严谨、寓意深刻，是把抽象型标志（特点：造型严谨、寓意深刻，是把无形的事物转化为有形的可表意的形象无形的事物转化为有形的可表意的形象n字图型标志（特点：运用广泛、传播速度快。字图型标志（特点：运用广泛、传播速度快。4标志设计的

3、主要原则标志设计的主要原则n简：简明易认，一目了然（采用美国百氏可乐饮简：简明易认，一目了然（采用美国百氏可乐饮料公司标志的五次变革来说明标志设计从繁到简料公司标志的五次变革来说明标志设计从繁到简的过程）的过程）n准：内容准确、形象直观准：内容准确、形象直观 n奇：独树一帜、不能雷同奇：独树一帜、不能雷同n美：符合艺术美的规律、符合大众普通的审美情美：符合艺术美的规律、符合大众普通的审美情感感5标志设计的艺术表现方式标志设计的艺术表现方式n（1）形象高度夸张、概括、简洁、几何形化（采）形象高度夸张、概括、简洁、几何形化（采用太阳神口服液标志和捷克音乐学院标志说明）用太阳神口服液标志和捷克音乐学

4、院标志说明）*n（2）运用联想、比喻的方式（采用阿根廷市政银）运用联想、比喻的方式（采用阿根廷市政银行和某人寿保险公司标志说明（行和某人寿保险公司标志说明（*n（3）运用象征的方式（波兰和平委员会标志）运用象征的方式（波兰和平委员会标志）*n（4）运用民族艺术表现形式）运用民族艺术表现形式6案例分析案例分析n中国民航标志说明：在创作构思上，作者突出了中国民航标志说明：在创作构思上，作者突出了标志设计的民族性特点，它以中国固有民族图腾形标志设计的民族性特点，它以中国固有民族图腾形象之一象之一“凤凰凤凰”作为构图的主体，体现出中国传统作为构图的主体，体现出中国传统文化的血脉滋润与独特内涵。文化的血

5、脉滋润与独特内涵。n从造型特点上看，具有极强的现代设计意识，完从造型特点上看，具有极强的现代设计意识，完全符合上述标志的现代设计原则。是一幅传统民族全符合上述标志的现代设计原则。是一幅传统民族文化与现代美原则和谐统一的杰作。文化与现代美原则和谐统一的杰作。78nA中国铁路标志介绍：中国铁路标志介绍：*“工人工人”点明铁路行业点明铁路行业之属性，即铁路是属于工人阶级的，而工人阶级又之属性，即铁路是属于工人阶级的，而工人阶级又是国家的主人，它洋溢着铁路工人当家作主的自豪是国家的主人，它洋溢着铁路工人当家作主的自豪感责任感。感责任感。n“人工人工”：在建国初期，中国处于一穷二白的阶：在建国初期，中国

6、处于一穷二白的阶级，而这一标志的含义恰在说明广大铁路工人乃至级，而这一标志的含义恰在说明广大铁路工人乃至中国人民勇于战天斗地，不畏艰难险阻，誓与中国人民勇于战天斗地，不畏艰难险阻，誓与“天天公公”一比高的豪迈之气，歌颂了一比高的豪迈之气，歌颂了“人人”改造自然的改造自然的力量和精神。力量和精神。n在具体形象上，在具体形象上，“工工”字取铁轨横截面之形，整字取铁轨横截面之形，整个构图外形上组成了一个完整的火车头形象，它夺个构图外形上组成了一个完整的火车头形象，它夺面而来，蕴含了磅礴的气势，孕育着无穷的力量面而来，蕴含了磅礴的气势，孕育着无穷的力量910n一、标识整体造型质朴简约、静动相生、线条流

7、畅，一、标识整体造型质朴简约、静动相生、线条流畅，富有动感。字母趋势线的变化组合，具有强烈的时富有动感。字母趋势线的变化组合，具有强烈的时代感和视觉冲击力，传达出一个现代通信企业的崭代感和视觉冲击力，传达出一个现代通信企业的崭新形象。新形象。n二、整个标识以字母二、整个标识以字母C为主体元素，两个为主体元素，两个C在明快在明快的节奏中交织互动，直接代表着的节奏中交织互动，直接代表着“中国电信集团公中国电信集团公司司”，同时共同组成了一个运动的，同时共同组成了一个运动的“中中”字。字。n三、两个开口的字母三、两个开口的字母C向远方无限延伸，仿佛张开向远方无限延伸，仿佛张开的双臂，又似地球的经纬，

8、传递着中国电信的自信的双臂，又似地球的经纬，传递着中国电信的自信和热情，象征着阔达的胸襟、开放的意识、长远的和热情，象征着阔达的胸襟、开放的意识、长远的目光、豪迈的气势，意味着四通八达，畅通、高效目光、豪迈的气势，意味着四通八达，畅通、高效的电信网络连接着世界的每一个角落，服务着更多的电信网络连接着世界的每一个角落，服务着更多的用户。的用户。C作为英文作为英文“用户、企业、合作、竞争用户、企业、合作、竞争”的第一个字母，的第一个字母，11n它的交融互动，也强烈表达了中国电信它的交融互动，也强烈表达了中国电信“用户至上，用户至上，用心服务用心服务”的服务理念，体现了与用户手拉手、心的服务理念，体

9、现了与用户手拉手、心连心的美好情感。同时也蕴含着中国电信全面创新，连心的美好情感。同时也蕴含着中国电信全面创新，不断超越自我，以更宽广的胸怀与社会各界协手合不断超越自我，以更宽广的胸怀与社会各界协手合作，共同促进中国信息产业进步和繁荣的良好心愿。作，共同促进中国信息产业进步和繁荣的良好心愿。n四、高高挑起的两角，凸现出简洁而充满活力的牛四、高高挑起的两角，凸现出简洁而充满活力的牛和振翅飞翔的和平鸽图案。既表现了中国电信脚踏和振翅飞翔的和平鸽图案。既表现了中国电信脚踏实地、求真务实、辛勤耕耘的精神，又展现了中国实地、求真务实、辛勤耕耘的精神，又展现了中国电信与时俱进、蒸蒸日上、蓬勃发展的良好前景

10、。电信与时俱进、蒸蒸日上、蓬勃发展的良好前景。n五、标识以代表高科技、创新、进步的蓝色为主色五、标识以代表高科技、创新、进步的蓝色为主色调。文字采用书法体，显得有生命力、感染力与亲调。文字采用书法体，显得有生命力、感染力与亲和力，与国际化的标识相衬，使古典与现代融为一和力，与国际化的标识相衬，使古典与现代融为一体、传统与时尚交相辉映。体、传统与时尚交相辉映。12n标志延伸雅客的品牌精神，以红黄为标志延伸雅客的品牌精神，以红黄为主色调，传达甜蜜的味觉感受，象征主色调，传达甜蜜的味觉感受，象征雅客热情的服务。雅客热情的服务。n标志呈现抽象的标志呈现抽象的“花花”的造型，花象征新鲜、甜美的造型，花象

11、征新鲜、甜美，寓意产品属性，以及企业从事甜蜜的事业。美丽，寓意产品属性，以及企业从事甜蜜的事业。美丽的花朵代表甜丝丝的糖果带给人们好心情，心花怒的花朵代表甜丝丝的糖果带给人们好心情，心花怒放，心满意足。放，心满意足。“幸福之花幸福之花”代表事业的发展、家代表事业的发展、家庭的和谐、生活的惬意，令人们喜笑颜开。它也寓庭的和谐、生活的惬意，令人们喜笑颜开。它也寓意浓浓的亲情、真挚的友情、甜蜜的爱情，使每个意浓浓的亲情、真挚的友情、甜蜜的爱情，使每个人如沐春风。正待开放的花蕾象征人们对未来的期人如沐春风。正待开放的花蕾象征人们对未来的期待，象征等待我们的美好明天：崭新的一天，幸福待，象征等待我们的美

12、好明天：崭新的一天，幸福之花将绽放出无尽的色彩。两笔弧线构成细致的花之花将绽放出无尽的色彩。两笔弧线构成细致的花萼，小心托起花朵，代表企业兢兢业业，呵护消费萼，小心托起花朵，代表企业兢兢业业，呵护消费者的健康与愉悦。者的健康与愉悦。n1.标志的主体图形取意于中国古代祈求丰年的天坛，表明标志的主体图形取意于中国古代祈求丰年的天坛，表明北京银行在北京诞生、成长，未来将以北京为中心走向全北京银行在北京诞生、成长，未来将以北京为中心走向全国、迈向世界。国、迈向世界。 2.标志设计体现了中国传统文化与现代社会发展的和谐统标志设计体现了中国传统文化与现代社会发展的和谐统一。代表诚信的圆形红色印章造型蕴含了

13、中国传统文化中一。代表诚信的圆形红色印章造型蕴含了中国传统文化中重视信用、遵守承诺的良好品德。源于中国古代钱币的设重视信用、遵守承诺的良好品德。源于中国古代钱币的设计理念，与中国悠远金融文化一脉相承。标志设计还加入计理念，与中国悠远金融文化一脉相承。标志设计还加入现代社会发展的元素，酷似现代社会发展的元素，酷似造型，体现了北京银行在造型，体现了北京银行在网络信息化时代的崭新形象。网络信息化时代的崭新形象。3. 整个标志设计动静结合，内外兼顾，有如中国书法般流整个标志设计动静结合，内外兼顾，有如中国书法般流畅、遒劲，寓意着北京银行顺畅的管理体制与运行机制，畅、遒劲，寓意着北京银行顺畅的管理体制与

14、运行机制，象征京行人执行有力，气魄非凡。象征京行人执行有力，气魄非凡。4. 标志中标志中B的造型体现了北京银行英文名称的造型体现了北京银行英文名称Bank of Beijing的缩写要素。火红的颜色预示着北京银行充满希的缩写要素。火红的颜色预示着北京银行充满希望的未来。望的未来。 164.1.1 Logo的特点与设计原则的特点与设计原则nLogo的特点的特点（1）功用性）功用性 （2）识别性）识别性 （3）显著性）显著性 （4）多样性）多样性 （5）艺术性）艺术性（6）准确性）准确性 （7）持久性）持久性 174.1.1 Logo的特点与设计原则的特点与设计原则nLogo的设计原则的设计原则（

15、1）设计应在详尽明了设计对象的使用目的、适用范畴及有）设计应在详尽明了设计对象的使用目的、适用范畴及有关法规等有关情况和深刻领会其功能性要求的前提下进行关法规等有关情况和深刻领会其功能性要求的前提下进行（2）设计须充分考虑其实现的可行性，针对其应用型式、材）设计须充分考虑其实现的可行性，针对其应用型式、材料和制作条件采取相应的设计手段。料和制作条件采取相应的设计手段。（3）设计要符合作用对象的直观接受能力、审美意识、社会）设计要符合作用对象的直观接受能力、审美意识、社会心理和禁忌。心理和禁忌。 （4）构思须慎重推调皮，力求深刻、巧妙、新颖、独特，表）构思须慎重推调皮，力求深刻、巧妙、新颖、独特

16、，表意准确，能经受住时间的考验。意准确，能经受住时间的考验。 （5）构图要凝练、美观、适形（适应其应用物的形态）。）构图要凝练、美观、适形（适应其应用物的形态）。 （6）图形、符号既要简练、概括，又要讲究艺术性。）图形、符号既要简练、概括，又要讲究艺术性。 （7）色彩要单纯、强烈、醒目。）色彩要单纯、强烈、醒目。184.1.1 Logo的特点与设计原则的特点与设计原则（8）遵循标志艺术规律，创造性的探求恰切的艺术）遵循标志艺术规律，创造性的探求恰切的艺术表现形式和手法，锤炼出精当的艺术语言使设计表现形式和手法，锤炼出精当的艺术语言使设计的标志具有高度整体美感、获得最佳视觉效果，的标志具有高度整

17、体美感、获得最佳视觉效果，是标志设计艺术追求的准则。是标志设计艺术追求的准则。n 符号美符号美n 特征美特征美 n 凝练美凝练美 194.1.2 Logo设计实例设计实例n如图所示是清华同方如图所示是清华同方Logo。 204.2 网站网站Banner的制作的制作n4.2.1 Banner的标准与设计原则的标准与设计原则当用户访问一个网站的时候，第一屏的信息展示当用户访问一个网站的时候，第一屏的信息展示是非常重要的，很大程度上影响了用户是否决定是非常重要的，很大程度上影响了用户是否决定停留，然而光靠文字大面积的堆积，很难直观而停留，然而光靠文字大面积的堆积，很难直观而迅速的告诉用户来到这里会得

18、到什么有用的信息，迅速的告诉用户来到这里会得到什么有用的信息，因此网页因此网页Banner设计在这里起到了至关重要的展设计在这里起到了至关重要的展示作用，特别是对于首页示作用，特别是对于首页Banner，有效的信息传，有效的信息传达让用户和文字之间的互动变得生动而有趣，。达让用户和文字之间的互动变得生动而有趣，。一、一、Banner的构成与设计形态的构成与设计形态 自然界的万物形态构成都离不开点、线、面。它们是视觉自然界的万物形态构成都离不开点、线、面。它们是视觉构成的基本元素，具有不同的情感特征，因此要善于采用构成的基本元素，具有不同的情感特征，因此要善于采用不同的组合去体现不同不同的组合去

19、体现不同Banner的情感诉求的情感诉求na.点的聚合点的聚合 点的排列所引起的视觉流动，引入了时间的因素点的排列所引起的视觉流动，引入了时间的因素,利用点的利用点的大小、形状与距离的变化，可以设计出富于节奏韵律的画大小、形状与距离的变化，可以设计出富于节奏韵律的画面。点的连续排列构成线，点与点之间的距离越近，线的面。点的连续排列构成线，点与点之间的距离越近，线的特性就越显著。点的密集排列构成面，同样，点的距离越特性就越显著。点的密集排列构成面，同样，点的距离越近，面的特性就越显著。近，面的特性就越显著。 b.线的流动线的流动 线分为四类：直线、曲线、折线以及三者的混合。线分为四类：直线、曲线

20、、折线以及三者的混合。直线又有水平线、垂直线、斜线三种形式。其中直线又有水平线、垂直线、斜线三种形式。其中，水平线给人平静、开阔、安逸的感受；垂直线，水平线给人平静、开阔、安逸的感受；垂直线给人崇高、挺拔、严肃的感受；曲、折、弧线具给人崇高、挺拔、严肃的感受；曲、折、弧线具有强烈的动感，更容易引起视线的前进、后退或有强烈的动感，更容易引起视线的前进、后退或摆动。摆动。 c.面的分割面的分割 面在设计中的概念，可以理解为点的放大，点的面在设计中的概念，可以理解为点的放大，点的密集或线的重复。密集或线的重复。Banner元素在不同大小色块元元素在不同大小色块元素的风格对比下，能获得清晰、条理的秩序

21、，同素的风格对比下，能获得清晰、条理的秩序，同时在整体上也显得和谐统一时在整体上也显得和谐统一 二二.Banner设计的形式美法则设计的形式美法则na.有机形的柔和与美有机形的柔和与美有机形是由一定数量的曲线组合而成，是自然物有机形是由一定数量的曲线组合而成，是自然物外力与内力相抗衡而形成的形态。有机形富有内外力与内力相抗衡而形成的形态。有机形富有内在的张力，给人以纯朴、温暖而富有生命力的感在的张力，给人以纯朴、温暖而富有生命力的感觉。曲线与个性化的插图形成强烈的对比。觉。曲线与个性化的插图形成强烈的对比。b.偶然形的独特魅力偶然形的独特魅力 偶然形是力的作用下随机形成的图形，它具有天然偶然形

22、是力的作用下随机形成的图形，它具有天然成趣的效果，利用偶然因素提炼美的方法，让成趣的效果，利用偶然因素提炼美的方法，让Banner设计更加与众不同设计更加与众不同 n三三.有效的设计创意方法有效的设计创意方法a.预留大面积的预留大面积的Banner空间创作空间创作 Banner设计占用很大的空间，且占用的空间是重设计占用很大的空间，且占用的空间是重要而有价值的面积，那么你需要万分小心的去处要而有价值的面积，那么你需要万分小心的去处理，但是如果处理的好的话，它将会事倍功半，理，但是如果处理的好的话，它将会事倍功半，而且信息传达非常有效。而且信息传达非常有效。 b.有效的措辞与行为导向按钮有效的措

23、辞与行为导向按钮 在在banner设计中通过真实产品的展示，并配以鼓动设计中通过真实产品的展示，并配以鼓动人心的措辞口号及醒目的可以直接诱导用户点击人心的措辞口号及醒目的可以直接诱导用户点击的行为导向按钮，让网页获得更多的用户点击和的行为导向按钮，让网页获得更多的用户点击和关注目光。关注目光。 c.插图及清新手绘让页面倍感亲切插图及清新手绘让页面倍感亲切d.引入肢体语言让画面变得生动引入肢体语言让画面变得生动e.丰富的产品展示组合效果丰富的产品展示组合效果 用堆积这种效布局特效来展示不同的作品示例，用堆积这种效布局特效来展示不同的作品示例，并附上一条介绍性质的口号，网页变得更有说服并附上一条介

24、绍性质的口号，网页变得更有说服力，丰富而富有层次感。力，丰富而富有层次感。f.特殊肌理的组合特殊肌理的组合 适当的运用肌理以及拼贴效果，让画面变得有质适当的运用肌理以及拼贴效果，让画面变得有质感且意味深长，是让感且意味深长，是让Banner与众不同的好办法之与众不同的好办法之一。一。 g.让资讯循环动起来让资讯循环动起来 使用滑动效果来将更多信息填进到使用滑动效果来将更多信息填进到Banner区域。这区域。这对于有很多特性和丰富产品线的网站很有用，通对于有很多特性和丰富产品线的网站很有用，通过一些很有用的过一些很有用的Javascript库及其插件，让这类效库及其插件，让这类效果更加活灵活现。

25、果更加活灵活现。334.2.1 Banner的标准与设计原则的标准与设计原则n1997年第一次标准公布年第一次标准公布规格（像素）规格（像素）名称名称46860 全尺寸全尺寸banner39272 全尺寸带导航条全尺寸带导航条banner23460 半尺寸半尺寸banner125125 方形按钮方形按钮12090 按钮按钮1或小图标或小图标12060 按钮按钮2或小图标或小图标8831 小按钮或小按钮或banner120240 垂直垂直banner344.2.1 Banner的标准与设计原则的标准与设计原则n2001年第二次标准公布年第二次标准公布规格（像素）规格（像素）名称名称120600 “摩天大楼摩天大楼”形形160600 宽宽摩天大楼摩天大楼形形180150 长方形长方形300250 中级长方形中级长方形336280 大长方形大长方形240400 竖长方形