标志、导航、广告设计.ppt

《标志、导航、广告设计.ppt》由会员分享，可在线阅读，更多相关《标志、导航、广告设计.ppt（20页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网站色彩与构图案例教程第第4章章 标志、导航、广告设计标志、导航、广告设计 教学目标教学目标教学目标教学目标：标志、导航、广告是网站的基本元素，是吸引：标志、导航、广告是网站的基本元素，是吸引访客访问站点的重要因素。本章对网站的标志、导航、广告三访客访问站点的重要因素。本章对网站的标志、导航、广告三个元素的作用以及制作方法进行阐述，便于学员从基本到深入个元素的作用以及制作方法进行阐述，便于学员从基本到深入的学习。通过这样的学习，学员能够掌握标志、导航、广告这的学习。通过这样的学习，学员能够掌握标志、导航、广告这三元素的设计思路，在今后的网页界面设计中有一个好的基础。三元素的设计思路，在今后的网

2、页界面设计中有一个好的基础。教学要求教学要求教学要求教学要求:掌握标志设计的作用与功能以及制作方法掌握标志设计的作用与功能以及制作方法 ；掌；掌握导航的设计方法；掌握网络广告设计类型及标准。握导航的设计方法；掌握网络广告设计类型及标准。4/17/20234/17/20231 1北大出版社北大出版社4.1 4.1 标志、导航、广告设计概述标志、导航、广告设计概述标志、导航、广告设计概述标志、导航、广告设计概述 标志标志LOGOLOGO是企业的形象代表，也是网站特色和内涵的是企业的形象代表，也是网站特色和内涵的集中体现；导航则是网站的方向标，便于访客能够明确浏集中体现；导航则是网站的方向标，便于访

3、客能够明确浏览网站的主要内容；网络广告总是能在第一时间吸引访客览网站的主要内容；网络广告总是能在第一时间吸引访客的眼球，从而点击它。因此一个网站的标志、导航、广告的眼球，从而点击它。因此一个网站的标志、导航、广告的设计好坏将直接影响访客的注意力。本节就这三方面的的设计好坏将直接影响访客的注意力。本节就这三方面的作用及设计方法上进行介绍。作用及设计方法上进行介绍。4/17/20234/17/20232 2北大出版社北大出版社 4.1.1 4.1.1 标志设计标志设计标志设计标志设计 1）网站标志的基本内涵2）网站标志的作用3）网站标志设计的标准规范1.标志设计的基本要求 2.标志的制作 1）分析

4、阶段2）标志的要素挖掘3）设计标志4）合成及修正阶段4/17/20234/17/20233 3北大出版社北大出版社 4.1.2 4.1.2 导航设计导航设计导航设计导航设计 1）按照维度功能划分2）按照直观的形式划分1.导航的多样性 2.导航与网站风格统一 1）处理好主从导航的关系2）控制导航的纵深度3）协调导航和网站的风格4）导航的文字描述要准确4/17/20234/17/20234 4北大出版社北大出版社 4.1.3 4.1.3 网络广告网络广告网络广告网络广告 1）网络广告优势2）网络广告的形式1.网络广告 2.广告条 1）分析准备阶段2）选择广告条的规格3）制作阶段4/17/20234

5、/17/20235 5北大出版社北大出版社 4.1.4 4.1.4 本章案例简介本章案例简介本章案例简介本章案例简介 本章中将通过本章中将通过3 3个案例，来讲解网页的标志、导航、个案例，来讲解网页的标志、导航、广告设计的方法及技巧。广告设计的方法及技巧。“也读书网站的标志也读书网站的标志LOGO”LOGO”案例案例主要讲解的是运用网页标志的元素组合来制作标志的方法；主要讲解的是运用网页标志的元素组合来制作标志的方法；“也读书网站的导航也读书网站的导航”案例主要讲解的是利用导航的风格案例主要讲解的是利用导航的风格选择来制作导航的方法；选择来制作导航的方法；“公司网站的横幅及广告条公司网站的横幅

6、及广告条”运运用广告条的各要素组合来制作横幅及广告条的方法。用广告条的各要素组合来制作横幅及广告条的方法。4/17/20234/17/20236 6北大出版社北大出版社4.2 4.2 实训九实训九实训九实训九:设计网站标志设计网站标志设计网站标志设计网站标志-“-“也读书也读书也读书也读书”网站的标志网站的标志网站的标志网站的标志LOGOLOGO 案例说明：案例说明：本节为“也读书”网站的标志设计案例，该标志LOGO采用形象手法。该标志的最大特点就是通过中间的人物形象代表着知识，而外围的三个人物形成手牵手的意境，与网站的主旨（有书的世界，有你。有书的故事，有世界）吻合。颜色采用绿色，给人一种清

7、新，自然的感觉。效果图如下效果图如下:4/17/20234/17/20237 7北大出版社北大出版社 提示：提示：导航效果图的制作工具可以用导航效果图的制作工具可以用corelDRAWcorelDRAW、fireworkfirework等图形图像处理软件。通常使用等图形图像处理软件。通常使用corelDRAWcorelDRAW来设计网站的标来设计网站的标志效果图，而网站志效果图，而网站LOGOLOGO的排版一般采用的排版一般采用fireworkfirework软件。软件。知识拓展知识拓展:（1）表象性的标志（2）象征性的标志（3）寓意性的标志（4）标识性的标志（5）卡通化的标志（6）几何形构成

8、的标志 4/17/20234/17/20238 8北大出版社北大出版社本节知识点本节知识点:网站标志是用于传递网站的定位和经营理念，也是为了便于人们识别。一个具有视觉冲击力标志设计，会直接影响到访问者对网站的判断。4/17/20234/17/20239 9北大出版社北大出版社4.3 4.3 实训十实训十实训十实训十:设计网站导航设计网站导航设计网站导航设计网站导航-“-“也读书也读书也读书也读书”网站的导航设网站的导航设网站的导航设网站的导航设计计计计 案例说明：案例说明：本节为本节为“也读书也读书”网站的导航设计案例。运用横网站的导航设计案例。运用横向导航结构和向导航结构和FLASHFLAS

9、H动画设计动画设计“也读书也读书”网站的导航效果图，网站的导航效果图，内容包含网站的主导航、次导航等部分，要求动画流畅，内容包含网站的主导航、次导航等部分，要求动画流畅，结构清晰，栏目鲜明。结构清晰，栏目鲜明。效果图如下效果图如下:4/17/20234/17/20231010北大出版社北大出版社知识拓展知识拓展:提示：提示：导航效果图的制作工具可以用导航效果图的制作工具可以用fireworkfirework、photoshopphotoshop等等图形图像处理软件以及图形图像处理软件以及flashflash动画处理软件。通常使用动画处理软件。通常使用fireworkfirework、photo

10、shopphotoshop来设计导航平面图，使用来设计导航平面图，使用flashflash给导航加上动画效果。给导航加上动画效果。（1）最常用的导航菜单（2）垂直的导航菜单（3）“图标+文字说明”的导航结构（4）手工绘画风格的导航（5）无规则的导航结构 4/17/20234/17/20231111北大出版社北大出版社本节知识点本节知识点:导航是网页设计中的重要元素。一个良好的网页导航系统不仅能够把导航设计的漂亮，同时更重要的是要能够引导访客浏览网站中的更多页面，让访客能够轻松找到他们想要观看的内容。4/17/20234/17/20231212北大出版社北大出版社4.4 4.4 实训十一实训十一

11、实训十一实训十一:设计网站横幅设计网站横幅设计网站横幅设计网站横幅(BANNER)(BANNER)设计公司网设计公司网设计公司网设计公司网站的横幅和广告条站的横幅和广告条站的横幅和广告条站的横幅和广告条 案例说明：案例说明：本节为Mortgage&Loans公司网站的横幅和广告条设计案例，包括一个静态的网站横幅和一个FLASH的动画广告条。在设计中充分运用文字和图像的合理结合，加上动画效果的呈现，给人形象直观的感受。效果图如下效果图如下:4/17/20234/17/20231313北大出版社北大出版社知识拓展知识拓展:提示：提示：网站横幅（BANNER）的制作工具可以用firework、pho

12、toshop等图形图像处理软件以及flash动画处理软件。通常使用firework、photoshop来设计网站的静态横幅，使用flash动画软件制作广告条。（1）文字链接广告（2）按钮广告（3）悬浮广告（4）全屏广告（5）通栏广告（6）网络流媒体广告 4/17/20234/17/20231414北大出版社北大出版社本节知识点本节知识点:在设计广告条时要了解网络广告的优势，以及设计的标准。网络广告的目标就是通过信息展示使消费者产生对产品的认识、情感、态度和行为的变化。在设计策略上，首先广告标题要明确、凸显，广告标题是一句吸引消费者的带有概括性、观念性和主导性的语言。其次，发展网络广告的互动性，

13、这类的广告信息能够提升访问者对广告本身的兴趣。设计时，为了突出网络广告，可以使用与登载广告的网页完全不同的设计方法和风格。可以使用与网页相对的颜色或风格，把广告条的重点放置在该网页所集中体现的内容相对的位置上，或者使用与网页文字不同的字体来制作网络广告。4/17/20234/17/20231515北大出版社北大出版社4.5 4.5 本本本本 章章章章 小小小小 结结结结 本章主要对网站的主要几个元素(标志、导航、广告)的介绍，包括标志设计要求及制作流程，导航的多样性及导航的风格，网络广告的类型及广告条的制作。标志设计主要介绍网站标志的基本内涵、作用、标准规范和网络广告条的制作步骤，导航设计主要

14、介绍导航的样式、导航的风格特点，广告设计主要介绍比较流行的10种网络广告类型、广告条的制作步骤。举了三个典型的案例。通过这些介绍，读者只要多加练习，然后结合实际融会贯通，设计出高水准的网站标志、导航及广告。4/17/20234/17/20231616北大出版社北大出版社4.6 4.6 习习习习 题题题题1.1.选择：选择：（1 1）下面哪个是网站特色和内涵的集中体现（）下面哪个是网站特色和内涵的集中体现（）A.A.文字文字 B.B.标志标志 C.C.导航导航 D.D.广告广告 （2 2）下面哪个不是网站常见的标志大小规格）下面哪个不是网站常见的标志大小规格 （）A.88*31 B.120*60

15、 C.120*90 D.1024*768 A.88*31 B.120*60 C.120*90 D.1024*768（3 3）一个站点里头有太多的信息，能够指引访客到达网站各）一个站点里头有太多的信息，能够指引访客到达网站各个角落的网页元素是个角落的网页元素是 （）A.A.标志标志 B.B.广告广告 C.C.导航导航 D.D.以上都不是以上都不是 （4 4）下列哪个是网站导航设计有关的因素（）下列哪个是网站导航设计有关的因素（）A.A.文字文字 B.B.图标图标 C.C.色彩色彩 D.D.以上都是以上都是 4/17/20234/17/20231717北大出版社北大出版社（5 5）导航的哪个因素有

16、利于访客提前对所要访问的内容）导航的哪个因素有利于访客提前对所要访问的内容 有一个大概的了解有一个大概的了解 （）A.A.可爱图标可爱图标 B.B.文字描述文字描述 C.C.鲜艳色彩鲜艳色彩 D.D.渐变导航渐变导航 （6 6）下列哪个项目不属于导航按照直观形式划分（）下列哪个项目不属于导航按照直观形式划分（）A.A.横排导航横排导航 B.B.多维导航多维导航 C.C.图片式导航图片式导航 D.D.隐藏式导航隐藏式导航 （7 7）下列哪种广告是出现在网页页面两侧，显得特别突出，）下列哪种广告是出现在网页页面两侧，显得特别突出，广告幅度大广告幅度大 （）A.A.浮动广告浮动广告 B.B.按钮广告

17、按钮广告 C.C.对联广告对联广告 D.D.弹出窗口广告弹出窗口广告 （8 8）下列哪一个不是网络广告标题的语言特征）下列哪一个不是网络广告标题的语言特征 （）A.A.随意性随意性 B.B.主导性主导性 C.C.观念性观念性 D.D.概括性概括性 4/17/20234/17/20231818北大出版社北大出版社2.2.填空填空（1 1）标志的设计创意主要来自网站的标志的设计创意主要来自网站的_和和_。（2 2）_ _对标志的认知直接影响标志设计的尺度。对标志的认知直接影响标志设计的尺度。（3 3）按照维度划分，导航可以分为功能可以分为按照维度划分，导航可以分为功能可以分为_、_和和_。（4 4

18、）导航是）导航是_和和_的优势组合。的优势组合。（5 5）网站，网站，(100-1)%(100-1)%的内容是的内容是_。（6 6）_ _是一种最简单直接的网上广告，只需将超链接加入是一种最简单直接的网上广告，只需将超链接加入相关文字便可。相关文字便可。（7 7）制作广告条的步骤有制作广告条的步骤有_、_和和_。（8 8）网络广告的形式多样网络广告的形式多样,包括包括_、_和和_。4/17/20234/17/20231919北大出版社北大出版社3.3.实践题实践题 （1 1）设计一个个人网站的标志。设计一个个人网站的标志。（2 2）几何形构成的标志主要是用点、线、面、方、圆、多边几何形构成的标

19、志主要是用点、线、面、方、圆、多边形或三维空间等几何图形进行编排设计。运用几何图形构造形或三维空间等几何图形进行编排设计。运用几何图形构造原理设计一个跟影视有关的几何形网页标志。原理设计一个跟影视有关的几何形网页标志。（3 3）运用影射、暗示、示意的表现方式设计一个文化类的寓运用影射、暗示、示意的表现方式设计一个文化类的寓意性标志。意性标志。（4 4）运用）运用“图标图标+文字文字”的组合特点，并附上文字的描述，设的组合特点，并附上文字的描述，设计一个饮食类的导航。计一个饮食类的导航。（5 5）打破常规，制作一个无规则的游戏类导航。打破常规，制作一个无规则的游戏类导航。（6 6）运用动画运用动画FLASHFLASH的优势，制作一个服饰类的导航。的优势，制作一个服饰类的导航。（7 7）设计一个宣传化妆品的浮动广告，广告要求是设计一个宣传化妆品的浮动广告，广告要求是GIFGIF动画。动画。（8 8）利用利用FLASHFLASH动画软件制作一个宣传电脑的通栏广告。动画软件制作一个宣传电脑的通栏广告。4/17/20234/17/20232020北大出版社北大出版社