Logo和Banner的设计与制作

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