7.1 游戏界面设计（教案）-高一《图形图像处理：Photoshop CC》同步精品课堂（高教版2018）

课 题 模块七 游戏界面设计 课 型 理实一体 课 时 1 授课班级 授课时间 授课教师 教材分析 《图形图像处理——Photoshop CC》是为了适应职业教育教学改革和创新需要编写的。本书重点的介绍了使用Photoshop CC进行程序设计时应具备的基础知识、专业知识和使用技巧，详略得当、难度适中有利于初学者快速掌握必备的知识。 本节课内容为教材中“模块七 的第一部分 游戏界面设计 学情分析 知识储备：了解游戏界面设计基础知识以及相关案例的实施； 能力水平：熟悉游戏界面设计基础知识和案例实施中的各项操作步骤，以及其中的相关知识。 学习目标 知识目标：了解游戏界面设计基础知识以及相关案例的实施； 能力目标：使用游戏界面设计基础知识和案例实施中的各项操作步骤，以及其中的相关知识。 素质目标：熟悉游戏界面设计基础知识和案例实施中的各项操作步骤，以及其中的相关知识。 学习重难点 教学重点：了解游戏界面设计基础知识以及相关案例的实施； 教学难点：熟悉游戏界面设计基础知识和案例实施中的各项操作步骤，以及其中的相关知识。 教学方法 讲授法、演示法 课前准备 教师准备：讨论主题、学生任务书 学生准备：在线讨论、完成任务书 教学媒体 多媒体教室 教学过程 教学环节 教师活动设计 学生活动设计 设计意图 活动一： 创设情境 生成问题 1.操作引出主题 提前对本节课的主要教学任务进行提前告知学生。 提问：对本节课的游戏界面设计基础知识的预习情况？ 2.分发学习任务书 引导学生分析任务书，明确本节课的学习内容。 3. 展示学习目标 1.提前对本节课要将的知识点传达给学生，提前传达学生本节课的学习目标，以此设置问题进行互动。 2.接收并查看本节课堂任务书 3.查看并记住本节任务的学习目标 1.提前将所学的知识传达给学生，对知识点进行深度掌握。 2.下发和展示任务，让学生明确课堂任务，学习课堂知识。 活动二： 调动思维 探究新知 用户界面（UI）是人与机器之间传递和交换信息的媒介。随着信息技术与网络技术的迅速发展，人机界面设计与开发已成为国际计算机界和设计界最为活跃的研究方向之一 无论是多媒体设计、课件制作、电子相册、游戏设计、程序开发，还是手机APP开发等，都离不开界面设计。漂亮、人性化的界面设计能够吸引客户、增强产品的易用性、观赏性和审美价值，提升商品的购买力。 本项目通过完成两种常用界面设计过程，让读者在实践中学会界面设计的方法与技巧。 1.逐步对用户界面所涉及到的知识点进行学习和重点分析。 通过讲授和罗列框架等形式对知识进行学习，并完成课后练习。 1. 细化课程知识点设计，让每一位学生都能被关注到。 2. 知识点在学生心理更清晰明了。 制作如图7-1所示的网络游戏的登录界面的效果。 案例解析 本案例中，需要完成以下操作： 利用图层的“颜色"混合模式制作界面背景 利用“橡皮擦工具"，借助“图层"面板组合素材。 利用选取、形状、文字等工具，借助于图层样式的设置完成“登录"界面的设计。 2.案例解析 （1）讲解每个知识点，并结合实际操作形式和操作方法的形式进行讲授。 （2） 听课、理解；针对不明白知识点提问、讨论，询问学生是否对知识理解透彻。 （3） 对例题进行解答。 1.按学生的学习规律，循序渐进引入本课重点知识学习 2.通过课件、实操截图等多媒体方式讲解，易于学生理解和实战。 活动二： 调动思维 探究新知 案例实施 （1）选择“文件一打开"命令，打开素材图片“背景.jpg"。 （2）在“图层"面板中单击“创建新图层"按钮，创建“图层1 "，将其重命名为“色板"。将前景色设置为#82c6f5，按快捷键Alt+Del为该图层填充前景色。在“图层"面板中设置“色板"图层的混合模式为“颜色"，图层设置及图像效果如图7一2所示。 （3）打开素材图片“人物l.jpg" - “人物4.jpg"，利用“移动工具"分别将其移动到当前文件中，依次生成“图层1 "、“图层4 "。按快捷键ctrl+T，分别调整其大小，调整后的“图层"面板及图像效果如图7一3所示。 （4）选择“橡皮擦工具" ，设置大小为120像素，硬度为0％，不透明度为100％，分别在 “图层1 "、“图层4 "中将图像中边缘的部分擦除掉，擦除后的效果如图7一4所示。 （5）将“橡皮擦工具"的不透明度调整为50％，继续擦除多余部分的图像，使人物与背景自然融合，效果如图7一5所示 （6）在“图层4"的上方创建新图层，命名为“矩形1 "选择“矩形选框工具"，绘制一个矩形选区。将前景色设置为#7{8284，按快捷键Alt+Del在该图层中为矩形填充前景色。在“图层" 面板中，设