模块三网页美工技术 单元4：PS页面元素设计 一、标志设计Lg0 L0GO,是徽标成者商标的英文说法。作用，公可识别、推广。能让清费者记住公可 主体和品牌文化。如图03031，以下全事业单位均有自己的19 Ba芯百酿 腾讯网 lenovo联想 bo.com 图0304-1 特点：造型简单，意义明确，有统一的标准的企业视觉符号。是对企业理念，企业文 化，企业显最的展现。 以腾讯为例讲解1g©的应用： 8年4月腾讯国宣布启用新品牌标识。以绿、黄、红三色轨迹线环饶的小全鹅标识取 代过去的QQ企鹅图案，稀讯传媒.QQ静戏等业务，都将同期统一更换新标凯。如图03042 所示。 腾讯网 www.QQ.com QQ.com 图0304-2
模块三 网页美工技术 单元 4： PS 页面元素设计 一、标志设计 Logo LOGO：是徽标或者商标的英文说法。 作用：公司识别、推广，能让消费者记住公司 主体和品牌文化。如图 0303-1，以下企事业单位均有自己的 Logo。 图 0304-1 特点：造型简单，意义明确，有统一的标准的企业视觉符号。是对企业理念，企业文 化，企业愿景的展现。 以腾讯为例讲解 Logo 的应用： 08 年 4 月腾讯网宣布启用新品牌标识，以绿、黄、红三色轨迹线环绕的小企鹅标识取 代过去的 QQ 企鹅图案，腾讯传媒、QQ 游戏等业务，都将同期统一更换新标识。如图 0304-2 所示。 图 0304-2
10G0(色影、处理于法，形状)设计关联，以腾调为例，腾讯的大多产晶都以腾讯 网1OG0属形为基准，做变形创意设计，颜色也是以这4种颜色的其中一种作为主色，然 后分别选用4种中的2一3种作为辅助色。设计手法上均为风水品质感并叠加光影动感效 果，使视觉更如炫目。如图03043所示。 女90 QOMusic 9oL ●Moa QQ影音 dTT浏览器 图0304-3 ·红色一多用于会员商城交易类的： ·绿色一多用于音乐、校友社区相关类： ·蓝色一多用于门户、商务、软件应川类： ·黄色一多用于体闲小游戏类。 1的设计原则：连循人们的认识规律，突出主题、州人注目。 ·认识规律：如从上到下，从左到右，从小到大。从远到近的程觉及事美习候 ·突出主题，就设计者要了解站点的定位和发展方向，能够在方寸之间概括出站点的 理念 ·引人注目：视觉效果要强烈，容号识别、辨认和记忆 操作滴示：学院图标设计 图0304-4 用到的hotoshop作图如凯点：工具箱基本形状作图、填色、 蒙版及用钢笔工具进行不城则图形勾斯。 二、导航设计：Navigation 网站导航就是一个网站各栏目的快速通道。对于网站而言，导航不是生死收关的间愿· 然而，在大型网站堡溶是令人很泪丧和困感的。 作用 L.让用户了解目前所处位置，以及当前页面在整个网站中的位置
LOGO （色彩、处理手法、形状）设计关联：以腾讯为例，腾讯的大多产品都以腾讯 网 LOGO 圆形为基准，做变形创意设计，颜色也是以这４种颜色的其中一种作为主色，然 后分别选用４种中的２－３种作为辅助色。设计手法上均为强水晶质感并叠加光影动感效 果，使视觉更加炫目。如图 0304-3 所示。 图 0304-3 • 红色——多用于会员商城交易类的； • 绿色——多用于音乐、校友社区相关类； • 蓝色——多用于门户、商务、软件应用类； • 黄色——多用于休闲小游戏类。 Logo 的设计原则：遵循人们的认识规律，突出主题、引人注目。 • 认识规律：如从上到下，从左到右，从小到大，从远到近的视觉及审美习惯 • 突出主题：就设计者要了解站点的定位和发展方向，能够在方寸之间概括出站点的 理念 • 引人注目：视觉效果要强烈，容易识别、辨认和记忆 操作演示：学院图标设计 用到的 Photoshop 作图知识点：工具箱基本形状作图、填色、 蒙版及用钢笔工具进行不规则图形勾勒。 二、导航设计：Navigation 网站导航就是一个网站各栏目的快速通道，对于网站而言，导航不是生死攸关的问题。 然而，在大型网站迷路是令人很沮丧和困惑的。 作用： 1. 让用户了解目前所处位置，以及当前页面在整个网站中的位置
2.体现了网站的架构层级，能够帮助用户快速学习和了解网站内容和组织方式，从面 形成很好的位置感。 3.提供返回各个层级的快速入口，方便用户操作。 常见类类型：文本型、图片型、动西型。 显示位置：可以设置导航栏显示在网页的顶部、底部、左侧、右侧。 制作要求：导航清晰合理，鼓接关系正确，变更扩展方便。 常见导航类型欣赏： Acessserize t 图0304-5经持导航
2. 体现了网站的架构层级，能够帮助用户快速学习和了解网站内容和组织方式，从而 形成很好的位置感。 3. 提供返回各个层级的快速入口，方便用户操作。 常见类类型：文本型、图片型、动画型。 显示位置：可以设置导航栏显示在网页的顶部、底部、左侧、右侧。 制作要求：导航清晰合理，链接关系正确，变更扩展方便。 常见导航类型欣赏： 图 0304-5 竖排导航
e●uave of Thought 图03046有二级目录导航 达特体 时由 特 SIMPLE STRATEGIES 图0304-7横排导航
图 0304-6 有二级目录导航 图 0304-7 横排导航
Business co. 9e燃 Career 图03048大面积导航 360 7庆家图促销 横向和竖向的均力导航区城 地 卡毛产 中速家名卡期每海 图03049大量信息网站导航发展趋别(1)
图 0304-8 大面积导航 图 0304-9 大量信息网站导航发展趋势(1)
·原盟 巴 球 该两处均 ”海量卡■司商来重国两理四 ●重增中行树海他过新重结时 声法线南重期今用A有磁 线黄中线身 如图030410大量信息网站导航发展趋劳(2) 三、横幅广告设计：Banner Banner是一个网站的广告位，直传推广各类产品. hanner设计的原则： 一是要主题明确，有针对性地对广告对象进行诉果，形象鲜明的展示所要表达的内容， 不要放一些没用的东西。如图030411所示。 010 消具珠品，棒造青酸作福 希工程南附南求有奖调直 小搜和收瑰的帽合凸量了衡线的生活品圆 两个壶带微关的小学生让人一下就想到了稀望工程 图0304-11 二是要与整个网页的页而风格相协调.如图030412所示
如图 0304-10 大量信息网站导航发展趋势(2) 三、横幅广告设计：Banner Banner 是一个网站的广告位，宣传推广各类产品。 banner 设计的原则： 一是要主题明确，有针对性地对广告对象进行诉求，形象鲜明的展示所要表达的内容， 不要放一些没用的东西。如图 0304-11 所示。 图 0304-11 二是要与整个网页的页面风格相协调。如图 0304-12 所示
超，配速上山满·材裤u国 南候路国打中我下 鞋导可 皇本有有 农贸市场大从 件生车重时 物美华天家大稀天同内号员方满 件满弹系内行 银相室量市 上春事参华为行 ”,世四 L据●酒 上来1请单博可 家园日志 人指册 集光新关标，有录关物光，光细板 我的个性自醋世 在气州年：天C西大制销：能我面卷天 形：想鞋发中期方程力 发布恒息 种联到 44回 图0304-12 三是要顺应用户浏霓习惯，四是要方便用户点击。如图030413所示。 让刻觉者从一个方向上看文字： 记录生活记录精彩家圆日志我的个性自留地 不更让文字排城这样： 生活象 家园白志 我的个性自图地 按相要放在右边： 记录生活记录精影家园日志我的个性自留地 南击进人◆ 图004-13 操作演示！2012年两会tamr设计
图 0304-12 三是要顺应用户浏览习惯，四是要方便用户点击。如图 0304-13 所示。 图 0304-13 操作演示：2012 年两会 banner 设计
2012全国两会-特招道 中国特色的社会主义新画章 万会 最音资讯图集视频 数字之道民生通查三年上体两会现豪每日李描跑两台 动态 议常提常访该花解 话缓 正年人烤达府工服售 报道看两会间地潭间领异 图0304-14 %0小甲操作知识点：素材提取、图像脓合、图形制作、蒙版、文字工具排版、混合 透项的应用等。 四、按钮：button 按钮代表着“徽某件事”。按钮上的文字需要言简意脑，千万不要让观者去思考，越简 单、越直接越好。按银的尺寸决定了重要级别，但大到一定程度，会让人潜意识的认为那 是一块区域，导政设有点击欲望。按钮的设计要面足内外边距。让其充分通透。不能和网 页中的其他元素挤在一起，要有充足的内外边距。给较为重要的按组适当加一些鼠标滑过的 效果，会起到面龙点睛的作用。如图0304-15所示， hello Button 我是按钮 BUTTON BUTTON BUTTON 我是按钮 图0304-15 操作滴示：案例演示Photce3p制作按钮的常川方法。 知识点：用工具箱中的图形工具做或用ar做适型，用样式面板做造型样式设置， 或用混合工具选项做造型样式： 【课后小结】
图 0304-14 Photoshop 操作知识点：素材提取、图像融合、图形制作、蒙版、文字工具排版、混合 选项的应用等。 四、按钮：button 按钮代表着“做某件事”。按钮上的文字需要言简意赅，千万不要让观者去思考，越简 单、越直接越好。 按钮的尺寸决定了重要级别，但大到一定程度，会让人潜意识的认为那 是一块区域，导致没有点击欲望。 按钮的设计要留足内外边距，让其充分通透，不能和网 页中的其他元素挤在一起。要有充足的内外边距。给较为重要的按钮适当加一些鼠标滑过的 效果，会起到画龙点睛的作用。如图 0304-15 所示。 图 0304-15 操作演示：案例演示 Photoshop 制作按钮的常用方法。 知识点：用工具箱中的图形工具做或用 Illustrator 做造型，用样式面板做造型样式设置， 或用混合工具选项做造型样式。 【课后小结】
本将网页中常用元素标效(Logo小、导航Navigation)、横幅广告(Banner)、按钮(Button) 在网页中的作用，各自的特点、作用及不同的设计规则、设计方法与设计技巧
本将网页中常用元素标致(Logo)、导航(Navigation)、横幅广告（Banner）、按钮（Button） 在网页中的作用，各自的特点、作用及不同的设计规则、设计方法与设计技巧