Question

关于切图的一些小总结

Answer 1

学习 UI 也有一小段时间了，正好赶上公司一个小项目，UI 方面工作就由让我试试刀了。不出意外地，遇到的问题的确不少，这次就先说下切图方面。

一开始是先把需要切图的 icon 单独拷贝到一个新的 Artboard 上面，这样效果图和切图页面相互不影响了，通过Creat Symbol创建组件的方式，把每个 icon 进行编组命名，然后分别创建 Symbol，再将此 Symbol 拷贝到 Artboard 上面，最后再每个 icon 给一刀。这期间就发现了两个问题，其中一个就是关于切图输出背景的问题，如果 Artboard 设置了背景，但是没勾选 Include in Export ，那么在上传到蓝湖的时候显示 Artboard 这个画板背景就是透明的，导致有些 icon 就有可能看不清，没有背景对比。如下图：

在 sketch 设置中的显示

在蓝湖中的显示

既然这样，那假如说在Artboard 背景中勾选 Include in Export 呢，勾选之后上传到蓝湖是可以看到背景板的颜色了，但是后面又导致了 icon 切图中把背景也给带进去了

在蓝湖中的显示

后面经过多方查询，还是采用第一种办法，但是多加了一步，就是在切图画板中再画多一个跟切图画板同等大小的矩形设置颜色放在最底层，这样上传的时候，icon 也不会有背景，而在蓝湖上面也可以显示画板背景了。

另外一个问题 icon 放大的问题。有些 icon 可能需要切好几个尺寸的，就需要放大，刚一开始我是直接选择该 icon 后，直接在后边尺寸修改，然而发现修改后， icon 线条粗细不一，无法使用，如下图

后面经过O老师指点，这种情况下一般直接选择上方的 Scale 进行修改放大缩小就会整体一起缩放了，哈哈，又 get 到一个新技能。

最后 mark 下切图命名的规范吧