1、模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo网页美工设计模块四 网页元素设计任务一 设计网页Logo模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo教学目标 教学重难点分辨不同类型Logo的风格、特点设计和制作慈善机构网站Logo通过学习，学生能够：1能理解Logo设计原则2能区分不同类型Logo的风格特征3能设计和制作网站Logo模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo新课导入新课导入Logo，就是标志、徽标的意思。标志在企业形象传递过程中，是应用最广泛、出现频率最高，同时
2、也是最关键的元素。网站Logo主要是各个网站用来与其它网站链接的图形标志，代表一个网站或网站的一个板块。它可以反映网站及制作者的某些信息，特别针对商业网站而言，从中可以了解网站的类型和内容。Logo的设计要能够充分体现企业的核心理念，并且设计要求简约、美观、大气、独特，让人印象深刻。网站Logo设计应遵从以下原则：u符合企业VI设计的总体要求，网站的Logo设计与企业的VI设计一致u标志设计一定要注意识别性，识别性是企业标志的基本功能。u设计要符合作用对象的直观接受能力、审美意识、社会心理和禁忌。u构思力求深刻、巧妙、新颖、独特，表意准确，能经受住时间的考验。u构图要凝练，美观；图形、符号既要
3、简练、概括，又要讲究艺术性。u色彩要单纯、强烈、醒目，与企业的形象风格相符。模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo目标展示目标展示如下图所示，为某慈善机构网站Logo。此Logo由椭圆、圆、多边形等几个简单的几何形状构成，构图简洁明了孩子、家、太阳；色彩上以蓝色为主，辅以橙色对比，较为醒目；表意准确，寓意给缺少家庭关爱的孩子一个安宁、温暖的家，让他们拥有一个美好的明天。整个标志简单、大方、易懂，给人印象深刻。慈善机构网站Logo制作慈善机构网站Logo模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo任务分解任务分
4、解1 1图形型图形型LogoLogo图形型标志用形象表达含义，相对于文字标志而言，更为直观和富有感染力，主要分为抽象型标志和具象型标志。（1 1）抽象型标志）抽象型标志抽象类型的标志语言是高度形式化的，它的最大优点是把某种特殊的性质准确地抽取出来，为某些概念或结构的动态式样赋予具体的几何形状，使人对其有一个整体的和形象的把握，如图5-1-1所示。（2 2）具象型标志）具象型标志具象型标志是以具体事物的形来加工设计而成的，它的形来源于现实又高于现实的真实。而其中又分为表象性和象征性两种，如图5-1-2所示。图5-1-1 工商银行标志 图5-1-2 世界自然保护基金标志一、一、LogoLogo设计
5、欣赏设计欣赏模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo二、网站二、网站LogoLogo制作实例制作实例任务分解任务分解操作步骤操作步骤图5-1-7 变换椭圆图5-1-9 渐变叠加图5-1-8 缩小模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo二、网站二、网站LogoLogo制作实例制作实例任务分解任务分解操作步骤操作步骤5.创建“高光”层，调出“椭圆
6、副本”选区，填充白色；用多边形套索作如图5-1-10所示选区，删除选区图形；并添加图层蒙版，填充黑白直线型渐变，图层不透明度设为80%，如图5-1-11。6.创建“两相连椭圆”层，画如图5-1-12所示2个白色椭圆。7.创建“人物底”层，用钢笔绘制如图5-1-13所示形状，复制一层“人物”改为白色，适当缩小变形，图层不透明度设为50%，如图5-1-14所示；并添加图层蒙版，用多边形套索工具勾勒如图5-1-15所示选区，填充50%灰色。图5-1-10 添加高光图5-1-11 用蒙版处理高光按住Alt键单击路径控制面板上的垃圾桶图标，可直接删除当前路径。模块五模块五 网页元素设计网页元素设计任务一
7、任务一 设计网页设计网页LogoLogo二、网站二、网站LogoLogo制作实例制作实例任务分解任务分解操作步骤操作步骤图5-1-12 画椭圆图5-1-13 人物阴影图5-1-14 人物图5-1-15 用蒙版处理人物模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo二、网站二、网站LogoLogo制作实例制作实例任务分解任务分解操作步骤操作步骤8.创建“太阳”层，画黑色正圆。添加图层样式，如图5-1-16。9.创建“太阳高光”层，画一个小的白色正圆，图层模式改为柔光，如图5-1-17。10.创建“人物头部”层，用椭圆形状工具画出人物的头部，填充颜色#01014
8、a；并添加“投影”图层样式，如图5-1-18。图5-1-16 渐变叠加图5-1-17 太阳高光图5-1-18 人物头部模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo二、网站二、网站LogoLogo制作实例制作实例任务分解任务分解操作步骤操作步骤11.创建“月芽”层，用钢笔画绘制月芽形状，填充颜色#fe5807，如图5-1-19。12.创建“阴影”层，用柔角画笔添加一个阴影，用动感模糊滤镜美化阴影，如图5-1-20所示，得最终效果图。图5-1-20 阴影图5-1-19 月芽形状模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLog
9、o课堂小结课堂小结 本任务我们学习了哪些知识？从这些知识出发引出了哪些技能？合作学习中，你发挥了多大的作用，有积极主动参与吗？自评、互评环节的评价结果是否吻合，不吻合的原因是什么？模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo作业布置作业布置用字母用字母CQCQ与动物图形相结合，设计与动物图形相结合，设计“重庆动物保护学会重庆动物保护学会”标志（图片素材自行上网查找），标志（图片素材自行上网查找），要求如下：要求如下：1.规格：尺寸大小880 x310像素，分辨率72像素/英寸，RGB颜色，以.PSD格式保存2.图形表达准确、有一定创意 3.构成协调、有美
10、感4.色彩运用准确 5.写50-100字设计说明模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo网页美工设计模块五 网页元素设计任务二 设计网页导航模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo教学目标 教学重难点设计和制作独立按钮设计和制作水平导航栏通过学习，学生能够：1能领会网页导航常用的设计形式2能设计和制作按钮3能设计和制作网页导航栏模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo新课导入新课导入按钮和导航栏是网页中的导航元素。二者密不可分，将按钮以一定形式组合到一起就形成了导
11、航栏。按钮和导航栏在网页中的主要作用为链接目标文件，是网页中不可或缺的要素。按钮在网页中可以分为两种：一种是有提交功能的按钮，另一种即为导航按钮，用于链接目标文件，方便用户快速浏览相应内容。在网页中最好使用图片自制的按钮作为导航按钮。导航栏用于显示和链接站点主要栏目，让用户了解站点内容分类，并引导用户快捷访问网站内容。根据导航栏放置的位置可分为横排导航栏和竖排导航栏。为了让网站信息可以有效地传递给用户，导航栏的设计一定要简洁、直观、明了，但还要包含一些必要的元素来引导用户浏览整个网站融入一些有创意且漂亮的设计。模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo
12、目标展示目标展示如下图所示，为一独立按钮。此按钮基本形状为圆角矩形，辅以矩形的电子书图标，外形和主题文字均呈较强的立体感；色彩上大面积采用了橙色，辅以红色点缀，明快、艳丽，有较强视觉吸引力。一、制作独立按钮独立 按钮二、制作水平导航栏如下图所示，为一水平导航栏。在导航栏的设计上，引入了图标，增加了设计亮点；主页按钮采用立体设计，有助于用户进行视觉识别，增强网站交互性。色彩上以灰色为主色调，辅以青色，简洁醒目。水平导航栏模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo任务分解任务分解1.1.三维导航设计三维导航设计网站导航不局限于常见的平面化设计，越来越多的网
13、站喜欢用立体感强的三维导航。折纸是最常用的表现形式，如图5-2-1所示。2.2.说话气泡导航设计说话气泡导航设计把导航菜单设计成讲话的气泡形状，也是一种流行的趋势，如图5-2-2所示。3.3.图标导航设计图标导航设计由于视觉上的吸引力，人们正越来越多地将图标应用到导航栏的设计中。合理运用图标能给设计增加亮点，它不仅吸引眼球，还有助于用户进行视觉识别，增强网站交互性，如图5-2-3所示。一、一、导航导航设计欣赏设计欣赏图5-2-1 三维导航图5-2-2 说话气泡导航模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo任务分解任务分解4.4.图片导航设计图片导航设计
14、在某些个性化网站导航设计中引入矢量图，丰富了页面形式，使得网页别具一格，妙趣横生，为网站增色不少，如图5-2-4所示。5.5.圆角导航设计圆角导航设计圆角经常用来软化规整的矩形，其按钮外观是为了吸引用户点击，如图5-2-5所示。6.6.不规则形状导航设计不规则形状导航设计大多数网站导航栏都是采用规则边角设计的，所以在特殊的网站设计中能使用一些不规则形状的导航菜单，既可以摆脱俗套让人耳目一新，又可以为整个网站设计带来生机和活力，增强网站吸引力，如图5-2-6所示。一、一、导航导航设计欣赏设计欣赏图5-2-4 图片导航图5-2-3 图标导航模块五模块五 网页元素设计网页元素设计任务一任务一 设计网
15、页设计网页LogoLogo任务分解任务分解7.JavaScript 7.JavaScript 动画动画JavaScript 技术使 Web设计人员只用 几行代码的网页元素即可容易创建动画，设计师们最近一直在使用功能多用又美观的JavaScript，如图5-2-7所示。一、一、导航导航设计欣赏设计欣赏图5-2-5 圆角导航图5-2-6 不规则形状导航图5-2-7 JavaScript动画模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo二、二、按钮按钮制作实例制作实例任务分解任务分解操作步骤操作步骤1.新建文档600 x400像素，分辨率72像素/英寸，RGB颜
16、色，背景白色。2.新建“底色”图层，添加图层样式，如图5-2-9。3.创建“按钮基本形状”组(1)新建“形状”图层，选用圆角矩形工具，设置半径为30像素，画圆角矩形；添加图层样式，如图5-2-10。图5-2-9 底色图5-2-10 圆角矩形模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo二、二、按钮按钮制作实例制作实例任务分解任务分解操作步骤操作步骤(2)复制“形状”图层得“形状副本”图层，添加如图5-2-11所示图层样式；选择移动工具，将“形状副本”适当向上移动几个像素，得立体按钮。图5-2-11 立体按钮图层太多须分组管理时，可选中相关图层，按CTRL+
17、G键，即可将选中的图层放入到一个新建的组中。模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo二、二、按钮按钮制作实例制作实例任务分解任务分解操作步骤操作步骤(3)制作“条纹”图案。新建文档3x3像素，分辨率300像素/英寸，RGB颜色，背景透明。用矩形选框工具做如图5-2-12所示选区，填充黑色，选择“编辑”“定义图案”，命名为“条纹”。(4)新建图层“条纹”，获取按钮选区，填充“条纹”图案；填充设置为10%，如图5-2-13所示。(5)选用横排文字工具输入“Click Here To Get Yours Now”，添加“外发光”、“投影”图层样式，如图5-
18、2-14、图5-2-15；输入“Just for signing up for our weekly newsletter!”，添加“外发光”、“颜色叠加”、“投影”图层样式，分别如图5-2-14、图5-2-16、图5-2-17所示。(6)用自定义形状工具绘制手形图形，添加“外发光”、“投影”图层样式，分别如图5-2-14、图5-2-15所示。图5-2-12 制作条纹图5-2-13 填充图案模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo二、二、按钮按钮制作实例制作实例任务分解任务分解操作步骤操作步骤图5-2-14 外发光图5-2-15 投影图5-2-17
19、投影图5-2-16 颜色叠加模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo二、二、按钮按钮制作实例制作实例任务分解任务分解操作步骤操作步骤 按钮基本形状效果如图5-2-18所示：4.创建“e-book”组(1)新建图层“内页1”，做矩形选区，填充颜色#f6f6f6。(2)复制“内页1”得“内页2”，添加图层样式“描边”。选择移动工具，将其向下、向右各移动1像素；同样的方法，得其它内页，如图5-2-19所示。图5-2-18 添加文字后的按钮图5-2-19 书内页效果模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo二、二、按
20、钮按钮制作实例制作实例任务分解任务分解操作步骤操作步骤(3)新建“书脊”图层，用钢笔工具绘制如图所示路径，转换为选区，填充颜色#ededed，如图5-2-20所示。(4)复制“书脊”得“书脊副本”，添加“颜色叠加”图层样式；添加图层蒙版，将多余的部分隐藏，如图5-2-21所示。(5)新建“封面中”图层，做矩形选区，填充白色。按CTRL+T自由变换，右击选择“变形”，将白色矩形调整成如图5-2-22所示形状；图5-2-20 填充颜色 图5-2-21 书脊效果图5-2-22 变形效果模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo二、二、按钮按钮制作实例制作实例
21、任务分解任务分解操作步骤操作步骤(6)新建“封面上”图层，用钢笔工具绘制路径，转化为选区后，如图5-2-23所示，填充颜色#d40b0b；(7)新建“封面下”图层,用钢笔工具绘制路径，转化为选区后，如图5-2-24所示，填充颜色#d40b0b；(8)选 用 横 排 文 字 工 具，分 别 输 入“E B O O K”、“Y O U R A W E S O M E”、“WWW.AWESOMEBOOK.COM”，选用适当的文字变形，为每个文字图层添加“描边”样式，如图5-2-25所示。(9)新建“封面图案”图层，选择“自定形状工具”，绘制图案，填充颜色#d40b0b，如图5-2-26所示。图5-2
22、-23 封面上部图5-2-24 封面底部模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo二、二、按钮按钮制作实例制作实例任务分解任务分解操作步骤操作步骤(10)新建“高光”图层，多边形套索工具绘制选区，羽化5个像素，用白色到透明的渐变填充，如图5-2-27所示。(11)新建图层“阴影”，用柔角画笔工具，在书底部画阴影，如图5-2-28所示。图5-2-25 输入文字图5-2-26 添加图案 图5-2-27 高光效果图5-2-28 添加阴影模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo二、二、按钮按钮制作实例制作实例任务分解
23、任务分解操作步骤操作步骤5.利用自由变换，调整“e-book”组的大小、位置，放在按钮右侧合适位置上，如图5-2-29所示。图5-2-29 自由变换效果三三、导航栏导航栏制作实例制作实例操作步骤操作步骤1.新建文档1002x300像素，分辨率72像素/英寸，RGB颜色，背景白色。2.创建“导航栏背景”组，如图5-2-31所示。(1)创建图层“底色1”，选择圆角矩形工具，设置半径为10像素，绘制圆角矩形大小为950*60像素，添加如图5-2-32至图5-2-34所示图层样式。模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo三三、导航栏导航栏制作实例制作实例任务
24、分解任务分解操作步骤操作步骤2)复制“底色1”得图层“底色2”,修改“描边”如图5-2-34所示。导航栏背景如图5-2-35所示。图5-2-34 投影图5-2-31 图层图5-2-34 渐变叠加 图5-2-32 描边较之“编辑”-“描边”，使用图层样式“描边”更灵活，可随时对描边宽度等等进行修改。模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo三三、导航栏导航栏制作实例制作实例任务分解任务分解操作步骤操作步骤3.创建“分隔线”组。在其下新建“分隔线1”图层，用单列选框工具做1像素宽线条，填充颜色#ffffff；再用单列选框工具紧挨着做1像素宽线条，填充颜色#
25、bfbfbd；添加图层蒙版，将导航栏外多余的线条隐去。复制“分隔线1”，得其余分隔线条，效果如图5-2-36。图5-2-35 描边图5-2-36 分隔线模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo三三、导航栏导航栏制作实例制作实例任务分解任务分解操作步骤操作步骤4.新建“激活菜单背景”图层，用矩形工具绘制矩形，添加如图5-2-37至图5-2-39所示图层样式，效果如图5-2-40。图5-2-37 描边图5-2-38 内阴影图5-2-40 导航栏背景效果图5-2-39 渐变叠加模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLo
26、go三三、导航栏导航栏制作实例制作实例任务分解任务分解操作步骤操作步骤5.创建“Home菜单背景”组，如图5-2-41所示。(1)新建“底色1”图层，用钢笔工具绘制如图5-2-42所示路径，转化为选区，填上任意颜色。添加如图5-2-43至图5-2-45所示图层样式。图5-2-42 绘制路径图5-2-44 投影图5-2-41 图层图5-2-43 渐变叠加 图5-2-45 描边模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo三三、导航栏导航栏制作实例制作实例任务分解任务分解操作步骤操作步骤(2)复制图层“底色1”得“底色2”,修改“描边”如图5-2-46所示，效
27、果如图5-2-47所示。(3)新建图层“右侧阴影”，用钢笔工具绘制路径，转化为选区，渐变填充，如图5-2-48所示。图5-2-47 两次描边后Home菜单效果图5-2-46 描边按回车键，可将快速地将当前路径转化为选区。模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo三三、导航栏导航栏制作实例制作实例任务分解任务分解操作步骤操作步骤(4)同样的方法制作“左侧阴影”，如图5-2-49所示。(5)新建“高光”图层，用矩形选框做矩形选区，适当羽化，填充白色。不透明度设为40%，如图5-2-50所示。图5-2-48 右侧阴影图5-2-49 左侧阴影模块五模块五 网页
28、元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo三三、导航栏导航栏制作实例制作实例任务分解任务分解操作步骤操作步骤6.新建图层“搜索框”，绘制圆角矩形，半径为20像素，如图5-2-51所示；添加图5-2-52至图5-2-54所示图层样式，效果如图5-2-55所示。图5-2-55 收搜框效果#ececea图5-2-52 描边图5-2-54 内阴影#b9b7b7图5-2-53 内发光图5-2-51 圆角矩形模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo三三、导航栏导航栏制作实例制作实例任务分解任务分解操作步骤操作步骤7.创建“文字”组。选择合
29、适的文字字体，“Home”字号为8点，其余文字字号均为4点；为“Feed”添加“投影”图层样式，如图5-2-56所示。8.创建“图标”组。导入图片文件，利用“颜色叠加”将所有图标设定成灰色；为“feed”添加“投影”图层样式；为“cart”、“guide”、“info”添加“斜面和浮雕”图层样式，制作凹陷效果。最终效果如图5-2-57所示。图5-2-56 添加文字模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo三三、导航栏导航栏制作实例制作实例任务分解任务分解操作步骤操作步骤图5-2-57 添加图标模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页
30、设计网页LogoLogo课堂小结课堂小结 本任务我们学习了哪些知识？从这些知识出发引出了哪些技能？合作学习中，你发挥了多大的作用，有积极主动参与吗？自评、互评环节的评价结果是否吻合，不吻合的原因是什么？模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo作业布置作业布置一、为一、为“重庆动物保护学会重庆动物保护学会”网站制作横向导航栏，要求如下：网站制作横向导航栏，要求如下：1.规格：尺寸大小760 x60像素，分辨率72像素/英寸，RGB颜色，以.PSD格式保存2.导航栏设计不仅要美观，还要重点突出3.栏目自定（至少5个），所须素材自行上网查找二、为二、为“动
31、物领养动物领养”链接页面设计一款立体按钮，尺寸链接页面设计一款立体按钮，尺寸240 x120240 x120像素，分辨率像素，分辨率7272像素像素/英寸，英寸，RGBRGB颜色，以颜色，以.PSD.PSD格式保存格式保存模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo网页美工设计模块五 网页元素设计任务三 设计网页Banner模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo教学目标 教学重难点把握不同风格的网页Banner设计形式设计和制作手表网站静态Banner通过学习，学生能够：1能选用恰当构图样式设计Banner2
32、能掌握网页Banner常用的设计形式3能设计和制作网页Banner模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo新课导入新课导入Banner，即网幅广告、旗帜广告、横幅广告，一般是使用GIF、JPG格式的图像文件。可以使用静态图形，也可用多帧图像拼接为动画图像。动画Banner比静态或单调的Banner更具优势。一个页面最醒目最吸引用户的应该是Banner了。Banner主要体现意旨，形象鲜明地展示所要表达的内容；特别是首页的Banner，直接决定了用户的停留。常见的banner构图样式有以下六种：u垂直水平式构图u三角形构图u渐次式构图u辐射式构图u对角
33、线构图u框架式构图模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo目标展示目标展示如下图所示，为某手表网站静态Banner。在制作上，圆形图案既与手表盘面吻合，借助光影的变化又为手表提供了一个良好的展示平台；色彩上以墨绿色为主色调，背景与手表图片色彩互补、明暗分明；文案设计凝练、简洁，体现了品牌核心价值理念。整个Banner设计简约、大气。制作手表网站静态制作手表网站静态BannerBanner图5-3-18 手表网站静态Banner模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo任务分解任务分解1.1.点线面点线面点、线
34、、面具有不同的情感特征，采用不同的组合能体现不同Banner的情感诉求，如图5-3-8所示。2.2.创意矢量图形创意矢量图形矢量图形创意独特，有较强的视觉冲击力，其精致的矢量风格与网站整体完美结合，能体现出网站整体实力，如图5-3-9。3.3.人物与文字人物与文字采用人物与文字内容结合，增加亲近感，主题思想显得更加鲜明，人物可以更直接、更友好的告诉用户这里有什么，如图5-3-10所示。4.肢体语言肢体语言的引入，打破了沉闷感，让画面变得活跃，富有生气，如图5-3-11所示。一、一、BannerBanner设计欣赏设计欣赏图5-3-8 点线面的运用图5-3-9 创意矢量图形模块五模块五 网页元素
35、设计网页元素设计任务一任务一 设计网页设计网页LogoLogo任务分解任务分解5.5.软件产品界面软件产品界面很多软件产品服务网站都将自己的产品界面直接融合在Banner中，加上文字与个性Button，可以让用户直接深入的了解产品基本功能和构造，甚至会激起用户想立即试用的欲望，如图5-3-12所示。6.6.纯文字内容纯文字内容BannerBanner不需要华丽的背景，更不需要图片的点缀，只需要一段文字加上单调的背景色，如图5-3-13所示。一、一、BannerBanner设计欣赏设计欣赏图5-3-10 人物与文字图5-3-11 肢体语言图5-3-12 软件产品界面图5-3-13 纯文字模块五模
36、块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo任务分解任务分解7.7.光线与渐变背景光线与渐变背景渐变的背景在融入线条元素，让Banner更加动感夺目，单色或多色的光线让线条和背景更加炫彩，使Banner充满迷幻进一步刺激用户的探索欲望，如图5-3-14所示。8.8.人物或产品组合展示人物或产品组合展示用堆积这种布局特效来展示不同的作品示例，并附上一条介绍性质的口号，网页变得更有说服力，丰富而富有层次感，如图5-3-15所示。9.9.特殊肌理的组合特殊肌理的组合适当运用肌理以及拼贴效果，让画面变得有质感且意味深长，是让Banner与众不同的好办法之一，如图5-3-
37、16所示。一、一、BannerBanner设计欣赏设计欣赏图5-3-14 光线与渐变图5-3-15 产品组合展示模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo任务分解任务分解10.10.滑动效果滑动效果使用滑动效果来将更多信息填进到Banner区域。这对于有很多特性和丰富产品线的网站很有用，通过一些很有用的Javascript库及其插件，让这类效果更加活灵活现，如图5-3-17所示。一、一、BannerBanner设计欣赏设计欣赏图5-3-17 滑动效果图5-3-16 特殊肌理二二、BannerBanner制作实例制作实例操作步骤操作步骤1.新建文档100
38、2x450像素，分辨率72像素/英寸，RGB颜色，背景白色。2.创建“底色”层，填充颜色#0f2f02；并添加杂色，如图5-3-19。模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo任务分解任务分解操作步骤操作步骤3.创建“暗角”层，为降低四个角的亮度，填充黑色，并添加蒙版；编辑蒙版，用椭圆选框工具作椭圆选区，羽化30个像素，填充黑色。不透明度设为20%，如图5-3-20所示。4.创建“正圆”层，用椭圆形状工具绘制圆，如图5-3-21所示；并添加图层样式，如图5-3-22、图5-3-23、图5-3-24所示。二二、BannerBanner制作实例制作实例图5
39、-3-19 创建底色模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo任务分解任务分解操作步骤操作步骤二二、BannerBanner制作实例制作实例图5-3-20 添加暗角图5-3-21 绘制圆并添加图层样式后效果图5-3-22 描边模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo任务分解任务分解操作步骤操作步骤5.创建“高光”层，用钢笔工具绘制如图所示路径，转化为选区，填充白色到透明的渐变；并将图层模式改为柔光，不透明度为60%。如图5-3-25所示。二二、BannerBanner制作实例制作实例图5-3-24 渐变叠加图
40、5-3-23 外发光模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo任务分解任务分解操作步骤操作步骤6.导入素材，得“手表”层，为其添加“亮度/透明度”调整层，适当降低亮度；为“手表”层添加图层样式“投影”，并以“投影”效果创建“手表阴影”图层，按CTRL+T调整手表阴影大小和位置。如图5-3-26所示。7.复制“手表”层，得“手表副本1”层。执行“风格化”“查找”，按CTRL+I键反相。按CTRL+T调整“手表副本1”大小和位置；并将图层模式改为“颜色减淡”，不透明度为20%，如图5-3-27所示。8.复制“手表”层，得“手表副本2”层。按CTRL+T调整
41、“手表副本2”大小和位置；添加图层蒙版，用黑色柔角画笔编辑蒙版，擦出表带等多余部分；并将图层模式改为“叠加”，不透明度为15%，如图5-3-28所示。二二、BannerBanner制作实例制作实例图5-3-25 添加高光图5-3-26 导入手表并处理后效果模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo任务分解任务分解操作步骤操作步骤9.创建文字图层，选择恰当的字体、字号输入如图5-3-29所示文字，并适当调整字符间距。10.创建“圆点”层。用画笔在“时间铸就品质”与“品质成就人生”之间画上一个小圆点，颜色#b01b09，如图5-3-30所示。二二、Bann
42、erBanner制作实例制作实例图5-3-27 制作左上角手表图案图5-3-28 制作左侧手表图案为图层添加图层样式后，可右击此图层样式，选择“创建图层”，将图层样式与图层分离，以新图层的形式存在方便调整。模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo任务分解任务分解操作步骤操作步骤二二、BannerBanner制作实例制作实例图5-3-29 添加文字图5-3-30 制作圆点模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo课堂小结课堂小结 本任务我们学习了哪些知识？从这些知识出发引出了哪些技能？合作学习中，你发挥了多大的
43、作用，有积极主动参与吗？自评、互评环节的评价结果是否吻合，不吻合的原因是什么？模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo作业布置作业布置为为“重庆动物保护学会重庆动物保护学会”网站制作首页网站制作首页bannerbanner，要求如下：，要求如下：1.规格：尺寸大小760 x200像素，分辨率72像素/英寸，RGB颜色，以.PSD格式保存2.banner设计突出网站主题，构思新颖，色彩协调，做到形式与内容相统一3.所须素材自行上网查找模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo网页美工设计模块五 网页元素设计任务
44、四 设计网页广告模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo教学目标 教学重难点辨识不同网页广告形式及特点设计和制作地产静态全屏广告通过学习，学生能够：1能把握不同网页广告形式的设计特点2能设计和制作网页广告模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo新课导入新课导入网络广告的本质是向互联网用户传递营销信息的一种手段，是对用户注意力资源的合理利用，在网络营销方法体系中具有举足轻重的地位。作为独特的新型媒体，网络广告给广告信息传播带来了形式与实质的变化，其将超越户外广告，成为传统四大传播媒体（报纸、杂志、电视、广播）
45、之后的五大媒体。在Web广告策划中选择合适的广告形式是吸引受众、提高浏览率的可靠保证。在制作网络广告前，必须认真分析企业的营销策略、企业文化及企业的广告需求，这样才能设计出有用的网络广告。网络广告常见形式如下：u横幅式广告banneru按钮式广告u邮件列表广告u弹出窗口式广告u对联式广告u浮动广告u全屏广告模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo目标展示目标展示如下图所示，为某地产静态全屏广告。在制作上，以修改地球为基础，借助对海的修饰和天空的衬托以及远景的楼房，来集中体现出“每天的水岸心情”这个主题；色彩上以蓝色为主题颜色，静谧舒适，以突出“华宇金
46、沙每天的水岸心情”主题广告语。整个广告构思巧妙，让人对美好生活充满无限遐想，激起人们对该地产的置业欲望。制作地产静态全屏广告制作地产静态全屏广告地产静态全屏广告 模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo任务分解任务分解一幅广告的色彩是倾向于冷色或者暖色、明亮艳丽或者素净雅致，这些色彩倾向所形成的不同色调给人们的印象就是广告色彩的总体效果。广告色彩的整体效果取决于广告主题的需要以及消费者对色彩的喜好，并以此为依据来决定色彩的选择与搭配。1.1.化妆品广告化妆品广告女性化妆品类商品常用柔和、脂粉的中性色彩，如具有各种色彩倾向的紫色、粉红、亮灰等色，表现女
47、性高贵、温柔的性格特点，如图5-4-1所示。而男性化妆品则较多使用黑色、灰色或者单纯的色彩，这样能够体现男性的庄重、沉稳，如图5-4-2所示。一、一、网页广告网页广告欣赏欣赏图5-4-1女性化妆品广告图5-4-2男性化妆品广告模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo任务分解任务分解2.2.药品广告药品广告药品广告的色彩大都是白色、蓝色、绿色等冷色，这是根据人们心理特点确定的。这样的总体色彩效果能给人一种安全、宁静的印象，让药品易于被人们接受，如图5-4-3所示。3.3.食品广告食品广告食品类商品常用鲜明、丰富的色调。红色、黄色和橙色可以强调强调食品的
48、美味与营养，绿色强调蔬菜、水果的新鲜，如图5-4-4所示。一、一、网页广告网页广告欣赏欣赏图5-4-3药品广告图5-4-4食品广告模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo任务分解任务分解4.4.儿童用品广告儿童用品广告儿童用品常用鲜艳的纯色和色相对比、冷暖对比强烈的各种色彩，以适应儿童天真、活泼的心理和爱好，如图5-4-5所示。5.5.机械仪器广告机械仪器广告机械仪器类商品常用黑色、金色、银色的较厚重的色彩，以表现产品的坚实、精密或耐用的特点，如图5-4-6所示。一、一、网页广告网页广告欣赏欣赏图5-4-5儿童用品广告图5-4-6 机械仪器广告模块五
49、模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo任务分解任务分解操作步骤操作步骤1.新建文档，大小800600像素，分辨率72像素英寸，RGB模式，背景白色。2.导入“蓝天”素材图片，放置在合适位置，得“天空”图层。为其添加“色阶”调整层，参数设置如图5-4-8。3.使用“多边形套索工具”，绘制选区，羽化50像素，按Ctrl+J得到新图层“云彩”；使用“自由变换”进行调整，设置橡皮擦的不透明度和大小，用橡皮擦擦除以便能与天空自然融合，如图5-4-9。二二、网页广告制作实例网页广告制作实例图5-4-8天空调整色阶效果模块五模块五 网页元素设计网页元素设计任务一任务一
50、 设计网页设计网页LogoLogo任务分解任务分解操作步骤操作步骤4.导入“山水”素材图片，为其添加图层蒙版；并使用渐变工具，填充黑色到透明的渐变编辑蒙版，如图5-4-10。5.导入“海水”素材图片，采用上述方法添加图层蒙版并绘制线性渐变，使用黑色画笔，设置不透明度、大小，在蒙版中涂抹，使图片衔接自然，如图5-4-11。二二、网页广告制作实例网页广告制作实例图5-4-9 变换云彩使用画笔、橡皮擦等工具时，可按0-9数字键来改变其不透明度以方便操作。模块五模块五 网页元素设计网页元素设计任务一任务一 设计网页设计网页LogoLogo任务分解任务分解操作步骤操作步骤6.导入“地球仪”素材图片，改变
