图像图像处理 教案 项目七 UI设计.docx

《图像图像处理 教案 项目七 UI设计.docx》由会员分享，可在线阅读，更多相关《图像图像处理 教案 项目七 UI设计.docx（7页珍藏版）》请在第一文库网上搜索。

1、课题任务1设计开始界面和用户注册界面I学目标1 .学会矢量绘图功能应用；2 .熟练使用剪贴蒙版功能；3 .掌握界面排版布局技巧。教学重点掌握界面排版布局技巧。教学难点学会矢量绘图功能应用；熟练使用剪贴蒙版功能；掌握界面排版布局技巧。教学准备普通教室教学过程教学内容教学方法与手段1组织教学与导入1 .考勤：应到人实到人缺勤人2 .组织好课堂秩序，充分调动学生的积极性讨论法任务2设计制作运动鞋广告一、任务要求本任务要设计制作一款手机App的开始界面和用户注册界面。开始界面是用户打开APP最初看到的画面，开始界面一般较为简洁，主要包括App的名称、宣传语、登录信息等内容；用户注册界面是用户申请使用某

2、款手机App时填写个人信息的界面。二、效果展不II12教学内容I美急讲授法多媒体，I讨论法-0三、知识链接1 .移动工具在Photoshop中，移动工具主要用于文字、图像、图层或选区等内容的移动，使用它可以完成排列、移动和复制等操作。2 .图层的对齐、分布与排列四、制作向导步骤1：新建文件，文件名为“开始界面”：步骤2：打开“sj.psd”文件,将素材拖入到新建的“开始界面文档中；步骤3：打开“beijing.jpg”素材图片，并将其拖入到“开始界面”文档中；步骤4：打开“sjdbxx.psd，新建图层填充黑色；步骤5：新建图层填充白色；步骤6：使用“横排文本工具”输入相关的文字；步骤7：使用

3、“圆角矩形工具”绘制一个形似按钮的图形；步骤8：按住QH键的同时选中“灰圆角矩形上”载入一个圆角矩形的选区，“收缩”；步骤9：使用“横排文本工具”输入相关文字；步骤10：使用“矩形工具”，制作注册登录面；步骤11：新建文件，文件名为“注册界面”；步骤12：重复之前步骤，绘制注册界面。五、技巧点拨(1)调整字符间距可以使用A1t+-快捷键(增加间距)、AIt+-快捷键(减少间距)来实现。(2)在移动多个图层时，当各图层内容的相对位置关系不发生变化时，可以将图层链接起来，图层链接后就可以一起移动了。同样，也可以将多个图层放在一个图层组内,当选中图层组时，组内各图层的内容也可以一起移动。讲授法多媒体

4、讨论法案例法3计划分组讨论，小组交流：把学生分组，布置任务。讨论法4决策教师针对各小组交流计划情况进行分析总结5min5实施检查各小组成员根据本组最后交流结果发言。讨论法6评价学生自评(30)、小组互评(30)、教师总评(40)。7课后总结教师简要将本项目相关内容进行总结，将所学知识与操作归纳整理8布置作业5min课题任务2设计每日推荐和人气菜品界面量目标4 .学会矢量绘图功能应用；5 .熟练使用剪贴蒙版功能；6 .掌握界面排版布局技巧。教学重点掌握界面排版布局技巧。教学难点学会矢量绘图功能应用；熟练使用剪贴蒙版功能；掌握界面排版布局技巧。教学准备普通教室教学过程教学内容教学方法与手段1组织教

5、学与导入1 .考勤：应到人实到人缺勤人2 .组织好课堂秩序，充分调动学生的积极性讨论法2教学内容任务2设计制作运动鞋广告六、任务要求本任务要设计制作每日推荐和人气菜品界面，在这两个界面中需要用到一些菜品的素材图片，为了使界面整体美观、协调，图片所处区域要做到大小一致、排列整齐。在PhotoShoP中，可以先使用矩形工具绘制符合需求的矩形，然后使用剪贴蒙版将所需要呈现的内容调整到位。七、效果展示讲授法多媒体讨论法八、知识链接3.PS中的矢量图形工具提供了6种矢量形状工具，包括矩形工具、圆角矩形工具、椭圆工具、多边形工具、直线工具和自定形状工具，4.蒙版图层蒙版是用来显示或隐藏图层中某些像素的。九

6、、制作向导讲授法多媒体讨论法案例法步骤1：新建文件，文件名为“每日推荐”；步骤2：打开“开始界面.psd”文件，拖入相关的图层和组；步骤3：使用“直线工具”和“自定形状工具”绘制菜单栏的标示；步骤4：使用“文件”一“置入”菜单命令，选择素材图片“ssgy.jpg”；步骤5：使用“横排文字工具”输入相关文字；步骤6：使用“矩形工具”绘制矩形，设置图层样式；步骤7：使用“自定形状工具”绘制购物车和搜索图形；步骤8：存储”每日推荐.psd”，并另存为“人气菜品.psdw；步骤9：打开“菜单”图层组，将文本图层中的“每日推荐”更改为“人气菜品”；步骤10：使用“矩形工具”，制作注册登录面；步骤11：使

7、用“自定形状工具”绘制添加图形；步骤12：重复之前步骤，绘制。十、技巧点拨(1)调整字符间距可以使用A1t+-快捷键(增加间距)、A1t+一快捷键(减少间距)来实现。(2)在移动多个图层时，当各图层内容的相对位置关系不发生变化时，可以将图层链接起来，图层链接后就可以一起移动了。同样，也可以将多个图层放在一个图层组内,当选中图层组时，组内各图层的内容也可以一起移动。3计划分组讨论，小组交流：把学生分组，布置任务。讨论法4决策教师针对各小组交流计划情况进行分析总结5min5实施检查各小组成员根据本组最后交流结果发言。讨论法6评价学生自评(30)、小组互评(30)、教师总评(40)。7课后总结教师简

8、要将本项目相关内容进行总结，将所学知识与操作归纳整理8布置作业5min课题任务3设计点菜界面和确认菜品界面学目标7 .学会矢量绘图功能应用；8 .熟练使用剪贴蒙版功能；9 .掌握界面排版布局技巧。教学重点掌握界面排版布局技巧。教学难点学会矢量绘图功能应用；熟练使用剪贴蒙版功能；掌握界面排版布局技巧。教学准备普通教室教学过程教学内容教学方法与手段1组织教学与导入1 .考勤：应到人实到人缺勤人2 .组织好课堂秩序，充分调动学生的积极性讨论法2教学内容任务2设计制作运动鞋广告十一、任务要求本任务要设计制作手机App的点菜界面和确认菜品界面。通过前面的两个界面已经展示过菜品，用户通过对菜品的了解，接下

9、来就选择菜品并完成点菜和下单的操作了。十二、效果展示I/av、rII讲授法多媒体讨论法讲授法多媒体讨论法案例法宿1.fa*.汕=faIIICzz)cIOO十三、知识链接5 .图层样式图层样式是依附于图层内容上产生的带有特殊效果的样式6 .字符面板和段落面板字符面板中可以对文字进行编辑和调整，“段落”面板中可以对大段文字的对齐方式、缩进、连字选项等进行设置。十四、制作向导步骤1：打开之前的文档；步骤2：打开“菜单”图层组，使用“横排文字工具”输入相关文字；步骤3：新建“分类点菜”图层组，使用“横排文字工具”输入相关文字；步骤4：使用“矩形工具”绘制矩形，使用图层样式；步骤5：使用“椭圆工具”绘制

10、正圆，使用图层样式；步骤6：执行“文件”一“置入”命令，置入外部文件：步骤7：使用“横排文字工具”输入文字；步骤8：使用“矩形工具”绘制矩形，使用图层样式；步骤9：使用“矩形工具”绘制矩形，执行“文件”一“置入”命令；步骤10：使用“矩形选框工具”和“多边形套索工具”构建一个三角形的选区；步骤11：重复之前步骤，绘制；步骤12：执行“文件”一“打开”命令，打开“人气菜品.psd”文件；步骤13：打开“菜单”图层组，将文本图层中的文本“人气菜品”更改为“确认菜单”；步骤14：使用“椭圆工具”绘制正圆；步骤15：使用“横排文字工具”输入文字；十五、技巧点拨(1)调整字符间距可以使用A11+-快捷键(增加间距)、A1t+-快捷键(减少间距)来实现。(2)在移动多个图层时，当各图层内容的相对位置关系不发生变化时，可以将图层链接起来，图层链接后就可以一起移动了。同样，也可以将多个图层放在一个图层组内,当选中图层组时，组内各图层的内容也可以一起移动。3计划分组讨论，小组交流：把学生分组，布置任务。讨论法4决策教师针对各小组交流计划情况进行分析总结5min5实施检查各小组成员根据本组最后交流结果发言。讨论法6评价学生自评(30)、小组互评(30)、教师总评(40)。7课后总结教师简要将本项目相关内容进行总结，将所学知识与操作归纳整理8布置作业5min