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

课题任务1设计开始界面和用户注册界面

教I.学会矢量绘图功能应用;

学

目2.熟练使用剪贴蒙版功能;

标

3.掌握界面排版布局技巧。

教学重点掌握界面排版布局技巧。

学会矢量绘图功能应用:

教学难点熟练使用剪贴蒙版功能;

掌握界面排版布局技巧。

教学准备普通教室

教学方法

教学过程教学内容

与手段

组织教学1.考勤：应到人实到人缺勤人讨论法

1

与导入

2.组织好课堂秩序，充分调动学生的积极性

任务2设计制作运动鞋广告

一、任务要求

本任务要设计制作一款手机App的开始界面和用户注册界面。开始

界面是用户打开App最初看到的画面，开始界面一般较为简洁，主要包

括App的名称、宣传语、登录信息等内容；用户注册界面是用户申请使

用某款手机App时填写个人信息的界面。

二、效果展示

乙教学内容

讲授法

美良诱

多媒体

讨论法

三、知识链接

1.移动工具

在Photoshop中，移动工具主要用于文字、图像、图层或选区等内容的

移动，使用它可以完成排列、移动和复制等操作。

2.图层的对齐、分布与排列

四、制作向导

步骤1：新建文件，文件名为“开始界面”；讲授法

步骤2：打开“sj.psd”文件，将素材拖入到新建的“开始界面文档中；

多媒体

步骤3：打开“beijing.jpg”素材图片，并将其拖入到“开始界面”文档

中；

步骤4：打开“sjdbxx.psd"，新建图层填充黑色；

步骤5：新建图层填充白色：讨论法

步骤6：使用“横排文本工具”输入相关的文字；

步弊7：使用”圆角矩形工具”绘制一个形似按钮的图形：

步骤8：按住〈Ctrl＞键的同时选中“灰圆角矩形上”载入一个圆角案例法

矩形的选区，“收缩”；

步骤9：使用“横排文本工具”输入相关文字；

步骤10：使用“矩形工具”，制作注册登录面；

步骤11：新建文件，文件名为“注册界面”；

步骤12：重复之前步骤，绘制注册界面。

五、技巧点拨

(1)调整字符间距可以使用＜All+-＞快捷键(增加间距)、＜A1(+

-＞快捷键(减少间距)来实现。

(2)在移动多个图层时，当各图层内容的相对位置关系不发生变化时，可

以将图层链接起来，图层链接后就可以一起移动了。同样，也可以将多个

图层放在一人图层组内，当选中图层组时，组内各图层的内容也可以一起

移动。

讨论法

3计划分组讨论，小组交流：把学生分组，布置任务。

4决策教师针对各小组交流计划情况进行分析总结5min

讨论法

5实施检查各小组成员根据本组最后交流结果发言。

6评价学生自评(30)、小组互评(30)、教师总评(40)。

7课后总结教师简要将大项目相关内容进行总结，将所学知识与操作归纳整理

8布置作业

5min

课题任务2设计每日推荐和人气菜品界面

一

*教4.学会矢量绘图功能应用；

5.熟练使用剪贴蒙版功能；

n标

'6.掌握界面排版布局技巧。

教学重点掌握界面排版布局技巧c

学会矢量绘图功能应用；

教学难点熟练使用剪贴蒙版功能；

掌握界面排版布局技巧。

教学准备普通教室

教学方法

教学过程教学内容

与手段

组织教学1.考勤：应到人实到人缺勤人讨论法

1

与导入

2.组织好课堂秩序，充分调动学生的积极性

任务2设计制作运动鞋广告

六、任务要求

本任务要设计制作每日推荐和人气菜品界面，在这两个界面中需要用

2

教学内容到•些菜品的素材图片，为了使界面整体美观、协调，图片所处区域要做

到大小一致、排列整齐。在Photoshop中，可以先使用矩形工具绘制符

合需求的矩形，然后使用剪贴蒙版将所需要呈现的内容调整到位。

七、效果展示

讲授法

多媒体

讨论法

□1□

八、知识链接

3.PS中的矢量图形工具

讲授法

提供了6种矢量形状工具，包括矩形工具、圆角矩形工具、椭圆工具、

多边形工具、直线工具和自定形状工具，

多媒体

4.蒙版

图层蒙版是用来显示或隐藏图层中某些像素的。

九、制作向导

讨论法

步骤1：新建文件，文件名为“每日推荐”：

步骤2：打开“开始界面.psd”文件，拖入相关的图层和组；

步骤：使用“直线工具”和“自定形状工具”绘制菜单栏的标示；

3案例法

步骤4：使用“文件”一“置入”菜单命令，选择素材图片“ssgy.jpg”；

步骤5：使用“横排文字工具”输入相关文字；

步骤6：使用“矩形工具”绘制矩形，设置图层样式；

步骤7：使用“自定形状工具”绘制购物车和搜索图形；

步骤8：存储“每日推荐.psd”，并另存为“人气菜品.psd”；

步骤9：打开“菜单”图层组，将文本图层中的“每日推荐”更改为“人

气菜品”；

步骤10：使用“矩形工具”，制作注册登录面；

步骤11：使用“自定形状工具”绘制添加图形；

步骤12：重复之前步骤，绘制。

十、技巧点拨

(1)调整字符间距可以使用＜Alt+-＞快捷键(增加间距)、＜Alt+

-＞快捷键(减少间距)来实现。

(2)在移动多个图层时，当各图层内容的相对位置关系不发生变化时，可

以将图层链接起来，图层链接后就可以一起移动了。同样，也可以将多个

图层放在一人图层组内，当选中图层组时，组内各图层的内容也可以一起

移动。

讨论法

2，计划分组讨论，小组交流：把学生分组，布置仁务。

4决策教师针对各小组交流计划情况进行分析总结5min

讨论法

5实施检查各小组成员根据本组最后交流结果发言。

6评价学生自评（30）、小组互评（30）、教师总评（40）。

7课后总结教师简要将为项目相关内容进行总结，将所学知识与操作归纳整理

8布置作业

5min

课题任务3设计点菜界面和确认菜品界面

教7.学会矢量绘图功能应用；

学

目8.熟练使用剪贴蒙版功能；

标

——9.掌握界面排版布局技巧。

教学重点掌握界面排版布局技巧。

学会矢量绘图功能应用：

教学难点熟练使用剪贴蒙版功能：

掌握界面排版布局技巧。

教学准备普通教室

教学方法

教学过程教学内容

与手段

组织教学1.考勤：应到人实到人缺勤人讨论法

1

与导入

2.组织好课堂秩序，充分调动学生的积极性

2教学内容任务2设计制作运动鞋广告

十一、任务要求

本任务要设计制作手机App的点菜界面和确认菜品界面。通过前面

的两个界面已经展示过菜品，用户通过对菜品的了解，接下来就选择菜品

并完成点菜和下单的操作了。

十二、效果展示

讲授法

多媒体

讨论法

十三、知识链接

5.图层样式

图层样式是依附于图层内容上产生的带有特殊效果的样式

6.字符面板和段落面板

“字符”面板中可以对文字进行编辑和调整，“段落”面板中可以对大段

文字的对齐方式、缩进、连字选项等进行设置。

十四、制作向导

步骤1:打开之前的文档；

讲授法

步骤2：打开“菜单”图层组，使用“横排文字工具”输入相关文字；

多媒体

步骤3：新建“分类点菜”图层组，使用“横排文字工具”输入相关文

字；

步骤4：使用“矩形工具”绘制矩形，使用图层样式；

步骤5：使用‘‘椭圆」一只“绘制正圆，使用图层样式；讨论法

步骤6：执行“文件”一“置入”命令，置入外部文件；

步骤7：使用“横排文字工具”输入文字；

步骤8：使用“矩形工具”绘制矩形，使用图层样式；案例法

步骤9：使用“矩形工具”绘制矩形，执行“文件”一“置入”命

令；

步骤10：使用“矩形选框工具”和“多边形套索工具”构建一个三

角形的选区；

步骤11：重复之前步骤，绘制；

步骤12：执行“文件”一“打开”命令，打开“人气菜品.psd”文

件；

步骤13：打开“菜单”图层组，将文本图层中的文本“人气菜品”更

改为“确认菜单”；