网页设计与制作 教案（第5、6周）3.4任务4掌握毛发抠图技巧-4.6掌握图层蒙版

课程名称：网页设计与制作主备人：审核人：第6页网页设计与制作教案（第5周）专业课程学习任务项目3：掌握网页中处理图像时的抠图技巧任务4掌握毛发抠图技巧任务5掌握半透明图像抠图技巧综合实战—设计与制作运动网页课时6教学对象授课时间设计者一、学习任务分析1．掌握网页中对毛发图像和半透明图像的抠图方法。2．教材中的知识与案例均是从实际工作中精选而来，具有很强的应用性和示范作用。同时教材结构清晰、内容翔实、语言浅显易懂，并配以精美的素材图片。二、学情分析对于刚刚接触网页设计的学生，思想活跃，有探索新知识的强烈心理，专业课的学习，除需要一定专业基础外，还需要学生具有很强的技能操作能力，所以在本次课的讲授中，采用演示、引导、任务练习的方法，让学生了解所学的内容。三、学习目标知识目标：掌握为人物毛发进行抠图的方法。掌握为半透明图像进行抠图的方法。能力目标：学会为毛发区域进行抠图。学会为半透明玻璃杯进行抠图。素质目标：不忘初心，坚持使命。在为图像进行抠图学习中，充分了解动手操作的重要性。四、教学策略重点难点：重点：快速对毛发图像进行抠图；难点：掌握半透明图像的抠图方法。教学方法：演示与案例教学法。教学模式：分组讨论，集中点评，共同提高。五、教学环境及资源准备教学环境：多媒体实训室课前准备：1.对应本节课制作了相应的备课。2.认真设计教案、课件和教学过程。六、教学过程教学环节教学内容教师活动学生活动设计意图情景描述上课，同学们好！（相互问好！）7S管理组织教学。课前3分钟：他虽然是基础较差的，但他是课堂上最努力的你有一个和伟人相近的名字，只要尽心尽力，你在我们眼里和伟人一样伟大。复习提问：一、对于上节课中有哪些抠图方法？7S管理组织教学、统计出勤；课前3分钟教育；进行复习提问，让学生进入思考状态。以小组为团体回答，并加分。使学生注意力集中积极思考，积极回答问题。7S管理形成习惯，巩固知识，增强团队意识。引导问题网页设计中的图像处理环节，抠图是一项不可避免的操作，无论是为单一的图像替换背景，还是为一系列的图像统一背景，这些都需要对图像本身进行抠图来完成。如果是制作网页中图像的合成广告就更少不了抠图了。为此，小艾想使用比较专业的软件对处理中的抠图进行处理，而同事凯程告诉她，Photoshop就是一个在抠图方面具有非常专业的抠图功能，在抠图方面可以将其分为规则形状抠图、简单背景抠图、复杂图形抠图、毛发抠图和半透明图像抠图等操作。接下来，大家可以跟随小艾一起走进Photoshop的抠图环节。大家可以在本节中了解各种抠图方法将拍摄的图像进行背景替换，使图像本身更加凸显，在网页视觉中引起买家的注意力，从而间接的增加销量。引出本节重点内容，注意培养学生的观察力和注意力。学生跟随老师的讲解和启发进入内容，积极思考。通过导入问题,让学生分小组思考。相关知识介绍任务4掌握毛发抠图技巧拍摄有模特或动物参与的图片时，抠图时会遇到人物的发丝或动物的毛发区域，如果使用多边形套索工具或钢笔工具进行抠图时，会发现头发区域会出现背景抠不干净的效果，如图所示。任务5掌握半透明图像抠图技巧在Photoshop中，对半透明对象进行抠图，可以在“通道”面板中完成。使用“通道”进行抠图时，通常需要应用一些工具结合“通道”面板进行操作。在操作完毕之后，必须要把编辑的通道转换为选区，再通过移动工具将选区内的图片拖动到新背景中完成抠图，对通道进行编辑时主要使用画笔工具，通道中黑色部分为保护区域，白色区域为可编辑的位置，灰色区域将会创建半透明效果，如图所示。课件设疑，引起注意，牢牢抓住和吸引学生探究新知识的心理。讲练结合，突出实操能力培养。跟随老师进入思考分析状态。认真完成操作任务。通过课件引出问题，演示法和指导法，使学生掌握知识点。提高学生操作能力。分组讨论组织学生分小组讨论引导问题，保证人人有任务，人人有活干。评分项目评分指标标准分评分仪态举止是否得体0.5准备准备是否充分0.5语言声音是否洪亮、表达是否准确0.5小组配合组分工是否明确，配合是否默契0.5小计2分配小组长任务。通过引导问题，学生进行分析、思考。各个小组分配任务进行讨论问题。达到培养学生分工合作和查找资料能力。小组展示各小组派代表上黑板前展示自己小组引导问，由全班同学找出问题并由小组代表进行解答。展示并解答问题。学生展示讨论成果，回答问题。锻炼学生表达能力和仪表。锻炼学生表达能力和仪表。全班查找问题。课堂总结找最优秀小组讲解设计中的注意事项，并由教师点评总结设计注意事项，并分组点评各组优缺点。总结点评设计情况，并归纳知识点。学生总结所学知识，积极回答问题。学生掌握知识。布置作业一、练习对半透明婚纱进行抠图布置作业，并讲解具体要求。记录并在课下思考问题，主动学习。培养学生学习能力。便于下次课进行。七、教学评价设计通过小组自我评价、小组评价、教师评价完成对小组进行评价，教师和组长对成员进行评价，回答问题加1分；演示操作加2分，第一名小组的成员每人加1分。记入平面成绩，期末进行成绩综合评定。评价项目评价指标标准分自我评价小组评价教师评价学习态度学习主动，规范操作，纪律好2任务完成知识点掌握，实操完成效果好2小组讨论表达清晰，任务方案科学合理2创新精神运用多种方法创意设计17S管理现场整理，保持工作环境整洁1团结协作小组成员是否团结协作2小计总评小组学习活动综合评价表八、教学反思网页设计与制作教案（第6周）专业课程学习任务项目4：了解文字与图层任务1了解创建文字的工具任务2掌握文字的编辑任务3掌握段落文字任务4认识图层任务5掌握智能对象任务6掌握图层蒙版课时6教学对象授课时间设计者一、学习任务分析1．掌握文字编辑、图层相关编辑的使用。2．教材中的知识与案例均是从实际工作中精选而来，具有很强的应用性和示范作用。同时教材结构清晰、内容翔实、语言浅显易懂，并配以精美的素材图片。二、学情分析对于刚刚接触网页设计的学生，思想活跃，有探索新知识的强烈心理，专业课的学习，除需要一定专业基础外，还需要学生具有很强的技能操作能力，所以在本次课的讲授中，采用演示、引导、任务练习的方法，让学生了解所学的内容。三、学习目标知识目标：掌握在Photoshop中文字的创建与编辑的方法。掌握在Photoshop中认识图层与编辑图层的方法。掌握智能对象与图层样式的编辑方法。能力目标：学会文字的键入。学会编辑文本。学会图层的运用。学会图层蒙版的编辑。素质目标：充分运用文字，展现正能量对人生观的引导。在学习实践中培养边学边练的习惯，提升动手操作能力。四、教学策略重点难点：重点：文字的使用与编辑应用；难点：掌握图层的编辑与的使用。教学方法：演示案例教学法。教学模式：分组讨论，集中点评，共同提高。五、教学环境及资源准备教学环境：多媒体实训室课前准备：1.对应本节课制作了相应的备课。2.认真设计教案、课件和教学过程。六、教学过程教学环节教学内容教师活动学生活动设计意图情景描述上课，同学们好！（相互问好！）7S管理组织教学。课前3分钟：能给四十几位未来的圣贤上课，是老师莫大的快乐。见证同学们成长的足迹，是老师最欣慰的事情之一。复习提问：一、对于半透明图像抠图还有哪些不懂得？7S管理组织教学、统计出勤；课前3分钟教育；进行复习提问，让学生进入思考状态。以小组为团体回答，并加分。使学生注意力集中积极思考，积极回答问题。7S管理形成习惯，巩固知识，增强团队意识。引导问题网页设计中离不开文字和图像，在Photoshop中只要应用这两项内容就会用到图层，通过图层可以对文本和图像有一个更好的管理和编辑，这两项内容也是要认真学习的。为此，小艾想对图层和文字有个更好的学习方向，而同事凯程则告诉她，Photoshop这个软件就可以对她的要求做出全面的解决，只要认真的对软件中的文字和图层进行了解，就能对她的工作和学习起到非常大帮助，Photoshop不但能键入文字，还能对文字进行非常专业编辑和排版，结合图层的运用能够更好的在网页中发挥作用。接下来，大家可以跟随小艾一起走进Photoshop的文字与图层环节。大家可以在本节中了解各种文字与图层的使用和编辑方法，做好网页设计的基础工作部分，处理好的图像加上文字的点缀和说明，能让网页更加具有视觉冲击力，更能发挥网页的功能。引出本节重点内容，注意培养学生的观察力和注意力。学生跟随老师的讲解和启发进入内容，积极思考。通过导入问题,让学生分小组思考。相关知识介绍任务1了解创建文字的工具文字的主要功能是在视觉传达中向大众传达作者的意图和各种信息，要达到这一目的必须考虑文字的整体诉求效果，给人以清晰的视觉印象。因此，设计中的文字应避免繁杂零乱，使人易认，易懂，切忌为了设计而设计，忘记了文字设计的根本目的是为了更好，更有效的传达作者的意图，表达设计的主题和构想意念，在Photoshop中能够直接创建文字工具只有横排文字工具和直排文字工具。在文档中输入文字后，系统会自动在“图层”面板中创建一个文字图层。活动1了解横排文字工具在Photoshop中使用横排文字工具可以在水平方向上键入横排文字，该工具也是文字工具组中最基本的文字输入工具同时也是使用最频繁的一个工具。横排文字工具的使用方法非常简单，只要在“工具箱”中选择横排文字工具，之后再拖动光标到到画面中找到要输入文字的地方，单击鼠标会出现图标，此时输入所需要的文字即可，输入方法如图所示。活动2了解直排文字的键入在Photoshop中使用直排文字工具可以在垂直方向上键入竖排文字，该工具的使用方法与横排文字工具相同，就是属性栏也是一模一样的，具体输入方法如图4-11所示。任务2掌握文字的编辑在Photoshop中编辑文字指的是对已经创建的文字，通过“属性栏”、“字符”面板、“段落”面板或“文字”菜单进行重新的设置，例如设置文字行距、文字缩放、基线偏移以及对文字的变形等等，活动1掌握对已建文本的基础编辑属性栏中针对文字的设置，已经讲过了，本次任务主要讲解在“字符”面板中关于文字的一些基本编辑。活动2掌握文字变形在Photoshop中通过“文字变形”命令可以对输入的文字进行更加艺术化的变形，使文字更加具有观赏感，变形后的文字仍然具有文字所具有的共性。“文字变形”命令可以通过在键入文字后直接单击“文字变形”按钮来执行，或者执行菜单栏中的“图层/文字/文字变形”命令来打开“变形文字”对话框，如图所示。任务3掌握段落文字在Photoshop中使用文字工具不但可以创建点文字，还可以创建大段的段落文本，在创建段落文字时，文字基于定界框的尺寸自动换行。任务4认识图层对图层进行操作可以说是Photoshop中使用最为频繁的一项工作。通过建立图层，然后在各个图层中分别编辑图像中的各个元素，可以产生既富有层次，又彼此关联的整体图像效果。所以在编辑图像的同时图层是必不可缺的。活动1认识图层的原理图层与图层之间并不等于完全的白纸与白纸的重合，图层的工作原理类似于在印刷上使用的一张张重叠在一起的醋酸纤纸，透过图层中透明或半透明区域，可以看到下一图层相应区域的内容，如图所示。活动2认识图层面板每一个图层都是由许多像素组成的，而图层又通过上下叠加的方式来组成整个图像。打个比喻，每一个图层就好似是一个透明的“玻璃”，而图层内容就画在这些“玻璃”上，如果“玻璃”什么都没有，这就是个完全透明的空图层，当各“玻璃”都有图像时，自上而下俯视所有图层，从而形成图像显示效果，对图层的编辑可以通过菜单或面板来完成。“图层”被存放在“图层”面板中，其中包含当前图层、文字图层、背景图层、智能对象图层等。执行菜单栏中的“窗口/图层”命令，即可打开“图层”面板，“图层”面板中所包含的内容如图所示。任务5掌握智能对象将图像转换成智能对象后，将图像缩小，再复原到原来大小后，图像的像素不会丢失，智能对象还支持多层嵌套功能和应用滤镜并将应用的滤镜显示在智能对象图层的下方。任务6掌握图层蒙版图层蒙版可以理解为在当前图层上面覆盖一层玻璃片，这种玻璃片有：透明和黑色不透明两种，前者显示全部，后者隐藏部分。然后用各种绘图工具在蒙版上（既玻璃片上）涂色（只能涂黑、白、灰色），涂黑色的地方蒙版变为不透明，看不见当前图层的图像，涂白色则使涂色部分变为透明可看到当前图层上的图像，涂灰色使蒙版变为半透明，透明的程度由涂色的深浅决定。图层蒙版可以用来在图层与图层之间创建无缝的合成图像，并且对图层中的图像不造成破坏。课件设疑，引起注意，牢牢抓住和吸引学生探究新知识的心理。讲练结合，突出实操能力培养。跟随老师进入思考分析状态。认真完成操作任务。通过课件引出问题，演示法和指导法，使学生掌握知识点。提高学生操作能力。分组讨论组织学生分小组讨论引导问题，保证人人有任务，人人有活干。评分项目评分指标标准分评分仪态举止是否得体0.5准备准备是否充分0.5语言声音是否洪亮、表达是否准确0.5小组配合组分工是否明确，配合是否默契0.5小计2分配小组长任务。通过引导问题，学生进行分析、思考。各个小组分配任务进行讨论问题。达到培养学生分工合作和查找资料能力。小组展示各小组派代表上黑板前展示自己小组引导问，由全班同学找出问题并由小组代表进行解答。展示并解答问题。学生展示讨论成果，回答问题。锻炼学生表达能力和仪表。锻炼学生表达能力和仪表。全班查找问题。课堂总结找最优秀小组讲解设计中的注意事项，并由教师点评总结设计注意事项，并分组点评各组优缺点。总结点评设计情况，并归纳知识点。学生总结所学知识，积极回答问题。学生掌握知识。布置作业一、通过文字变形制作立体变形字布