UI设计基础培训教程：全彩版
人民邮电出版社
北京
图书在版编目（CIP）数据
UI设计基础培训教程：全彩版 / 任媛媛编著.--北京：人民邮电出版社，2020.7
ISBN 978-7-115-53595-5
Ⅰ.①U… Ⅱ.①任… Ⅲ.①人机界面-程序设计-教材 Ⅳ.①TP311.1
中国版本图书馆CIP数据核字（2020）第046864号
◆ 编著 任媛媛
责任编辑 张丹阳
责任印制 马振武
◆ 人民邮电出版社出版发行 北京市丰台区成寿寺路11号
邮编 100164 电子邮件 315@ptpress.com.cn
网址 http://www.ptpress.com.cn
北京瑞禾彩色印刷有限公司印刷
◆ 开本：787×1092 1/16
印张：12.5 彩插：4
字数：420千字 2020年7月第1版
印数：1–2800册 2020年7月北京第1次印刷
定价：69.00元
读者服务热线：(010)81055410 印装质量热线：(010)81055316
反盗版热线：(010)81055315
广告经营许可证：京东市监广登字20170147号
本书完全针对零基础的读者编写，是入门级读者快速而全面掌握UI设计的参考书。
全书以各种重要技术和常见界面为主线，全面介绍了UI设计的工具、设计理论和界面制作方法，包括Photoshop和Illustrator的常用工具，UI设计的理论、原则和规范，常见界面的概念和制作，切图和标注，以及艺术二维码的制作方法。课堂案例的实际操作可以帮助读者快速上手，熟悉设计思路和制作要点；课堂练习和课后习题可以拓展读者的实际操作能力，巩固所学的知识点。同时，提供本书课堂案例、课堂练习和课后习题的素材文件、实例文件和在线视频，UI配色方案、UI图标、免抠素材及配色卡，以及为教师准备的教学大纲、教学规划参考及PPT课件等专享资源。另外，本书所有内容均采用中文版Photoshop CC 2017和Illustrator CC 2017进行编写，读者最好使用此版本软件进行学习。
本书可以作为想从事和刚从事UI设计工作人员的自学参考用书，也适合作为院校和培训机构设计专业课程的教材。
随着移动互联网的发展，UI设计已变得越来越重要。UI设计不仅是单纯的美工，还需要考虑产品的定位和用户的需求，让设计的界面满足用户的需要。本书不但讲解了界面的制作方法，而且讲解了界面设计的理论知识。
全书除第2、3章外，其他各章按照“课堂案例——设计理论解析——课堂练习——课后习题”这一顺序进行力求通过课堂案例的演练使学生熟悉图标、页面的制作方法；通过对设计理论的讲解使学生掌握设计的原理和要素；通过课堂练习和课后习题拓展学生的实际操作能力，巩固学习的内容。本书在内容编写方面，力求通俗易懂，细致全面；在文字叙述方面，言简意赅、突出重点；在案例选取方面，强调案例的针对性和实用性。
本书配套学习资源中包含本书所有案例的素材文件和实例文件，同时，为了方便学生学习，本书还配备了所有案例和课后习题的多媒体教学视频，详细记录了每一个步骤，尽量让学生一看就懂。另外，为了方便教师教学，本书还配备了PPT课件等丰富的教学资源，任课老师可直接使用。
本书参考学时为64学时，其中教师讲授环节为42学时，学生实训环节为22学时，各章的参考学时如下表所示。
本书所有学习资源均可在线获得。扫描封底或“资源与支持”页上的二维码，关注我们的微信公众号，即可得到资源文件的获取方式。
由于作者水平有限，书中难免会有一些疏漏之处，希望读者能够谅解，并欢迎批评指正。
编者
2020年5月
本书由“数艺设”出品，“数艺设”社区平台（www.shuyishe.com）为您提供后续服务。
所有课堂案例、课堂练习和课后习题的素材文件、实例文件和在线视频
赠送资源（UI配色方案、UI图标、免抠素材和配色卡）
教学大纲
教学规划参考
PPT课件
“数艺设”社区平台，为艺术设计从业者提供专业的教育产品。
我们的联系邮箱是szys@ptpress.com.cn。如果您对本书有任何疑问或建议，请您发邮件给我们，并请在邮件标题中注明本书书名及ISBN，以便我们更高效地做出反馈。
如果您有兴趣出版图书、录制教学课程，或者参与技术审校等工作，可以发邮件给我们；有意出版图书的作者也可以到“数艺设”社区平台在线投稿（直接访问www.shuyishe.com即可）。如果学校、培训机构或企业想批量购买本书或“数艺设”出版的其他图书，也可以发邮件联系我们。
如果您在网上发现针对“数艺设”出品图书的各种形式的盗版行为，包括对图书全部或部分内容的非授权传播，请您将怀疑有侵权行为的链接通过邮件发给我们。您的这一举动是对作者权益的保护，也是我们持续为您提供有价值的内容的动力之源。
人民邮电出版社有限公司旗下品牌“数艺设”，专注于专业艺术设计类图书出版，为艺术设计从业者提供专业的图书、U书、课程等教育产品。领域涉及平面、三维、影视、摄影与后期等数字艺术门类，字体设计、品牌设计、色彩设计等设计理论与应用门类，UI设计、电商设计、新媒体设计、游戏设计、交互设计、原型设计等互联网设计门类，环艺设计手绘、插画设计手绘、工业设计手绘等设计手绘门类。更多服务请访问“数艺设”社区平台www.shuyishe.com。我们将提供及时、准确、专业的学习服务。
Photoshop和Illustrator都是设计和制作UI的工具。Illustrator常用来制作图标和字体，Photoshop常用来进行界面设计。
· 掌握Photoshop的软件界面和常用工具
· 掌握Illustrator的软件界面和常用工具
· 掌握Illustrator文件导入Photoshop的方法
启动Photoshop CC 2017，系统会自动显示软件界面，如图1-1所示。
图1-3
提示
默认情况下，打开Photoshop CC 2017会显示“开始”工作区，显示最近打开的文件，方便用户快速调用，如图1-2所示。
如果用户不需要这个界面，则可以执行“编辑>首选项>常规”菜单命令，打开“首选项”面板，在“常规”选项卡中取消勾选“没有打开的文档时显示‘开始’工作区”选项，如图1-3所示。
Photoshop CC 2017的默认软件界面由“菜单”“工具”“选项”“属性”“图层”和“颜色”共6部分组成，如图1-4所示。
除菜单栏外，其他面板都可以单独移动、展开和关闭，如图1-5所示。用户可根据自己的需要，保留需要的功能面板。
拖曳面板到界面的边缘，就可以将面板固定在相应的位置。如果用户想还原至初始界面，执行“窗口>工作区>基本功能（默认）”菜单命令即可。
虽然Photoshop的工具有很多，但用在UI设计中的只有一小部分，如“移动工具”“矩形工具”和“钢笔工具”等。
素材位置 素材文件>CH01>01.psd
实例位置 实例文件>CH01>课堂案例：用常用工具制作界面.psd
视频名称 课堂案例：用常用工具制作界面.mp4
学习目标 掌握UI设计的常用工具
本案例是在Photoshop中用UI设计的常用工具制作一个简单的路由器界面，效果如图1-6所示。读者可以通过这个案例，简单了解UI设计的过程。
01 启动Photoshop CC 2017，执行“文件>新建”菜单命令，在弹出的“新建文档”对话框中选择“移动设备”选项卡，然后选择iPhone 6预设并单击“创建”按钮
，如图1-7所示。生成的界面显示为“画板1”，如图1-8所示。
02 绘制背景。设置“前景色”为深蓝色（R:26，G:27，B:42），然后按Alt+Delete组合键将背景进行填充，如图1-9所示。
03 绘制发光圆环。单击“创建新图层”按钮
，在背景图层上创建一个新图层，选中“椭圆工具”
并按住Shift键绘制一个520像素×520像素的圆形，然后关闭“填充”，设置“描边”颜色为白色，“描边宽度”为50像素，如图1-10所示。
04 单击“创建新的填充或调整图层”按钮
，在弹出的菜单中选择“渐变填充”选项，然后设置“渐变”为紫蓝渐变，“角度”为-35度，如图1-11所示。
圆形路径需要与背景居中对齐。切换到“移动工具”后，单击“选项”栏中的“水平居中对齐”按钮，圆环和背景就可以居中对齐。
提示
05 选中“渐变填充”图层并按住Alt键，将光标放置于“渐变填充”图层和“椭圆1”图层之间，此时光标会变成向下弯折的箭头，单击鼠标后“渐变填充”图层会成为“椭圆1”图层的剪贴蒙版，如图1-12所示。
提示
按Ctrl+Alt+G组合键也可实现剪贴蒙版的操作。
06 选中“渐变填充”图层和“椭圆1”图层，按Ctrl+E组合键将二者合并为一个图层，如图1-13所示。
07 双击“渐变填充1”图层打开“图层样式”对话框，勾选“外发光”选项，设置“混合模式”为“柔光”，“颜色”为蓝色（R:94，G:147，B:255），“不透明度”为51％，“扩展”为17％，“大小”为65像素，如图1-14所示。单击“确定”按钮
后生成的效果如图1-15所示。
08 绘制底部色块。使用“矩形工具”
在底部绘制一个高为150像素的白色矩形，如图1-16所示。
09 输入文字。使用“横排文字工具”
在圆环内输入“网络正常”，然后设置“字体”为“方正兰亭黑”，“字体大小”为55点，“颜色”为白色，如图1-17所示。
10 继续在圆环内输入“当前3台设备连接”，设置“字体大小”为30点，“颜色”为灰色（R:182，G:182，B:182），如图1-18所示。
11 绘制三角形图标。使用“多边形工具”
在画板上绘制一个倒三角形，设置“宽度”和“高度”都为30像素，“边数”为3，“填充”为浅蓝色（R:53，G:249，B:255），如图1-19所示。
12 将上一步创建的倒三角形图标复制一份旋转180°，然后设置“颜色”为紫色（R:108，G:97，B:255），如图1-20所示。
13 输入流量文字。使用“横排文字工具”在左侧的三角形旁边输入“当前下载速度”，设置“字体大小”为24点，“颜色”为灰色（R:182，G：182，B:182），如图1-21所示。
提示
由于“当前下载速度”图层与“当前3台设备连接”图层中文字的字体和颜色相同，读者也可以将“当前3台设备连接”图层复制一层，然后修改文字内容和字体大小。
14 将上一步输入的文字复制一份，修改为“当前上传速度”后放置在右侧三角形旁边，如图1-22所示。在放置文字时，需要适当调整三角形和文字的位置。
15 在“当前下载速度”下方输入文字000.1，设置“字体”为Arial，“字体大小”为70点，并设置不同的颜色，如图1-23所示。
16 按照同样的方法在“当前上传速度”下方输入000.2，如图1-24所示。
17 在数值的下方输入KB/s，具体参数如图1-25所示。
18 调整版面。此时观察页面，所有元素整体偏下。将圆环和文字内容的图层全部选中，然后向上移动一段距离调整细节，如图1-26所示。
19 绘制分割线。使用“钢笔工具”
在圆环下方画一条直线，设置“描边”颜色为灰色（R:182，G：182，B:182），宽度为3像素，并设置该图层的“不透明度”为30％，如图1-27所示。
20 添加图标。打开“素材文件>CH01>01.psd”文件，将其中的图标都放置在界面上，案例最终效果如图1-28所示。
“移动工具”
（快捷键为V）是常用的工具之一，无论是移动图层、元素，还是移动其他文档到当前文档，都需要使用该工具。图1-29所示是“移动工具”的选项栏。
“移动工具”除了可以移动图层外，还可以将图层进行对齐。当同时选中两个或两个以上的图层时，单击图1-30所示的相应按钮可以实现图层对齐。对齐方式包括“顶对齐”“垂直居中对齐”“底对齐”“左对齐”“水平居中对齐”和“右对齐”，如图1-31所示。
图1-31
“自由变换”工具（快捷键为Ctrl+T）可以将场景中的对象放大、缩小或旋转。
选中需要调整的对象，执行“编辑>自由变换”菜单命令，对象的周围会出现一个调整框，如图1-32所示。
按住Shift键并使用鼠标移动4个角点，可以均匀放大或缩小选中的对象，如图1-33所示。
按住Shift键和Alt键并使用鼠标移动4个角点，可以沿中心点等比例放大或缩小选中的对象，如图1-34所示。
将鼠标放在4个角点外，可以观察到光标变成圆弧形箭头，这时拖曳鼠标就可以旋转对象，如图1-35所示。若按住Shift键则以15°为一个单位精确旋转对象，如图1-36所示。
“矩形工具”（快捷键为Shift+U）可以创建矩形的路径或填充区域，其选项栏如图1-37所示。
填充
：设置矩形的填充颜色，形成一个实心的矩形，如图1-38所示。
描边
：设置矩形描边的颜色，形成一个空心的矩形，如图1-39所示。
描边宽度
：设置描边的线框宽度，单位为像素，如图1-40所示。
描边选项
：设置描边线框的类型、对齐方式、角点类型和端点类型，如图1-41所示。
“圆角矩形工具”
（快捷键为Shift+U）与“矩形工具”类似，只是增加了圆角的“半径”选项，如图1-42所示。
“半径”数值越大，矩形的圆角越圆滑，如图1-43所示。
提示
对于已经创建完成的圆角矩形，如果需要修改其参数，可以在“属性”面板中进行修改，如图1-44所示。
“椭圆工具”（快捷键为Shift+U）可以绘制椭圆形或圆形，其选项栏与“矩形工具”基本相同，如图1-45所示。
按住Shift键，然后使用“椭圆工具”绘制时，会绘制一个圆形，如图1-46所示。
提示
若将椭圆形的长和宽数值设置的相同，也同样是绘制圆形。
“钢笔工具”（快捷键为Shift+P）可以绘制任意形状的路径，其选项栏如图1-47所示。
“钢笔工具”配合一些快捷键可以形成不同的操作效果。
钢笔工具+Shift键：当创建新锚点时，系统会以45°或其倍数生成新的锚点，如图1-48所示。
钢笔工具+Alt键：当按住Alt键时，“钢笔工具”会暂时切换为“转换点工具”
，这时选中的点会由尖锐的角点会变成带控制手柄的圆滑角点，如图1-49所示。
钢笔工具+Ctrl键：当按住Ctrl键时，“钢笔工具”会暂时切换为“直接选择工具”
，选中的锚点可以移动位置或改变角度，如图1-50所示。
“钢笔工具”不仅能绘制直线还能绘制曲线，二者在操作上有些区别。
绘制直线：选中“钢笔工具”后在图像的任意位置单击一次，创建第1个锚点，然后将鼠标指针移动到图像的其他位置再次单击鼠标，创建第2个锚点。与此同时，创建的两个锚点之间会生成一条直线，如图1-51所示。
提示
当设置“描边”的颜色和宽度后，才能在图像上看到生成的直线，若设置的是“填充”的颜色，则可能会生成一个色块区域，如图1-52所示。
绘制曲线：选中“钢笔工具”在图像的任意位置按住鼠标不放并拖曳，此时就建立了第1个曲线锚点，然后将鼠标指针移动到图像的其他位置再次按住鼠标不放并拖曳，形成第2个曲线锚点。与此同时，新建的两个锚点之间会生成一条曲线，如图1-53所示。调整锚点的控制手柄可以调整曲线弯曲的弧度。
“直接选择工具”可以对“钢笔工具”或“矩形工具”等生成的锚点位置进行选择、移动和删除等操作，从而改变路径的走势和弧度，如图1-54所示。
“横排文字工具”（快捷键为T）可以输入横向排列的文字，其选项栏如图1-55所示。
切换文本方向
：单击该按钮后，横向排列的文字会变成竖向排列。
：设置输入文本的字体。该列表中的字体与计算机中安装的字体一致。
：设置输入文字的大小。
：用于消除输入文字的锯齿，单击下拉菜单，有“锐利”“犀利”“浑厚”和“平滑”选项，如图1-56所示。
：设置输入文字的对齐方式。
：设置输入文字的颜色。
创建文字变形
：单击该按钮会弹出“变形文字”对话框，用于设置文字的变形方式，如图1-57所示。
切换字符和段落面板
：单击该按钮会弹出“字符”和“段落”面板，如图1-58所示。在该面板中可以详细设置文字的各项参数。
启动Illustrator CC 2017，系统会自动显示软件界面，如图1-59所示。
图1-61
提示
与Photoshop CC 2017一样，打开Illustrator CC 2017也会显示“开始”工具区，显示最近打开的文件，方便用户快速调用，如图1-60所示。
如果不需要这个界面，则可以执行“编辑>首选项>常规”菜单命令，打开“首选项”面板，在“常规”选项卡中取消勾选“未打开任何文档时显示‘开始’工作区”选项，如图1-61所示。
Illustrator CC 2017的软件界面构成与Photoshop CC 2017大致相同，由“菜单”“控制”“工具”和“控制面板”组成，如图1-62所示。
单击工具栏上方的三角形按钮
，可以将工具栏从两列分布变成一列分布，如图1-63所示。这里罗列了在Illustrator中绘制图形所需要的工具。
单击控制面板上方按钮，可以展开右侧所有的面板，这些面板在绘制图形时可以方便地设置各种参数，如图1-64所示。
与Photoshop CC 2017的界面一样，这些面板都可以移动、关闭和组合。如果用户想恢复默认的界面，执行“窗口>工作区>基本功能”菜单命令即可。
提示
读者可根据使用情况，保留需要的面板，关闭不常用的面板。这样既可以提高制作效率，也能增加可操作界面的大小。
虽然Illustrator的工具有很多，但用在UI设计中的只有一小部分，如“选择工具”“矩形工具”和“钢笔工具”等。
素材位置 无
实例位置 实例文件>CH01>课堂案例：用常用工具制作手机图标.ai
视频名称 课堂案例：用常用工具制作手机图标.mp4
学习目标 掌握Illustrator绘制图标的常用工具的用法
本案例是在Illustrator中用UI设计的常用工具制作手机中常见的图标，效果如图1-65所示。读者可以通过这个案例，简单了解UI图标设计的过程。
01 启动Illustrator，使用“矩形工具”
在视口中绘制一个48px×48px的浅灰色矩形并关闭“描边”，如图1-66所示。
提示
在默认情况下，Illustrator的默认单位是“毫米”。执行“编辑>首选项”菜单命令，在弹出的“首选项”对话框中选择“单位”选项卡，然后设置“常规”为“像素”，如图1-67所示。
02 绘制信号图标。信号图标由5条长度不同的竖线组成。使用“矩形工具”绘制一个6px×6px的矩形，设置“填充”为黑色，关闭“描边”，如图1-68所示。
03 将上一步绘制的矩形复制4份，并均匀排列，如图1-69所示。
04 选中复制的4个矩形，然后依次增加其高度，如图1-70所示。
05 使用“钢笔工具”
绘制图1-71所示的辅助线，其描边宽度不要太粗。
06 使用“直接选择工具”
逐一调整矩形的角点，使其贴合辅助线，如图1-72所示。
07 选中辅助线并删除，然后全选所有的矩形，执行“窗口>路径查找器”菜单命令，打开“路径查找器”面板，单击“联集”
按钮将其合并为一个图形，如图1-73所示。
08 按住Shift键拖曳选框的角点，将其均匀放大到合适的大小，如图1-74所示。
09 绘制Wi-Fi图标。Wi-Fi图标由4个大小不同的同心圆环组成。复制一份灰色背景，使用“椭圆工具”
在背景内绘制一个48px×48px的圆形，然后设置“描边粗细”为2pt，如图1-75所示。
10 将上一步绘制的圆形复制两份，设置其“宽度”和“高度”分别为36px×36px和24px×24px，效果如图1-76所示。
提示
圆环超出背景范围没有关系，在后面的步骤中会解决此问题。
11 使用“直接选择工具”选中图1-77所示的最外侧圆形的两个锚点，然后按Delete键将其删除，如图1-78所示。
12 按照同样的方法处理另外两个圆环，效果如图1-79所示。
13 全选3个圆环，将其旋转90°，然后均匀放大到合适的大小，如图1-80所示。
14 使用“椭圆工具”绘制一个6px×6px的圆形，设置“填充”为黑色，关闭“描边”，如图1-81所示。
15 选中3个圆环，执行“对象>路径>轮廓化描边”菜单命令，如图1-82所示。
16 选中所有的图形，在“路径查找器”中单击“联集”按钮，将其合并为一个图形，如图1-83所示。
17 绘制电量图标。电量图标由不同大小的圆角矩形组成。使用“圆角矩形工具”
绘制一个46px×20px，“圆角”为10px，“描边粗细”为2pt的圆角矩形，如图1-84所示。
18 将上一步绘制的圆角矩形复制一份，设置“宽度”为42px，“高度”为16px，“圆角”为8px，然后设置“填充”为黑色，关闭“描边”，如图1-85所示。
提示
执行“轮廓化描边”命令后，再进行“联集”操作就不会出现图形变化的问题。
19 使用“直接选择工具”选中左侧的锚点并删除，如图1-86所示。
20 继续选中上一步修改后的圆角矩形左侧的两个锚点，并向右移动一段距离，如图1-87所示。
21 使用“矩形工具”绘制一个8px×16px的矩形，设置“填充”为黑色，并关闭“描边”选项，如图1-88所示。
22 将上一步绘制的矩形向左复制一份，如图1-89所示。
23 选中圆角矩形的外框，执行“对象>路径>轮廓化描边”菜单命令，如图1-90所示。
24 选中所有图形，使用“联集”工具将其合并为一个图形，如图1-91所示。
“选择工具”
（快捷键为V）可以选中场景中的任意对象，也可以拖曳鼠标，用框选的方式一次选中多个对象，如图1-92和图1-93所示。
按住Shift键可以加选或减选多个对象。按住Alt键并使用“移动工具”移动选中的对象，可以将该对象移动并复制一份，如图1-94所示。
Illustrator中的“直接选择工具”（快捷键为A）与Photoshop中的功能和用法一样，都是选择路径锚点的工具。选中的锚点可以移动位置，也可以被删除，如图1-95所示。
Illustrator中的“钢笔工具”（快捷键为P）与Photoshop中的功能和用法一样，都是绘制路径的工具，其控制栏如图1-96所示。
转换：选中的锚点可以被转换为尖角
或转换为平滑
，如图1-97所示。
删除所选锚点
：选中锚点后，单击此按钮，选中的锚点会被删除，如图1-98所示。
在所选锚点处剪切路径
：选中锚点后单击此按钮，会将完整的路径断开，形成两个独立的路径，如图1-99所示。
“矩形工具”（快捷键为M）的操作方法与Photoshop中的“矩形工具”相同，其控制栏如图1-100所示。
填充
：设置矩形填充的颜色，如图1-101所示。
描边
：设置矩形描边的颜色，如图1-102所示。
描边粗细
：设置描边线条的像素。
图1-103
提示
在右侧的“描边”面板中，可以设置描边线条的粗细、端点、边角和对齐描边等属性，如图1-103所示。
不透明度
：设置矩形显示的不透明度，默认为100％，即完全显示。
形状：单击可弹出下拉面板，设置矩形的长度、宽度、旋转和圆角等参数，如图1-104所示。
提示
在右侧的“变换”面板中也可以修改相应的参数，如图1-105所示。
“圆角矩形工具”只是在“矩形工具”的基础上增加了“圆角半径”参数，用户在矩形的基础上修改“圆角半径”的参数就可以创建圆角矩形，如图1-106所示。
除了在“变换”面板中设置“圆角半径”参数外，也可以直接在矩形对象上设置圆角效果。选中矩形，会发现在4个角点的内侧有小圆点，如图1-107所示。
选中需要转换为圆角的小圆点按住鼠标并拖曳，就可以直观地看到直角变成圆角，如图1-108所示。需要注意的是，该功能只存在于Photoshop CC 2017及其以上版本中。
“椭圆工具”（快捷键为L）的操作方法与Photoshop相同，其选项栏如图1-109所示。
“多边形工具”
可以创建边数≥3的多边形。选中“多边形工具”后在画板上单击鼠标，会弹出“多边形”对话框，如图1-110所示。在对话框内，可以设置多边形的“半径”和“边数”两个参数，设置完成后单击“确定”按钮
，就会在画板上生成相应的多边形，如图1-111所示。
在“变换”面板中，可以继续设置创建的多边形的参数，如图1-112所示。
“文字工具”
（快捷键为T）是在画板上输入文字的工具，其控制栏如图1-113所示。
字符：单击该按钮会弹出“字符”面板，按Ctrl+T组合键也可弹出该面板，如图1-114所示，在面板中可设置文字的字体、大小和字间距等参数。
提示
“字符”面板默认情况下不在软件右侧的控制面板中，用户可以将其移动到控制面板，方便制作时使用。
段落：设置多行文字对齐的方式，在“段落”面板中有更为详细的对齐方式，如图1-115所示。
制作封套
：单击该按钮可以让平直排列的文字变成弧形排列，如图1-116所示。单击该按钮后，会弹出“变形选项”面板，在面板中可以设置文字变形的“样式”和“弯曲”等各项参数，如图1-117所示。
在日常UI设计中，图标和字体的设计大多是在Illustrator中进行。相比Photoshop，在Illustrator中操作会更加便捷，且放大Illustrator的画板，所绘制的图形不会出现像素化的锯齿，方便观察绘制效果，如图1-118所示。
制作界面和切图等操作又需要在Photoshop中进行，因此，需要将Illustrator中制作好的文件导入Photoshop中。将Illustrator中的图形导入Photoshop中时，需要逐个导入，不能整体导入，否则所有的图形会生成一个图层，影响后续操作。
第1步：选中Illustrator中需要导入的图形，一定确保这个图形已经“联集”成了一个整体。
第2步：按Ctrl+C组合键将其复制。
第3步：在Photoshop中按Ctrl+V组合键，这时系统会弹出“粘贴”对话框。在对话框中选中“形状图层”选项，并单击“确定”按钮
，如图1-119所示。
第4步：由于每个图形在绘制时未必是相同大小，需要统一大小。利用“自由变换”工具对每个图形的宽度和高度进行调整，在调整时要单击“保持长宽比”按钮
，让宽度和高度一起调整。在调整时，只要保持其中最大的一个值相同即可，如图1-120所示。
素材位置 无
实例位置 实例文件>CH01>课堂练习：在Illustrator中绘制闹钟App功能图标.ai
视频名称 课堂练习：在Illustrator中绘制闹钟App功能图标.mp4
学习目标 练习制作UI图标的方法
本案例是在Illustrator中绘制闹钟App的功能图标，效果如图1-121所示。本案例制作的图标会导入课后习题的案例中。
素材位置 无
实例位置 实例文件>CH01>课后习题：在Photoshop中制作闹钟App界面.psd
视频名称 课后习题：在Photoshop中制作闹钟App界面.mp4
学习目标 练习制作UI的常用工具和导入AI文件的方法
本案例是在Photoshop中制作闹钟App的界面，效果如图1-122所示。本案例制作相对简单，在界面中输入相应的文字和制作开关按钮，其他图标从课堂练习的案例中导入即可。
