
1.5 在Photoshop中导入Illustrator制作文件的方法
在日常UI设计中,图标和字体的设计大多是在Illustrator中进行。相比Photoshop,在Illustrator中操作会更加便捷,且放大Illustrator的画板,所绘制的图形不会出现像素化的锯齿,方便观察绘制效果,如图1-118所示。


图1-118
制作界面和切图等操作又需要在Photoshop中进行,因此,需要将Illustrator中制作好的文件导入Photoshop中。将Illustrator中的图形导入Photoshop中时,需要逐个导入,不能整体导入,否则所有的图形会生成一个图层,影响后续操作。
第1步:选中Illustrator中需要导入的图形,一定确保这个图形已经“联集”成了一个整体。
第2步:按Ctrl+C组合键将其复制。
第3步:在Photoshop中按Ctrl+V组合键,这时系统会弹出“粘贴”对话框。在对话框中选中“形状图层”选项,并单击“确定”按钮,如图1-119所示。

图1-119
第4步:由于每个图形在绘制时未必是相同大小,需要统一大小。利用“自由变换”工具对每个图形的宽度和高度进行调整,在调整时要单击“保持长宽比”按钮,让宽度和高度一起调整。在调整时,只要保持其中最大的一个值相同即可,如图1-120所示。

图1-120
课堂练习:在Illustrator中绘制闹钟App功能图标
素材位置 无
实例位置 实例文件>CH01>课堂练习:在Illustrator中绘制闹钟App功能图标.ai
视频名称 课堂练习:在Illustrator中绘制闹钟App功能图标.mp4
学习目标 练习制作UI图标的方法
本案例是在Illustrator中绘制闹钟App的功能图标,效果如图1-121所示。本案例制作的图标会导入课后习题的案例中。

图1-121
课后习题:在Photoshop中制作闹钟App界面
素材位置 无
实例位置 实例文件>CH01>课后习题:在Photoshop中制作闹钟App界面.psd
视频名称 课后习题:在Photoshop中制作闹钟App界面.mp4
学习目标 练习制作UI的常用工具和导入AI文件的方法
本案例是在Photoshop中制作闹钟App的界面,效果如图1-122所示。本案例制作相对简单,在界面中输入相应的文字和制作开关按钮,其他图标从课堂练习的案例中导入即可。

图1-122