Sketch的工作区域内可以随意涂画编辑。我们可以把工作区想象成桌面,上面可以摆放任何东西。但相信很多读者使用Sketch可不会只是随意涂涂画画这么简单,APP界面设计才是Sketch真正的强项。但是在没有边界的工作区内做设计可不太合适,这里Sketch引入了Artboard这一概念。Artboard就像我们在桌面上摆放的一页一页纸张,纸张是有“边界”的,我们可以在工作区域内放置多个Artboard,在“纸张”上进行设计。
图3-1-1
现在我们对Artboard有了形象的理解,马上进入实践,尝试在Sketch中插入Artboard。新建一个文档,选择“Insert>Artboard”,也可以使用快捷键A或者在工具栏中的Insert图标中找到此选项,如图3-1-2所示。
图3-1-2
这时在右侧属性栏中我们会看到一些快捷尺寸选项,如图3-1-3所示。有最常见的iPhone 5的尺寸, 还有iPad的尺寸,甚至有设计网页需要的尺寸,直接选择我们需要的尺寸即可,静电一般使用640×1 136作为设计APP的基准尺寸。
图3-1-3
如果这里没有大家想要的尺寸,我们可以通过下面的两种方法建立Artboard。
方法一:
1.随意选择一种尺寸。
2.单击在工作区出现的Artboard(也可以在左侧图层中直接选择相应名字命名的Artboard,如果不重命名,那么Sketch将使用默认名称命名),使Artboard处于选中状态后,我们可以拖动鼠标来移动Artboard的位置或者在右侧属性栏中编辑它的属性。
3.在右侧属性栏中调整你期望的尺寸即可。Export Group Contents Only(只导出编组的元素),先保持默认。Background Color这里建议大家选一种底色,否则后期导出为PNG图片后,没有底色会影响设计稿的展示效果。
方法二:
如果你经常使用一种尺寸的Artboard,但这个Artboard尺寸Sketch并没有预置,此时我们可以自行添加。
1.按A键或者单击Insert图标,选择插入Artboard。
2.在右侧属性栏的底部单击“+”图标,如图3-1-4所示。
图3-1-4
3.在弹出的菜单中为自定义的尺寸命名并设定尺寸。
4.这时在插入Artboard时,属性栏的Custom中即可出现你定义好的尺寸,选择这个尺寸即可,如图3-1-5所示。
图3-1-5
第一级结构:Page
上文我们看到了纸张在桌面上的呈现,这时桌面即可类比于Page,当一个桌面上的Artboard太多不足以承载的时候,我们需要换个桌子继续工作,这时就可以新建一个Page。一个Sketch文件中可以有N个Page。 新建Page的按钮默认状态下是隐藏的,如果需要新建Page,可以单击Page栏右侧的向下箭头展开Pages视图,然后通过单击右上角的加号即可新建Page,如图3-1-6所示。
图3-1-6
第二级结构:Artboard
Page的下一级结构为Artboard,与树状菜单类似,单击名称左侧的箭头可以展开,内有Artboard中的各个图层,如图3-1-7所示。
第三级结构:独立图层
独立图层是Sketch中最基本的图层,它可以出现在Artboard结构中,也可以脱离Artboard独立存在,取决于你是否将这个图层中的元素放在Artboard上。如图3-1-8所示的标注即为Artboard之外的图层,我们可以灵活运用这些图层来做一些设计稿的注释,在导出时它们可以不被包括在内。
图3-1-7
图3-1-8
第四级结构:组件文件夹及编组文件夹
组件文件夹以紫色表示,普通的编组文件夹以蓝色表示,如图3-1-9所示。我们可以同时选择多个图层,并按快捷键Command+G编组。如果想定义组件以便重复使用,可以在此文件夹图层上单击鼠标右键,从弹出的菜单中选择Creat Symbol,选择后蓝色文件夹将会变为紫色,表示它成为了一个组件。当然,也可以把组件文件夹转变为普通文件夹,只需单击鼠标右键,在弹出的菜单中选择Detach From Symbol即可。
图3-1-9
Tips:通过路径操作得到的多个图层也会编组,但本质上它们还是多个独立图层,并没有合并为一个图层,如图3-1-10所示。如果需要合并为一个图层,需要执行“Layter>Paths>Flatten”命令。
图3-1-10
辅助工具:图层搜索及快速选择栏
图层栏最下方为图层快捷搜索及快速选择工具 ,在搜索框中输入图层名称即可快速筛选及查找图层,如图3-1-11所示。
图3-1-11
搜索栏右侧的两个图标 ,为快速锁定图层按钮,单击变为灰色后,所有图层均无法被选中。
为快速锁定切片图层按钮,单击变灰后,切片图层将不能被选中。图层及切片锁定不可同时进行,只能选择其一操作。当设计稿图层及切片混杂的时候,我们可以使用此功能快速选择。
Tips:快速选中Artboard的诀窍
当Artboard中内容很多,但我们又需要移动它的位置的时候,选中Artboard并不是一件太容易的事儿,这里有两种方式可以快速选中Artboard。
1.单击Artboard名称区域,即可选中Artboard。
2.使用左侧图层进行选择,如图3-1-12所示。
图3-1-12