初中信息技术七年级·图层蒙版与选区运算：数字扇面文创设计教案

初中信息技术七年级·图层蒙版与选区运算：数字扇面文创设计教案

一、教学背景与设计坐标系：基于核心素养的跨学科项目式学习顶层建构

（一）【核心理念定位】从技术工具论转向计算思维养成的学科育人范式转型

本设计立足于《义务教育信息科技课程标准（2022年版）》所界定的核心素养内涵，针对初中七年级学生的认知特征与数字化“原住民”的技术感知特点，将传统人教版教材中“制作扇面图”这一技术操练型课题，重构为以“非遗文化数字活化”为项目载体、以图层与选区运算为核心计算概念、以Photoshop为认知工具的跨学科项目式学习单元。设计深度融入STEM教育理念与5E探究教学模式，将信息技术学科的工具理性升华为文化理解与创新表达的价值理性，实现从“教软件操作”到“育计算思维”的范式跃迁。

（二）【教学内容重组】基于大概念的知识结构化处理

本课在教材体系中处于第二单元“图像处理的基本方法”的核心位置，前承“图层的基本操作与认识”，后启“图层样式与滤镜特效”。针对原教材中六步操作步骤（新建文件—制作轮廓—画褶皱线—褶皱效果—粘贴图像—保存）进行知识重构，提炼出三大核心计算概念：选区运算（布尔逻辑的图形化表达）、图层堆叠与透明通道（信息分层管理的可视化模型）、像素级编辑与反选逻辑（集合论在数字图像中的映射）。将技术知识点统摄于“数字图像的信息分层表达”这一学科大概念之下，形成“文化理解—技术解构—创意表达—评价反思”的完整学习闭环。

（三）【学情三维透析】精准定位最近发展区

1.知识储备层【基础】：学生已完成第四课“图层的应用（一）”学习，掌握新建图层、移动图层、粘贴图像等基础操作，对图层的“堆叠”属性有感性认知，但对图层作为独立编辑单元的逻辑属性、选区与图层的关系尚未形成系统理解。部分学生在小学阶段接触过美图秀秀等一键式修图软件，但对Photoshop这类专业像素级编辑软件的精确控制逻辑存在认知障碍。

2.认知冲突点【难点】【非常重要】：学生普遍存在“所见即所得”的日常软件使用惯性，难以理解“选区——粘贴—图层生成”这一非线性编辑流程。尤其在“制作扇面轮廓”环节，椭圆选框工具与Alt键减选操作的组合使用，涉及布尔运算中的差集概念，这是从具象操作向抽象逻辑思维跃迁的关键认知节点。

3.文化感知力【热点】：七年级学生正处于文化认同感建构的关键期，对国风、汉服、非遗等传统文化元素具有较高的视觉敏感度。本课以“扇文化”为情感纽带，将商代雉尾扇、唐代纨扇、宋代折扇的形制演变作为情境线索，使技术学习获得文化价值感的支撑，有效激发内生学习动机。

（四）【跨学科融合矩阵】打破学科壁垒的意义建构

本设计系统整合三门学科的思维方式与知识工具：

1.美术学科：引入“留白与疏密”“渐变与节奏”“图底关系”等构成原理，指导扇面褶皱的明度渐变设计；赏析《步辇图》中障扇的礼仪象征，理解传统造物中的功能与审美的统一。

2.数学学科：将椭圆工具绘制同心圆环的操作转化为“同心圆半径差”的几何模型；扇形圆心角计算（90°、60°、45°的整数分割）融入褶皱线等分设计；选区加减操作与集合运算（并集、交集、差集）建立显性化映射。

3.工程学科：引入“原型迭代”设计思维，将扇面图制作解构为“功能分析—结构分解—参数设定—测试优化”的微型工程流程，培养系统化解决问题的思维习惯。

二、教学目标三维矩阵与达成证据设计

（一）【素养导向目标体系】

1.信息意识与计算思维【核心】

（1）能够解释选区运算（加选、减选、交叉选）与数学集合运算（并、差、交）的同构关系，形成从布尔逻辑视角理解数字图像编辑的计算思维。

（2）能够通过分析扇面图层的构成关系（背景层、轮廓层、褶皱层、图像层），建立复杂视觉信息的分层解构与模块化处理意识。

2.数字化学习与创新【关键】

（1）能够熟练运用椭圆选框、多边形套索、魔棒等选择工具，组合使用Shift加选、Alt减选等快捷键，独立完成扇面环状选区与开角切形的精确创建。

（2）能够运用图层、图层透明度、前景色到背景色渐变填充等技法，实现扇面褶皱的立体质感表现，并能将外部图像通过跨文档粘贴嵌入扇面选区。

（3）能够基于给定主题（如“节气”“诗词”“校园”）完成扇面文创设计，并在构图、配色、图像融合方面体现初步的审美判断。

3.信息社会责任与文化理解【深化】

（1）通过扇面图制作，理解中国传统造物中“方圆相济”“虚实相生”的美学哲学，形成对中华优秀传统文化的数字化传承意识。

（2）在使用网络图片资源时，能够主动标注图片来源，遵守CC0协议或获取授权，建立尊重知识产权的信息伦理底线。

（二）【教学重难点的靶向定位与破解策略】

1.【重中之重】【高频考点】选区布尔运算的语义理解与精准控制

破解策略：设计“选区运算三重进阶”微训练——第一阶：图形化演示（将Photoshop界面截屏后，用几何示意图标注并、差、交的逻辑关系）；第二阶：口诀化记忆（“加选按Shift，减选按Alt，交叉Shift+Alt，框变环就靠它”）；第三阶：变式训练（给出中国结、窗棂等环状图形，要求学生逆向拆解绘制步骤）。

2.【难点】【易错点】图层与选区的关系认知混淆

破解策略：引入“硫酸纸隐喻”认知工具——将每个图层类比为一张独立绘图的硫酸纸，选区则是硫酸纸上被虚线框定的活动区域；在不同图层上切换时，选区本身不消失，但可编辑的内容不同。通过“切换图层观察选区变化”的对比实验，帮助学生建构“选区依附于文档而非图层”的正确心智模型。

3.【关键能力点】多图层协作下的视觉归因与逻辑梳理

破解策略：实施“图层侦探”小组活动，教师提供完成但图层混乱的psd源文件，学生通过开关图层小眼睛、调整图层顺序、查看图层缩览图，反推制作步骤并填写“图层档案卡”（图层名、作用、关键操作、混合模式/透明度）。

三、教学环境与资源准备【精准化配置】

1.硬件环境：多媒体网络机房（学生机50台），教师机广播系统，高拍仪（用于学生手绘草图数字化），千兆局域网。

2.软件配置：Windows10操作系统，AdobePhotoshopCC2022中文版（定制工作区：调出“图层”“通道”“路径”调板，隐藏不常用面板），极域电子教室V6.0。

3.数字化资源包：

（1）素材库：按“花鸟折枝”“青绿山水”“传统纹样”“人文诗词”四类分类的CC0高清图片；瑕疵素材（含白边、杂色背景的扇面贴图）用于修边训练。

（2）微课矩阵：将六个核心操作步骤拆解为12个1-2分钟的微课视频，以“技术胶囊”形式嵌入教学平台，支持个性化回看。

（3）评价量规：PDF格式的《扇面文创设计量规》（含技术规范、艺术表现、文化内涵、创新思维四个维度共12条指标）。

4.实体教具：明式折扇一把、团扇一把，宣纸扇面半成品；各历史时期扇子图像印本（商周至明清演变图鉴）。

四、教学实施过程深度展开【核心篇幅，约6000字】

本设计采用重构的5E探究教学模式，将原教材六个步骤整合为“文化解构—技术建模—创意迭代—审美判断—意义协商”五个进阶模块，总课时为2课时连排（90分钟），以下为第一、二课时融合的完整实施叙事。

（一）【Engagement】参与·文化场域唤醒——从“物”到“技”的意义追问（8分钟）

1.触觉导入：实物观察与认知冲突制造

开课伊始，教师手持一把展开的九寸十六档宣纸折扇，缓步穿行于课桌之间，让扇风轻拂学生面颊。将扇面迎光侧举，扇骨投射的阴影与半透明的蝉衣宣形成丰富的光影层次。教师设问：“扇面明明是平面的，为什么会产生这种光影起伏的错觉？”学生观察后自然聚焦于“折痕”与“凹凸”这一视觉特征。

2.文化溯源：从图像学视角解读扇面形制

教师通过高拍仪展示三组高清图像：战国错金银青铜器上的执扇人物形象、唐代阎立本《步辇图》中障扇的礼仪阵列、南宋《秋窗读易图》中的水墨纨扇。引导学生发现：扇子不仅是纳凉工具，更是身份标识、审美载体。继而聚焦技术问题：“古人通过劈竹、裱糊、压痕实现扇面的物理褶皱；今天，我们如何在数字世界里‘无中生有’，让平面的像素产生立体的视觉褶皱？”这一问题将文化理解与技术挑战无缝对接，完成从“物”到“技”的意义跃迁。

3.【基础】旧知激活：图层的“透明纸”隐喻复现

教师广播调出Photoshop界面，快速演示将一张荷花图片拖入新建文档，自动生成“图层1”。提问：“图层到底像什么？”引导学生回忆第四课结论——“像一张张叠放的透明硫酸纸，上层覆盖下层，透明区域露出下层”。此为后续理解“在不同图层上绘制褶皱、调整透明度”的认知锚点。

（二）【Exploration】探究·技术逻辑建模——选区运算与图层堆叠的深度建构（30分钟）

本环节采用“逆向拆解—正向建模—变式迁移”三阶探究路径。

1.逆向拆解：像侦探一样还原技术过程【难点攻坚】

教师通过极域电子教室下发“证据包”——一个已完成且图层未经合并的扇面图psd源文件，但所有图层名称已被改为乱码（如“图层1副本3”“椭圆1”等）。小组任务：四人一组，通过开关图层可见性、调整图层顺序、双击图层缩览图查看内容，完成两项挑战：

（1）绘制“图层堆叠关系图”：用同心圆层叠示意图，标注出背景层、扇面环状轮廓层、褶皱线条层、渐变色块层、嵌入图像层之间的上下覆盖关系。

（2）填写“技术归因表”：针对扇面轮廓的“环状圆环”和“切角扇形”两个关键形态特征，逆向推断用到了哪些选区工具（椭圆选框、多边形套索）和哪些操作技巧（Shift加选、Alt减选、Delete清除）。

这一设计颠覆“教师讲、学生跟”的常规路径，将探究权还给学生。学生在开关图层“小眼睛”的过程中，亲眼看到“隐藏褶皱层，扇面变平；隐藏嵌入图像层，扇面露出渐变色块”——这种视觉化的因果链，远比听教师讲解“图层的作用”更具认知冲击力。

小组汇报时，教师捕捉关键认知冲突：部分学生误以为“扇面轮廓”是直接画出来的，而不是通过“大圆选区减小圆选区”这一差集运算生成的。此时教师不急于纠偏，而是板书矛盾点，进入第二阶。

2.正向建模：选区运算的几何直观与口诀固化【重中之重】

教师退到讲台一侧，将控制权交给认知冲突中的学生代表。该学生通过教师机演示自己的尝试：用椭圆工具直接拖出两个不同大小的圆环图层，却无法形成中间透明的环状选区。此时教师介入，在白板上画出两个相交的集合圆示意图，标注：

——大圆选区（全集U）

——小圆选区（子集A）

——大圆选区中减去小圆选区（差集U-A）

——对应操作：先画大椭圆选框，按住Alt键（此时光标旁出现减号），再画小椭圆选框，释放鼠标。

这一环节必须使用数学集合语言，完成从“操作步骤”到“逻辑语义”的抽象跃升。教师随即广播演示，同时口述口诀：“要画圆环并不难，椭圆选框来接班；先按Shift画正圆，按住Alt减内圈。”全体学生在教师机引导下，同步完成网格视图下的3厘米同心圆环绘制，并用油漆桶填充淡蓝色，这是检验选区是否正确的唯一标准——颜料只落于环状区域。

同理，切角扇形的建模：再次调用集合语言——当前选区为环状（U-A），用多边形套索工具，按住Alt键（再次出现减号），在环状选区的右下角拖出直角三角形选区，释放鼠标，环状选区被减去一个三角，形成约270度的扇形环。此为扇面雏形。

【重要】教师必须在此处强调：Alt键在“绘制椭圆时”是减选，在“已有选区基础上用套索时”同样是减选，统一的底层逻辑是“从现有选区中移除新绘制区域”。这种贯穿不同工具的统一语义，是计算思维中“抽象”维度的具体体现。

3.变式迁移：从扇面到其他几何图形的思维弹性检验

为避免学生形成“扇面=同心圆环+切三角”的程序化定式，教师出示三幅传统纹样线描稿：云纹（多个正圆交叠）、方胜纹（两个菱形交叠）、窗棂纹（矩形环）。小组任选其一，讨论“用选区运算如何实现”，并在10秒内在纸上画出“选区运算流程图”（用⊕表示加选，⊖表示减选，⊗表示交叉选）。这一环节将Photoshop操作完全剥离，纯化逻辑思维，检验学生对布尔运算本质的理解程度。巡视发现，近八成小组能够正确写出“方胜纹=大菱形选区+小菱形选区（Shift加选）”或“窗棂纹=大矩形选区-小矩形选区（Alt减选）”的逻辑表达式，证明概念迁移成功。

（三）【Explanation】解释·技术原理显性化——褶皱的视觉语法与图层的透明契约（20分钟）

1.褶皱生成：从物理折痕到数字渐变的模态转换

教师提问：“有了扇面轮廓，如何让它从平面纸片变成立体折扇？”学生异口同声：“画褶皱！”教师追问关键问题：“褶皱应该画在哪个图层上？画在背景层，还是新建图层，还是图层？为什么？”

此处设置实验对比组：第一组直接在“背景层”绘制黑线条；第二组新建“褶皱层”绘制线条。学生通过实践发现：画在背景层上的线条无法单独擦除、无法调透明度、无法移动位置；而画在独立图层的线条，可以通过图层调板的不透明度滑块随时调整浓淡，甚至可以添加图层样式。这一对比实验，让学生自己总结出图层作为“独立编辑单元”的核心价值——非破坏性编辑。

教师顺势引出核心概念【非常重要】：“图层是数字图像编辑中的‘契约’——你承诺将某一类视觉元素集中管理，软件回报你无限次修改的权利。”褶皱线的绘制因此成为理解“图层即抽象容器”的认知工具。

具体技术要点分步建模（教师广播+学生同步）：

（1）图层：执行“图层→图层”，得到“背景副本”。这是保护原始背景的安全操作。

（2）选择直线工具：在矩形工具组中切换至直线工具，选项栏设为“像素”模式（非形状、非路径），粗细设为2像素。

（3）绘制放射性褶皱：从扇面圆心附近向弧边绘制6-8条直线。教师示范利用网格线辅助等分角度（每15度或30度一条）。

（4）反选删除关键步骤【高频易错】：激活“背景”层（不是背景副本），用魔棒工具单击扇面区域，建立环状扇形选区；切换回“背景副本”层，执行“选择→反选”（快捷键Ctrl+Shift+I），此时选区变为扇面以外的区域；按Delete键，删除背景副本层上扇面外的线条部分。这一系列操作的思维核心在于：线条画满了整个画布，我们只想要扇面内部的线条，因此先选扇面，再反选，删除外部。

教师必须强调：魔棒工具单击扇面前，必须确保当前激活图层是含有扇面颜色的图层（背景层），因为魔棒是根据像素颜色创建选区的，而背景副本层上目前只有线条，无扇面颜色块。

2.褶皱渲染：渐变映射中的光与影

学生完成线条绘制后，扇面虽有折痕感，但仍显扁平。教师展示范图对比：无渐变填充的扇面与有渐变填充的扇面，立体感差异显著。引入美术学科“明暗交界线”“受光面与背光面”概念，将每一格扇面视作独立微平面，通过前景色到背景色的线性渐变模拟侧光效果。

操作精讲：选择魔棒工具，在扇面任一格子内单击（必须确保当前图层为背景副本层，且选区精确落在格子内部）；设置前景色为深灰（#666666）、背景色为白色；选择渐变工具，选项栏设“线性渐变”“前景到背景”；在选区内从左至右水平拖拽，出现由深至浅的渐变。

此环节需解决的典型问题【基础】：

（1）选区溢出格子：网格线未闭合或魔棒容差过大。解决方案：执行“选择→修改→收缩”，收缩1像素。

（2）渐变方向呆板：全部横向拖拽导致光影雷同。教师鼓励学生尝试斜向拖拽、径向渐变，观察不同光照效果。

（3）渐变覆盖褶皱线：渐变填充在选区内进行，由于褶皱线绘制在同一个图层且颜色为纯黑，渐变填充并不会覆盖黑线，无需额外操作。这一现象恰好说明“像素覆盖”原理——新填充的像素只改变空白区域，不改变已绘制的黑色像素。

3.图像融合：跨文档中的图层自动生成语义

扇面本体制作完毕，最后一步是“把图像粘贴到扇面上”。教师创设应用场景：“现在你是一位文创设计师，要为苏州博物馆设计一款‘文徵明手植藤’主题折扇，请将提供的藤萝图片嵌入扇面。”

操作路径：

（1）在背景层上用魔棒单击扇面区域，建立选区（此步意义：从原始扇面轮廓提取形状）。

（2）执行“编辑→拷贝”（Ctrl+C）。

（3）打开素材图片“紫藤.jpg”，执行“编辑→粘贴”（Ctrl+V）。观察图层调板：自动生成“图层1”，内容为扇面形状的镂空蒙版？不，内容为扇面形状选区所框定的紫藤图像区域。

此处是认知冲突又一爆发点【难点】：粘贴进来的不是整张紫藤图，而是仅有扇面轮廓那一块的紫藤图切片。教师必须讲清原理：拷贝时的是“选区内的像素”，而非整个图层。因此粘贴生成的新图层，天然就是一个裁切好的扇形图。

（4）关闭素材图，返回“扇面.psd”，再次执行“编辑→粘贴”。扇面上出现紫藤花图像，但完全遮挡了褶皱线。

（5）关键操作：在图层面板中，将粘贴生成的“图层2”拖拽至“背景副本”层下方。此时褶皱线重新显现，图像作为扇面的底纹出现，符合真实扇面“画心在上、扇骨半隐”的视觉逻辑。

（6）选定“背景副本”层，调整透明度至60%-80%，使褶皱线自然融合于图像之上。

至此，完整的技术链全线贯通。

（四）【Elaboration】迁移·高阶创意与个性化表达（22分钟）

1.分层任务设计：满足差异化发展需求

本环节采用“基础巩固—能力提升—创新挑战”三层任务菜单，学生根据自身掌握程度自选路径。

【基础层·必达】：“仿制与变调”——提供两组新素材（熊猫、山水、京剧脸谱），学生仿照课堂范例，完整制作一幅扇面图，要求图层命名规范（背景层、扇面轮廓、褶皱线、渐变层、嵌入图像），至少调整一层透明度，保存psd和jpg双格式。此层级评价标准侧重技术规范完整度。

【能力层·拓展】：“形制创新”——突破折扇形制，制作团扇（圆形扇面，无褶皱，但需设计扇柄与扇坠）或芭蕉扇（异形轮廓）。需综合运用本节课选区运算知识，独立完成异形扇面轮廓的选区创建。此层级评价标准侧重工具迁移与问题解决能力。

【创新层·挑战】：“数字扇面文创系列”——以“二十四节气”或“校园八景”为主题，设计一组不少于3幅的系列扇面图。要求融入文字工具（添加诗句或主题标题）、至少一处运用图层混合模式（如正片叠底、滤色），并附100字以内的设计说明，阐述文化意象与色彩构成逻辑。此层级评价标准侧重创意构思、审美表现与跨学科整合。

2.教师巡回指导的微干预策略

教师携带安装高拍仪的移动推车，扫描学生典型操作截面，即时投屏分享。

——干预案例A：某生褶皱线画在背景层无法调整。教师投屏此画面，全班观察“图层调板中只有一个背景层”，追问：“他想把褶皱线调淡一点，现在能调吗？”学生立即响应：“调不了！因为没有独立图层。”教师小结：“图层不只是容器，更是调节的遥控器。”

——干预案例B：某生粘贴图像后，扇面边缘出现白色锯齿或杂边。教师调出“图层→修边→去边”菜单，设置1像素宽度，白边瞬间消失。教师说明：“这是Photoshop智能算法，用相邻像素颜色替换边缘杂色。”此技巧虽非教材内容，但极大提升作品精致度，学生踊跃尝试。

（五）【Evaluation】评价·从作品到产品：量规导引下的元认知反思（10分钟）

1.量规导引：从“做完”到“做好”的标准协商

不再采用“教师点评、学生听”的传统评价模式，而是提前下发《数字扇面文创设计量规》，学生对照量规对自己的作品进行“预评价”，用红笔圈出未达成项。量规核心指标摘录：

——技术规范（40%）：图层是否重命名且无冗余图层？选区边缘是否平滑无毛刺？褶皱渐变是否自然且方向统一？嵌入图像是否与扇面比例协调？

——艺术表现（30%）：色彩搭配是否符合传统国色或现代构成？疏密节奏是否有变化？图底关系是否清晰？

——文化内涵（20%）：主题是否明确传达文化意象？图像选择与主题是否逻辑自洽？

——创新思维（10%）：是否尝试了非折扇形制？是否融合了文字、混合模式等拓展技法？

2.画廊漫步与同伴互评

机房所有学生机屏幕切换至缩略图浏览模式，学生离开座位，手持《量规》与便利贴，进行“画廊漫步”。每人至少观摩5件作品，在便利贴上写下一个“星标”（最值得学习的亮点）和一个“建议”（一处可优化细节），粘贴至对应电脑边框。此环节将评价转化为同伴学习资源，被观摩的学生获得具体可操作的修改方向。

3.教师总结性反馈：提炼“专家型学习者”的思维特征

教师基于全班数据，归纳出本次课程达成度最高的三个技术点（图层、魔棒选区、渐变填充）和两个共性薄弱点（反选逻辑的迟钝、图层顺序的错误）。不点名批评，而是呈现两种典型的错误图层结构示意图，让学生诊断。最后，教师展示一件将图层透明度调至30%并叠加两幅图像、形成“重影”效果的创新作品，阐释：“这是图层提供的容错空间——你可以无限逼近理想效果，而不必担心毁掉原作。”

五、课后作业与学习延展【素养落地】

（一）【必做·知识巩固】

完成教材第34页“实践与练习”第2题：仿照本课例子，从网络符合自己需要的图片，利用图层及其效果再制作两幅扇面图，主题二选一——“我家的年夜饭”或“家乡的非遗”。要求将psd源文件和jpg导出文件打包提交，图层命名清晰。

（二）【选做·跨学科探究】

以小组为单位（3-5人），完成“传统扇艺的数字档案”微型项目，二选一：

1.理科方向：用几何画板或GeoGebra建模扇面展开角与扇骨长度的函数关系，导出数据图，并用Photoshop将函数图像作为纹理融入扇面设计。

2.文科方向：研究宋元山水画中的扇面形制（如马远、夏圭的“一角半边”构图），撰写300字图文报告，并用本课技法复原一幅宋代纨扇图。

（三）【素养作业·信息社会责任】

整理本次作业中使用的全部网络图片来源，制作“图片来源声明表”，标注作者、来源网站、协议类型（CC0/CCBY等）。教师提供规范模板，引导学生建立“先授权后使用”的信息伦理习惯。

六、板书设计【思维外化工具】

（主板书采用“集合示意图+图层堆叠图”双线索并行）

┌─────────────────────────────────────┐

│主题：数字扇面——图层与选区运算的集合模型│

│─────────────────────────────────────────│

│【一】选区运算逻辑（集合论）【二】图层堆叠逻辑（容器论）│

│┌─────────────┐│

│大圆UU│图层2(贴图