教学设计：
项目 4 4 花火体育极限运动 网页设计
教材名称
网页创意设计案例教程 单元课题
项目 4 花火体育极限运动网页设计 授课教师
X X XX
课程类型
新授 授课课时
？课时 教学内容 及
课时安排
任务 1
色彩的基本知识 任务 2
色彩设计 任务 3
网页图形图像设计 任务 4
制作首页效果图 任务 5
制作“极限培训”页面 任务 6
制作“极限赛事”页面 教学目的
和要求
知识目标：
（1）掌握色彩的基本知识 （2）掌握配色原则和配色方法 能力目标：
（1）能对色彩的基本知识有一个完整的认识 （2）能灵活运用色彩的配色原则和方法进行页面设计 （3）能灵活运用图形图像进行网页页面设计 情感目标：
（1）培养学生对所需颜色进行分析的能力以及对配色方案的选择； （2）培养学生的创新能力和美感 教学重点
难点
重点：
（1）网页设计中色彩的基本知识、配色原则和配色方法 （2）根据项目特征和网站风格倾向确定网站的配色方案 难点：
（1）灵活运用图形图像进行网页页面设计 课前准备
下发课堂所用素材；检查学生出勤，作好学生考勤记录；强调课堂纪律，活跃课堂气氛
课时序号：
1-2
年
月
日 课
题
任务 1
色彩的基本知识 教师姓名
XXX 课程类型 新授 授课 课时
2 教学目标
知识目标：
（1）色彩的基础知识 （2）网页设计中的配色原则 能力目标：能够对色彩的基本知识有一个完整的认识 德育目标：引导学生正确认识美，欣赏美，培养学生在网页设计乃至生活中的美感。
教学重点
难点
重点：色彩的基础知识。
难点：能灵活运用色彩的配色原则和方法进行页面设计。
教
法
项目教学法、演示法 学
法
探究学习法、任务驱动法 教具使用
多媒体课件、极域教师端 任务描述
教学过程
教师活动
学生活动
通过任务的操作练习，主要学会使用平面设计原则，运用平面构成的基本元素设计页面 老师利用极域下发课堂素材 完成点名，接收素材。
任务分析
教学过程
教师活动
学生活动
本任务主要学习色彩的配色原则和方法，掌握这些方法是网页设计的基础。
提问问题，引出本节课的新知识 回答老师问题，分析任务，了解本节课目标。
任务实施
教学过程
教师活动
学生活动
一.色彩的基本知识 1.色彩在网页界面设计中的作用 任何一件网页界面设计作品都离不开色彩，许多网站能够让人过目不忘的很大原因就在于其成功的色彩搭配。色彩在网讲解基本原则
页界面设计中的作用主要包括以下几个方面。
（1）合理划分视觉区域 传递信息是网页界面的首要任务，利用色彩可以对视觉区域进行划分，形成有序的视觉流程。
（2）烘托主题 充分利用色彩的表现力、情感效应和审美心理感受，与网页的内容、形式进行有机结合，可以烘托出网站的主题，突出主旨。
（3）吸引眼球 对于一个网站而言，第一印象很重要，能够有效吸引住人们的眼球也不是一件易事，网页的色彩搭配就显得格外重要，不同的色彩可以表达含蓄优雅、动感强烈、新颖时尚、单纯有力等不同的效果 2.色彩的定义和分类 色彩是通过眼、脑和我们的生活经验所产生的一种对光的视觉效应。我们肉眼所见到的光线，是由波长范围很窄的电磁波产生的，不同波长的可见光投射到物体上，一部分被吸收，一部分被反射进入人眼，大脑再把这种刺激反映成色彩信息。
色彩可以分成两个大类：有彩色系和无彩色系。有彩色系的颜色具有三个基本特性：色相、明度、纯度，称为色彩的三要素。饱和度为 0 的颜色为无彩色系，指白色、黑色和由白色黑色调合形成的各种深浅不同的灰色。
3.色彩的三要素 色彩的三要素是指每一种色彩都同时具有三种基本属性，即色相、明度和纯度。
（1）色相 色相是有彩色的最大特征，它是指能够比较确切地表示某种颜色色别的名称，如黄、黄橙、红紫、蓝、蓝绿……从光学物理上讲，各种色相是由射入人眼的光线的光谱成分决定的。对于单色光来说，色相的面貌完全取决于该光线的波长；对于混合色光来说，则取决于各种波长光线的相对量。物体的颜色是由光源的光谱成分和物体表面反射（或透射）的特性决定的。其中，大部分的红、橙色相属于暖色，给人温暖热情的感觉；大部分的蓝色、青色等色相属于冷色，给人寒冷、安静的感觉。其它没有明显冷暖倾向的颜色属于中性色。
（2）明度 明度是指色彩的明亮程度。各种有色物体由于它们的反射光量的区别而产生颜色的明暗强弱。色彩的明度有两种情况：一是同一色相的明度。同一颜色在强光照射下显得明亮，弱光照射下显得较灰暗模糊；同一颜色加黑或加白以后也能产生各种不同的明暗层次。二是不同色相的明度。每一种纯色都有与其相应的明度。
黄色明度最高，蓝紫色明度最低，红、绿色为中间明度。色彩的明度变化往往会影响到纯度，如红色加入黑色以后明度
降低了，同时纯度也降低了；如果红色加白则明度提高了，纯度却降低了。
明度高可以传递出明快、清爽的感觉，适合表现清新、文艺等风格，体现产品纯净、健康的特性；明度低可以表现能量感和神秘感，适用于理性、科技、电子等领域，也常常用来表现商务或高端的主题。明度高的颜色有突出、前进的感觉，明度低的颜色有凹进、远离的感觉。
（3）纯度 色彩的纯度是指色彩的纯净程度，它表示颜色中所含有色成分的比例。含有色彩成分的比例愈大，则色彩的纯度愈高，含有色成分的比例愈小，则色彩的纯度也愈低。可见光谱的各种单色光是最纯的颜色，为极限纯度。当一种颜色掺入黑、白或其他彩色时，纯度就产生变化。高纯度有健康、积极、开放等属性，常用于表现儿童相关主题，高纯度能够有效促进人的生理、心理处于亢奋状态，因此节日促销使用纯色调营造氛围，因为人在兴奋、激动的情况下易受外界促销信息影响，更容易下单。而低明度则是成年人群的颜色，可以给人素雅、沉着、稳重、成熟的印象，常用于高品质属性的塑造。
4. 不同色彩的情感象征 （1）红色 光的三原色之一。在中国，红色传统上表示喜庆，比如在婚礼上和春节都喜欢用红色来装饰；在东亚股票市场，红色表示股价上升；红色被认为能激起人雄性荷尔蒙的分泌，所以在运动比赛中身着红色服装者能取得更好的成绩；红色代表权威，例如清代皇帝批阅奏折使用朱砂红笔，称为朱批；红色容易引起人们的注意，因此许多警告标记都用红色的文字或图像来表示。
（2）绿色 光的三原色之一。绿色和大自然与植物紧密相关，可代表自然、生态、环保等，如绿色食品、绿色能源；绿色是春天的颜色，代表生命、生机、万物复苏；绿色有准许行动之意，因为交通讯号中绿色代表可行，绿色通道是其引申词，意为快捷方便，一路畅通无阻；绿色可以起保护色的作用，所以陆军和野战队通常用绿色制服。
（3）蓝色 光的三原色之一。蓝色是冷色调的代表，在生理上让人感觉凉爽、寒冷，在心理上表示冷静；蓝色是天空和大海的颜色，象征虚空、广阔以及神性；工人一般工作时穿的蓝色的工作服，故蓝领一般指工厂中从事体力劳动的工人；蓝色也表示忧郁，这或许就是蓝调音乐名字的由来；蓝带一般用来标志质量非常高的事物。
（4）黄色 它有大自然、阳光的涵义，通常被认为是一个快乐和有希望
的色彩。在中国古代黄色是高贵的颜色，从宋朝以后，明黄色是皇帝专用颜色；黄色是黄金的颜色，因此也有财富的含义；黄色是一个高可见的色彩，因此它被用于健康和安全设备以及危险信号中，比如红绿灯中的黄色用来提醒行人和车辆注意，甚至有的国家的出租车全都是黄色的；黄色还指代淫秽、色情、暴力等不良内容。
（5）橙色 它是欢快活泼的光辉色彩，是暖色系中最温暖的色，它使人联想到金色的秋天，象征着丰收和食物，是一种富足、快乐而幸福的颜色，用在餐厅中能调动食欲；橙色是火焰的颜色，代表了能量、动力、光辉；橙色明视度高，在工业安全用色中，橙色即是警戒色，如火车头、登山服装、背包、救生衣等，橙色一般可作为喜庆的颜色，同时也可作富贵色，如皇宫里的许多装饰。
（6）紫色 在色环上游离于冷色调和暖色调之间。中国传统中紫色代表圣人，帝王之气，如北京故宫又称为“紫禁城”，还有成语“紫气东来” 比喻吉祥的征兆；紫色的梦充满了浪漫和神秘，让人遐想和回味；但是紫色也有消极的一面，灰暗的紫色暗示伤痛、疾病，容易造成心理上的忧郁、痛苦和不安的感觉。因此，紫色时而有胁迫性，时而有鼓舞性，在设计中一定要慎重使用。
（7）白色 是一种无彩色，包含光谱中所有颜色光的颜色，将光谱中三原色的光：红色、绿色和蓝色，按一定比例混合得到白色。白色的明度最高。白色寓意着公正、纯洁、清澈、正直、简约、超脱凡尘与世俗的情感，也有空虚、孤独、失败、死亡、寒冷的感觉。它没有强烈的个性，经常被用作页面的背景色。
（8）黑色. 当没有任何可见光进入视觉范围，人眼的感觉就是黑色。黑色是最深的颜色，黑色产生的联系可以是黑夜、深渊，但是黑色也可以流露出高雅、信心、神秘、权力和力量。许多科技产品的用色，如电视、摄影机、音响，大多采用黑色，在一些特殊场合的空间设计，生活用品和服饰设计大多利用黑色来塑造高贵的形象。
板书设计
教学反思
课时序号：3-4
年
月
日 课
题
任务 2
色彩设计 教师姓名
XXX 课程类型 新授 授课 课时
2 教学目标
知识目标：
（1）掌握配色原则和配色方法 （2）了解配色方案和配色流程 能力目标：能灵活运用色彩的配色原则和方法进行页面设计 德育目标：培养学生解决问题的能力，培养学生的创新意识与美感 教学重点
难点
重点：配色原则和配色方法 难点：运用色彩的配色原则和方法进行页面设计 教
法
项目教学法、演示法 学
法
探究学习法、任务驱动法 教具使用
多媒体课件、极域教师端 任务描述
教学过程
教师活动
学生活动
在色相环中，将色彩划分为 12 种基本色相，选取其中某一种色相做为基准色相，就会产生包括同类色相、类似色相、中差色相、对比色相、互补色相在内的六种色相之间的关系。
老师利用极域下发课堂素材 完成点名，接收素材。
任务分析
教学过程
教师活动
学生活动
本任务通过运用色彩的配色原则和方法进行页面设计 提问问题，引出本节课的新知识 回答老师问题，分析任务，了解本节课目标。
任务实施
教学过程
教师活动
学生活动
1. 配色模式 对比色相：色相对比距离约 120 度左右，为强对比类型，如黄色与蓝绿色，黄色与橙红色，如图 4-44 所示，效果强烈、演示任务实施过程。点评学生制作过程中出现的问题。
根据老师的演示完成任务。改进作品。
醒目、有力、丰富，色彩之间互相衬托，形成明快、鲜明的印象，适合于表现活力四射，朝气蓬勃的画面，但不容易统一，会导致杂乱、刺激等，需要采用多种调和手段来改善。
互补色相：如果三原色光中某一种色光与某一种三原色光以外的色光等量相加后形成白光，则称这两种色光为互补色光，它们在色相环中相距 180 度左右。红色与绿色互补，蓝色与橙色互补。互补色对比是色相对比的极端，会引起强烈对比的色觉，会感到红的更红、绿的更绿。
2. 配色原则 色彩的搭配方法有很多种，比较公认的方法是日本设计师提出的“黄金配色比”，既主色、辅助色、点缀色的配比为“70：25：5”的配色比例原则。主色是页面中比重最大的色相，它决定了页面整体的色调。辅助色是为了平衡主色，一般在画面的核心区域使用。
3. 配色流程 （1）确定主色 主色的颜色来源可以从三个方面入手：主体、风格、文案。提取主色最常用的方式就是在主体上提取，可以选择主体中比重最大的颜色，让主色与主体形成呼应关系。也可以选择与主体相反的颜色，将主色和主体色通过对比或互补关系形成强烈反差，让主体在画面中的视觉形象更加鲜明。
文案在页面中的重要性是不言而喻的，将文案与页面结合起来能够大大的提升浏览者对页面的理解速度，也就是捕捉信息的速度，这样做不仅让文案与画面形成视觉上的呼应，也更利于视觉信息的传递。文案中的“相宜本草”中的“本草”让我们联想到自然、植物、草原等元素，而画面中的绿色背景、绿叶、绿色文案、绿色面膜包装都契合我们的视觉期待，形成了视觉回应。
（2）确定辅助色
确定辅助色的方法有很多种，可以通过色彩理论来确定，也可以参考主色相关的照片、艺术品、服饰等任何可能的物品，只要能表达出我们想要色色彩感觉，都可以通过对这些媒介的分析和提取，找到相应的色彩。还可以通过配色网站，查找可行配色方案。色相环上选择一种主色，给出相应的配色方案。olorhunter 网站，它有两个功能，一个是可以分析出图片的主体色调，另一个是通过上传图片的主体颜色搜索出同一色系的图片。
（3）选择点缀色 点缀色只是普通装饰作用，一般根据主色降低明度或纯度即可，如果点缀色用于视觉引导，则一般选择与主色对比较大的颜色。当确定了主色、辅助色和点缀色之后，对整体画面进行浏览，这时可眯起眼睛让画面处于模糊的状态，如果有特别跳跃的地方，可以调整一下主色或辅助色的明度、纯度，确保画面中只有一个主角。有的时候三种颜色虽然正确但搭配到一起却并不舒适，可以尝试使用黑白灰这些无色相的颜色，白色可以给画面增加透气感，黑色可以给画面增加重量，灰色是一种百搭的颜色，可以让白色显得高级，让黑色显得不那么闭塞。
任务拓展
教学过程
教师活动
学生活动
1.使用本节学过的配色原则和方法将以前做过的网页进行重新配色
板书设计
教学反思
课时序号：5-6
年
月
日 课
题
任务 3 网页图形图像设计 教师姓名
XXX 课程类型 新授 授课 课时
2 教学目标
知识目标：1.了解图形图像在网页界面设计中的应用
2.图形图像创意设计的原则与方法 能力目标：能灵活运用图形图像进行网页页面设计 德育目标：培养学生运用图形图像进行创意表达 教学重点
难点
重点：了解图形图像在网页界面设计中的应用 难点：能灵活运用图形图像进行网页页面设计 教
法
项目教学法、演示法 学
法
探究学习法、任务驱动法 教具使用
多媒体课件、极域教师端 任务描述
教学过程
教师活动
学生活动
图形图像可以将信息传达的更直接、具体、真实、易于读者理解。
老师利用极域下发课堂素材 完成点名，接收素材。
任务分析
教学过程
教师活动
学生活动
在网页设计中合理地运用图形图像，可以使网页充满强烈的感情色彩，从而形成视觉信息中心，传达网页的重要信息。
提问问题，引出本节课的新知识 回答老师问题，分析任务，了解本节课目标。
任务实施
教学过程
教师活动
学生活动
1. 图形图像在网页界面设计中的应用
图形图像在网页界面设计中主要用来制作 Logo、背景插图、主图、超链接。
演示任务实施过程。点评学生制作过程中出现的问题。
根据老师的演示完成任务。改进作品。
内容
特点
例图
Logo 标志 Logo 具有象征功能、识别功能，是网站形象、特征、信誉和文化的浓缩。而以图形作为标志能够避免以文字作为标志的单调感，更能感染和影响人们
背 景插图 运用图形图像进行处理，制作出的网站背景更能衬托出网页主题，增加页面的层次感
主图 指网页中能够表达和突出主题的较大幅面的图形图像。好的主图能够形成整个页面的视觉中心，直观性和表达性更强
超 链接 将图形图像设计为超链接能够丰富网页的链接形式，使网页更加美观，也便于浏览者的操作
2. 图形图像的创意设计
（1）图形图像创意设计的原则 原则
内容
例图
精 炼简洁 图片的数量过多，占的空间过大，会影响网页的下载速度，进而影响视觉体验。所以网页中放置的图片要少而精
颜 色协调 是指图像、文字及整个界面的主色调协调一致。图像的色彩应与整体的主色调统一，以免给人杂乱堆砌之感
风 格吻合 图像的风格要与网页的主题内容保持氛围、情感上的一致。不同类型的网站，可以通过对图像图形的风格处理、排版和色彩处理来突出其网站的特有风格
布 局合理 把图形图像放在合适的位置上，及时处理好图像与图像之间、图像与文字之间的关系，图像的布局要根据文字的排版及时更改，合理利用平面空间
（2）图形图像创意设计的方法 图形图像的创意设计是网页创意设计的核心，是视觉形
象的表现过程。网页中图形图像的创意设计表现主要有同构、联想、寓意、情感等方法 方法
特点
例图
同构 两个或者两个以上的图形通过作者天马行空的想象力，按照特定的组合形式组合在一起，并且形成一个新的图形，并将原先的图形含义更加深化，在这个基础上给人不同的视觉享受。
联想 界面中使用富于联想性的图形和色彩．可以使浏览者将形象与主题之间建立必然的联系，从而起到加强主题表现的作用,联想型创意要选择受众最熟悉的联想形象诱导浏览者。
寓意 选择与诉求目标主题有相符之处的物象，通过比喻和象征等手法来表现主题
情感 让情感贯穿于视觉形式的表现，增加其视觉感染力，丰富其内涵,能够诱使受众凭借感官等认知的、激发个人的情感、并未深入思考而基本以第一印象来做判断的图形元素
夸张 为了达到某种表达效果的需要，对事物的形象、特征、作用、程度等方面着意夸大或缩小的修辞方式，使主题形象更加醒目突出。
幽默 幽默是创作主体通过美与丑的强烈对照，以比较温和的态度和含蓄的手法，对含有喜剧因素的事物作有意识的理性反向设计，使接受者把意料之外的直觉转化为情理之中的知觉。
创意语境的表现是构成创意图形的基本条件，创意语境强调创造性想象，主张用图画的形式挖掘创意语言的隐喻内涵，它是设计师创造特定视觉环境、构想和传达语义信息的
外在形式。它可以赋予客观图形以特殊的意念表达，可以用图形实现语境的演绎，这种由一般向特殊的转换就构成了语境演绎中的造型前提与图形含义的内在联系。
板书设计
教学反思
课时序号：7-8
年
月
日 课
题
任务 4
制作首页效果图 教师姓名
XXX 课程类型 新授 授课 课时
2 教学目标
知识目标：熟练使用多边形套索工具绘制图形。
熟练使用色阶调整图片色彩 能力目标：能够制作多张页面的合成图 德育目标：培养学生探索问题、解决问题的能力 教学重点
难点
重点：多边形套索工具的使用方法 难点：页面的整体调整 教
法
项目教学法、演示法 学
法
探究学习法、任务驱动法 教具使用
多媒体课件、极域教师端 任务描述
教学过程
教师活动
学生活动
本任务制作首页效果图，分为背景层、主体层、文本层、修饰层。
老师利用极域下发课堂素材 完成点名，接收素材。
任务分析
教学过程
教师活动
学生活动
本任务是使用多边形套索工具绘制几何图形，利用蒙版工具调整图形的融合效果。
提问问题，引出本节课的新知识 回答老师问题，分析任务，了解本节课目标。
任务实施
教学过程
教师活动
学生活动
1. 制作背景层 Step1. 创建背景 （1）执行“文件”→“新建”命令，弹出“新建”对话框，选择“Web”选项卡下的“大网页”设置参数。
（2）使用“移动工具”在标尺处拖拽出水平方向的参考线，位置分别为：120、590、920、1230、1570、2150、2600、2770、3370、3900、4470，垂直方向的参考线位置为 605、960、1315。
（3）建图层，命名为“黑色背景”，填充黑色。
演示任务实施过程。点评学生制作过程中出现的问题。
根据老师的演示完成任务。改进作品。
（4）将素材文件夹中的“4-潜水背景.jpg”拖入到文档中，调整大小和位置;将“3-攀岩背景.jpg”拖入到文档中，将其与“4-潜水背景.jpg”图像保持一定的重叠。同理将“2-雪山.jpg”、“1-天空.jpg”拖入到文档中，按照如图 4-1-2 所示位置排列。
（5）在“图层”面板中，调整四个图层的不透明度，“1-天空”的为“28%”、“2-雪山”为“28%”、“3-攀岩背景”为“38%”、“4-潜水背景”为“38%”。为“1-天空”图层添加蒙版，将“画笔”工具的大小设置为“200”像素，硬度为“0%”，在天空底部涂抹，同理为另外三个图层添加蒙版，使图像间的过渡更自然。
（6）将素材文件夹中的“1-飞机.jpg”拖拽到文档中，调整大小，放置到天空图像的右侧，为其添加蒙版，将图层不透明度设置为“30%”。
（7）将素材文件夹中的“2-雪山 1.jpg”拖入到文档中，按下“Ctrl+T”键，在工具选项栏中将“宽”、 “高”都设置为“500%”，放置到“雪山”图像的左下角并为其添加图层蒙版，效果如图 4-1-6 所示，将图层不透明度设置为“23%”。
（8）在“图层”面板中“2-雪山”图层的“蒙版”上单击，黑色画笔在雪山的右下角区域涂抹。
（9）将素材文件夹中的“4-潜水 2.jpg”拖入到文档中，调整大小，将其放到“4-潜水背景”图像左侧并为其添加图层蒙版，将图层不透明度设置为“26%”。创建新组“背景”，将所有相关图层拖入其中。
Step2 创建菜单 （1）新建图层，命名为“菜单背景”，使用“矩形工具”在画布上绘制一个宽 “1920”、高为“120”的黑色矩形，放置到页面的最顶端。
（2）输入文本“极限培训 极限赛事 历程回顾 合作伙伴”，设置字体为“黑体”，大小为“18 像素”，颜色为白色，创建新组“菜单”，将相关图层拖入其中。
Step3. 创建切割图形
（1）新建图层，命名为“切割图形 1”，使用“多边形套索工具”绘制不规则图形并为其填充#F5AB15 至#D78800 的线性渐变色，同理新建图层“切割图形 2”、“切割图形 3”，图中数字为标尺刻度。
2. 制作 主体层 层 Step1. 制作跳伞人物
（1）将素材文件夹中的“1-跳伞人.jpg”拖入到文档中，抠出跳伞人物。
（2）将人物的红色衣服部分抠出复制到新图层“黄色衣服”，按下“Ctrl+U”键，在弹出的“色相/饱和度”对话框中设置参数。
Step2 2. . 制作滑雪人物
“弯度钢笔工具 ” 是Photoshop CC 2018 19.1.5 版本新增的功能。
（1）将素材文件夹中的“2-雪山.jpg”拖入到文档中，调整大小和位置，在“图层”面板中单击“添加图层样式”按钮，为图像添加“描边”和“投影”样式，描边颜色为“#2B2B2B”，投影颜色为黑色。执行“图像”→“调整”→“亮度/对比度”，在弹出的对话框中设置亮度为“-60”。
（2）将素材文件夹中的“2-滑雪.jpg”拖入到文档中，抠出滑雪人物。复制“2-滑雪”图层，将其重命名为“滑雪模糊”，执行“滤镜”→“风格化”→“风”命令，在弹出的对话框中，设置方法为“大风”，方向为“从左”，按下“Alt+Ctrl+F”键五次。
（3）执行“滤镜”→“模糊”→“动感模糊”命令，在弹出的对话框中，设置角度为“17”度，距离为“155”像素。
（4）在“图层”面板中，将“滑雪模糊”图层拖拽到“2-滑雪”图层的下方，按下“Shift”键不放，分别按“→”键和“↑”键各一次。
Step3 3. . 制作攀岩人物
（1）将素材文件夹中的“3-攀岩.jpg”拖入到文档中，抠出人物除“马尾”的部分，并复制到新图层，重命名为“攀岩人物”，按下“Ctrl+L”键调整色阶。
（2）隐藏“攀岩人物”图层，选择“3-攀岩”图层并将其显示。选择工具箱中的“多边形套索工具”在“马尾”周边单击生成选区，将其复制到新图层，重命名为“头发”，将其拖拽到“攀岩人物”图层上方。按下“Alt”键不放，单击“头发”图层前面的 标志，隐藏除“头发”图层之外的所有图层。
（3）执行“窗口”→“通道”命令，打开“通道”面板。拖拽“蓝”通道到“通道”面板底部的“创建新通道”按钮上，复制一个“蓝”通道。
（4）选择“蓝 拷贝”通道，按下“Ctrl+L”键调整色阶，设置参数。
（5）将前景色设置为白色，选择工具箱中的“画笔”工具，在头发底部的黑色区域涂抹，根据头发的走向按下“[”和“]”键调整画笔大小。按下 Ctrl+I 将头发反相。
（6）单击“蓝拷贝”通道缩览图，生成头发选区。单击“图层”面板的“头发”图层，按下“Ctrl+J”键将选区内容复制到新图层，重命名为“头发主体”。
（7）隐藏“头发主体”图层，选择“头发”图层并将其显示，在“通道”面板中将“红”通道拖拽到“创建新通道”按钮上，按下“Ctrl+L”键调整色阶。将前景色设置为黑色，选择工具箱中的“画笔”工具，将头发外围的区域全部涂黑。
（8）单击“红拷贝”通道缩览图，生成头发选区。单击“图层”面板的“头发”图层，按下“Ctrl+J”键将选区内容复制到新图层，重命名为“头发发丝”。
（9）删除“头发”图层，显示除“3-攀岩”所有图层，使用“弯度钢笔工具”可以轻松地绘制平滑曲线和直线段。执行该操作时，无需切换工具就能创建、切换、编辑、添加或删除平滑点或角点。
工具箱中的“加深工具”分别对“头发主体”和“头发发丝”进行处理。
Step4 4. . 制作潜水人物
（1）将素材文件夹中的“4-潜水.jpg”拖入到文档中，调整大小。创建新组“主体人物”，将所有相关图层拖入其中。
3 制作装饰层 Step1.
装饰跳伞模块
（1）复制“背景”组中的“1-天空”图层并将其拖拽到“切割图形 1”图层之上，在图层之间按下“Alt”键创建剪贴蒙版，设置图层的混合模式为“柔光”，不透明度为“100%”。
（2）将素材文件夹中的“1-降落伞.jpg”拖拽到文档中，抠出人物和降落伞，并将图层不透明度设置为“23%”。
Step2 2. .
装饰滑雪模块
（1）复制“背景”组中的“2-雪山”图层，将其拖拽到“切割图形 2”图层之上，创建剪贴蒙版，设置图层的混合模式为“柔光”，不透明度为“100%”。
（2）将素材文件夹中的“sub2-滑雪.jpg”拖入到文档中，调节大小，执行“编辑”→“变换”→“水平翻转”命令，选择工具箱中的“魔棒工具”，在工具选项栏中设置容差为“30”，取消勾选“连续”复选框，在雪花上单击生成选区，单击“图层”面板的“添加图层蒙版”按钮。
（3）设置前景色为黑色，选择工具箱中的“画笔工具”，在工具选项栏上设置画笔大小为“300”像素，硬度为“0%”，在雪花的多余位置涂抹，并将雪花旋转一定角度，设置图层混合模式为“强光”，不透明度为“80%”。
Step3 3. . 装饰攀岩模块
（1）在“图层”面板中，显示“3-攀岩”图层，将其拖拽到“2-雪山 拷贝”图层的上方，按照 Alt 键在两个图层之间单击，设置混合模式为“柔光”，不透明度为“100%”。
（2）将前景色设置为#878787，设置“画笔”工具的大小为“200”像素，硬度为“0%”，在画布上单击生成 “①号图形”，将“①号图形”所在图层复制，缩小 50%左右，填充比“①号图形”稍浅的灰色，效果如 “②号图形”所示，以此类推，最终生成“④号图形”。执行“编辑”→“变换”中的命令，按照设计需求对基础图形进行变形， “变形 1”、“变形 2”和“变形组合”所示。
Step4 4. .
装饰潜水模块
（1）在“图层”面板中，复制“背景”组中的“4-潜水背景”图层，将其拖拽到“切割图形 3”图层之上并创建剪贴蒙版，设置混合模式为“柔光”，不透明度为“100%”。
（2）将素材文件夹中的“4-气泡.png”拖入到文档中，调整大小和位置，在“图层”面板上设置图层混合模式为“划分”。
4 制作文本层 Step1. 制作 L LO OGO 文本
（1）将素材文件夹中的“logo.png”拖入到文档中，放置到“菜单背景”的中间。
（2）输入文本“花火体育”，设置字体为“汉仪力量黑简”，大小为“30”像素；输入文本“SPARK SPORTS”，设置字体为“Arial”，大小为“18 像素”。
（3）在“图层”面板中，将“SPARK SPORTS”图层的“填充”设置为“0%”，为其添加“描边”图层样式，设置参数。调整 LOGO 和文字位置。创建新组“LOGO”，将相关图层拖入其中。
Step2 2. . 制作 跳伞模块文本
（1）输入文本“Prachute”，设置字体为“Arial”，大小为“32 像素”，“P”的大小为“94 像素”；输入文本“跳伞”，设置字体为“汉仪力量黑简”，大小为“94 像素”；输入文本“SPORTS”字体为“汉真广标”，大小为“355 像素”，颜色为白色。
（2）新建图层“SPART”,使用“横排文字蒙版工具”输入文本“SPARK”，字体、大小与“SPORTS”一致，执行“编辑”→“描边”命令，在弹出的对话框中，设置参数。将“SPARK”、“SPORTS”所在图层拖拽到“1-跳伞人”图层之下。
（3）复制“SPARK”图层，将其拖拽到“黄衣服”图层之上，使用橡皮擦工具在文字的多余区域涂抹，根据需要使用“[”和“]”快捷键调整画笔大小。
（4）复制“SPORTS”图层，将其拖拽到“黄衣服”图层之上。
Step3 3. . 制作 滑雪模块文本
（1）复制“Prachute”文本层，修改文本内容为“Alpine skiing”；复制“跳伞”文本层，修改文本内容为“高山滑雪”，放置到滑雪人物左侧。
（2）输入文本“SPORTS”，设置字体为“汉真广标”，大小为“140 像素”，颜色为白色，字距为“-80”；输入文本“SPARK”，参数与“SPORTS”一致。
（3）选择“SPARK”文本层，将“填充”设置为“0”，添加“描边”图层样式，设置描边大小为“1 像素”，颜色为“#FAA80A”。
（4）新建图层，命名为“SPARK 点”，将前景色设置为# FAA80A，设置画笔大小为“6 像素”，硬度为“100%”，在SPARK 文字的转折部位单击添加点。
Step4. 制作攀岩、潜水模块文本
（1）复制“Prachute”文本层，修改文本内容为“Rock climbing”；复制“跳伞”文本层，修改文本内容为“攀岩”，放置到攀岩
人物的左侧。
（2）输入文本“SPARK”，设置字体为“汉真广标”，大小为“306 像素”，颜色为白色，字距为“-80”。创建新组“主体文案”，将相关图层拖入其中。
Step5. 制作版权模块文本
（1）新建图层“版权背景”，绘制一个宽为“1920”像素高为“140”像素黑色矩形。
（2）复制“LOGO”组，修改文本颜色为白色并适当缩小。
（2）复制“版权文本.txt”中的文字，设置标题文本的字体为“黑体”、大小为“18 像素”；正文的字体为“宋体”，大小为“12 像素”，颜色都为白色。
（3）将素材文件夹中的“地图.jpg”拖入到文档中，摆放到文字右侧。
（4）在最右侧输入文本“世界那么大梦想并不遥远”，字体为“汉仪力量黑简”，大小为“15 像素”，颜色为白色。创建新组“版权”，将相关图层拖入其中。
板书设计
教学反思
课时序号：9-10
年
月
日 课
题
任务 5 制作“极限培训”页面 教师姓名
XXX 课程类型 新授 授课 课时
2 教学目标
知识目标：熟练使用选择并遮住选项进行抠图。
熟练使用“文字工具”编辑文本。
能力目标：能够利用多种工具完成页面 德育目标：培养学生探索问题、解决问题的能力 教学重点
难点
重点：选择并遮住选项的用法 难点：使用多种工具编辑页面 教
法
项目教学法、演示法 学
法
探究学习法、任务驱动法 教具使用
多媒体课件、极域教师端 任务描述
教学过程
教师活动
学生活动
本任务的 BANNER 使用与主页同样的方法制作，通过背景层、文本层完成其他模块的制作。
老师利用极域下发课堂素材 完成点名，接收素材。
任务分析
教学过程
教师活动
学生活动
本任务是使用选择并遮住抠选降落伞图形，使用矩形工具制作培训模块 提问问题，引出本节课的新知识
回答老师问题，分析任务，了解本节课目标。
任务实施
教学过程
教师活动
学生活动
和 一、制作菜单和 Banner Step1 制作菜单背景 （1）执行“文件”→“新建”命令，弹出“新建”对话框，选择“Web”选项卡下的“大网页”设置名称为“极限培训”，宽为“1920 像素”，高为“2800 像素”。
（2）打开“SPARK SPORTS.PSD”，将“菜单”组、“LOGO”组、“版权”组和跳伞相关图层拖入“极限培训”页面中。
演示任务实施过程。点评学生制作过程中出现的问题。
根据老师的演示完成任务。改进作品。
（3）选择“菜单”组中的“菜单背景”图层，按下“Ctrl+T”键，在工具选项栏中将中心点设置为顶部，高度为“62.5%”。
（4）选择“背景”组，按下“↑”方向键多次，使其与“菜单背景”衔接。
（5）选择“切割图形 1”图层，选择工具箱中的“矩形选框工具”，创建与“菜单背景”同样高度的矩形选区，按下“Delete”键。
Step2 设置文字效果 （1）选择“LOGO”组中的“花火体育”文字的颜色修改为“# FAA80A”，将“LOGO”组适当缩小后上移。
（2）创建图层“菜单切割图形”，绘制一个不规则图形，填充颜色为“# FAA80A”，放置在“极限培训”文字下方，将“极限培训”修改为黑色。
Step3 制作 BANNER 效果 （1）删除“SPORTS 拷贝”图层，在标尺的“620”像素处拖出一条水平参考线，将“飞机”、“1-跳伞人”、“1-跳伞”、“SPARK”、“SPARK 拷贝”、“SPORTS”图像适当缩小，使其不要超过参考线。
（2）将“SPORTS”图层拖拽到“图形切割 1”图层上方，设置图层混合模式为“柔光”，不透明度为“50%”。
（3）输入文本“世界很大 梦想并不遥远”，设置字体为“汉真光标”，大小为“100 像素”，颜色为白色。
二、制作页面内容 Step1 制作背景 （1）在标尺的“2620”像素处拖出一条水平参考线，选择工具箱中的“矩形工具”，在“620”和“2620”参考线之间绘制一个白色矩形，命名为“白色背景”。
（2）将素材文件夹中的“sub1-10.jpg”拖入到文档中，调整大小，放到页面底部并为其添加蒙版。
（3）将素材文件夹中的“sub1-9.jpg”拖入到文档中，调整大小，放到页面底部的左侧，使用“多边形套索工具”，沿着降落伞和人物的边缘单击生成选区，单击工具选项栏上的“选择并遮住”按钮。
（4）在对话框右侧“属性”面板的“视图”下拉列表中，选择“叠加”模式，调整不透明度为“100%”。选择左侧工具栏的第一个工具——“快速选择工具”，在工具选项栏上选择“从选区减去”选项，设置大小为“25”，按下“Ctrl++”键放大视图，按下“空格”键调整视图区域，使用“快速选择工具”在“降落伞”的多余区域慢慢涂抹。选择工具栏的第二个工具——“调整边缘画笔工具”，在工具选项栏上选择“添加到选区”选项，设置大小为“40”，在“降落伞伞绳”区域涂抹，单击“确定”按钮，返回主页面生成选区，按下“Ctrl+J”复制选区内容到新图层，重命名为“降落伞人物”，显示所有图层，删除“sub1-9”图层。
2.点缀页面 设计点拨 观察完成后的效果后，发现页面还存在以下问题：
①文字全为纵
（5）复制“降落伞人物”图层，生成“降落伞人物 拷贝”图层。选择“降落伞人物”图层，将混合模式设置为“叠加”。选择“降落伞人物 拷贝”图层，设置“橡皮擦工具”的大小为“20”、“硬度”为“0%”，在人物有白边的区域涂抹。创建新组“极限培训背景”，将相关图层拖入其中。
Step2 添加标题文本 （1）输入文本“极限培训”，设置字体为“微软雅黑”，大小为“18 像素”，颜色为“#A3A3A3”；“SPORT TRAINING”，字体为“汉仪力量黑简”，大小为“42 像素”，颜色为“ #EEA210 ”； “ We
concentrate on
extreme sports ,professional in extreme sports 我们专注于极限运动，更专业于极限运动”，字体为“微软雅黑”，大小为“16 像素”，颜色为“#878787”； “高空跳伞翼装飞行高山滑雪深海潜水沙漠徒步滑翔伞攀岩冲浪跑酷蹦极”,字体为“微软雅黑”，大小为“20 像素”，颜色为黑色。
（2）在“高山滑雪”文字下拖拉出一条颜色为#EEA210，粗细为“8 像素”的直线。创建新组“极限培训文本”，将相关图层拖入其中。
Step3 制作页面主体内容 （1）在画布上绘制一个填充色为黑色，描边色为#EEA210，描边宽度为“1 像素”，宽“380”、高为“510”的矩形，图层名称为“内容 1 背景”。
（2）将素材文件夹中的“sub1-1.jpg”拖入到文档中，制作文字和图形。
（3）复制“在线培训”组 7 次，修改矩形的颜色为白色，替换图片为素材文件夹中的“sub1-2.jpg”……“sub1-8.jpg”，替换文字为“极限培训.txt”中的文字。
（4）删除“版权”组中多余文字。
板书设计
教学反思
课时序号：11-12
年
月
日 课
题
任务 6
制作“极限赛事”页面 教师姓名
XXX 课程类型 新授 授课 课时
2 教学目标
知识目标：掌握椭圆选框工具、蒙版工具用法 能力目标：能够利用所学工具技能进行综合的绘图设计工作 德育目标：培养学生探索问题、解决问题的能力 教学重点
难点
重点：“椭圆选框”工具的用法。
难点：页面整体制作。
教
法
项目教学法、演示法 学
法
探究学习法、任务驱动法 教具使用
多媒体课件、极域教师端 任务描述
教学过程
教师活动
学生活动
本任务综合练习子页面的制作 老师利用极域下发课堂素材 完成点名，接收素材。
任务分析
教学过程
教师活动
学生活动
本任务主要使用椭圆工具绘制图标，使用圆角矩形制作绘制文字背景。
提问问题，引出本节课的新知识
回答老师问题，分析任务，了解本节课目标。
任务实施
教学过程
教师活动
学生活动
1. 制作菜单、r Banner 和标题图文
Step1.制作菜单和 Banner 效果 （1）复制“极限培训.psd”，重命名为“极限赛事.psd”，执行“图像”→“画布大小”，设置合适的参数，删除多余图层，缩小“白色背景”矩形的高度，将“版权”组适当上移。
（2）将菜单上的黄色不规则图形移动到“极限赛事”下方，修改“极限赛事”文字为黑色。
演示任务实施过程。点评学生制作过程中出现的问题。
根据老师的演示完成任务。改进作品。
（3）将素材文件夹中的“2-雪山.jpg”、“sub2-8.jpg”拖入到文档中，用前面任务中学过的方法制作 BANNER。
Step2.制作标题文本和滑动图效果 (1) 修改标题文本为“极限赛事”，修改英文为“SPORT COMPETITION”。
（2）使用“椭圆工具”、“横排文字工具”以及素材文件夹中的“sub2-1.jpg”、“sub2-2.jpg”、““sub2-3.jpg”制作滑动图。
2. 制作页面内容
Step1.制作背景 （1）复制“2-雪山”图层，拖拽到“图层”面板上“白色背景”图层上方，在图层间创建剪贴蒙版。按下“Ctrl+T”键，在工具选项栏上将“宽”、“高”均设置为“300%”。执行“滤镜”→“模糊”→“高斯模糊”命令，在弹出的对话框中设置模糊半径为“10 像素”。
（2）绘制一个与“白色背景”同样大小的黑色矩形，命名为“黑色背景”，不透明度设置为“60%”。
Step2.制作页面主体内容 （1）绘制一个宽为“1355”、高为“240”的白色矩形，图层命名为“内容矩形”。
（2）将素材文件夹中的“sub2-4.jpg”拖入到文档中，调整大小和位置，在“图层”面板中放置到“内容矩形”图层上方并创建剪贴蒙版。
（3）绘制一个宽、高均为“105”填充色为“#EEA210”，的矩形，图层命名为“黄色矩形”，输入相关文本。
任务拓展
教学过程
教师活动
学生活动
请完成极限运动网站的其他二级页面
布置任务，说明要求 接收任务，小组为单位进行讨论，并完成拓展 板书设计
教学反思