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

教案编号：4

课题：第4章UI中的组件没计

课时：12课时

授课类型：讲授+实训

项目目标：

•了解组件的基础知识

•掌握导航栏的制作

•掌握标签栏的制作

•掌握金刚区的制作

・掌握瓷片区的制作

项目重点：

・导航栏的制作

・标签栏的制作

・金刚区的制作

•瓷片区的制作

项目难点：

导航栏、标签栏、金刚区、瓷片区的规则

项目技能点：

导航栏的制作、标签栏的制作、金刚区的制作、瓷片区的制作

项目教学技巧：

1.知识讲解

2.案例实训

项目过程：

（一）课前准备

1.授课前准备

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

2.板书

课题：第4章UI中的组件设计

项目目标：

・了解组件的基础知识

•掌握导航栏的制作

•掌握标签栏的制作

•掌握金刚区的制作

•掌握瓷片区的制作

3.课程引入

通过课堂案例效果展示引入组件的概念

登录有奖］

国庆去哪

导航栏

G0。囹③

首页攻略消息行程我的

标签栏

瓷片区

（二）课程内容

4.1组件的初识

组件作为UI设计中常用控件或元素的集合，具有灵活使用、便于复用的特点。下面分别从组

件的概念及组件的获取这两个方面进行控件的基础讲解。

4.1.1组件的概念

组件是将图片、图形、图标、文字等多个元素进行组合进行更好的信息传递，便于用户进行

交互，如图所示。

9

回

LJ

Htl收H

us**cas巾

S3

M»«as。R*

陵cn左

♦日好（X

ifi0

4.1.2组件的获取

组件同控件一样可以从iOS以及MaterialDesign官方网站进行获取。UI设计师通常会在官方

组件的基础之上再进行设计。

4.2导航栏的设计

导航栏作为UI设计中的常用组件之一,具有持久显示、指导用户的特点。下面分别从概念、

类型以及规则这三个方面进行按钮控件的讲解。

4.2.1导航栏的概念

导航栏(NavigationBar,Navbar),位于App顶部，状态栏下方，提供了位置指示及功能操

作。Android中，MaterialDesign称其为顶部应用栏(TopAppBar),如图所示。

9：41.«il令一

＜邮箱收件箱编箱X已选择1张心■:

李小海

您有一条新的邮件

123张照片

U敬的孙双双女士.您好！您目的的客尸星际为

★★★.可享积分永久，效,85址用卡费用免等…

王东东8/1/17»

您有一条新的邮件

尊敬的孙双双女士.您好！！®目前的客户星际为

★★★,可享职分永久有效,基础用卡费用缄免等…

向日葵

您有一条新的邮件

，敬的孙双双女士,您好！您目萌的一户星际为

★★★,可享积分永久一效,二础用卡费用一免3

iOS导航栏Android顶部应用栏

4.2.2导航栏的类型

1.常规导航栏

标题导航栏：常见于二级详情界面或导航简单的一级界面，主要庄操作图标与标题组成，如

图所示。

18：16.■1令HZP

SZAOZU。造作新家Q

造作新家App

搜索框导航栏：增加搜索框，去除导航标题，如图所示。

18：20.Hl(E3-

辆易Q东京奥运如期举行⑥0

网易新闻App

Tab/分段控件导航栏：Tab左右切换顶部导航栏的可选项可以扩展很多，并且可以左右滑动切

换。分段控件顶部导航栏一般有2~5个可选项，且不能左右滑动，如图所示。

18：38-r.11令

故事美食时尚美妆游戏搞笑幽

微博App

2.通栏导航栏

常用在电商、旅游等界面复杂或是需要烘托氛围的界面中，如图所示。

小米有品App

3.大标题导航栏

简约大气，减少视觉噪音，让内容更加突出，如图所示。

18:35

心愿单

爱彼迎App

有些APP也会折中使用，在常规导航栏高度下，放大字号，隐去分割线，使标题看起来更大,

如图所示。

18：52.1令口

编辑选荐&

字里行间App

4.2.3导航栏的规则

1.标题导航栏

(1)标题导航栏尺寸

iOS标题导航栏宽度：375pt,高度：44pt。

Android标题导航栏宽度360dp,高度56dpo

(2)标题导航栏文字

标题文字尺寸：17~18pto

操作注释尺寸：16pto

重要提示：文字层级字号对比＞2pi

(3)标题导航栏图标

图标设计尺寸：24出

如图所示。

(75Cp*)

I-----------------------------1

,川令9:41AMJOptWOp哂It100%M

＜返回加一》1•标题o+

iPhone6/7/8

375Pt(n2$px)

I-------------------------------------------------------------------------------------------1

9：414«p＜O32in)pi|令

•标题44PM132PX)编辕

iPhoneX

360Pt|

页面标题

-_L-

FTRHHH

16pt32p<24pt24pt16pt

标题导航栏尺寸示意图

2.大标题导航栏

(1)大标题导航栏尺寸

iOS标题导航栏宽度：375pt,高度：96pt。

Android标题导航栏宽度360dp,高度128dp0

(2)大标题导航栏文字

标题文字尺寸：34pt。

操作注释尺寸：32pt。

(3)大标题导航栏图标

图标设计尺寸：24pt0

如图所示。

•■・今9:41AMI*100%

取消确定

大标题一，

iPhon«6/7/8

(TlUpa)

-------------------------------------------------------------------1

9:413W|H)1・I宅■

+编辑

大标题“a10OH12Mtlc

IPhoneX

360Pt|

口“

I2flp(

Android

24Pt24pt16pt

大标题导航栏尺寸示意图

3.搜索框导航栏

(I)搜索框导航栏尺寸

搜索框尺寸：275*30pt

(2)搜索框导航栏文字

搜索文字尺寸：14pi

图标文字尺寸：9Pl

(3)搜索框导航栏图标

图标设计尺寸：24pt、20ptx16pt

重要提示：图标设计的尺寸规律为4或8的倍数

(4)搜索框导航栏间距

整体设计分布：8Ptl6Pt

重要提示：分布遵循五分原则等分原则

如图所示。

10：4C"M令・:，

se

!3H13霭£

U,"

搜索框尺寸示意图

（5）搜索框导航栏效果

黑色遮罩：避免与背景颜色相同，影响阅读，如图所示。

飞猪App

搜索框微投影：凸显搜索功能，如图所示。

16：23-r.10Q

Q搜索目的地/景点/酒店等趋用

热搜♦西安长沙呼伦贝尔平遥古城西出

马蜂窝App

4.2.4课堂案例一制作旅游类App导航栏

【案例设计要求】

1.运用软件Photoshop制作导航栏，设计效果、展示效果如图所示。

2.导航栏尺寸：750px（宽）x88px（高\

3.符合导航栏的设计规则。

【案例学习目标】学习使用软件Photoshop制作导航栏。

9：41.ill令■

衣国庆去哪玩x登录有金?

展示效果图

【案例知识要点】使用圆角矩形工具绘制形状，使用属性面板制作弥散投影，使用置入嵌入对

象命令置入图标，使用横排文字工具输入文字。

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

分辨率设为72像素硬寸，背景内容设为浅蓝色(126、212、229),如匿所示。单击“创建"按钮，

完成文档新建。

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

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

绘制圆角矩形，在"图层"控制面板中生成新的形状图层"圆角矩形\选择"窗口＞属性"

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

(3)按Ctrl+J组合键，复制图层，在“图层"控制面板中生成新的形状图层"圆角矩形1拷

贝"。在属性栏中将"填充"颜色设为深绿色(77、105、110、在"属性"面板中进行设置，如图

所示，按Enter键确定操作，效果如图所示。

在"属性"面板中单击"蒙版"按钮，设置如图所示，按Enter键确定操作，效果如图所示。

(4)在喝层"控制面板中将‘圆角矩形1拷贝"图层的"不透明度”选项设为30%,并将其

拖曳到"圆角矩形1”图层的下方，如图所示，效果如图所示。

8S

Q咕-Q®Tn3*

正nt-Ta明口

豌：3/*IS6耽：100%v

(5)使用浏览器打开Iconfont-阿里巴巴矢量图标库官网，单击右侧的“快捷登录"按钮，如图

所示，在弹出的对话框中选择登录方式并登录，如图所示。在搜索框中输入文字"搜索"，如图所

示，并单击右侧的搜索按钮，进入图标页面。

iconfont*■页«**rawra除助曲3.・•(—g^oAQ)&G⑯d

(6)在页面中将鼠标指针放置在需要下载的图标上，如图所示。单击下方的"下载"按钮，在

弹出的对话框中设置需要的颜色，如图所示。单击"AI下载"按钮，在弹出的对话框中设置文件

名及下载路径，如图所示，单击"下载"按钮，下载矢量图标。

QQQQQQQQQ

99999909999

Q@QQQQQ

mmssft****Sntn

QQQQQQQQQ

QQQQQQQQQ

nnnasnnSK

QQQQQQQ

Itsm•*99MWffMI

Q

(7)在“图层”控制面板中选中"圆角矩形1"图层。选择"文件>置入嵌入对象"命令，弹

出"置入嵌入的对象"对话框。选择云盘中的"Ch04>制作旅游类App导航栏>素材>02"文

件，单击“置入"按钮，将图片置入到图像窗口中。将其拖曳到适当的位置，按Enier键确定操作,

在“图层"控制面板中生成新的图层并将其命名为“方形网格系统"。在“属性”面板中进行设置，

如图所示，按Enter键确定操作，效果如图所示。

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

制作旅游类App导航栏>素材>01”文件，单击"置入"按钮，将图标置入到图像窗口中。将

其拖曳到适当的位置并调整其大小，按Enter键确定操作，在"图层"控制面板中生成新的图层并

将其命名为"搜索:在"属性"面板中进行设置，如图所示，按Enter键确定操作,将图标置于

图标盒子中，效果如图所示。

a］跌曲幅;m

w；E

X;SO像素Y：27ft(

Ol^ps

内容

(8)单击"方形网格系统”图层左侧的眼睛图标®,隐藏图层，如图所示。选择“横排文字"

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

"颜色"设为浅灰色(193、193、193),其他选项的设置如图所示，按Enter键确定操作，效果如

图所示，在“图层"控制面板中生成新的文字图层。

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

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

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

效果如图所示。

1°国庆去哪玩XI】

(10)按Ctrl+J组合键，复制图层，在“图层"控制面板中生成新的形状图层"圆角矩形2拷

贝"。在属性栏中将"填充"颜色设为深绿色(77、105、1101在"属性"面板中进行设置，如图

所示，按Enter键确定操作，效果如图所示。在"属性"面板中单击"蒙版"按钮，设置如图所示,

按Enler键确定操作，效果如图所示。

(11)在''图层,'控制面板中将"圆角矩形2拷贝"图层的"不透明度”选项设为30%,并将其

拖曳到"圆角矩形2”图层的下方，如图所示，效果如图所示。

(%)在喝层”控制面板中选中“圆角矩形2"图层。选择"横排文字”工具T.,在适当的位

置输入需要的文字并选取文字，在"字符"面板中进行设置，将"颜色"设为深灰色(52、52、

52),其他选项的设置如图所示，按Enter键确定操作，效果如图所示,在“图层"控制面板中生

成新的文字图层。

(13)按住Shift键的同时，单击"圆角矩形1拷贝"图层，将需要的图层同时选取。按Ctrl+G

组合键，群组图层并将其命名为“导航栏"，如图所示。旅游类App导航栏制作完成。

4.3标签栏的设计

标签栏作为UI设计中的常用组件之一，具有指导用户、操作灵活的特点。下面分别从概念、

类型以及规则这三个方面进行按钮控件的讲解。

4.3.1标签栏的概念

标签栏(tab栏)，位于App的底部，提供了位置指示及页面切换的作用。Android中，Material

Design称其为底部应用栏(bottomAppBar),如图所示。

4.3.2标签栏的类型

1.背景样式

(I)白色或浅灰

区分明显，最常用，如图所示。

Q0DQ

叮当快药叮当商城清单列表我的

叮当快药App标签栏

(2)黑色或深灰

适用于短视频、工具类型，如图所示。

抖音App标签栏

2.展示方式

(1)图标+文字

识别高，多数App采用的展示方式，如图所示。

。吕◎逑

发现书架看一看我

微信读书App标签栏

(2)图标

识别性不高，适用于小众文艺类，如图所示。

«0na

花瓣App标签栏

(3)图标+文字+舵式

适用于社区型App,具有发布需求，如图所示。

转转App标签栏

(4)文字

样式单一，适用于短视频类型，如图所示。

首页商城消券,我

小红书App标签栏

4.3.3标签栏的规则

1.标签栏的尺寸

iOS标签栏宽度：375pt,高度：49PL

Android标签栏宽度：360dp,高度：56dp0

通用的图标设计尺寸：24”。

FAB(浮动操作按钮)设计尺寸：56pto

图标下文字设计尺寸：10pto

如图所示。

375p((750px)

]l9pK98px)

-3M6<)px>m固固固固

文字了文字文字文字

10p«20px)

IPhone6/7/8

375Pl(1125px)

1---------------------------

劭即［固•■固9E

文字羊文字文字文字83pK248px)

10pt(30px)

iPhoneX

+

|丁16Pt

56pt24pt1

|16Pt

HFTH

16pt56pt24pt16pt

标签栏尺寸示意图

2.标签栏的布局

标签栏个数在3~5个。

屏幕等分：最常用，计算方式，列宽=屏幕宽度/标签个数。

边距删减等分：减去左右两边间距，再进行等分。

图标左右间距相等：用于标签数量为3个的时候。

如图所示。

边距删减等分

图标左右间距相等

3.标签栏的图标

（।）标签栏图标尺寸

通用的图标设计尺寸：24%不同形状的图标会产生不同的视觉重量，为保持视觉平衡，不同

形状的图标设计尺寸可参考下图。

方形：宽高I8px圆形:直径20Px垂直矩形：高度20Px.宽度I6px水平矩形:高度16Px.宽度20px

（2）图标的切换状态

线性（未选中状态）-面性（选中状态），反馈最强烈，最常用，如图所示。

❷笆▽阳久

首页理财口碑朋友我的

支付宝App

面性（未选中状态）-面性（选中状态），安全厚重，适用于阅读、工具类产品，如图所示。

首页分类我的学习帐号

网易云课堂App

线性（未选中状态）-线面（选中状态），活泼趣味，适用于年轻化产品，如图所示。

O0G?©Q

首页攻略消息行程我的

飞猪App

线性（未选中状态＞线性（选中状态），精致简洁，适用于生活类产品，如图所示。

。。中O

首页看点消息我的

贝壳找房App

（3）图标的风格样式

•黜

2px:精致时尚，如图所示。

目

阅读学院招聘我的

产品经理App底部标签栏

AQQUELH

首页消息课程简历我的

前程无忧App底部标签栏

3px：通用常规，如图所示。

L/0£

微信通讯录发现我

微信App底部标签栏

0©@Q

O网校孩子家长大学我的

一起学App底部标签栏

4Px：年轻厚重，如图所示。

首页装修干货我的

好好住App底部标签栏

含日②2

首页头条发现我的

众安保险App底部标签栏

•面性：稳重扎实，运动类、阅读类，如图所示。

发现学习计划知识城邦已购我的

得到App底部标签栏

O®D

首页分类我的学习帐号

网易云课堂App底部标签栏

线面：活泼趣味，选中状态，如图所示。

M省司SO

首页换新机服务站我的

爱回收App标笠栏

+

i超多人明买」a

闲鱼鱼塘卖闲置消息我的

闲鱼App标签栏

4.3.4课堂案例一制作旅游类App标签栏

【案例设计要求】

1.运用软件Illustrator和Photoshop制作标签栏，设计效果、展示效果如图所示。

2.标签栏尺寸：750px(宽)x98px(高工

3.符合标签栏的设计规则。

【案例学习目标】学习使用软件Illustrator和Photoshop制作标签栏。

G0。囹③

首页攻略消息行程我的

设计效果图

G0。囹耸

首页攻略消息行程我的

展示效果图

【案例知识要点】在Illustrator软件中，使用矩形工具绘制形状，使用钢笔工具添加锚点,使

用直接选择工具调整锚点到适当的位置并制作圆角效果。在Photoshop软件中，使用矩形工具和属

性面板确定参考线位置,使用置入嵌入对象命令置入图标，使用横排文字工具输入文字。

(1)在Illustrator中,按Ctrl+N组合键，弹出"新建文档”对话框，设置宽度为24Px,高度

为24Px,取向为横向，颜色模式为RGB,分辨率为72像素/英寸，单击"创建"按钮，新建一个

文件。

(2)选择"编辑>首选项>常规"命令，弹出"首选项”对话框，将"键盘增量”选项设

为Ipx,如图所示。选择“单位”选项，切换到相应面板中进行设置，如图所示。

[”■■)

(3)选择"参考线和网格”选项,切换到相应的面板，将"网格线间隔”选项设为Ipx,如图

所示，单击“确定"按钮。

(4)选择“视图>显示网格’命令，显示网格。选择"视图>对齐网格"命令，对齐网格。

选择"视图>对齐像素"命令，对齐像素。

(5)选择"文件>打开"命令，弹出"打开"对话框，选择云盘中的"ChO4>制作旅游类

App标签栏>素材>02"文件，单击“打开"按钮，如图所示。

(6)选择"选择"工具k,选取网格系统，按Ctrl+C组合键，复制图形。返回到正在编辑的

页面，按Ctrl+V组合键，将其粘贴到制作旅游类App标签栏页面中，并拖曳复制的网格系统到适

当的位置，效果如图所示。

(7)选择"矩形"工具Q,在页面中单击鼠标左键，弹出"矩形"对话框，选项的设置如图

所示。单击"确定"按钮，出现一个圆角矩形。设置描边色为灰色(153、153、153),填充描边,

并设置填充色为无，效果如图所示。

(8)选择"窗口＞描边"命令,弹出"描边"控制面板,将"粗细”选项设为1.5px,“对齐

描边"选项设为"使描边内侧对齐"，其他选项的设置如图所示，效果如图所示。

(9)选择"钢笔"工具，，在矩形上方中间的位置单击鼠标左键，添加一个锚点，在“属性”

控制面板中，设置"X”选项为12pxJY"选项为Ipx,如图所示，效果如图所示。选择"直接选

择”工具K,按住Shift键的同时，选取需要的锚点，将其垂直向下拖曳7px的位置，效果如图

标

(10)选择"钢笔"工具",，在形状右侧的位置单击鼠标左键,添加一个锚点，在“属性"控

制面板中，设置"X”选项为24px,"Y”选项为l()px,如图所示，效果如图所示。选择"直接选

择”工具,按住Shift键的同时，选取需要的锚点，将其水平向右拖曳5px的位置，效果如图

麻。

(11)选择"钢笔"工具方,在形状左侧的位置单击鼠标左键，添加T锚点，在“属性"控

制面板中,设置"X"选项为Opx,"Y"选项为10px,如图所示，效果如图所示。选择"直接选

择"工具3,按住Shift键的同时，选取需要的锚点，将其水平向左拖曳5px的位置，效果如图

所示。

(12)选择"直接选择"工具乂,在形状右侧选取需要的锚点，将其垂直向下拖曳2px的位

置，效果如图所示。按住Shift键的同时，选取需要的锚点，将其垂直向下拖曳3px的位置，效果

如图所示。使用相同的方法调整右侧的锚点，效果如图所示。

(13)选择"钢笔"工具",，在形状下方的位置单击鼠标左键,添加一个锚点，在“属性"控

制面板中，设置"X"选项为10px,"Y"选项为22px,如图所示,效果如图所示。使用相同的方

法，分别在"X"选项为Upx、13Px和14px,"Y"选项均为22px的位置添加三个锚点，效果如图

麻。

(14)选择"直接选择"工具号,在形状下方选取需要的锚点，将其垂直向上拖曳5px的位

置，效果如图所示。选取左侧的锚点，将其水平向右拖曳Ipx的位置，效果如图所示。使用相同

的方法调整右侧的锚点，效果如图所示

(15)选取形状右下角的锚点，如图所示，显示边角点,如图所示。双击边角点，弹出“边角"

对话框，设置"半径"选项为2px,其他选项的设置如图所示。单击“确定"按钮，效果如图所示。

(16)使用相同的方法调整左下角的锚点，效果如图所示。选取形状顶端的锚点，如图所示,

显示边角点，如■图所示。■■

双击边角点，弹出“边角"对话框，设置"半径"选项为Ipx,其他选项的设置如图所示。单

击“确定"按钮，效果如图所示。使用相同的方法调整另外两个锚点，效果如图所示。

--_•••--、■-、

(17)选择"选择"工具4，选取图标。在"属性"控制面板中，单击"保持宽度与高度比例”

按钮R,设置"高"选项为21px,其他选项的设置如图所示。单击"保持宽度与高度比例"按钮

R,设置"宽”选项为22px,"Y”选项设为12px,其他选项的设置如图所示，效果如图所示。

(18)选择“画板"工具-0,按住Ak+Shifl组合键的同时，将"画板1"垂直向下拖曳到适

当的位置，如图所示，在文件中生成新的画板“画板2"。选择"选择”工具b,选取“画板2”

中的图标，设置描边色为橘黄色(255、151、1),效果如图所示。

(19)保持图形的选取状态，按Ctrl+C组合键，复制图形，按Ctrl+F组合键，原位粘贴图形,

设置填充色为橘黄色(255、151、1)，填充图形，并设置描边色为无，效果如图所示。

(20)选择"窗口＞透明度"命令，弹出“透明度”控制面板，将"不透明度”选项设为30%,

其他选项的设置如图所示。在图形上单击鼠标右键，在弹出的快捷菜单中选择"排列〉后移一层"

命令，如图所示，将形状后移一层，效果如图所示。

(21)使用相同的方法分别绘制其他图标,效果如图所示。按住Shift键的同时,分别单击图

标的网格系统，将其同时选取，按Ctrl+3组合键，隐藏网格系统，效果如图所示。按Ctrl+S组合

键，将文件保存在"Ch04>制作旅游类App标签栏>素材”的路径中，命名为"01疝”。

M—

-1©|<3|画@

管国画画倒I

(22)在Photoshop中，按Ctrl+N组合键,弹出"新建文档"对话框，将宽度设为750像素，

高度设为98像素,分辨率设为72像素/英寸，背景内容设为白色，如图所示。单击“创建"按钮,

完成文档新建。

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

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

(24)选择“矩形”工具口.，在属性栏的“选择工具模式”选项中选择“形状”，将“填充”颜色设为

黑色，"描边"颜色设为无。在图像窗口中适当的位置绘制矩形，在“图层'控制面板中生成新的形

状图层'矩形1二选择“窗口>属性"命令，弹出"属性"面板，在面板中进行设置。在"Wr

选项中输入输入数值，如图所示，按Enter键确定操作，如图所示。去除小数点后的数值，保留整

(25)按Ctrl+R组合键，显示标尺。选择"视图>对齐到〉全部"命令。在图像窗口左侧标

尺上单击鼠标并水平向右进行拖曳，在矩形右侧锚点的位置松开鼠标，完成参考线的创建。效果

如图所示。

(26府图像窗口上方标尺上单击鼠标并垂直向下进行拖曳，在矩形上方锚点的位置松开鼠标,

完成参考线的创建，如图所示。使用相同的方法，在矩形下方创建一条参考线，效果如图所示。

(27)按Ctrl+T组合键，在图形周围出现变换框，如图所示。在图像窗口左侧标尺上单击鼠标

并水平向右进行拖曳，在矩形中心点的位置松开鼠标，完成参考线的创建，效果如图所示。

(28)选择"移动”工具也，按住Shift键的同时，将矩形水平向右移动到适当的位置，使矩

形左侧贴齐辅助线，如图所示。使用上述的方法，分别在位于矩形中心和矩形右侧的位置添加两

条垂直辅助线，如图所示。

(29)使用相同的方法，分别添加四条垂直辅助线，如图所示。选择,矩形”工具口，在“属

性"面板中进行设置，如图所示。

••X

□□硼彬Mil

W:13800H:

X:SOOftKM

■「1信索---

口vEv同v.

□。像未。僧东□

按QH+T组合键，在图形周围出现变换框，在图像窗口左侧标尺上单击鼠标并水平向右进行

拖曳，在矩形中心点的位置松开鼠标，完成参考线的创建，效果如图所示。按Enter键确定操作,

在"图层"控制面板中选中"矩形I"图层，按Delele键将其删除，效果如图所示。

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