android适配时 sketch的切图和标注

北京/UI设计师/8年前/2394浏览
android适配时 sketch的切图和标注
嘿呀嘎

sketch的切图和标注的fang fa

        sketch在切图和标注因为插件sketch measure相比较ps来说简单方便多了,如果你的页面有很多icon,每个icon的实际尺寸不一样,而你切图的时候想输出的是icon的安全尺寸并非实际尺寸,此时如果用sketch measure切图和标注的时候只会自动识别出实际距离切图和标注,这样的话切图标注会有点糙,如果你想标注和标注规范点的话,可能还需要手动的设置。

        下面我来说下自己在切图适配时的方法,这个方法可能不是最快捷的,但是能保证切图适配时比较规范,如果你有更好的方法,欢迎你留言,将不胜感激。

以个人中心页(720*1280)为基础进行讲解:35eb594237c7a8012193a3145add.jpg

4ceb59423f08a8012193a3c21920.jpg

如上图所示 使用sketch的插件标注的时候标注的是icon的实际尺寸, 虽然程序员可以定义一个尺寸然后使用居中对齐的标签,但是我们在切图的时候为何不直接切出安全区域尺寸的icon呢,这样可以让程序的代码更简洁。

切出安全区域icon尺寸 首先需要我们对同类型的icon设置一个安全区域的尺寸,然后再针对每个icon画出安全区域大小的矩形 透明度调整为0,重命名为icon的名字eg

778e59424071a8012193a3c543ef.jpgdf24594240b5a8012193a3c4c339.jpg

针对刚刚设置透明度为0 重命名是icon名字的矩形建立切片

40ed594241e9a8012193a3828902.jpg

所有的图标都按照这种方式进行处理。

整套视觉图设计完成之后,用sketch measure 进行一键切图标注。

1e54594249fda8012193a3997aa2.jpg


最后再把根据后缀是xhdpi  xxhdpi  xxxhdpi 分别放到相应的文件夹中。

11
Report
|
14
Share
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
大家都在看
Log in