sketch用户手册三之图形,向量编辑,文本,图像

图形(Shapes)

添加图形

添加预置的图形

图形是sketch最常见的图层类型,Sketch预定义了一些常见图形。比如, 使用快捷键

  • R添加矩形
  • O添加椭圆
  • U添加圆角矩形
  • L添加线条

在拖拽添加的图形时,按住可以使图形的宽和高一致。

在拖拽添加的图形时,按住可以保持图形的中心位置不动(代替默认的从左上方扩大图形)

在拖拽添加的图形时,按住Space可以移动图形的位置,非常适合一来就把图形放错位置的情况。

使用铅笔添加图形

使用快捷键P可以使用铅笔自己绘制图形。

使用svg代码添加图形

直接复制并粘贴SVG代码到画布或者面板上面。比如。复制并粘贴下面的代码到画布,可以得到一个圆形的圈


  

编辑图形

使用检查器修改图形的角个数,角的弧度,旋转图形位置

如下图所示,选择图形之后,从上往下,红色圈出来的功能依次是调整图形旋转的度数,角的弧度,以及角的个数

编辑图形

翻转图形(Flip Shapes)

使用检查器的如下图所示的按钮,可以在水平或者竖直方向翻转图形

翻转图形

矢量模式编辑图形

双击图形便可以进入矢量编辑模式,可以任意的拖动编辑点来调整图片的形状,也可以点击边添加编辑点,或者删除一个编辑点

图形变形

通过Layer > Transform > Transform或者快捷键 + + T

裁剪图形

使用Layer > Path > Scissors便可以裁剪图形

旋转复制

旋转复制使用选择的图形,根据一个点旋转复制出来多个拷贝对象。使用Layer > Path > Rotate Copies可以完成旋转复制,如使用旋转复制,可以很轻松绘制出如下图形。

旋转复制

首先画一条线,然后旋转复制多份,再调整中心位置即可

布尔计算

当一次选中多个图形时,可以使用工具栏的按钮方便地进行布尔运算

布尔运算按钮

例如有两个图形A和B,A在B的图形的图层下面

  • 合并形状 (Union): A ∪ B
  • 减去顶层形状 (Subtract): A - B (以图层最下面的图形为主)
  • 与形状区域相交 (Intersect): A ⋂ B
  • 排除重叠形状 (Difference): (A ∪ B) - (A ⋂ B)

蒙板

选中多个图形时,Sketch默认以最下面的图层作为模板使用,使用Layer > Mask > Use As Mask可以创建轮廓模板

向量编辑

当预置的图形不能满足需求时,使用快捷键V便可以自己绘制矢量图形,
绘制图形之后,使用TabShift + Tab键可以快速在多个点之间切换。

术语属于约定:

  • 跨越了所有点的线称作path.
  • 两点之间的线称作segment

点类型

选中一个点之后,通过快捷键1,2,3,4可以修改点的类型

  • 1: Straight
  • 2: Mirrored
  • 3: Disconnected
  • 4: Asymmetric

插入点

可以点击path的任意地方插入点,插入点的同时按住Shift键,可以让插入的点位于两个点的中间

弯曲segment

按住时拖动任意的segment,可以起到弯曲segment的效果

闭合开放path

一个图形的path, 可以开放,也可以闭合。即首尾的两个ponit可以连接在一起,也可以不连接在一起。通过Layer > Path > Close Path或快捷键 + + O来闭合它们

偏移path

通过Layer › Path › Offset可以基于现有的path,创建一个偏移了位置的path

反转path

当我们创建了一个开放的path时,它是明确有首尾的点,可以通过Layer › Path › Reverse Order来反转path,这样能方便我们从相反的方向编辑图形

文本

插入纯文本

先按快捷键T,然后在点击画布上想插入文本的地方,即可完成文本的插入。
或者拖动一个框来插入文本,这样当文本内容比较多时,插入的文本都会在拖动的框里面

插入富文本

使用Edit > Paste > Paste as Rich Text或者快捷键+ + + V可以直接插入富文本

插入文本在path上面

首先添加一个矢量图形,如一条线,然后再添加文本,选中文本之后,设置Text > Text on Path,再拖动path时,使它靠近文本即可实现如下效果:

文本在path上面

再次选择Text > Text on Path,可以取消上述效果

编辑文本

使用Text菜单编辑文本

使用菜单栏的Text菜单,可以编辑文本的样式,比如:

  • 加粗,斜体,下划线
  • 调整字体大小
  • 字母大小写转换
  • 设置对齐方式
  • 有序列表和无序列表

使用检查器编辑文本

使用检查器编辑文本
  1. 创建或使用文本样式
  2. 调整字体大小,字体类型,颜色等
  3. 如果使用的是OpenType font,这里可以进行一些样式修改
  4. 控制字符,句子,段落之间的空白字符
  5. 字体自适应设置
  6. 字体对齐方式设置

修改字体颜色

有两种方式修改字体颜色

  1. 使用检查器的颜色控制面板

    使用检查器的颜色控制面板调整颜色
  2. 使用填充面板

    使用填充面板

将字体转换为矢量图形

选中字体之后,使用Layer > Convert to Outlines或者快捷键 + + O可以将字体转为矢量图形

将字体转换为矢量图形

注意

将文本转换为矢量图形之后,便不能再编辑文本本身了。同时如果转换太多文本的话,会降低使用sketch的使用速度。

图像

插入图片

使用Insert > Image…可以直接插入图片,也可以直接将图片从桌面拖到画布的方式来添加图片

替换图片

如果你已经插入了一个图片并调整了大小,这时又希望换一张图片时,可以通过Layer > Image > Replace来重新选择一张图片,新的图片会自动使用之前调整的大小

优化图片大小

当一次添加了比较多的图片到文档时,会增加文档的大小,同时也就降低sketch的速度,可以使用Layer > Image > Minimize File Size来优化图片的大小

编辑图片

双击图片便可以进入编辑模式,可以实现选择图片,裁剪图片,翻转图片等功能

数据

sketch默认包含了许多数据源,数据源主要分为两类:

  1. 文本类型: 如随机的人物名字,城市信息等
  2. 图片类型: 各种头像,裁剪的图片等

有了数据源,可以方便的让我们设计各种原型而不用到处去找图片或文本素材。

也可以使用第三方的数据源,sketch默认集成了Unsplash插件,使用这个插件可以从Unsplash library搜索或者随机插入图片

数据源使用

选择一个需要绑定数据的图形后,可以使用工具栏的Data按钮或者Layer > Data来插入数据

Data

刷新数据

当多数据源提供的数据不满意时,使用快捷键 + + D或者Data菜单的Refresh Data按钮可以刷新绑定的数据

自定义数据源

自定义文本数据源

创建一个纯文本的文件,每行包含一条数据,比如下面的Names.txt

Afghanistan
Albania
Algeria
Andorra
Angola

然后从sketch的偏好设置里的数据源标签里,使用添加数据源功能,选择刚刚创建的数据源文件

Add Data

最后便可以从Data里使用自己刚刚添加的自定义数据源

Use Data

自定义图片数据源

创建一个目录,把希望使用的图片放在里面,采用上述创建文本数据源的步骤,就可以创建一个自定义的图片数据源

备注

自定义的数据源需要保存在本机一个相对固定的地方,如果位置发生改变,sketch会找不到自定义的数据源

第三方数据源

我们也可以使用第三方的插件提供的数据源

  • Kitchen 阿里的开发sketch插件,提供了很多实用功能

你可能感兴趣的:(sketch用户手册三之图形,向量编辑,文本,图像)