整理下自己研究的适合设计师的.9切图方法,之前看了很多篇的教程,基本概念相同,但做出来适配总是出错并且耗时较长,所以把自己用的方法分享出来,不了解.9切图的请自行百科,不再做名词解释。
首先概述下工作中碰到的问题:
需要3中尺寸的适配,hdpi、xhdpi、xxhdpi,起初只导出一种尺寸来做适配,结果三种尺寸适配上效果都不是很理想,最终决定还是做3种尺寸的适配。
使用的工具:
Sketch、Photoshop
方法:
①.需要先准备好需要做成.9的图片(如左图),然后保证圆角等不需要被拉伸的部分不变的情况下缩小整张图(如右图),并导出所需的三种尺寸,画板命名记得添加.9,这样可以节约时间(由于sketch作图,所以这一步用sketch完成,ps亦可,工具选自己常用的就好)
②.打开ps开始制作.9图(本打算都用sketch完成,但是从sketch导出来的图程序无法编译,所以这一步还是用ps完成)
自己用ps写了两个动作,节约了大量的时间,一个是画布相对各扩大1px,然后换成铅笔工具,前景色改为纯黑#000,另外一个是psd格式导出为png。
批处理第一个动作,然后每个图自行点黑点儿(写入动作里的话有误差,手动画相对更精确),保存psd,关闭文件。
完成以上动作后,在批量执行第二个动作,就可以完成啦。
相对来说效率还是蛮快的,并且手机上预览都非常的完美。3套尺寸用时大概1小时左右(时间还是好长,两步花的时间差不多,各半小时左右)。以上就是自己做.9图的一点心得,如有不当之处还请指出。
———————— 2017-05-23 追加 ————————
有人问另外一种需要填充内容的.9图怎么做,追加一下。
被公司的工程师妹子安利了这个预览.9图的神器,一本满足,如果用这个工具就可以忽略ps那一步手动点点儿的操作了,而且还可以直接看到效果图,再也不怕做错了。
神器可以在文章末尾下载(MAC版,Windows自行搜索,有很多)。
先附上案例两枚:
01.右图紫色区域属于文字填充区域效果预览(对应左图右侧与下侧的横线交界处)
02.三角不可调节大小并且保持在中间的一种情况,保持两个点到左右两侧等距即可。
结束~有不明白的可以再留言问我~