适合设计师的.9切图方法

4年前发布

原创文章 / 多领域 / 观点
杨懒懒 原创,如需商业用途或转载请与杨懒懒联系,谢谢配合。

整理下自己研究的适合设计师的.9切图方法

整理下自己研究的适合设计师的.9切图方法,之前看了很多篇的教程,基本概念相同,但做出来适配总是出错并且耗时较长,所以把自己用的方法分享出来,不了解.9切图的请自行百科,不再做名词解释。

首先概述下工作中碰到的问题:需要3中尺寸的适配,hdpi、xhdpi、xxhdpi,起初只导出一种尺寸来做适配,结果三种尺寸适配上效果都不是很理想,最终决定还是做3种尺寸的适配。

使用的工具:Sketch、Photoshop

方法:

①.需要先准备好需要做成.9的图片(如左图),然后保证圆角等不需要被拉伸的部分不变的情况下缩小整张图(如右图),并导出所需的三种尺寸,画板命名记得添加.9,这样可以节约时间(由于sketch作图,所以这一步用sketch完成,ps亦可,工具选自己常用的就好)

205357c8e8dd0000012e7ee6f2a8.jpg

②.打开ps开始制作.9图(本打算都用sketch完成,但是从sketch导出来的图程序无法编译,所以这一步还是用ps完成)

自己用ps写了两个动作,节约了大量的时间,一个是画布相对各扩大1px,然后换成铅笔工具,前景色改为纯黑#000,另外一个是psd格式导出为png。

批处理第一个动作,然后每个图自行点黑点儿(写入动作里的话有误差,手动画相对更精确),保存psd,关闭文件。

完成以上动作后,在批量执行第二个动作,就可以完成啦。

0b2657c8e8ce0000012e7e73efb9.jpg

相对来说效率还是蛮快的,并且手机上预览都非常的完美。3套尺寸用时大概1小时左右(时间还是好长,两步花的时间差不多,各半小时左右)。以上就是自己做.9图的一点心得,如有不当之处还请指出。


———————— 2017-05-23 追加 ————————

有人问另外一种需要填充内容的.9图怎么做,追加一下。

被公司的工程师妹子安利了这个预览.9图的神器,一本满足,如果用这个工具就可以忽略ps那一步手动点点儿的

操作了,而且还可以直接看到效果图,再也不怕做错了。

神器可以在文章末尾下载(MAC版,Windows自行搜索,有很多)。


先附上案例两枚:

01.右图紫色区域属于文字填充区域效果预览(对应左图右侧与下侧的横线交界处)


02.三角不可调节大小并且保持在中间的一种情况,保持两个点到左右两侧等距即可。


结束~有不明白的可以再留言问我~

6
- 位站酷推荐设计师推荐 -

声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。

    没有新消息