切片

你可以使用Sketch中的切片工具定义一块导出区域,然后将它输出为一个单独的文件。一个Sketch文档允许存在你想要的任何数量的切片,每一个切片区域都可以导出为独立的文件。

 

切片作为独立图层

在Sketch中,切片被当做一个独立的图层存在。这种做法有很多好处,比如你可以把所有切片图层和需要导出的内容图层打组,这样当你移动这个组的时候,切片也会随之移动。

如果你暂时不需要让切片图层打扰到你的工作,那么你可以在图层列表最下方点击“小刀”按钮把他们隐藏。

 

添加切片

要添加切片,执行菜单命令Iner>Slice,或者使用快捷工具栏上的切片图标。接着在画布的任何位置绘制切片区域即可。当进入切片工具状态的时候,你也可以直接单击图层,这个时候Sketch将会自动紧贴这个图层边缘绘制一个切片区域。

 

命名

每个切片可以独立命名,这个名字会用于你导出的图片文件名。

你可以使用这个小技巧让命名更便捷:在为切片命名的时候,使用 /   符号会为切片文件建立一个文件夹存放。举个例子:如果将切片命名为“foo/bar.png”,那么导出的时候,Sketch会新建一个名为“foo”的文件夹,然后在这个文件夹里创建一个“bar.png”的图片文件。

 

多种尺寸

你可以为一个单独的切片导出多个适应不同分辨率和精度设备的素材。比如我们为iOS做设计,你可能会经常需要输出2X和3X的图片。使用切片工具会让一切变得简单。只需点击属性检查器底部的“+”按钮,即可添加多个输出尺寸。

每种尺寸的输出方案都可以自定义缩放数值,文件格式和后缀名。大部分情况下,我们必须使用后缀名来区分同一个切片的不同大小的输出文件,因此我们有必要加入后缀。默认情况下,依据iOS命名规则,第二个输出文件将会被加上“@2x”的后缀。

 

只导出组内容

 

当我们在属性检查器中选择“”仅仅导出组内容( Export Group Contents Only)“”选项的时候,此时切片将不会导出画布上的所有内容,取而代之的是,切片将仅仅导出它所存在的组中的内容。使用这种导出方式,任何干扰内容都可以被忽略掉,这点非常方便。

属性检查器中的导出预览界面会为白色和浅色内容显示为透明。当然,你也可以选择在切片中包含背景颜色。

 

移除透明区域

切片选项中还有一项为“移除透明区域(Trim)”。当此选项打开后,导出的切片的透明像素区域将会被从图片区域中移除。

比如:我们设定一个切片为30X40大小,但是这个切片中有内容的部分仅仅为15×15像素。此时,我们不用费力去将切片区域缩放到精确匹配这15×15像素的部分,只需要简单打开“Trim”选项,Sketch在导出的时候将会移除透明的部分,最终我们的图片仅仅是15×15那么大的内容区域。

要更快速了解导出切片功能,你可以在这里查看视频内容