UI设计基础培训教程

案例赏析

案例赏析

案例赏析

案例赏析

案例赏析

案例赏析

案例赏析

案例赏析

UI设计基础培训教程

任媛媛　编著

人民邮电出版社

北京

图书在版编目（CIP）数据

UI设计基础培训教程/任媛媛编著.--北京：人民邮电出版社，2020.7

ISBN　978-7-115-53594-8

Ⅰ.①U…　Ⅱ.①任…　Ⅲ.①人机界面—程序设计—教材　Ⅳ.①TP311.1

中国版本图书馆CIP数据核字（2020）第046862号

◆编著　任媛媛

责任编辑　张丹阳

责任印制　马振武

◆人民邮电出版社出版发行　　北京市丰台区成寿寺路11号

邮编　100164　　电子邮件　315@ptpress.com.cn

网址　https://www.ptpress.com.cn

涿州市京南印刷厂印刷

◆开本：787×1092　1/16

印张：12.5　　彩插：4

字数：420千字　　2020年7月第1版

印数：1-3000册　　2020年7月河北第1次印刷

定价：45.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。我们将提供及时、准确、专业的学习服务。

第1章 UI设计的常用工具

Photoshop和Illustrator都是设计和制作UI的工具。Illustrator常用来制作图标和字体，Photoshop常用来进行界面设计。

·掌握Photoshop的软件界面和常用工具

·掌握Illustrator的软件界面和常用工具

·掌握Illustrator文件导入Photoshop的方法

1.1 Photoshop的界面介绍

启动Photoshop CC 2017，系统会自动显示软件界面，如图1-1所示。

提示

Photoshop CC 2017的默认软件界面由“菜单”“工具”“选项”“属性”“图层”和“颜色”共6部分组成，如图1-4所示。

除菜单栏外，其他面板都可以单独移动、展开和关闭，如图1-5所示。用户可根据自己的需要，保留需要的功能面板。

拖曳面板到界面的边缘，就可以将面板固定在相应的位置。如果用户想还原至初始界面，执行“窗口>工作区>基本功能（默认）”菜单命令即可。

1.2 UI在Photoshop中的常用工具

虽然Photoshop的工具有很多，但用在UI设计中的只有一小部分，如“移动工具”“矩形工具”和“钢笔工具”等。

1.2.1 课堂案例：用常用工具制作界面

本案例是在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所示。

1.2.2 移动工具

“移动工具”（快捷键为V）是常用的工具之一，无论是移动图层、元素，还是移动其他文档到当前文档，都需要使用该工具。图1-29所示是“移动工具”的选项栏。

“移动工具”除了可以移动图层外，还可以将图层进行对齐。当同时选中两个或两个以上的图层时，单击图1-30所示的相应按钮可以实现图层对齐。对齐方式包括“顶对齐”“垂直居中对齐”“底对齐”“左对齐”“水平居中对齐”和“右对齐”，如图1-31所示。

1.2.3 自由变换工具

“自由变换”工具（快捷键为Ctrl+T）可以将场景中的对象放大、缩小或旋转。

选中需要调整的对象，执行“编辑>自由变换”菜单命令，对象的周围会出现一个调整框，如图1-32所示。

按住Shift键并使用鼠标移动4个角点，可以均匀放大或缩小选中的对象，如图1-33所示。

按住Shift键和Alt键并使用鼠标移动4个角点，可以沿中心点等比例放大或缩小选中的对象，如图1-34所示。

将鼠标放在4个角点外，可以观察到光标变成圆弧形箭头，这时拖曳鼠标就可以旋转对象，如图1-35所示。若按住Shift键则以15°为一个单位精确旋转对象，如图1-36所示。

1.2.4 矩形工具

“矩形工具”（快捷键为Shift+U）可以创建矩形的路径或填充区域，其选项栏如图1-37所示。

填充：设置矩形的填充颜色，形成一个实心的矩形，如图1-38所示。

描边：设置矩形描边的颜色，形成一个空心的矩形，如图1-39所示。

描边宽度：设置描边的线框宽度，单位为像素，如图1-40所示。

描边选项：设置描边线框的类型、对齐方式、角点类型和端点类型，如图1-41所示。

1.2.5 圆角矩形工具

“圆角矩形工具”（快捷键为Shift+U）与“矩形工具”类似，只是增加了圆角的“半径”选项，如图1-42所示。

“半径”数值越大，矩形的圆角越圆滑，如图1-43所示。

提示

对于已经创建完成的圆角矩形，如果需要修改其参数，可以在“属性”面板中进行修改，如图1-44所示。

1.2.6 椭圆工具

“椭圆工具”（快捷键为Shift+U）可以绘制椭圆形或圆形，其选项栏与“矩形工具”基本相同，如图1-45所示。

按住Shift键，然后使用“椭圆工具”绘制时，会绘制一个圆形，如图1-46所示。

提示

若将椭圆形的长和宽数值设置的相同，也同样是绘制圆形。

1.2.7 钢笔工具

“钢笔工具”（快捷键为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.2.8 直接选择工具

“直接选择工具”可以对“钢笔工具”或“矩形工具”等生成的锚点位置进行选择、移动和删除等操作，从而改变路径的走势和弧度，如图1-54所示。

1.2.9 横排文字工具

“横排文字工具”（快捷键为T）可以输入横向排列的文字，其选项栏如图1-55所示。

切换文本方向：单击该按钮后，横向排列的文字会变成竖向排列。

：设置输入文本的字体。该列表中的字体与计算机中安装的字体一致。

：设置输入文字的大小。

：用于消除输入文字的锯齿，单击下拉菜单，有“锐利”“犀利”“浑厚”和“平滑”选项，如图1-56所示。

：设置输入文字的对齐方式。

：设置输入文字的颜色。

创建文字变形：单击该按钮会弹出“变形文字”对话框，用于设置文字的变形方式，如图1-57所示。

切换字符和段落面板：单击该按钮会弹出“字符”和“段落”面板，如图1-58所示。在该面板中可以详细设置文字的各项参数。

1.3 Illustrator的界面介绍

启动Illustrator CC 2017，系统会自动显示软件界面，如图1-59所示。

提示

Illustrator CC 2017的软件界面构成与Photoshop CC 2017大致相同，由“菜单”“控制”“工具”和“控制面板”组成，如图1-62所示。

单击工具栏上方的三角形按钮，可以将工具栏从两列分布变成一列分布，如图1-63所示。这里罗列了在Illustrator中绘制图形所需要的工具。

单击控制面板上方按钮，可以展开右侧所有的面板，这些面板在绘制图形时可以方便地设置各种参数，如图1-64所示。

与Photoshop CC 2017的界面一样，这些面板都可以移动、关闭和组合。如果用户想恢复默认的界面，执行“窗口>工作区>基本功能”菜单命令即可。

提示

读者可根据使用情况，保留需要的面板，关闭不常用的面板。这样既可以提高制作效率，也能增加可操作界面的大小。

1.4 UI在Illustrator中的常用工具

虽然Illustrator的工具有很多，但用在UI设计中的只有一小部分，如“选择工具”“矩形工具”和“钢笔工具”等。

1.4.1 课堂案例：用常用工具制作手机图标

本案例是在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所示。

1.4.2 选择工具

“选择工具”（快捷键为V）可以选中场景中的任意对象，也可以拖曳鼠标，用框选的方式一次选中多个对象，如图1-92和图1-93所示。

按住Shift键可以加选或减选多个对象。按住Alt键并使用“移动工具”移动选中的对象，可以将该对象移动并复制一份，如图1-94所示。

1.4.3 直接选择工具

Illustrator中的“直接选择工具”（快捷键为A）与Photoshop中的功能和用法一样，都是选择路径锚点的工具。选中的锚点可以移动位置，也可以被删除，如图1-95所示。

1.4.4 钢笔工具

Illustrator中的“钢笔工具”（快捷键为P）与Photoshop中的功能和用法一样，都是绘制路径的工具，其控制栏如图1-96所示。

转换：选中的锚点可以被转换为尖角或转换为平滑，如图1-97所示。

删除所选锚点：选中锚点后，单击此按钮，选中的锚点会被删除，如图1-98所示。

在所选锚点处剪切路径：选中锚点后单击此按钮，会将完整的路径断开，形成两个独立的路径，如图1-99所示。

1.4.5 矩形工具

“矩形工具”（快捷键为M）的操作方法与Photoshop中的“矩形工具”相同，其控制栏如图1-100所示。

填充：设置矩形填充的颜色，如图1-101所示。

描边：设置矩形描边的颜色，如图1-102所示。

描边粗细：设置描边线条的像素。

提示

在右侧的“描边”面板中，可以设置描边线条的粗细、端点、边角和对齐描边等属性，如图1-103所示。

不透明度：设置矩形显示的不透明度，默认为100％，即完全显示。

形状：单击可弹出下拉面板，设置矩形的长度、宽度、旋转和圆角等参数，如图1-104所示。

提示

在右侧的“变换”面板中也可以修改相应的参数，如图1-105所示。

1.4.6 圆角矩形工具

“圆角矩形工具”只是在“矩形工具”的基础上增加了“圆角半径”参数，用户在矩形的基础上修改“圆角半径”的参数就可以创建圆角矩形，如图1-106所示。

除了在“变换”面板中设置“圆角半径”参数外，也可以直接在矩形对象上设置圆角效果。选中矩形，会发现在4个角点的内侧有小圆点，如图1-107所示。

选中需要转换为圆角的小圆点按住鼠标并拖曳，就可以直观地看到直角变成圆角，如图1-108所示。需要注意的是，该功能只存在于Photoshop CC 2017及其以上版本中。

1.4.7 椭圆工具

“椭圆工具”（快捷键为L）的操作方法与Photoshop相同，其选项栏如图1-109所示。

1.4.8 多边形工具

“多边形工具”可以创建边数≥3的多边形。选中“多边形工具”后在画板上单击鼠标，会弹出“多边形”对话框，如图1-110所示。在对话框内，可以设置多边形的“半径”和“边数”两个参数，设置完成后单击“确定”按钮，就会在画板上生成相应的多边形，如图1-111所示。

在“变换”面板中，可以继续设置创建的多边形的参数，如图1-112所示。

1.4.9 文字工具

“文字工具”（快捷键为T）是在画板上输入文字的工具，其控制栏如图1-113所示。

字符：单击该按钮会弹出“字符”面板，按Ctrl+T组合键也可弹出该面板，如图1-114所示，在面板中可设置文字的字体、大小和字间距等参数。

提示

“字符”面板默认情况下不在软件右侧的控制面板中，用户可以将其移动到控制面板，方便制作时使用。

段落：设置多行文字对齐的方式，在“段落”面板中有更为详细的对齐方式，如图1-115所示。

制作封套：单击该按钮可以让平直排列的文字变成弧形排列，如图1-116所示。单击该按钮后，会弹出“变形选项”面板，在面板中可以设置文字变形的“样式”和“弯曲”等各项参数，如图1-117所示。

1.5 在Photoshop中导入Illustrator制作文件的方法

在日常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所示。

课堂练习：在Illustrator中绘制闹钟App功能图标

本案例是在Illustrator中绘制闹钟App的功能图标，效果如图1-121所示。本案例制作的图标会导入课后习题的案例中。

课后习题：在Photoshop中制作闹钟App界面

本案例是在Photoshop中制作闹钟App的界面，效果如图1-122所示。本案例制作相对简单，在界面中输入相应的文字和制作开关按钮，其他图标从课堂练习的案例中导入即可。