Sketch 导出时保留透明像素

有些图标我们希望它的边缘要有一定的透明像素。

比如有一组图标作为 TableView 列表左侧的图标,如果这些图标的宽度不相同的话,会造成文字的左侧起点不能对齐。所以这一组图标的宽度必须都相同。

假设统一宽度为 20px,但是有的图标的实际尺寸可能不足 20px,所以一般我们会将这些图标的左右两边,填充透明像素,来使它达到宽度 20px。但是 Sketch 在导出 slice 时总是自作聪明地把透明像素裁切掉。

解决方法:

默认情况下,我们对一个 Symbol 点击 Make Exportable 后,会变成这个样子,Symbol 标志的右下角加了一个切片标志。这时候我们是不能改变 Export 的各种属性的。

在右侧 Export 区域,点击小刀图标:

就会变成这样的两个层:

然后我们就可以点击上面那个切片层,设置所有的 Export 属性,确保 Trim Transparent Pixels 未选中即可,并且调节 Size 和 Position,让切片左右两侧有透明区域。

注意的是,这时切片层和 Symbol 已经没有任何联系了,而是一个普普通通的切片,所以可以任意调节位置、大小等。