在讲这一章之前,先把上一章提到的布尔运算给大家讲一下(如下图) a4c26d1e5885305701be709a3d33442f.png

这是顶部工具栏区域的一小部分。布尔运算有四种形式,你可以根据你的需求来选择不同的方式。

合并形状 (Union):合并的结果是会得到两个矢量区域的总和。

减去顶层形状 (Subtract):这一项的结果是顶层矢量的区域会从下一层的图形上移去。

与形状区域相交 (Intersect):与形状区域相交的结果是会保留原图形重叠的部分。

排除重叠形状

(Difference):排除重叠形状的结果是只保留原图形不重叠的部分,它是“与形状区域相交”这一运算的反向。相当于AI里面的相加,相减,合并,交集,是不是更容易理解一些。在图层中,图标也可以用布尔运算(如下图)也是同样的四种形式,使你更好的创作图标。

a4c26d1e5885305701be709a3d33442f.png

切图及导出

切图是在做Web设计和APP设计中比较常用,你想把你做的效果图,可以在手机上或者网站实现出来,就需要给程序员们切图文件,这时就需要在Sketch里面切图。举个例子,首先,我先建一个画板,

a4c26d1e5885305701be709a3d33442f.png

然后在画板里画一个圆,

a4c26d1e5885305701be709a3d33442f.png

现在我想把这个圆在sketch里单独切出来然后导出,怎么做呢?看下图

首先选中这个圆,然后按住快捷键S单击,就会看见选中的圆边缘出现了一个边框,然后注意观察左侧图层区和右侧检查器,会发现分别多了一个带切刀的框(就是切片)和切好的圆。右边的检查器的圆单独变成了一个,这说明图已经切好了。

a4c26d1e5885305701be709a3d33442f.png

接下来把切好的图导出成想要的倍数给程序员们。如下图,点击检查器里的中间的那个Export右侧的小加号,就自动出现1x,2x,3x的图,默认是png格式的,一般都要背景是透明的图,所以要导出PNG格式的,然后这时点击工具栏里的Export(也就是导出)

a4c26d1e5885305701be709a3d33442f.png­­

就会出现下图的界面,你刚刚要导出的圆已经选好,然后点击蓝色按钮,Export就导出成功了。

a4c26d1e5885305701be709a3d33442f.png

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐