相信很多UI设计师应该和我一样遇到过这种APP打包启动图变形的问题，很多人都是交给前端工程师调控，但是并不是所有的人都会处理这种情况。

启动图变形，用户和老板看到的第一眼是什么感觉，这设计的什么玩意，还能变形感觉设计师很不专业，这种东西怎么讲，你没办法，只可以自己默默承受；

但是

如果作为UI设计师的我们可以直接给前端.9.png图片，就可以解决了这个启动图变形的问题，我也是探索了好久，每次怀着激动的心情做好3张自己以为做好的.9.png图片给前端时，一启动，就会给我重重的一下，还是变形，但是我一直都在寻找方法，直到这两天，我终于研究出来这个逻辑和规范，废话不多说了，直接和大家分享一下我自己的想法：

就拿我最近做的一款APP--崇礼启动图来举例

1.需要先准备好需要打包的3张启动图尺寸，分别是：

480*762px；

720*1242px；

1080*1882px

先拿480*762这个尺寸进行.9.png图片制作方法讲解

2.将480*762启动图拖入PS中

3.让当前图层上下左右各留1透明像素，可以说一下我自己的做法：

3.1ctrl+a全选：作用是选中当前图层选区

3.2执行菜单栏--选择--修改--收缩--1px--勾选应用画布边缘效果--点击确定：作用是上下左右各收缩了1像素

3.3shift+i反向：作用是选中外面一圈宽度为1px的范围

3.4.直接delete，就做好了当前图层边缘自带1px的透明像素

当前图层大小就可以理解为478*760px，上下左右各存在1px的透明像素

4.开始要在透明像素上做文章了，看好我的表演

首先要理解一下这个透明像素是干嘛用的？

主要是来绘制黑线；

这个黑线是干嘛用的？

具体我也不知道，但是想做.9.png就得绘制黑线；

左边黑线绘制范围：可以横向拉伸画布的区域（简单理解就是空白的区域，你怎么拉伸都不会变形的区域）进行绘制宽度为1px，高度为npx的黑线；

上边黑线绘制范围：可以纵向拉伸画布的区域 （）进行绘制高度为1px，宽度为npx的黑线；

右边黑线绘制范围：除了最上1px透明像素和最下1px透明像素，剩下全部进行绘制宽度为1px，高度为762-1-1=760px的黑线

下边黑线绘制范围：除了最左1px透明像素和最右1px透明像素，剩下全部进行绘制高度为1px，宽度为480-1-1=478px的黑线

四个方向绘制的黑线位置怎么确定？

左侧：从上往下:1*1px是透明像素+1*（启动图标的底部位置-》当前图层的顶部位置）是透明像素+1*（标语/广告语的顶部位置-》启动图标的底部位置）是黑线+1*（标语/广告语的顶部位置-》标语/广告语的底部位置）是透明像素+1*（标语/广告语的底部位置-》当前图层的底部位置 ）是透明像素+1*1px是透明像素

直接上图，直观明了

整体左侧效果

-------------------------------------------------------------------------------------------------------------

上面：从左到右：1*1px是透明像素+（广告语左侧或者启动图标左侧（谁靠左边近就以谁为标准）-》当前图层左侧位置）*1px是黑线+剩余长度*1px是透明像素

直接上图，直观明了

-------------------------------------------------------------------------------------------------------------

右侧：从上到下：1*1px是透明像素+1*（当前图层顶部-》当前图层底部）*1px是黑线+1*1px是透明像素

直接上图，直观明了

-------------------------------------------------------------------------------------------------------------

下面：从左到右：1*1px是透明像素+（当前图层左侧-》当前图层右侧）*1px是黑线+1*1px是透明像素

上图

黑线怎么绘制呢？

PS英文输入法按一下键盘上的D，恢复默认的前后背景色，前景色为黑色就ok了；

选框框选透明像素，alt+delete填充前景色就填充上黑色了；

4.1绘制参考线，这是必须的，可以严格的划分出来准备绘制黑线和透明像素的区域范围

需要在哪里进行绘制呢？

先上图让大家看一下这种样板

左上角，左下角，右上角，右下角需要各留1px透明像素不可以动，这个非常关键

绘制完成上下左右的黑线后，将该图层三大键+s导出为（xxx.9.png），要注意前面的xxx.9是当前图片的名字（是图片的名称），后面的png是当前图片的后缀名（是图片的属性），图片属性还是正常的png图片，但是名字是xxx.9

最后总结一下重点：

1.当前图层左上角，左下角，右上角，右下角一直都会有1*1px的透明像素

2.黑线绘制最好就用选区绘制，alt+delete填充前景色黑色，黑色一定是纯黑色：#000

3.上黑线只存在左侧部分，左侧开始位置为当前图层最左侧，左侧结束位置为广告语或者是启动图标最左侧（具体看谁距离左侧图层更近）

4.左黑线存在启动图标以下位置到广告语以上位置

5.下黑线和右黑线只有两头是1*1px的透明像素，剩下的都是黑线

6.导出图片一定是xxx.9.png

同样的道理做好720*1242px和1080*1882px就好了；

把三张图片（480.9.png/720.9.png/1080.9.png）交付给前端就OK了!

Powered by Froala Editor