资源简介

(共54张PPT)
中等职业教育国家规划教材
项目四 网页广告的设计与制作
项目四 网页广告的设计与制作
任务1 设计与制作Logo
任务情景
任务分析
任务实施
项目四 网页广告的设计与制作
任务情景
在前期的商品图片的收集和处理完成后，张家豪开始正式着手于网页广告的设计与制作，第一步就是为他的网站设计一个尺寸规范、设计精美，既能给网站起到代表宣传的作用又能在众多Logo中脱颖而出的网站Logo。确定了网站的主题与风格，张家豪准备设计一个富有创意的网站Logo。
项目四 网页广告的设计与制作
任务分析
本任务主要包括以下要点：
◆确定Logo创意
◆设计网站Logo
◆著名网站Logo赏析
项目四 网页广告的设计与制作
任务实施
步骤一 确定Logo创意
步骤二 设计网站Logo
步骤三 著名网站Logo赏析
项目四 网页广告的设计与制作
知识准备
（一）认识Logo
Logo是徽标或者商标的英文说法，对其所代表的公司有识别和推广的作用，网站Logo是代表一个网站或网站的一个板块的标志，主要用于与各类网站进行链接或是让其他网站链接。简单地说，Logo就同企业商标或企业形象标志一样。
作为网站的品牌标识，Logo首先要与众不同。在一个布满各种Logo的友情链接网页中，越是与众不同的Logo，其作用就越容易体现出来。此外，Logo需要在很多场合代言这个网站的品牌。
项目四 网页广告的设计与制作
知识准备
(二)网站Logo的规格
为了便于网络上信息的传播，便于不同的网站使用Logo互相制作友情链接，对Logo的设计采用统一的国际标准是必要的，目前主要有四种规格：
（1）88×31px 互联网上最普遍的Logo规格
（2）120×60px 用于一般大小的Logo规格
（3）120×90px 用于大型的Logo规格
（4）200×70px 这种规格Logo也已经出现
对于网站的Logo，最好能够设计出同一风格的这4种大小不同的版本，以满足不同网站链接的使用及信息传播的需要。
项目四 网页广告的设计与制作
知识准备
（三）网站Logo的设计原则
网站Logo设计的一般原则是：
1.在大小上符合国际标准，以利于不同网站链接的采用；
2.设计精美、独特，在一个很小的设计上体现出很高的设计水准，有自己的独到之处；
3.色彩与网站的整体色调与内容融为一体，符合浏览网站的大多数受众的审美心理；
4.设计元素在风格上能够体现网站的类型、内容，视觉效果强烈,容易识别，能让用户在看到这个Logo时马上联想到网站和网站的内容。
项目四 网页广告的设计与制作
知识准备
除了上述涉及原则外，网站Logo的设计也有一些小技巧可以遵循，概括说来要注意以下几点：
1.保持视觉舒适、讲求线条的流畅，使整体形状美观；
2.用反差、强对比或边框等强调主题；
3.选择恰当的字体，包括中英文的。并且字体、字号都需要反复推敲；
4.注意留白，给人想象空间，特别适用于一些与传统文化相关的中国网站；
5.运用色彩，因为人们对色彩的反应比对形状的反应更为敏锐和直接，更能激发情感（这一点在下文中有更详细的阐述）。
项目四 网页广告的设计与制作
知识准备
（四）网站Logo的设计形式
作为具有现代互联网特性的Logo，在设计时应根据网站的名称、主题与内容进行创意设计。为了在较小的空间内实现所有的视觉识别功能，一般是通过特示图案及特示文字的组合，达到对网站的展示、说明，从而引导浏览者的兴趣的。
网站Logo的设计形式的组合方式一般分为如下几方面:
项目四 网页广告的设计与制作
知识准备
1.特示图案
属于表象符号，独特、醒目的图案本身易被区分、记忆，通过隐寓、联想、概括、抽象等绘画表现方法表现被标识体，对其理念的表达概括而形象，但与被标识体关联性不够直接，受众容易记忆图案本身，但一旦建立联系，印象较深刻，对被标识体记忆相对持久。所以要求我们要想设计出好看又有特色的特示图案形象，对图案Logo的面向推广的各种要素都把握得恰到好处。较好的设计，如被咬了一口的苹果（如图4-1所示）、耐克简约的钩（如图4-2所示）、搜狐红色的狐狸尾巴（如图4-3所示）等。相信在网站上看见这些Logo，一定会一下联系到对应的品牌。
项目四 网页广告的设计与制作
图4-1 苹果手机
图4-2 搜狐
图4-3 耐克
知识准备
项目四 网页广告的设计与制作
知识准备
2.特示文字
属于表意符号，在长期的网络传播中，产品名通常会被反复使用。将产品名用一种文字形态经过设计加以统一，涵义明确、直接，与被标识体的联系密切，易于被理解、认知，对所表达的理念也具有说明的作用。
在中国，一个完整的网站Logo设计，一般都应考虑至少有中英文双语的形式，要考虑中英文字的色彩、字体、比例和搭配，一般要有图案中文、图案英文、图案中英文，及单独的图案、中英文的组合形式。有的还要考虑繁体、其他特定语言版本等。
项目四 网页广告的设计与制作
比如谷歌、网易等大型的互联网公司，它们的网站Logo都采用了特示文字。谷歌，使用Catull字体，增加了投影和阴影效果，使Logo有了三维感觉，高纯度的几种颜色搭配在一起，不显杂乱，反而使人感受到活泼、愉快，如图4-4所示。
图4-4 谷歌标志
项目四 网页广告的设计与制作
知识准备
网易，作为中国的主要门户网站之一，立足于本土，虽然标志中也有英文，但相比黑色、方正的英文字体，显然是红色的、具有中国书法特色的繁体“网易”二字更为突出。其网站也是以干净、一目了然为特点（如图4-5所示）。
图4-5 网易
项目四 网页广告的设计与制作
知识准备
联想品牌定位“科技创造自由”。这个主题是通过品牌名称和Logo同时在文字和视像上体现出来的（如图4-6所示）。整个标识采用现代“sans serit”字体，以达到设计简洁和易读的目的。大气的黑色，意味着品牌的专业。
图4-6 联想
项目四 网页广告的设计与制作
知识准备
3.合成文字
这是一种表象表意的综合体现，文字与图案结合的设计，兼顾文字与图案的属性，但每个设计都有所侧重。如果一定要追求两者并重，反而两者影响力都会被弱化。合成文字的综合功能有:
（1）造型后的合成文字，易于读者识别理解；
（2）比较易于给浏览者留下深刻印象并方便记忆。
项目四 网页广告的设计与制作
知识准备
图4-7 百度
“百度”这一搜索引擎巨头，名称便来自宋词“众里寻他千百度”(百度公司会议室名为青玉案，即是这首词的词牌)。而“熊掌”图标的想法来源于“猎人巡迹熊爪”的刺激，从而构成百度的搜索概念（如图4-7所示）。它的Logo简单地将中英文文字做了圆角处理，配以“熊掌”图案，显得简洁大方，一目了然。巧合的是，在搜索引挚中，大都有动物形象元素，如SOHU的狐、GOOGLE的狗，而百度也便顺理成章称做了熊，百度熊也便成了百度的吉祥物。
项目四 网页广告的设计与制作
知识准备
步骤一 确定Logo创意
设计一个Logo的第一步是明确产品或者网页的主旨，将关键词一一列出。集思广益，开动脑筋，多出一些设计方案和文案方案。这些尝试可以以草图的形式保存下来，可以反复推敲修改，最终从中找到一个或几个切合产品宣传要求，创意独特的方案，进行下一步制作。
以爱特米诺电子为例，鉴于爱特米诺电子的品牌形象，我们多种尝试后决定采用比较简洁的手法，不另外设计复杂的图案，主要对品牌的中英文名字进行字体设计。
颜色采用比较舒服和充满希望的绿色。
项目四 网页广告的设计与制作
下面我们就来用photoshop软件设计制作网站Logo
（一）新建文件
打开Photoshop cs5用程序。点击“文件”->“新建”按钮，出现新建窗口。
名称：网站名称
预设：选自定
宽度：为200像素 高度：为70像素（Logo四个版本中的最大尺寸）
分辨率：填300像素
颜色模式：选RGB颜色 8位通道 (网站设计常用颜色)
背景内容：白色
点击“确定”按钮，Photoshop cs5设计制作界面（如图4-8所示）
项目四 网页广告的设计与制作
步骤二 设计网站Logo
图4-8 Photoshop cs5设计制作界面
步骤二 设计网站Logo
项目四 网页广告的设计与制作
点击工具箱的 文字工具，在画布空白处分两个图层输入网站的中英文名字“爱特米诺电子”、“ITERM LANI”（如图4-9所示）。
图4-9输入中英文名字“爱特米诺电子”、“ITERM LANI”
步骤二 设计网站Logo
项目四 网页广告的设计与制作
（二） 制作Logo图形
先将文字图层隐藏起来，新建图层，设计Logo的图形部分。
画一个圆角矩形——把圆角半径设为3px——颜色选为绿色——将形状图层命名为“绿底”（如图4-10所示）。
图4-10绿底图层
步骤二 设计网站Logo
项目四 网页广告的设计与制作
在“绿底”图层上勾出圆形和圆角矩形，将圆角矩形选区涂成白色，左上角的小圆形涂成绿色，给圆形加上白边（如图4-11所示）。
图4-11 勾出圆形和圆角矩形
步骤二 设计网站Logo
项目四 网页广告的设计与制作
（三）文字设计
显示出英文文字图层，调整字体、大小、换行、颜色。字体为Arial Rounded MT Bold，字号为5.5点，正好置于绿底中——颜色为白色，在绿底中也很醒目（如图4-12所示）。
图4-12调整英文图层字体、大小、换行、颜色
步骤二 设计网站Logo
项目四 网页广告的设计与制作
调整图案的大小，显示出中文文字图层，调整字体、大小、换行、颜色。字号为4.5点，颜色为黑色，字体为比较纤细又不失圆润的幼圆（如图4-13所示）。
图4-13调整中文图层字体、大小、换行、颜色
步骤二 设计网站Logo
项目四 网页广告的设计与制作
（四）文件存储
细微调整后，即可保存图形：菜单文件——存储为——jpg格式（如图4-14所示）。保存选项 按上图设置好，点击存储，完成。
图4-14 存储
步骤二 设计网站Logo
项目四 网页广告的设计与制作
最终效果如图4-15所示。
图4-15 最终效果图
步骤二 设计网站Logo
项目四 网页广告的设计与制作
（五）网站Logo的输出格式
现在并没有统一标准的Logo制作软件。Logo作为一种图片或是动画GIF图片，凡是可以设计图片的软件都可以用来制作Logo。人们一般使用Photoshop、Illustrator或是Fireworks设计网站的Logo。
制作Logo的步骤就是设计一张符合Logo大小的图片，在图片上进行相关的创意与设计，制作完成后导出JPG图片。如果需要制作成动画的Logo，可以使用Fireworks进行多状态图片设计，分别设计出动画中的每一状态。最后导出为GIF动画的格式。
步骤二 设计网站Logo
项目四 网页广告的设计与制作
一个优秀的网站设计作品，它的设计和配色必定和它的网站Logo有着呼应和联系，所以在最初的网站Logo设计的过程中，图形与色彩的选择和搭配就显得尤为重要。这就要求设计者不仅需要掌握基本的软件制作技术，还需要掌握造型、配色等设计艺术。
（一）优秀网站Logo设计图形赏析
下图是迪士尼网站的跳转界面（如图4-16所示）。迪士尼的Logo就是它的英文“Disney”，英文字母经过重新设计，偏向于手写字体，俏皮可爱，页面中的地球上嵌入“Disney”的首字母“D”，也正是说明了该品牌和该网站的全球性。
项目四 网页广告的设计与制作
步骤三 著名网站Logo赏析
图4-16 迪斯尼网站
步骤三 著名网站Logo赏析
项目四 网页广告的设计与制作
现行的苹果Logo经历了一系列的改动（如图4-17所示）。
最初的为牛顿坐在苹果树下看书的钢笔绘画。不过，牛顿徽标用了很短的时间，显然该徽标过于复杂，不易复制传播。
图4-17 苹果Logo
步骤三 著名网站Logo赏析
项目四 网页广告的设计与制作
于是，开始出现了一个苹果的黑白剪影，在简化苹果的形状后，又在一侧被咬了一口（taking a bite)——a byte（一个字节）。而后，设计师增加了六条彩色的、水平色条，这样就完成了我们今天所熟知的彩色苹果徽标。这个Logo一直使用至1998年，在iMac发布时作出修改，变更为单色系列。2007年再次变更为金属带有阴影的银灰色，使用至今（如图4-18所示）。
目前的官方网站也采用与Logo相同的风格，黑白灰为主，加入金属质感，增加现代科技感。
图4-18 现在的苹果Logo图
步骤三 著名网站Logo赏析
项目四 网页广告的设计与制作
雅诗兰黛的Logo是首字母E、L的变形，整个Logo看一起来像一朵花朵，曲线优美，充满了女性的雍容华美（如图4-19所示）。Estee Lauder简单的采用了无视线的纤细的Optima Roman 字体。选用“兰黛的蓝色”作为品牌的标志颜色。
图4-19 雅诗兰黛Logo
步骤三 著名网站Logo赏析
项目四 网页广告的设计与制作
这是很多顶级的奢侈品品牌，尤其是国外的一些女性用品顶级品牌，在网站中常采用的手法。根据网站设计的需要，只保留Logo的一部分，防止为了部分而影响整体感（如图4-20所示）。
图4-20 雅诗兰黛网站
步骤三 著名网站Logo赏析
项目四 网页广告的设计与制作
路易威登也同样采用了只出现文字的方式，为了防止Logo的识别被其他信息干扰，页面上没有出现过多的信息（如图4-21所示）。
图4-21 路易威登
步骤三 著名网站Logo赏析
项目四 网页广告的设计与制作
香奈儿更是只出现了标志性的双C Logo（如图4-22所示）。
图4-22 香奈儿
步骤三 著名网站Logo赏析
项目四 网页广告的设计与制作
NBC(美国全国广播公司)的这个Logo，六种颜色构成的孔雀开屏的形象，经过图形的提炼，既不会过于写实、影响传播，又一目了然。仔细看会注意到上面的空白是一只孔雀，（如图4-23所示），形象的表达NBC公司的Motto（座右铭）：向前看，不回头（Look forward，and not back）。同时也传递了一个信息，NBC对自己传播的内容感到自豪。
图4-23 NBC(美国全国广播公司)
步骤三 著名网站Logo赏析
项目四 网页广告的设计与制作
淘宝网作为亚太最大的网络零售商，依赖于网络，它的网站Logo主要是简单的变形的中文名称和网址，配以吉祥物，采用活力、热情的橙色，让人有购买的欲望（如图4-24所示）。
图4-24 淘宝网
百度、谷歌等也经常采用这一方式，使得网站Logo更加有趣、丰富。
步骤三 著名网站Logo赏析
项目四 网页广告的设计与制作
（二）优秀网站Logo的色彩搭配赏析
色彩是网站Logo的基本要素之一。色彩具有特殊的魅力，它可以让平淡无味的东西瞬间变得漂亮起来。信息时代的网络丰富多彩。人们不再局限于简单的文字和图片，他们不仅希望通过网络获得所需要的讯息，更希望在这一过程中满足视听享受。色彩作为网页的一种视觉表述语言具有很强烈和直接的表现力。
除了网站和品牌自身的特点和设计师的个人喜好外，不同的色彩有着不同的象征意义，给人的心理感受也是不同的。在进行网站Logo设计的时候，色彩的设计要有针对性，应该展现出品牌和网站自身的特点。为了能更好的应用色彩来设计网站Logo，首先应该了解一下色彩的基本概念。
步骤三 著名网站Logo赏析
项目四 网页广告的设计与制作
客观世界的色彩千变万化、各不相同，但任何色彩都有色相、明度、纯度三个方面的性质，而且当色彩间发生作用时，除以上三种基本条件外，各种色彩彼此间形成色调，并显现出自己的特性。因此，色相、明度、纯度、色调及色性这五项构成了色彩的要素。
色相指色彩的相貌，是区别色彩种类的名称。明度即色彩的深浅差别。纯度又称彩度或饱和度。某一纯净色加上白或黑，可降低其纯度，或趋于柔和、或趋于沉重。而色调指的是画面中总是由具有某种内在联系的各种色彩组成的一个完整统一的整体，形成画面色彩总的趋向。色性指色彩的冷暖倾向。
步骤三 著名网站Logo赏析
项目四 网页广告的设计与制作
了解了色彩的基本概念和要素后，对色彩的印象表现就能够更深入的去体会了。
色彩是人体第一视觉语言，具有影响人们心理、唤起人们感情的作用，更能左右人们的感情和行动，这与大部分人的经验与联想有关，人们通过与自然界和社会的接触，逐步形成色彩的概念和联想。
步骤三 著名网站Logo赏析
项目四 网页广告的设计与制作
红色，最引人注目的色彩，具有强烈的感染力。象征热情、喜庆、幸福。另一方面又象征警觉、危险。红色色感刺激强烈，在网页色彩配合中是使用得最多的色。消费者很容易把红色联想成有品位、有价值和有香甜味道的葡萄酒的颜色，如图4-25所示。同时也多使用在汽车和其他富有个性的品牌中。
图4-25 可口可乐
步骤三 著名网站Logo赏析
项目四 网页广告的设计与制作
黄色，是阳光的色彩，象征光明、希望、高贵、愉快。黄色在纯色中明度最高，与红色色系的色配合会产生辉煌富丽、热烈喜庆的效果，与蓝色色系的色配合会产生淡雅宁静、柔和清爽的效果。在Logo设计中，黄色一般作为小面积的配色使用，是设计师们比较小心的颜色。
蓝色是天空和大海的色彩，象征和平、安静、纯洁、理智。另一方面又有消极、冷淡、保守等意味。蓝色与红、黄等色运用得当，能构成和谐的对比调和关系。
步骤三 著名网站Logo赏析
项目四 网页广告的设计与制作
人人网（如图4-26所示）和Facebook（如图4-27所示）是国内外两个非常有竞争力的社交网站，它们的网站Logo以至整个网站的主色调都是蓝色，使人感到和谐、平稳、理智和安全。同时百度和人人网都采用的是蓝色和红色的色彩搭配。
图4-26 人人网
图4-27 facebook
步骤三 著名网站Logo赏析
项目四 网页广告的设计与制作
绿色，是植物色彩，象征着平静与安全。绿色和蓝色配合显得柔和宁静，和黄色配合显得明快清新。在很多行业的Logo中都可以使用，但如果使用的不够贴切，就容易失去特色，被淹没在网站大量信息之中。
如图4-28所示是天津爱特米诺电子有限公司的官方网站，网站Logo单独置于网页顶部，背景大片留白，使得绿色的Logo也很显眼。结合网站的品牌内容，作为一个电子智能展品公司，最重要的就是安全和新颖。绿色做为Logo的底色块，配以白色的较纤细的文字，安全稳妥中不失活力。于整个网站之中，既引人注目又不显得太过突兀。
图4-28 爱特米诺网站
步骤三 著名网站Logo赏析
项目四 网页广告的设计与制作
橙色，秋天收获的颜色，鲜艳的橙色比红色更为温暖、华美，是所有色彩中最温暖的色彩。橙色象征快乐、健康、勇敢。
另外很多品牌和网站喜欢在名称用带有“橙”字，同时也会喜欢用橙色作为Logo的主色调，同时配以橙子的图形，如图4-29所示。
图4-29 橙子网网站Logo
步骤三 著名网站Logo赏析
项目四 网页广告的设计与制作
紫色，象征优美、高贵、尊严，另一方面又有孤独、神秘等意味。深紫色则有沉重、庄严的感觉。在网站Logo配色设计中紫色与红色配合显得华丽和谐，与蓝色配合显得华贵低沉，与绿色配合显得热情成熟。紫色深得女性的喜爱，许多化妆品会采用紫色、蓝紫作为Logo和网站的主色调（如图4-30所示）（如图4-31所示）。
步骤三 著名网站Logo赏析
项目四 网页广告的设计与制作
图4-30兰蔻 图4-31安娜苏
步骤三 著名网站Logo赏析
项目四 网页广告的设计与制作
黑色，是暗色，极度的暗，象征着力量、稳重，有时又意味着不吉祥和罪恶。在网站Logo设计中能和许多色彩构成良好的对比调和关系，也能用做字体的颜色，运用范围广泛。
白色，表示纯粹与洁白的色，象征纯洁、朴素、高雅等。作为非彩色的极色，白色与黑色一样，与所有的色彩构成明快的对比调和关系，与黑色相配，给人一种重量感和稳定感。在Logo中，其他颜色的底色，配上白色的文字或图形，也是一种常见的配色方式。
步骤三 著名网站Logo赏析
项目四 网页广告的设计与制作
随着科技的发展，一些网站Logo选择做一些简单的发光效果，展现品牌科技属性的同时，也不会显得过于凌乱，如图4-32所示。
图4-32 IBM标志
步骤三 著名网站Logo赏析
项目四 网页广告的设计与制作
设计精良的网站除了要有色调构成的整体倾向，还要有和谐统一的色彩倾向，这决定着Logo乃至整个网站给浏览者的第一印象。
网站Logo中色彩的选择搭配应该是与文字、图像、标志并重的，可以说色彩是设计不可或缺的重要部分。设计师在设计的时候要尊重科学的色彩理论，把艺术美学的规律同现代互联网设计的技术结合在一起，细心的分析色彩感觉，用熟练的配色技巧对Logo用色进行搭配，这样才能设计出具有吸引力的优质作品。
步骤三 著名网站Logo赏析
项目四 网页广告的设计与制作
THANKS！

展开更多......

收起↑