APP首页界面切图全面解析!

切图是整个项目中必不可少的一个环节，设计师需要将切图文件整理好并交给开发手中。对于一个界面的切图，首先要分清楚哪些对象需要切图，哪些对象需要区分状态，然后再进入切图的环节。切图时，要输出iOS和Android两套切图，其切图方式基本上一样，但也有一些不同之处，例如分类和切图的命名。下面本例就以一个比较典型的首页界面来教大家如何进行切图。

切图分析

启动Photoshop CC 2017，打开本例要切图的【首页切图.psd】文件，这是一个首页界面，如图所示，首先来分析一下这个界面中的图形。界面中有些图形是可以拉升或者直接用代码写出来的，例如色块、线条、圆形和矩形之类的图形，这些简单的颜色或图形可以直接通过代码来实现。除此之外，还有一些不规则的图形和图片，例如界面顶部的Banner图和图标等，这些是不可以直接用代码写出来的，只能通过切图来实现开发。

首页界面

我们先来看看界面的顶部，如图所示。这里面包含图标、文字和一张Banner图（图上的文字与图是一个整体），其中图标和Banner图是需要进行切图的，文字只需要标注字体、字号和颜色值等即可，同时还要标出这些元素的尺寸、位置以及间距。

界面顶部

下面来看看界面的中间区域，如图所示。该区域包含4个圆角矩形、4个图标和一些文字。如果是单纯的圆角矩形，是可以不切图的，但是这些圆角矩形上还有渐变和投影，虽然可以进行开发，但是开发成本很昂贵，因此最好进行切图；图标毫无疑问需要进行切图，而文字则不需要切图，只需要标注字体、字号和颜色值等即可。注意，这些元素都需要标出尺寸、位置以及间距。

界面中间区域

最后来看看界面的下部，如图7所示。该区域包含文字、图标、圆形、矩形和一些分割线。其中图标是需要切图的；文字只需要标注字体、字号和颜色值等；圆形和矩形可以进行开发，因此只需要标注尺寸和颜色值即可；分割线也可以进行开发，只需要标注描边的粗细值以及线条长度值和颜色值即可。注意，这些元素都需要标出尺寸、位置以及间距。

界面下部

现在我们虽然分析出了界面中哪些对象需要进行切图，但这还不够，还要分清楚哪些对象只是用来展示（信息传达），哪些对象需要区分选中与未选中的状态。下面我们就以底部标签栏（所有App都会涉及到标签栏切图）中的一组图标为例来为大家介绍如何在Photoshop中进行切图。

iOS切图

在iOS的切图中，我们分成两种规格进行切图，一种用在iPhone 6手机中，另外一种用在iPhone 6 Plus或iPhone 7 Plus手机中。

（1）下面对图标进行归纳整理。按【Ctrl+N】组合键新建一个文档（能放下标签栏的图标即可），然后用灰色填充【背景】图层，接着使用【移动工具】将底部标签栏中的图标拖入该文档中，如图所示。

新建文档并放入图标

（2）由于标签栏上的图标分为选中与未选中两种状态，因此需要将图标复制一份出来，如图所示，然后将上面一组做成未选中的状态，下面的一组做成选中的状态，如图所示。

复制图标

区分状态

（3）下面对图标进行重命名。切图的图标需要用英文进行命名，因为在开发的时候无法使用中文，例如没有选中的首页图标可以命名为home，选中的首页图标可以命名为home_press，如图所示。这里为了能让大家看明白，只将选中图标的“选中”用英文区分出来，如图所示。

命名规范

区分命名

（4）下面导出图标。在【图层】面板中选择所有图层组（导出一个图标只需要选中一个图层组，以此类推），然后在任意一个图层组的名称上单击鼠标右键，在弹出的菜单中选择【导出为】命令，如图所示，打开【导出为】对话框，在对话框的左侧可以看到图标的尺寸，可以发现图标的尺寸不一致，中间可以预览要导出的图标，右侧可以对图标的参数进行设定，如图所示。

选择导出为命令

导出为对话框

（5）由于底部标签栏的图标尺寸均为44像素×44像素，因此先在对话框左侧全选图标，然后在右侧将【图像大小】的【宽度】和【高度】都设置为44像素，虽然有些图标会产生留白，但只要保证好尺寸一致就行，接着将【格式】设置为PNG的透明格式，最后在对话框左侧将【大小】设置为1x（x表示“倍”）、【后缀】设置为@2x（@2x表示用在iPhone 6的分辨率中），这就设定好了iPhone6的图标尺寸，如图所示，设定好后单击【全部导出】按钮进行导出，导出完成后在对应文件夹中即可查看到切图文件，如图所示。

设置iPhone 6切图选项

导出的iPhone 6切图

（6）重新打开【导出为】对话框，在对话框左侧将【大小】设置为1.5x、【后缀】设置为@3x（@3x表示用在iPhone 6 Plus或iPhone 7 Plus的分辨率中），其他设置与iPhone 6的一致，如图所示，导出的切图文件如图所示。iOS的切图文件没有必要分在两个文件夹中，可以直接将两种尺寸的切图放在一个文件夹中。