利用Photoshop制作点9图

2019-02-28  本文已影响0人  萧清轩

点9图(.9.png)是Android开发中一个特殊的图片格式,它能很好的解决我们的屏幕适配问题,项目中经常用到的地方就是聊天气泡,以及某些特殊形状的背景、边框等;
先来认识下.9图


bg_comment.9.png

这个就是我之前做的一个.9图,可以看到,这是一个带阴影,又带突出三角的气泡,在我的项目中,它是一个界面一些信息的背景
它有4条黑边

左边:控制垂直方向可拉伸区域;
上边:控制水平方向可拉伸区域;
右边:控制垂直方向内容可填充区域;
下边:控制水平方向内容可填充区域;
PS:.9图画黑边的区域必须没有其他任何颜色(纯透明)

下面用两张图分别介绍一下“可拉伸区域”和“可填充区域”

可拉伸区域
可拉伸区域.png

(绿色部分)左边上边两条黑线分别无限加宽,所占用的空间,就是.9图可拉伸的区域,四个灰色区域放大不受影响;

可填充区域
可填充区域.png

同样是想象两条黑线无限加宽,但这次取相交的区域,就是可填充区域
认识了.9图,具体怎么做呢?

任意图片都能做成.9图,只需四步

1、导入图片到ps
2、执行图像 - 调整画布 - 切换到分辨率 - 宽高各加2像素
3、根据需求,分别在边缘画出1像素宽的黑线,要纯黑,也就是色号#000000
4、保存图片,导出点9图

调整画布.png

宽高各加两像素


调整画布大小.png

将画笔设置为纯黑,大小1像素,硬度100


调整画笔.png

根据需求画完黑线之后,导出-存储为web所有格式,选择 PNG-24


导出成png24.png

最后一步,非常重要,这步不做,前面都白扯

手动修改文件名为 *.9.png 样式
手动修改文件名为 *.9.png 样式
手动修改文件名为 *.9.png 样式

重要的事情说三遍!!!
到此 .9图就生成完毕了
一定要把它放在 res - drawable 文件夹下(根据切图大小,选择对应尺寸的drawable文件),然后将.9图作为背景设置在指定View上

有点人会发现,直接放在drawable文件下,图片过大,那是因为你没有放在对应尺寸的文件夹里,解决方法有两种

1、手动创建 符合切图尺寸的 drawable文件,比如 drawable-xxhdpi
2、让UI直接切drawable尺寸的.9图给你

上一篇下一篇

猜你喜欢

热点阅读