美文网首页
利用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图

    点9图(.9.png)是Android开发中一个特殊的图片格式,它能很好的解决我们的屏幕适配问题,项目中经常用到的...

  • 利用Photoshop制作爆炸效果

    利用Photoshop制作爆炸效果先看看效果 制作一个爆炸效果(使用软件:Photoshop6.0) 1. 开一个...

  • 点9图制作

    点9图简介 点九图,是Android开发中用到的一种特殊格式的图片,文件名以.9.png结尾。这种图片能告诉程序:...

  • photoshop 制作雪碧图

    仅供学习,转载请注明出处 需求说明 在上一篇photoshop 切图技巧中,我使用批量切图的技巧切出了三张图片如下...

  • Android点9图制作

    Android点9图制作 1、左边和上边是可拉伸的范围,不用交集,即一条线也可以 2、右边和下边的线是可选的,只有...

  • Android .9图的问题

    关于点9图的错误 更改办法:在dramble里保存好用.9图制作好的图,后缀名以.9图结尾,在代码里把.9图的后缀...

  • 用Android Studio制作点9图

    选择需要制作点9图的文件。直接右键 点击确定 会在列表显示一张该图片的点9图。打开 打开点9图进行编辑 左侧是原图...

  • 2016-3-9 记录

    PHOTOSHOP 什么是切图 分析UI:组织html结构,需要的图片(前景,背景) 制作雪碧图 图片优化 htm...

  • 利用Photoshop制作微信表情

    1.新建一个白色的背景图,像素是 240 * 240 2.解锁 点击下图中红色圈中的锁头进行解锁,双击之后会弹出新...

  • 页面制作——Photoshop切图

    1.工具、面板、视图 什么是切图? 第一步:从设计稿里切出网页素材(按钮、图标、LOGO、背景图、内容性图片) 第...

网友评论

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

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