剑客
关注科技互联网

云采整理翻译,sketch中文教程(六)

sketch官方中文教程

编组

除了像图形、位图、文本这样的基本图层外,Sketch 还有一些特殊图层类型,它们对图层的整理和导出等工作上非常有用。

你可对多个图层进行编组,并让它们以一个“层”的样子展现。你可以移动和改变组的大小,同时也可进入组修改每一个图层的属性。

Sketch 当中的编组工具是非常强大的,因为多个组可以再次建为新的组,一起移动或者改变大小。当你改变一个组的大小时,组当中的内容也会相应的调整大小。如果这个组中包含文本信息,那么文本的字体也会跟着缩放大小。

想要创建组,你需要先选中一个或多个图层,然后单击工具栏中的编组图标,Sketch 便会为你创建一个包含所选图层的组,当然也可直接在图层列表里拖拽图层,移动到不同的组里去。

编辑组

当一个组建立后,你可双击它去查看和编辑里面的内容,比如在组内移动单个图层或者直接新建图层。如果你选中了组外的任一对象,Sketch 会自动跳出组以便你选择文档中的其它图层。

此时如果你再选择某一组中的一个图层,Sketch 会自动帮你选中整个组。这和我们创作图形时的子路径是一样的。

穿透选择

默认下,你需要先双击选中组,再点击选中组里的图层。但是如果你按住 command ⌘ 键,你便可进入组,直接选择想要的图层。

如果你只想将编组工具用于组织图层列表,而不想每次都先双击,你可勾选组的属性检查器中直接选择(Click-through when selecting)选项。你也可在首选项中打开此选项,此时所有新建的组(之前建立的组无效)均可以使用穿透选择功能。

画板

Sketch 里的画板是在无限的画布中建立一块固定大小的画板,但这些画板完全是可选择的。

当设计一个响应式网页时,你会想针对不同大小的屏幕进行设计,这时你就可将每一个屏幕尺寸设定为一个画板。如果设计图标时,你会想限制自己在默认的图标尺寸中创作,同样可将不同的图标尺寸设定为画板。

画板会有一点像一个特殊的组,它们永远是开放的状态,你不用双击它才能选中内部元素。画板的大小也不会随着内容增多而自动扩展,如果你已给画板设定了一个固定大小,那么这个尺寸一直保留,直到你再次更改它。

添加画板

要添加新的画板,选择工具栏中的插入(Insert)> 画板(Artboard)或执行菜单命令,当然你也可使用快捷键 A 来创建它们。属性检查器预置了一些常用的画板尺寸,例如 iOS 设备尺寸,常用网页设计宽度,及图标尺寸。

点击这些预置内容即可将设定好的画板添加到画布中,也可选择预置画板组的标题,将所有组内画板都置入画布,你也可在检查器底部点击 + 按钮添加自己的预置画板。

如果你想添加多个刚才置入的新画板,可按 command ⌘ + D 的快捷键来重复添加画板。

移动画板

如果一个画板中已经有内容了,Sketch 就不会让你直接选中这个画板,这样你在建立大的选区时不必担心选中了画板。但有时候我们还是有移动画板的需求。

你可直接在图层列表中选中画板,然后在画布上拖拽,或是在属性检查器中更改它的位置和大小。还有一种方式,你也可直接在画布上点击拖拽某一画板左上角的标题,来移动它。

改变画板尺寸

画板可根据内部元素的多少来改变尺寸。只需要选中画板,然后在属性检查器中点击按钮适合大小(Resize to Fit)即可。这种方式尤其适合在手机上预览时需要精确高度来滚动的情况。

云采整理翻译,sketch中文教程(六)

网格和标尺

每一个画板都是在画布上相对独立的创作空间,所以每个画板都有自己的标尺和网格选项。当你在一个画布上创作不同大小的画板时,这一点就会非常有用,例如响应式设计下每个断点的画板。

模板

另一个了解画板功能的例子就是官方内置在 Sketch 中的模板了,执行菜单命令文件(File)> 从模板新建(New from Template),如果你选择了 “Mac App Icon” 模板,就会看见官方为每种常用尺寸都创建好了画板。

页面

一个 Sketch 文档内可以包含多个页面(Page)。与其一个页面一个文档,不如将多个相关页面放在一个 sketch 文档中,这样的好处很多。

比如说元件和共享样式将在页面中通用,但不能跨文档使用。

另一个多页面的好处就是,虽然每个页面都可轻松编辑 12 个画板,但是取决于不同的内容、大小和数量,你会发现把过多的画板分布在多个页面中会高效很多。

画布

Sketch 里的画布区域是无限大的。画布预览模式有两种,你可以用矢量(分辨率无关)模式来查看画布,也可以打开像素模式来查看每一个像素导出后的样子。

云采整理翻译,sketch中文教程(六)

如果你想在画布中设置一个固定的边框,你可以直接用画板(Artboard)工具创造一个新的画板。

定位

画布中的定位是非常方便的,你可直接用鼠标滚轮滑动或 Macbook 的触摸板来控制方向。你还可按住空格键,然后按住鼠标左键来使用抓手工具移动画布。

最后,在没有任何对象被选中的时候,简单的使用键盘方向键也可以移动画布。

值得注意的是,Page Up / Page Down 是用来在页面当中切换的。

缩放

除此之外,你会在 Sketch 的视图(View) 菜单中找到很多用于缩放特定内容的快捷键。按住 command ⌘ 键并滚动鼠标滚轮即可。

你也可以使用键盘 Z 键来快速放大某一特定区域,点击画布任一点拖拽出矩形区域即可。要回到上一个缩放状态,请使用 option ⌥ + Z + 点击。

查看更多方便的快捷键

command ⌘ + 2 缩放指定图层

command ⌘ + 3 将选中图层置于画布中央

像素缩放

在 Sketch 里,你可用来你两种方式来查看你的作品,具体用哪一种则取决于你的创作了。

这两种模式执行菜单命令视图(View)> 画布(Canvas)当中切换,也可用快捷键 control ⌃ + P 来切换,当然,将这个按钮放在工具栏上也是可以的。值得注意的是,当你在 100% 的尺寸(实际尺寸)下,这个两个模式是没有任何区别的,只有当你放大图片时,才会显示。

云采整理翻译,sketch中文教程(六)

如果你很在意作品中每一个像素看起来的样子,那么像素模式就非常好的选择。你所看到的基本相当于先把作品导出为位图,再在看图应用中放大查看。

如果你不太在意上面这些那么矢量模式会更适合你,就算你放大,所有的图形也依然会有顺滑的曲线。

值得注意的是,有些像模糊或者投影类的效果,会强制将画布的一部分以像素模式显示,因为模糊类的效果本身就是一个基于像素的效果。

云采整理翻译,sketch中文教程(六)

显示像素网格

像素网格能让你在低对比度,或者无法用肉眼分辨出的情况下区分出那些变模糊的像素。执行菜单命令视图(View)> 画布(Canvas)> 显示像素网格(Show Pixels Grid)即可打开(快捷键 control ⌃ + X)。结合像素显示模式,没有精确对齐像素网格的内容在缩放到高于 600% 的情况下都可以被发现。

云采整理翻译,sketch中文教程(六)

标尺、参考线、网格

Sketch 里的这几个工具能帮你把图层准确的放在理想的位置,是沿着网格还是沿着一条直线,又或是在另两个图层正中间。

参考线

智能参考线在默认情况下是被打开的,可执行菜单命令视图(View)> 画布(Canvas)> 显示智能参考线(Show Smart Guide)切换打开和关闭状态。当你在调节一个图层的大小或移动位置时,Sketch 会自动帮你把这个图层与其它图层对齐。如果 Sketch 将某一图层自动与另一图层对齐,你会看见一条红线,两个图层便依据这条红线得知对齐的是什么位置。

云采整理翻译,sketch中文教程(六)

当对齐网格选项被打开时,当你移动任何内容时,它们都将自动对齐到网格,此时对齐智能参考线功能将失效。

标尺

Sketch 中的标尺在默认情况下是被隐藏起来的,要激活它,执行菜单命令视图(View) > 画布(Canvas)> 显示标尺(Show Rulers)或使用快捷键 control ⌃ + R。正如之前说的,Sketch 里的画布是无限大的,所以标尺也不是固定的。你可任意拖动标尺以便定义自己的坐标轴:

云采整理翻译,sketch中文教程(六)

如果你需要重新设置标尺原点,只需双击标尺交叉区域:

云采整理翻译,sketch中文教程(六)

你可在标尺上任一处双击鼠标,便可添加横向或者纵向参考线,只要标尺是被显示的,这些参考线也会一直被显示。想移动标尺,只需拖拽标尺区域。想要移动单个参考线,你必须在标尺中选中参考线再拖拽。想要移除手动参考线,则只需把参考线拖到两条参考线的交叉区域,噗的一声便会消失:

云采整理翻译,sketch中文教程(六)

鼠标右键点击标尺区域,可在关联的菜单中设置不同的标尺选项,当然,也可通过此选项移除所有横向或者纵向参考线。

网格

Sketch 支持两种不同的网格:常规网格和布局网格,你可根据所进行的创作来选择适合的网格,这两者的区别也非常显而易见:

常规网格

常规网格是典型的方形布局网格,它附带颜色块的大小,线的粗细等等这些属性。默认的常规网格是由长度为 20px 的小方块组成的,每 10 个小方块出现一条粗线条。

云采整理翻译,sketch中文教程(六)

执行菜单命令视图(View)> 画布(Canvas)> 显示网格(Show Grid)来打开网格,在这里你还会看见网格设置(Grid Settings)的选项。

布局网格

布局网格允许你定义列和行,这种布局非常适合做网页设计。

云采整理翻译,sketch中文教程(六)

在布局网格里,你可改变页面的总宽度,以及所含多少个纵列。同时你也可修改每一个横排的高度和纵列的宽度, 同时还有针对间距的选项。

Sketch 会尽力将网格放在画板的合适位置,不过一旦画板大小发生改变,网格内容可能会错位,这时你只需要按下 enter 键就可让网格对齐到画布中心。

你还可同时编辑多个画板的布局网格。

网格制作工具

如果你已经选择了某个层,并想分配均匀它们,你可执行菜单命令布局(Arrange)> 制作网格(Make Grid)。在这里,你可指定行或者列数,间距的值,来创建一个属于你的理想网格布局。

你也可使用这种方式来复制图层或者丢失的表格内容。

测量

Sketch 有一个超棒的内置工具,来确保你创作的内容都能整齐排列。这对与那些收到 Sketch 设计稿的开发人员来说也是个福音,他们可以轻松的查看每个元素之间的精确距离。

距离

当你按住键盘上的 option ⌥ 键,Sketch 会帮你显示出你已选中的图层和你的鼠标现在所悬浮的图层之间的距离,一个简单的图例便能说明。

云采整理翻译,sketch中文教程(六)

同样的,在移动一个对象时,移动到和另外两个对象的距离相等,Sketch 也会给你提示。

云采整理翻译,sketch中文教程(六)

尺寸

以同样的方式,如果你在调节一个图层的大小,Sketch 也会帮你显示出具有相同长度或宽度的图形的数据。

云采整理翻译,sketch中文教程(六)

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址