Sketch入门(三)如何切图

我通常在交接工作时除源文件外,还会把Icon切好打包发給研发。切图主要有两种方式,下面举例说明。

APP中的一个版块

第一种 整套切图

第一步:整理Icon

一套完整的Icon

最好能将整个APP的Icon分组整理在一个文件中,这样可以帮助自己规范样式和尺寸,并直接在此文件中进行细节优化调整,减少因同一个图标在不同页面反复出现,需进行多次调整的情况。

第二步:导出Icon

选择所有画板,点击右下角[+]加号,添加@2x、@3x。(如果设计图本身就是二倍图,那么就添加@1x、@1.5x)。点击[Export Artboards]导出即可,建议导出到一个独立的文件夹中,或者导出前新建一个文件夹。不然结果会被吓到!

选择所有画板
添加@2x、@3x。或@1x、@1.5x


导出至独立文件夹

技巧:

画板命名方式可以帮助自己将导出的图片分组归类。

命名方式:名字/... /名字,命名中间用英文“/”符号分割。默认“/”最后一个是Icon名称,之前的全是文件夹名称,一层套一层。

命名及对应导出文件

第二种 单个切图

第一步:选择Icon

选择要切的icon。将它复制粘贴到画板外空白处,这样可以保证切的图是无背景的效果。

复制Icon到画板外空白处

第二步:导出Icon

选择画板外的Icon,点击右下角[+]加号,添加所需要的icon倍数。[Export Artboards]导出即可。

选择画板外icon导出

小结

切图不应该浪费我们太多时间,Sketch做到了。这两种导图方式分别适用于不同的工作场景。并且很多好的习惯可以帮助我们节省时间,比如命名方式。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 注意:这是一篇译文,如果你够装逼,完全可以浏览原文:Sketch Tutorial for iOS Develop...
    Andy矢倉阅读 17,077评论 10 158
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,136评论 25 708
  • 今天pod文件执行了update,运行后发现项目编译报错了,错误如下: 看项目工程错误详情,是极光推送3.0.2....
    王_尧阅读 505评论 0 1
  • 又是新的一年,是不是该给自己留点什么? 人生掌握在自己手中,命由天注定可能在某个方面有合理性,但人生...
    铠甲在身的羊阅读 229评论 0 0
  • 早上六点半,闹钟响了起来,我不情愿地起身关掉继续躺下,十分钟之后,闹钟再次响起,脑子里想着两个问题?今天我活着意义...
    芝士尾巴阅读 218评论 0 3