《制作网页Banner》教案.doc

《制作网页Banner》教案 课题名称 制作网页Banner 建议课时 2课时（建议两节连堂） 教学目标 知识目标 1. 了解网页及其界面； 2. 掌握网页界面设计与平面构成的表现形式； 3. 掌握平面构成的设计原则； 4．学会平面构成在网页界面设计中的应用方法。 能力目标 培养学生的自学能力、动手实践能力和创新能力。 德育目标 培养学生的团队精神和成功意识，增强学生学习的自信心，形成主动学习的良好氛围。 教学重点 掌握网页Banner的设计制作方法 教学难点 把点、线、面的相关知识与网页Banner设计制作相结合。 任务介绍 本任务是制作网页Banner ，如下图所示。 本任务将是制作网页Banner，该任务在制作前已提供了相关素材，结合学习过的点，线，面的相关知识，在遵循形式美法则的基础上，运用暖色调作为背景颜色，绘制简单的Banner。 教学过程 学生活动 教师活动 创设情境 融入情境，产生完成本任务的欲望。 创设一个真实的项目情境，激发学生完成本任务的兴趣。在本“任务情境”的基础上，使用投影，展现本任务完成效果图，激发学生兴趣与完成的欲望。 任务分析 学生小组讨论，如何完成任务。 向学生展示任务效果图，要求学生结合自身知识与技术储备，完成本任务还需要哪些知识与技术支持，找出自己不能完成的内容。 在学生讨论的基础，教师有针对性引导学生，将需要解决的问题收集、整理出来。 任务实施 参照教材中“任务实施”，尝试操作，实施任务。当遇到困难时，向老师或同学们进行请教。 学生在操作的过程中，教师要适时巡查，发现问题，引导学生解决。同时，鼓励小组同学之间相互帮助，积极交流，解决问题。 典型引导 解决问题 阅读教材，尝试操作，掌握新知。 引导学生参照教材的“知识准备”，了解网页Banner的表现形式、设计原则等理论知识。 展示评价 首先自评，然后小组评价。 教师点评，引导学生相互交流学习。 拓展探索 结合任务1的实例，运用实例中的素材，设计制作时尚女装Banner广告（圣诞节店铺大促销）。 教师根据实际情况，有针对性示范操作。评价作品，将评价结果反馈给学生。 附件： 任务实施步骤： 1. 启动Photoshop CS5，选择 “文件”→“新建”菜单命令，新建一个大小为“900×450”像素，分辨率为“72”，颜色模式为RGB颜色，背景内容为“白色”的文件，并将其命名为“新品”，如题1-30所示。 图1-30 新建 “新品”文件设置 2. 添加背景颜色为渐变色，如图1-31所示，完成效果如图1-32所示。 图1-31 添加渐变背景 图1-32 完成效果 3．新建图层，运用“钢笔”工具，如图-1-33所示，绘制三角形，并填充颜色为“2dabdd”，如图1-34所示。重复以上动作，绘制其它四个三角形，并依此叠加，完成效果如图1-35所示。 图1-33钢笔工具 图1-34 绘制三角形 图1-35 完成效果 4. 运用“钢笔工具”绘制翻角，并填充渐变颜色，如图1-36所示，为翻角填加“图层样式”，如图1-37所示，在为翻角的下部分填加灰色到透明的渐变高光，如图1-38所示。 图1-36 渐变编辑器 图1-37 添加投影 图1-38渐变编辑器 5. 插入背景图片。打开“素材╱项目1╱任务1╱背景素材”，把素材置放在背景图层的右侧，调整其位置，完成效果如图1-39所示。 图1-39 插入素材 6. 运用“自由形状工具”→“丝带1”绘制徽章，如图1-40所示，并填充颜色为“a80d26”，如图1-41所示。 图1-40 自由形态工具 图1-41 填充颜色 7. 添加文字。 （1）添加文字“NEW”，选择“窗口”→“字符”，打开“字符”面板， 相关设置如图1-42所示。 图1-42 字符面板 （2）添加文字“新品上市”，选择“窗口”→“字符”打开“字符”面板， 相关设置如图1-43所示。 图1-43 字符面板 （3）添加文字“限量”，选择“窗口”→“字符”打开“字符”面板， 相关设置如图1-44所示。 图1-44字符面板 （4）填加文字“9元秒杀，超值神秘，限时包邮”，选择“窗口”→“字符”打开“字符”面板， 相关设置如图1-45所示。 图1-45字符面板 网页美工设计实训 4 ① ① ② ① R:248 G:219 B:182 # f8dbb6 ② R:214 G:178 B: 86 #d6b256 ① R: 4