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