UI界面设计与制作 教案 第5章教案

教案编号：5

课题：第5章UI中的页面设计

课时：16课时

授课类型：讲授+实训

项目目标：

•掌握App的闪屏页制作

•掌握App的引导页制作

•掌握App的首页制作

•掌握App的个人中心页制作

•掌握App的详情页制作

•掌握App的注册登录页制作

项目重点：

•App的闪屏页制作

•App的引导页制作

•App的首页制作

•App的个人中心页制作

•App的详情页制作

•App的注册登录页制作

项目难点：

App闪屏页、引导页、首页、个人中心页、详情页、注册登录页的制作方法

项目技能点：

App闪屏页、引导页、首页、个人中心页、详情页、注册登录页的制作

项目教学技巧：

1.知识讲解

2.案例实训

项目过程：

（一）课前准备

1.授课前准备

准备好教学用具和教学设备

2.板书

课题：第5章UI中的页面设计

项目目标：

•掌握App的闪屏页制作

•掌握App的引导页制作

•掌握App的首页制作

•掌握App的个人中心页制作

•掌握App的详情页制作

•掌握App的注册登录页制作

3.课程引入

首页个人中心页详情页登录页

（二）课程内容

5.1闪屏页

闪屏页作为ui设计中的常用页面之一,具有突出产品、展示营销的作用。下面分别从概念以

及类型这两个方面进行闪屏页的讲解。

5.1.1闪屏页的概念

闪屏页又称为“启动页"，是用户点击App图标后，预先加载的一张图片。闪屏页承载了用户

对App的第一印象，是情感化设计的重要组成部分，可以细分为品牌推广型、活动广告型、节日

关怀型。

5.1.2闪屏页的类型

1.品牌推广型

品牌推广型闪屏页是为表现产品品牌而设定。基本采用"产品bg。+产品名称+产品"的简洁

化设计形式，如图所示。

蚂蚁财富

AntFortune

为人生更自出

里黑翻D期愿

蚂蚁财富

2.活动广告型

活动广告型闪屏页是为推广活动或广告而设定，通常将推广的内容直接设计在闪屏页内。多

采用插画以及暖色的设计形式，用以营造热闹的氛围，如图所示。

眼耐福值!

在线解压券更费送!

立即办理

免费领取

111点击参与

<2>百度网盘知乎

发现更大的世界

百度网盘百度浏览器知乎

双12提前

庆大放燥起来!

5曰开拒,fft千万红包雨

十亿红包不止五折

立即抢购。

双11国庆双12

3.节日关怀型

节日关怀型闪屏页是为营造节假日氛围同时凸显产品品牌而设定的。多采用"产品logo+内容

插画”的设计形式，使用户感受到节日的关怀与祝福，如图所示。

QQ音乐

许杷我的歌牵回侏的味

G百慝也出

,X07<«<<y“tainsnow

百度钱包0Q音乐QQ浏览器

5.1.3课堂案例——制作旅游类App闪屏页

【案例设计要求】

1.产品名称：游儿，运用软件Photoshop制作旅游类App闪屏页，效果如图所示。

2.页面尺寸：750px（宽）x1624px（高\

3.体现出行业风格。

【案例学习目标】学习使用软件Photoshop制作旅游类App闪屏页。

【案例知识要点】使用置入嵌入对象命令置入图像，使用颜色叠加命令添加效果。

(1)按Ctrl+N组合键，弹出"新建文档”对话框，将宽度设为750像素，高度设为1624像

素，分辨率设为72像素/英寸，背景内容设为白色，如图所示。单击“创建"按钮，完成文档新建。

(2)选择"文件>置入嵌入对象"命令，弹出"置入嵌入的对象"对话框。选择云盘中的"Ch05>

制作旅游类App>制作旅游类App闪屏页>素材>01"文件，单击"置入"按钮，将图片置入

到图像窗口中，按Enter键确定操作，效果如图所示，在“图层"控制面板中生成新的图层并将其

命名为"背景图"。

蜜

(3)选择"视图>新建参考线"命令，弹出"新建参考线”对话框，设置如图所示。单击“确

定"按钮，完成参考线的创建，效果如图所示。

狗建参考钱13

取向

f定一

O水平(H)

S§(v)展消

S8(P):88像素

(4)选择"视图>新建参考线版面"命令，弹出"新建参考线版面"对话框，设置如图所示。

单击"确定"按钮，完成参考线的创建，效果如图所示.

(5)选择"文件>置入嵌入对象"命令，弹出"置入嵌入的对象"对话框。选择云盘中的"Ch05>

制作旅游类App>制作旅游类App闪屏页>素材>02"文件，单击"置入"按钮，将图片置入

到图像窗口中，将其拖曳到适当的位置，按Enter键确定操作,效果如图所示，在“图层"控制面

板中生成新的图层并将其命名为"状态栏"。

9：41.ill令■

(6)单击"图层"控制面板下方的"添加图层样式"按钮,在弹出的菜单中选择"颜色叠

加"命令，弹出对话框，设置"叠加"颜色为白色，单击"确定"按钮。返回到"颜色叠加"对话

框，其他选项的设置如图所示，单击“确定"按钮，效果如图所示。

(7)选择"文件>置入嵌入对象"命令，弹出"置入嵌入的对象"对话框。选择云盘中的"Ch05>

制作旅游类App>制作旅游类App闪屏页>素材>03"文件，单击"置入"按钮，将图片置入

到图像窗口中，将其拖曳到适当的位置并调整大小，按Enter键确定操作，在“图层"控制面板中

生成新的图层并将其命名为"Logo"。选择"窗口>属性"命令，弹出"属性"面板，在面板中

进行设置，如图所示，效果如图所示。

(8)选择"文件>置入嵌入对象"命令，弹出"置入嵌入的对象"对话框。选择云盘中的"Ch05>

制作旅游类App>制作旅游类App闪屏页>素材>04"文件，单击"置入"按钮，将图片置入

到图像窗口中，将其拖曳到适当的位置，按Enter键确定操作，在"图层"控制面板中生成新的图

层并将其命名为"HomeIndicator"。将其"不透明度”选项设为60%,如图所示，效果如图所示。

军氨

q蜘-SGT□ft•

正常y栩明度：60%▼

5.2引导页

引导页作为ui设计中的常用页面之一，具有操作引导、讲解功能的作用。下面分别从概念以

及类型这两个方面进行引导页的讲解。

5.2.1引导页的概念

引导页是用户在第一次或经过更新，打开App看到的一组图片，通常由3-5页组成。引导页

起到了在用户使用App之前，提前帮助用户快速了解App的主要功能和特点的作用，可以细分为

功能说明型以及产品推广型。

5.2.2引导页的类型

1.功能说明型

功能说明型引导页是引导页中最基础的，主要对产品的新功能进行展示，常用于App重大版

本的更新中。多采用插图的设计形式，达到短时间内吸引用户的效果，如图所示。

出了地铁骑单车公交颜值“大”不同搜周边全面升级

骗行加入公交规划文字更大更清晰吃喝玩乐一手掌握

迸入地图

高德地图App的功能说明型引导页

2.产品推广型

产品推广型引导页是表达App的价值，让用户更了解这款App的情怀。多采用与企业形象和

产品风格一致的生动化、形象化设计形式，让用户感到画面的精美，如图所示。

京东商城App的产品推广型引导页

5.2.3课堂案例——制作旅游类App引导页

【案例设计要求】

1.运用软件Photoshop制作旅游类App引导页，效果如图所示。

2.页面尺寸：750px（宽）xl624px（高\

3.体现出行业风格。

【案例学习目标】学习使用软件Photoshop制作旅游类App引导页。

9：41MT-9:41M争■9：41分■

XXX

说走就走，一个背包和一颗旅途的风景美不胜收

是人生最华美的奢侈！勇敢的心，你准备好了吗!那么，出发吧！

■行.日ajaaii*.mea.

■UKiMteflA

开始

效果图

【案例知识要点】使用置入嵌入对象命令置入图像和图标，使用渐变叠加命令和颜色叠加命令

添加效果，使用横排文字工具输入文字。

1.制作美食到家App引导页1

(1)按Ctrl+N组合键，弹出"新建文档”对话框，将宽度设为750像素，高度设为1624像

素，分辨率设为72像素硬寸，背景内容设为白色，如图所示。单击“创建"按钮，完成文档新建。

(2)选择"文件＞置入嵌入对象"命令，弹出"置入嵌入的对象"对话框。选择云盘中的"Ch05＞

制作旅游类App＞制作旅游类App引导页I＞素材＞01"文件，单击"置入"按钮，将图片置

入到图像窗口中，拖曳到适当的位置并调整大小，按Enter键确定操作，效果如图所示，在“图层"

控制面板中生成新的图层并将其命名为"背景图"。

(3)单击"图层"控制面板下方的“创建新图层"按钮Q,在"图层"控制面板生成新的图

层"图层1\将前景色设为黑色，按Alt+Delete组合键，为“图层1"填充前景色，如图所示。

(4)单击"图层"控制面板下方的"添加图层样式"按钮*在弹出的菜单中选择"渐变叠

加"命令，弹出对话框，单击"渐变”选项右侧的“点按可编辑渐变"按钮■■一弹出"渐

变编辑器”对话框，在"位置"选项中分别输入。、10。两个位置点，分别设置两个位置点颜色的

RGB值均设为黑色。设置两个位置点的不透明度值为0(30%1100(0%),如图所示,单击“确

定"按钮。返回到"渐变叠加”对话框，其他选项的设置如图所示，单击“确定"按钮，效果如图

所示。

(5)选择"视图>新建参考线版面"命令，弹出"新建参考线版面"对话框，设置如图所

示。单击“确定"按钮，完成参考线的创建，效果如图所示。

(6)选择"文件>置入嵌入对象"命令，弹出"置入嵌入的对象"对话框。选择云盘中的"ChO5>

制作旅游类App>制作旅游类App弓|导页I>素材>02"文件，单击"置入"按钮，将图片置

入到图像窗口中，将其拖曳到适当的位置，按Enter键确定操作，效果如图所示，在“图层"控制

面板中生成新的图层并将其命名为"状态栏"。

(7)单击"图层"控制面板下方的"添加图层样式"按钮/，在弹出的菜单中选择"颜色叠

加"命令，弹出对话框，设置"叠加"颜色为白色，单击"确定"按钮。返回到"颜色叠加"对话

框，其他选项的设置如图所示，单击"确定"按钮，效果如图所示。

(8)选择"视图＞新建参考线"命令，弹出"新建参考线”对话框，设置如图所示。单击"确

定"按钮，完成参考线的创建，效果如图所示。

9:41.*1（令-

(9)选择"文件＞置入嵌入对象"命令，弹出"置入嵌入的对象"对话框。选择云盘中的"ChO5＞

制作旅游类App＞制作旅游类App引导页1＞素材＞03"文件，单击"置入"按钮，将图标置

入到图像窗口中，拖曳到适当的位置并调整大小，按Enter键确定操作，效果如图所示，在“图层"

控制面板中生成新的图层并将其命名为“关闭"。

9：41.ill令■

X

(10)按Ctrl+G组合键，群组图层并将其命名为“导航栏"，如图所示。选择“横排文字"工

具T.,在适当的位置输入需要的文字并选取文字，选择"窗口＞字符"命令，弹出面板，将"颜

色"设为白色，其他选项的设置如图所示，按Enter键确定操作，效果如图所示，在“图层"控制

面板中生成新的文字图层。

匿福

Q班.SQT□(9•

题y穆BHJg：wo%*

豌：E3/中自合填充：100%-

0>0号航栏

便7

1噩1

°

同口0.d0前

(11)使用相同的方法，再次在适当的位置分别输入需要的文字并选取文字，在"字符"面板

中，将"颜色"设为白色，其他选项的设置如图所示，按Enter键确定操作，效果如图所示，在"图

层”控制面板中分别生成新的文字图层。

(12)按Ctrl+O组合键，打开云盘中的"Ch03>制作旅游类App页面控件.psd"文件，在

“图层"控制面板中，选中"页面控件"图层组。选择"移动"工具中.,将选取的图层组拖曳到

新建的图像窗口中适当的位置，如图所示，效果如图所示。

发县

q熠j..HGT□(5•

穿透v穆明度：100%v

龌：工/中甘自填充：100%▼

O>□页面控件

oTox

OT要么读书、•-路上一

®T说走/走…帏侈I

△.口a口Q曲

(13)选择“横排文字”工具T.,在适当的位置输入需要的文字并选取文字，在"字符"面

板中，将"颜色"设为白色，其他选项的设置如图所示，按Enter键确定操作，在“图层"控制面

板中生成新的文字图层。在“图层”控制面板中将其“不透明度”选项设为50%,如图所示，效果如

图所示。

正常y不透明度：50%7

豌：臼/中40100%y

革方v,中等v

JO「T103

30点（自幼）-

l-.J

0E311v

V/&A®g形状2拷贝

100%Tt100%

A年。点魏：||.中维2

TlTTT

®g开缀1

云丁惮%

-%2内口a口Q前

(16)选择"文件＞置入嵌入对象"命令，弹出"置入嵌入的对象"对话框。选择云盘中的

"Ch05＞制作旅游类App＞制作旅游类App引导页1＞素材＞04"文件，单击"置入"按钮，

将图标置入到图像窗口中,拖曳到适当的位置并调整大小，按Enter键确定操作，在"图层"控制

面板中生成新的图层并将其命名为"上一页"。设置图层的"不透明度”选项为50%,如图所示。

使用相同的方法置入"05"文件，拖曳到适当的位置并调整大小，按Enter键确定操作，在"图层"

控制面板中生成新的图层并将其命名为"下一页"，如图所示，效果如图所示。

(17)按住shin键的同时，单击"说走就走，…的奢侈r文字图层，将需要的图层同时选取。

按Ctrl+G组合键,群组图层并将其命名为“内容区"，如图所示。

Q翘vH0T□S)•

躺“襁明峰100%v；

豌：E3/小甘。埴充：100%"

O＞□内杏区

O＞□哪把

Og1燧把向〜■

®・图层】仅「

包口Q口©电

(18)选择"文件>置入嵌入对象"命令，弹出"置入嵌入的对象"对话框。选择云盘中的

"ChO5>制作旅游类App>制作旅游类App弓|导页】>素材〉06"文件，单击"置入"按钮，

将图片置入到图像窗口中，将其拖曳到适当的位置，按Enter键确定操作，在“图层"控制面板中

生成新的图层并将其命名为"HomeIndicator^,如图所示,效果如图所示。

(19)^Ctrl+S组合键，弹出"另存为"对话框，将其命名为"制作旅游类App引导页1",

保存为psd格式。单击“保存"按钮，弹出"Photoshop格式选项"对话框，单击"确定"按钮，

将文件保存。

2.制作美食到家App引导页2

(1)按Ctrl+N组合键，弹出"新建文档”对话框，将宽度设为750像素，高度设为1624像

素，分辨率设为72像素硬寸，背景内容设为白色，如图所示。单击“创建"按钮，完成文档新建。

(2)在"制作旅游类App引导页V图像窗口中,选中"HomeIndicator"图层,按住Shift键

的同时，单击“背景图"图层，将需要的图层同时选取，如图所示。单击鼠标右键，在弹出的菜单

中选择"复制图层"命令，在弹出的对话框中进行设置，如图所示，单击“确定"按钮，效果如图

标

(3)在"图层"控制面板中选中"背景图"图层，按Delete键将其删除。选择"文件＞置入

嵌入对象"命令，弹出"置入嵌入的对象"对话框。选择云盘中的"ChO5＞制作旅游类App＞制

作旅游类App引导页2＞素材＞01"文件，单击"置入"按钮，将图片置入到图像窗口中，将其

拖曳到适当的位置，按Enter键确定操作，在“图层"控制面板中生成新的图层并将其命名为"背

景图"，如图所示,效果如图所示。展开“内容区"图层组，选中“说走就走，…的奢侈r文字图

层，如图所示。

(4)选择“横排文字"工具T.,选取文字并修改文字，效果如图所示使用相同的方法修改

其他文字，效果如图所示。

一个背包和一颗一个背包和一颗

勇敢的心，你准备好了吗!勇敢的心，你准备好了吗!

9(行不在于绛点.西量在■途中的人对事正有邮蹩

黄后的0匕皿11色

02—

(5)在“图层"控制面板中展开"页面控件"图层组，选中"形状1"图层，选择“直线''工具

/.,在属性栏中将"H"选项设为1像素，并调整形状位置，如图所示。在“图层”控制面板中将

其“不透明度”选项设为50%,效果如图所示。

02——-03<>■02—03<>

(6)选中"形状2"图层，在属性栏中将"H"选项设为2像素，并调整形状位置，如图所示。

在“图层”控制面板中将其"不透明度”选项设为100%,效果如图所示。选中"上一页"图层，在

“图层”控制面板中将其“不透明度”选项设为100%,效果如图所示，并折爵"内容区"图层组。

02-----03<>■02-----03<>■02-----03<>

(7)按Ctrl+S组合键，弹出"另存为"对话框，将其命名为"制作旅游类App引导页2”,保

存为psd格式。单击“保存"按钮，弹出"Photoshop格式选项"对话框，单击"确定"按钮，将

文件保存。

3.制作美食到家App引导页3

(1)按Ctrl+N组合键，弹出"新建文档”对话框，将宽度设为750像素，高度设为1624像

素，分辨率设为72像素硬寸，背景内容设为白色，如图所示。单击“创建"按钮，完成文档新建。

(2)在"制作旅游类App引导页2"图像窗口中，选中"HomeIndicator1'图层，按住Shift键

的同时，单击“背景图"图层，将需要的图层同时选取，如图所示。单击鼠标右键，在弹出的菜单

中选择"复制图层"命令，在弹出的对话框中进行设置，如图所示，单击“确定"按钮，效果如图

幅。

国隹

Q翅Q9T□Si•

正常y不蹒度：60%“

顺：ES/*口：8就：100%v

ogHomeIndicator

o＞□内各区

O＞n□就代

®庞蹬…

图层1fx7

背星图

.H翳自

oo启口a口B曲

(3)在“图层"控制面板中选中“背景图"图层，按Delete键将其删除。选择"文件＞置入

嵌入对象"命令，弹出"置入嵌入的对象"对话框。选择云盘中的"Ch05＞制作旅游类App＞制

作旅游类App引导页3＞素材＞01"文件，单击"置入"按钮，将图片置入到图像窗口中，将其

拖曳到适当的位置，按Enter键确定操作，在"图层"控制面板中生成新的图层并将其命名为"背

景图"，如图所示，效果如图所示。展开"内容区”图层组，选中"T背包…好了吗!”文字图层,

如图所示。

堂量

X

q蛭-国。T口分.

正常〜不透明度：100%V

一个背包和一颗鳄

勇敢的心，你准备好了吗!q理O0T口(51•

an+n・9a.

■MnvirKSA正常7不透明度：100%y

崛：氏/中耳命填充：100%v|

OT02

0T旅行不在…忆和景色

O[T]一个背包…好了吗！

©>□号睫

加，口a口B曲

(4)选择“横排文字"工具T.,选取文字并修改文字，效果如图所示.使用相同的方法修改

其他文字，效果如图所示。

旅途的风景美不胜收

那么，出发吧！

旅行不在乎经点，而是在■途中的人和事还蒲都党

薨好的记忆如量色

(5)在“图层"控制面板中展开“页面控件"图层组，选中"形状2"图层，选择“直线”工具

,在属性栏中将“H”选项设为1像素，并调整形状位置，如图所示。在“图层”控制面板中将

其“不透明度”选项设为50%,效果如图所示。

(6)选中"形状2拷贝”图层，在属性栏中将"H"选项设为2像素，并调整形状位置，如图

所示。在“图层’控制面板中将其“不透明度”选项设为100%,效果如图所示。选中"下一页"图

层，在“图层”控制面板中将其"不透明度”选项设为50%,效果如图所示，并折叠“内容区"图层

组。

(7)在“图层"控制面板中选中“内容区”图层组。选择"视图>新建参考线"命令，弹出

"新建参考线”对话框，设置如图所示。单击“确定"按钮，完成参考线的创建，效果如图所示。

新建参考茂

取向

;确原)

O水平(H)

垂直(V)取消

位蚩(P):1458像学

(8)选择〃圆角矩形〃工具Q,在属性栏的〃选择工具模式"选项中选择〃形状",将〃填

充"颜色设为橘黄色(255、151、1)，〃描边"颜色设为无，〃半径”选项设置为24像素。在图像

窗口中适当的位置绘制圆角矩形，在〃图层〃控制面板中生成新的形状图层〃圆角矩形选择

"窗口＞属性"命令，弹出"属性"面板，设置如图所示，按Enter键确定操作，效果如图所示。

(9)选择“横排文字"工具T.,在适当的位置输入需要的文字并选取文字，在"字符"面板

中，将"颜色"设为白色，其他选项的设置如图所示，按Enter键确定操作，如图所示，在“图层"

控制面板中生成新的文字图层。

“X

字若=

苹方-中等V

d（自珈

阳6。v

,100%

酗||

T*TxTT

/了1”达

▼3a平滑v

(10)在“图层"控制面板中，按住Shift键的同时，单击"圆角矩形1"图层，将需要的图层

同时选取。按Ctrl+G组合键，群组图层并将其命名为"开始"，如图所示。

«X

Q妞DGT□S)•

髓v不翻度：I。。％y

睢：「/中n。wo%H

OmHomeIndicator

0>□w

o>□内容区

0>□导睫

o曾I碇…

阿口a口©曲

(11)按Ctrl+S组合键，弹出"另存为"对话框，将其命名为"制作旅游类App引导页3",

保存为psd格式。单击"保存"按钮,弹出"Photoshop格式选项"对话框,单击"确定"按钮,

将文件保存。旅游类App引导页制作完成。

5.3首页

首页作为ui设计中的常用页面之一，具有流量分发、行为转化的作用。下面分别从概念以及

类型这两个方面进行首页的讲解。

5.3.1首页的概念

首页又称为“起始页"，是用户使用App的第一页。首页承担着流量分发的作用，是展现产品

气质的关键页面，可以细分为列表型、网格型、卡片型、综合型。

5.3.2首页的类型

1.列表型

列表型首页是在页面上将同级别的模块进行分类展示，常用于表现数据展示、文字阅读等方

面。采用单一的设计形式，方便用户浏览，如图所示。

加0.

«■(

①收取中…+

■收件箱

Q星标卷件

0附件收釐

应用

■通讯录

Q费卡

Q在线文档

0J企业值值KOAEMfiiS•

o更多应用•>

文怦安

耶邮件

□注福精

<已发送

F已■!除

■垃圾桁12>

QQ邮箱

2.网格型

网格型首页是在页面上将重要的功能以矩形模块的形式进行展示，常用于工具类等方面。采

用的统T巨形模块的设计形式，刺激用户点击，如图所示。

16：14“1个・

项目

当剧归档历作

C3E3附

M«racopy!今条Copy1

冬⑥

AntDesigniAntO«sign!g.1

支付Ml■讯SiO分析｛

W幺。

«HMUaa

墨刀

3.卡片型

卡片型首页是在页面上将图片、文字、控件放置于同一张卡片中，再将卡片进行分类展示，

常用于表现数据展示、文字阅读、工具使用等方面。采用的统一的卡片设计形式，不仅让用户一

目了然，更能加强产品内容的点击欲望，如图所示。

18：24

书・

变例炳：

惕相联《品汐传》隔着小说更NI影！

更备免费好书11不停＞

a

微信读书App

4.综合型

综合型首页是由搜索栏、Banner.金刚区、瓷片区以及标签栏等组成的页面，运用范围较广，

常用于电商类、教育类、旅游类等方面。采用丰富的设计形式，满足用户的需求，如图所示。

(F®©(TO

1QCB兄俱中心<J>8KKSASHBOMt

ooooo

mnttIM中O»9KA

A8§@£

■■untacwsmi<a

1号店App途牛旅游App

5.3.3课堂案例-制作旅游类App首页

【案例设计要求】

1.运用软件Photoshop制作旅游类App首页，效果如图所示。

2.页面尺寸：750px（宽）x2086px（高\

3.设计一款综合型首页，并体现出行业风格.

【案例学习目标】学习使用软件Photoshop制作旅游类App首页。

效果图

【案例知识要点】使用圆角矩形工具、矩形工具和椭圆工具绘制形状，使用置入嵌入对象命令

置入图片和图标，使用创建剪贴蒙版命令调整图片显示区域，使用渐变叠加命令添加效果，使用

属性面板制作弥散投影，使用横排文字工具输入文字。

1.制作Banner、状态栏、导航栏和滑动轴

（I）按Ctrl+N组合键，弹出"新建文档”对话框，将宽度设为750像素，高度设为2086像

素，分辨率设为72像素硬寸，背景内容设为浅灰色（249、249、249）,如图所示。单击“创建"

按钮，完成文档新建。

(2)选择"视图>新建参考线版面"命令，弹出"新建参考线版面"对话框，设置如图所示。

单击“确定"按钮，完成参考线的创建。

(3)选择“圆角矩形”工具O.,在属性栏的“选择工具模式”选项中选择"形状"，将"填

充"颜色设为黑色，"描边"颜色设为无，"半径”选项设置为40像素。在图像窗口中适当的位置

绘制圆角矩形，如图所示，在“图层"控制面板中生成新的形状图层"圆角矩形1"。选择"窗口>

属性"命令，弹出"属性"面板，设置如图所示，按Enter键确定操作，效果如图所示。

(4)选择"文件>置入嵌入对象"命令，弹出"置入嵌入的对象"对话框。选择云盘中的"Ch05>

制作旅游类App>制作旅游类App首页>素材>01"文件，单击"置入"按钮，将图片置入到

图像窗口中并拖曳到适当的位置，按Enter键确定操作，如图所示，在“图层"控制面板中生成新

的图层并将其命名为"底图"。按Alt+Ctrl+G组合键，为图层创建剪贴蒙版，效果如图所示。

(5)选择"文件＞置入嵌入对象"命令，弹出"置入嵌入的对象"对话框。选择云盘中的"Ch05＞

制作旅游类App＞制作旅游类App首页＞素材＞02"文件，单击"置入"按钮，将图片置入到

图像窗口中并拖曳到适当的位置，按Enter键确定操作，如图所示，在“图层"控制面板中生成新

的图层并将其命名为"树二

(6)单击"图层"控制面板下方的"添加图层样式"按钮必，在弹出的菜单中选择"描边"

命令，弹出对话框，设置描边颜色为白色，其他选项的设置如图所示，单击“确定"按钮。按

Alt+Ctrl+G组合键，为图层创建剪贴蒙版，效果如图所示。

(7)使用相同的方法，置入云盘中的"Ch05＞制作旅游类App＞制作旅游类App首页＞素

材＞03"文件，将其拖曳到适当的位置并添加描边效果，效果如图所示，在“图层"控制面板中

生成新的图层并将其命名为“热气球"。

(8)选择“横排文字”工具T.,在适当的位置输入需要的文字并选取文字，选择"窗口＞字

符"命令，弹出面板，将"颜色"设为白色，其他选项的设置如图所示，按Enter键确定操作，在

"图层"控制面板中生成新的文字图层。选中文字"6",在"字符"面板中进行设置，如图所示,

效果如图所示。

汉仪太极体尚V汉仪太极体筒V

茎

点4

b:值

72o国

。

v/JAT

loXo)%赛-

lT点

o.cri®:

AITT工

TT

丁

£伏处与出了1"%17TIN53匕

vaa无

(9)按Ctrl+J组合键，复制文字图层，在“图层"控制面板中生成新的文字图层"景点6折

起拷贝、选择"横排文字”工具T.,删除不需要的文字，并调整文字位置，如图所示。在"图

层"控制面板中，将图层的“填充"选项设为0%,如图所示。

为该图层添加描边样式，如图所示，效果如图所示。

(10)选择"圆角矩形”工具O.,在属性栏中将"填充"颜色设为白色，"描边"颜色设为无，

"半径"选项设置为4像素。在图像窗口中适当的位置绘制圆角矩形，在"图层"控制面板中生成

新的形状图层"圆角矩形2"。在"属性"面板中进行设置，如图所示，按Enter键确定操作，效

果如图所示。

(11)单击"图层"控制面板下方的"添加图层样式"按钮先，在弹出的菜单中选择"渐变叠

加"命令，弹出对话框，单击"渐变”选项右侧的“点按可编辑渐变"按钮■■,,弹出"渐

变编辑器”对话框，在"位置"选项中分别输入0、100两个位置点，分别设置两个位置点颜色的

RGB值为0(255、137、51\100(250、175、137),如图所示，单击"确定"按钮。返回到"渐

变叠加"对话框，其他选项的设置如图所示.切换到“描边"选项卡中，设置"描边"颜色为淡黄

色(255、248、234),其他选项的设置如图所示,单击“确定"按钮，效果如图所示。

(12)选择“横排文字”工具T.,在适当的位置输入需要的文字并选取文字，在"字符"面

板中，将"颜色"设为白色，其他选项的设置如图所示，按Enter键确定操作，在“图层"控制面

板中生成新的文字图层。选中文字"299",在"字符"面板中进行设置，如图所示，效果如图所

(13)选择"钢笔"工具M,在属性栏中将"填充"颜色设为无，“描边”颜色设为白色，“粗

细”选项设为1像素，在适当的位置绘制一条不规则曲线，在“图层”控制面板中生成新的形状图层

“形状1”，如图所示。使用相同的方法绘制多条曲线，效果如图所示。

(14)按住Shift键的同时，单击"形状1"图层，将需要的图层组同时选取。按Ctrl+G组合

键，群组图层组并将其命名为“装饰"，如图所示。按住S