恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
连载:sketch中文教程(二)
0.0°
2016-10-07 自译外文 教程 原作者: sketch官网 举报 2212 16 7 0

sketch中文教程

图层

图层是 Sketch 中最基本的构成单位。与PS中的图层性质一样。

不同于其它将图层和对象这两个概念区分的应用,在 Sketch 里每个对象都被当做一个独立的图层。所以,手册中所说的“图层”和“对象”其实是一个概念,这两个词可相互替代。

编组和画板能让你在 Sketch 里更有效的管理内容,它们也会被视为多个图层的组合。要想添加新的图层,只需执行工具栏中的 Insert 按钮或菜单中的插入菜单。

添加图层

添加图层最简单的方式是直接从工具栏选择一个标准图形。

点击工具栏中的插入(Insert)> 图形(Shape),选择任一个图形,比如选中矩形,光标会变成一个右上角带有小矩形的十字光标。也可以使用快捷键来插入一些

图形,矩形 R、线条 L、圆形 O、圆角矩形 U

Image title

这时你只需在画布上单击并拖动鼠标来添加你想要的形状。松开鼠标,随即完成这个矩形,并可以开始编辑它。

高级选项

正如你看到的,添加图层的过程非常便捷,但 Sketch 同时提供了一些隐藏快捷键来方便你的绘制。

例如你可以按住 shift ⇧ 键来绘制等边图形:

Image title

同样,你可以按住 option ⌥ 键来从中心绘制图形,而不是从左上角绘制:

Image title

如果你想改变图形的起始点,你只需按住空格键,这样将会修改起始点,而不是图形的大小:

Image title

在一张尺寸比较大的画布中添加图层的时候,你还可以将鼠标拖拽到画布之外激活滚动视图,以便移动画布。

选择图层

在 Sketch 中选择图层很简单:

你只需点击来选中图层即可,图层选中后,选择框的四角或边框上会出现 8 个控制手柄。

Image title

值得注意的是,如果选择图层后没看见这些小手柄,那么有可能是你不小心将控制手柄隐藏起来了,

你可以进入视图(View) > 画布(Canvas) > 显示控制手柄(Show Selection Handles)将其找回来。

或者,你可以使通过图层列表选择一个图层,点击图层的名称,此时也可以在画布中看到被选中的图层:

Image title

同时选择多个图层

你可以按住键盘上的 shift ⇧ 键来同时选择多个图层,当你点击其它图层时,之前选中的图层也会被保留。如果你按住 shift ⇧ 键去点击一个已经选中的图层,则会取消选择

如果你在画布上任一点单击并拖拽出一个选区,则会选中这个选区中的所有图层。你可以继续按住 shift ⇧ 键或者 command ⌘ 键来复选或者取消个别已经选中的图层

如果同时按住 option ⌥ 键,则只会选中完全被包括在所画选区内的图层。下面的对比图像。左边:按住 shift ⇧ 键并且拖拽。右边:同时按住 shift ⇧ + option ⌥ 键并且拖拽。

Image title

重叠图层

为了让选择某一图层底下的图层更容易,你可以右击鼠标,从菜单中选择“选择图层”(Pick Layer),便会显示出鼠标底下的所有图层列表。

Image title

另一个方便的快捷键是 option ⌥ ,按住 option ⌥ 键,Sketch 会选中第二层图层,而不是最上层的。如果某个区域有多个图层重叠,而你想选择第三层,那么还是需要用到上面说的右击鼠标的方法来选择了。但有些情况下,你会发现这是个非常方便的小功能。

快速选择组中的图层

编组能方便的管理内容,有时还能预防无意的编辑操作。单击组,整个组会被视为一个图层,双击才会进入组内选择具体图形。

当然,有时你肯定想从深深的编组层级中直接选中某一具体图层,你可以按住 command ⌘ 键,来直接选择埋在组里的图层,无需不停的双击以进入更深的层级,这将省去你不少的时间。

如果你同时按住 shift ⇧ 键,则能选择多个图层

移动图层

你可以选中任意图层,并拖动鼠标来移动它们。按住 shift ⇧ 键来拖动,则会让图层严格按照垂直或者水平方向移动

当你移动(或改变大小)某个图层时,Sketch 会自动帮你将此图层与邻近的图层对齐。如果这个功能没有生效,那可能是智能参考线功能被不小心关闭了,你可以在视图(View)> 显示智能参考线(Show Layer Guides)菜单里重新打开它。标尺(Rule)、参考线(Guides)和网格(Grid)是一个大话题,会在另一章节单独来讨论。

如果你先按住 option ⌥ 键再拖动图层,会创建一个原图层的副本,原图层位置保持不变(接着按快捷键 command ⌘ + D,Sketch 则会重复你刚才的操作,再次创建一个副本)。

移动被遮盖的图层

这是另一个重叠图层麻烦的地方,通常情况下,你单击并拖动一个图层它会被立即选中,并移到新的位置。

大多数时候,这样做是很方便的,但如果你想移动一个完全在另一图层底下的图层,那么就会变得有点碍事,直接选中并移动的是最表面的图层。

解决这个问题,你需要按住 option ⌥ + command ⌘ 键,再来单击你需要的图层并移动它,你甚至可以单击画布上完全不同的区域,Sketch 仍会为你保留当前的选择图层。

Image title

对齐图层

另外,要快速移动选中图层,你可通过属性检查器最上方的一排对齐按钮来均匀的分布它们。

Image title

这排按钮的前面两个是水平和垂直均分图层按钮。

你也可用菜单 Arrange(对齐)> Distribute Objects(均分对象)与ps中的对齐相同或者使用快捷键 control ^ + command ⌘ + V 或 ^ + command ⌘ + H。如果需要使用固定的间距来均分图层,则需要使用创建网格(Make Grid)工具,这个选项同样提供像素适配(Pixel Fitting)功能来确保呈现出足够精确的图像。

其它 6 个按钮(左对齐、水平居中对齐、右对齐、顶部对齐、垂直居中对齐、底部对齐)可用于图层之间的对齐或与画板的对齐。

要把图层对齐到画板,按住 option ⌥键,然后使用对齐的快捷键。你也可同时对齐多个图层。另一种方法就是,先将这些图层编组,再执行对齐到画板。进一步了解组。

要把图层对齐到特定元素,需要先把要固定不动的图层锁定( 快捷键 shift ⇧+ command ⌘ + L)。如果没有选择锁定的图层,Sketch 会自动选择最可能作为对齐参考的图层。

改变大小

8 个手柄不仅会向你指示出选区,还可用来修改图层大小。拖动任一个手柄即可调整,如果你同时按下 shift ⇧ 键,图层的长宽则会按等比例变化。

Image title

拖拽图层任意一边缘中间的手柄会只调整宽或高,想要同时调整,则可拖动边角的手柄。在调整尺寸时,你会在鼠标边缘看到尺寸数值的变化。

按住 option ⌥ 键,图层会从中间向四周改变大小,而不是从对角开始变化。

Image title

使用属性检查器缩放图层

你还可选中一个图层,并在属性检查器中输入新尺寸。如果尺寸文本框中间的锁形图标为关闭状态,图层将按照比例进行缩放。此外,你还可以使用一些特定语法来执行除开以左上角锚点为基准的缩放:

       l: 从图层左边开始缩放(默认)

       r: 从图层右边开始缩放

       t: 从图层顶部开始缩放(默认)

       b: 从图层底部开始缩放

       c/m: 从图层中心开始缩放

所以,想从图层右边开始缩放并增加 50px 宽度,在尺寸文本框中设置 50r 即可。


键盘

你可以直接使用键盘调整图层大小。相对于鼠标,使用键盘能更好实现精确到像素的调整。你需要按住 command ⌘ 键和方向键来操作。⌘ → 会将图层宽度增加 1px,⌘ ← 则会将宽度减少 1px。同样的,⌘ ↓ 和 ⌘ ↑ 则分别将长度增加和减少 1px。如果你同时按住 shift ⇧ 键,每一次更改的数值将会变成 10 px。

也可以在属性检查器的文本框中进行数学运算,以便更高效的工作。

缩放

当你改变一个图层的大小时,它的样式元素并不会随之变大变小:一个 50x50 的图形上 5px 的描边在这个图形被拉伸至 150x150 的时候,将仍保持 5px 的描边。想要同步缩放这些属性,可以使用菜单命令编辑(Edit)> 缩放(Scale),或快捷键 command ⌘ + K。通过这种方式进行的缩放,此图层上的所有样式(圆角、描边粗细、阴影等等)都会随之缩放。

Image title

编辑图层

双击一个图层、按下 return 键或点击工具栏中的编辑按钮,都可进入图层的编辑状态,接下来发生什么则取决于您想编辑的图层类型,可阅读相关内容进一步了解。

值得注意的是,在编辑状态下,使用鼠标点击图层以外的部分,或按 return 或 esc 键都可以随时退出编辑。


更新:2016-10-07

收藏

16人已收藏

CLD_李波

设计师

  • 20

    作品

  • 188

    粉丝

  • 2

    关注

  • 用自动布局的方式设计响应式卡片组件(含sketch文件)
  • 提高工作速度的 10 个 Figma 高级技巧
  • 这个要学起来|格式塔理论中的视觉原则
  • sketch插件安装、常用插件推荐
相关标签
GUIUI设计

    猜你喜欢

      2016-10-07 自译外文 教程 原作者: sketch官网 举报 2212 16 7 0

      连载:sketch中文教程(二)

      0.0°

      你确定要举报连载:sketch中文教程(二)

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年10月07日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      7
      16
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录