《Photoshop平面设计基础》教案-项目8 手机页面设计

《Photoshop平面设计基础》教学设计项目八手机页面设计任务8.1制作教育类App欢迎页教学设计制作教育类App欢迎页已掌握Photoshop基础工具（选区、图层样式）。习惯按步骤操作，但缺乏3D工具使用经验。能完成简单界面设计，动画制作能力较弱。知识目标：掌握3D工具（圆柱体创建、材质调整）、操控变形工具（图钉、旋转）原理。技能目标：能独立完成欢迎页动态效果（时间轴动画、GIF导出）。素养目标：培养青少年教育类产品的视觉表达能力。1.3D圆柱体的创建与Y轴旋转动画设置。2.操控变形工具对人物姿态的调整（图钉深度、旋转）。1.3D材质纹理载入与不透明度调整。2.时间轴关键帧的精确控制。多媒体机房（安装Photoshop2022）、投影设备、任务素材（书籍.png/人物.png/星星.png）。预习教材P162-167（3D工具/操控变形）。尝试创建简单3D形状。发布预习视频（操控变形案例）。熟悉工具界面。展示教育App欢迎页效果图（图8-1-1）。分析动态效果与用户体验关联。提问："如何通过3D工具增强视觉吸引力？"明确任务目标。1.3D工具中"圆柱体材质"与"球体材质"的区别（P165）

2.操控变形工具与普通自由变换的优劣对比（P162图8-1-2）1.小组展示预习笔记（截图+操作录屏）

2.讨论图钉密度对变形精度的影响（P162密度参数）1.点评各组对"图钉深度"的理解（P163）

2.纠正错误认知（如误将"刚性模式"用于人物变形）深化对3D工具核心参数的理解1.演示圆柱体创建（P165步骤5）。

2.操控变形工具参数（模式/密度/图钉深度）。同步练习添加图钉（图8-1-15）。强调关键操作：

-材质粗糙度10%

-Y轴旋转179°解决技术难点。按P163-167步骤实施：

1.参考线设置

2.按钮绘制（图8-1-6/8/11）

3.3D动画导出GIF完成时间轴关键帧设置（图8-1-23）。巡回指导：

-图钉闭合问题

-材质加载错误强化工具应用。1.总结3D动画制作流程（P165-166）：

-圆柱体创建→材质调整→时间轴关键帧

2.对比操控变形与液化工具：

-精确度（图钉）vs自由度（笔刷）1.提交GIF动画文件

2.填写技术要点表（材质粗糙度/旋转角度）1.展示优秀作品（图8-1-1）

2.分析常见错误：

-图钉深度未调整（P163）

-材质纹理未载入（P166）形成标准化工作流程1.分组讨论：如何优化3D动画流畅度？

-参考时间轴设置（P167图8-1-23）

2.拓展思考：3D工具在AR界面中的应用1.提出改进方案（如增加中间关键帧）

2.分享教育类App设计趋势1.引导技术方向：

-Y轴旋转角度限制（179°）

2.提供行业案例（如Duolingo动画）培养技术迁移能力制作科技公司App欢迎页（P167任务拓展）。提交PSD源文件与GIF效果。提供素材包（8-1发光.psd）。迁移3D工具技能。

任务8.2制作生鲜超市H5推广页面教学设计制作生鲜超市H5推广页面熟悉基础图片处理，未系统学习CameraRaw。依赖手动调整，缺乏预设分组效率意识。能完成简单抠图，但对复杂食材抠图精度不足。知识目标：掌握CameraRaw滤镜（曲线/白平衡）、自动抠图工具（选择主题）。技能目标：能批量处理食材图片并完成折纸风H5布局。素养目标：理解手机促销页面的视觉营销策略。1.CameraRaw预设的创建与应用（图8-2-19）。2.自动抠图工具对透明背景的处理（图8-2-20）。1.折纸风底图的图层样式叠加（图8-2-8/9）。2.多投影效果增强质感（P170步骤5）。多媒体机房（安装Photoshop2022）、投影设备、任务素材（橙子.jpg/玻璃瓶.jpg等）。预习P168-176（CameraRaw/自动抠图）。尝试用选择主题工具抠图。发布生鲜电商案例集。建立行业认知。1.展示生鲜H5页面效果图（图8-2-1）

2.对比处理前后的食材图片（P175图8-2-20vs原图）

3.提问：

-如何通过色彩调整增强食物新鲜感？

-折纸风格为何适合促销场景？1.观察效果图中色彩与布局特点

2.讨论CameraRaw对食材质感的提升作用1.演示原图与效果图差异

2.引导关注关键设计点：

-暖色调运用（P170#ffc362）

-投影层次感（P171图8-2-11）建立商业设计思维，明确技术目标分组分享预习发现：

1.CameraRaw中"曝光"与"高光"参数的联动效果（P169图8-2-18）

2.自动抠图工具对透明物体的处理局限（P169"选择主题"说明）1.展示预设分组命名规范（P174图8-2-19）

2.演示折纸风高光形状绘制（P170图8-2-4）1.总结共性问题（如未勾选"应用自动色调"）

2.强调商业项目中批量处理的效率要求建立标准化工作流程意识1.演示CameraRaw曲线调整（图8-2-18）。

2.折纸风投影参数（距离10px/大小40px）。记录预设分组命名规则。强调：

-高光形状的剪贴蒙版（图8-2-5）

-多投影叠加技巧提升效率意识。按P169-175步骤：

1.折纸风底图绘制（三层结构）

2.文案排版（投影样式，图8-2-14）

3.食材抠图批量处理完成"立即抢购"按钮制作（图8-2-17）。指导：

-预设加载错误

-投影层次混乱强化营销视觉表达。1.归纳CameraRaw高效处理流程（P174）：

原图调整→创建预设→批量套用

2.总结折纸风设计要点：

-三层结构投影叠加（P170图8-2-8/9）1.提交预设文件（.xmp格式）

2.分析色彩心理学应用（暖色系促购）1.点评作品商业价值

2.指出典型问题：

-投影层次混乱（P171）

-自动抠图残留白边（P175）强化营销视觉思维1.辩论：自动抠图vs钢笔工具在电商设计中的取舍

2.拓展讨论：如何用CameraRaw处理反光食材？1.列举适用场景（简单背景/复杂边缘）

2.演示高光修复技巧（P169曲线调整1.提供决策框架：

时间成