美文网首页
利用Photoshop制作点9图

利用Photoshop制作点9图

作者: 萧清轩 | 来源:发表于2019-02-28 01:06 被阅读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图给你

    相关文章

      网友评论

          本文标题:利用Photoshop制作点9图

          本文链接:https://www.haomeiwen.com/subject/ezlcuqtx.html