iOS appicon 切图
网站：
https://www.favicon-generator.org/
app：
prepo
切图是整个项目中必不可少的一个环节，设计师需要将切图文件整理好并交给开发手中。对于一个界面的切图，首先要分清楚哪些对象需要切图，哪些对象需要区分状态，然后再进入切图的环节。切图时，要输出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的切图文件没有必要分在两个文件夹中，可以直接将两种尺寸的切图放在一个文件夹中。
设置iPhone 6 Plus切图选项
导出的iPhone 6 Plus切图
Android切图
Android的切图方式与iOS相同，只是Android切图的命名方式不一样，且需要分在两个文件夹中，即xhdpi文件夹和xxhdpi文件夹。
（1）新建一个android文件夹，然后在该文件夹中新建一个xhdpi文件夹和一个xxhdpi文件夹，xhdpi文件夹表示存放“超清”的切图，xxhdpi文件夹表示存放“超超清”的切图，如图所示。
新建文件夹
（2）xhdpi超清切图的尺寸与iOS中后缀为@2x的切图相同，因此可以直接将后缀为@2x的切图复制并粘贴到xhdpi文件夹中，然后将后缀@2x全部去掉，只保留文件名即可，因为Android的切图文件不需要后缀，如图所示。
Android的超清切图
（3）xxhdpi超超清切图的尺寸与iOS中后缀为@3x的切图相同，因此可以直接将后缀为@3x的切图复制并粘贴到xxhdpi文件夹中，然后将后缀@3x全部去掉，如图所示。
Android的超超清切图
当然，Android也可以在Photoshop中进行切图，将后缀去掉，其他设置与iOS的一样，同时将导出的切图放在两个不同的文件夹中即可。
在界面设计中，切图和标注是必须要经过的环节。做好切图和标注，能够让在程序员在开发过程中少出现很多误判。很多设计师设计的效果图非常漂亮，但开发出来后的界面完全不同，造成这个问题的大部分原因就是因为切图和标注做得不够规范和统一。希望今天米醋的分享能够大家带来一定的收获！
发表评论