sketch用户手册三之图形,向量编辑,文本,图像
图形(Shapes)
添加图形
添加预置的图形
图形是sketch最常见的图层类型，Sketch预定义了一些常见图形。比如, 使用快捷键
-
R添加矩形 -
O添加椭圆 -
U添加圆角矩形 -
L添加线条
在拖拽添加的图形时，按住⇧可以使图形的宽和高一致。
在拖拽添加的图形时，按住⎇可以保持图形的中心位置不动(代替默认的从左上方扩大图形)
在拖拽添加的图形时，按住Space可以移动图形的位置，非常适合一来就把图形放错位置的情况。
使用铅笔添加图形
使用快捷键P可以使用铅笔自己绘制图形。
使用svg代码添加图形
直接复制并粘贴SVG代码到画布或者面板上面。比如。复制并粘贴下面的代码到画布，可以得到一个圆形的圈
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</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便可以自己绘制矢量图形，
绘制图形之后，使用Tab或Shift + 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菜单，可以编辑文本的样式，比如:
- 加粗，斜体，下划线
- 调整字体大小
- 字母大小写转换
- 设置对齐方式
- 有序列表和无序列表
使用检查器编辑文本
使用检查器编辑文本
- 创建或使用文本样式
- 调整字体大小，字体类型，颜色等
- 如果使用的是
OpenType font，这里可以进行一些样式修改 - 控制字符，句子，段落之间的空白字符
- 字体自适应设置
- 字体对齐方式设置
修改字体颜色
有两种方式修改字体颜色
-
使用检查器的颜色控制面板
使用检查器的颜色控制面板调整颜色
-
使用填充面板
使用填充面板
将字体转换为矢量图形
选中字体之后，使用Layer > Convert to Outlines或者快捷键⌥ + ⇧ + O可以将字体转为矢量图形
将字体转换为矢量图形
注意
将文本转换为矢量图形之后，便不能再编辑文本本身了。同时如果转换太多文本的话，会降低使用sketch的使用速度。
图像
插入图片
使用Insert > Image…可以直接插入图片，也可以直接将图片从桌面拖到画布的方式来添加图片
替换图片
如果你已经插入了一个图片并调整了大小，这时又希望换一张图片时，可以通过Layer > Image > Replace来重新选择一张图片，新的图片会自动使用之前调整的大小
优化图片大小
当一次添加了比较多的图片到文档时，会增加文档的大小，同时也就降低sketch的速度，可以使用Layer > Image > Minimize File Size来优化图片的大小
编辑图片
双击图片便可以进入编辑模式，可以实现选择图片，裁剪图片，翻转图片等功能
数据
sketch默认包含了许多数据源，数据源主要分为两类:
- 文本类型: 如随机的人物名字，城市信息等
- 图片类型: 各种头像，裁剪的图片等
有了数据源，可以方便的让我们设计各种原型而不用到处去找图片或文本素材。
也可以使用第三方的数据源，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插件，提供了很多实用功能
