利用Photoshop制作点9图
2019-02-28 本文已影响0人
萧清轩
点9图(.9.png)是Android开发中一个特殊的图片格式,它能很好的解决我们的屏幕适配问题,项目中经常用到的地方就是聊天气泡,以及某些特殊形状的背景、边框等;
先来认识下.9图
bg_comment.9.png
这个就是我之前做的一个.9图,可以看到,这是一个带阴影,又带突出三角的气泡,在我的项目中,它是一个界面一些信息的背景
它有4条黑边
左边:控制垂直方向可拉伸区域;
上边:控制水平方向可拉伸区域;
右边:控制垂直方向内容可填充区域;
下边:控制水平方向内容可填充区域;
PS:.9图画黑边的区域必须没有其他任何颜色(纯透明)
下面用两张图分别介绍一下“可拉伸区域”和“可填充区域”
可拉伸区域
可拉伸区域.png(绿色部分)左边上边两条黑线分别无限加宽,所占用的空间,就是.9图可拉伸的区域,四个灰色区域放大不受影响;
可填充区域
可填充区域.png同样是想象两条黑线无限加宽,但这次取相交的区域,就是可填充区域
认识了.9图,具体怎么做呢?
任意图片都能做成.9图,只需四步
调整画布.png1、导入图片到ps
2、执行图像 - 调整画布 - 切换到分辨率 - 宽高各加2像素
3、根据需求,分别在边缘画出1像素宽的黑线,要纯黑,也就是色号#000000
4、保存图片,导出点9图
宽高各加两像素
调整画布大小.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图给你