Sketch(一)——介绍、安装
简介
Sketch 是一款适用于所有设计师的
矢量绘图应用。
- Sketch VS Photoshop
| Sketch | Photoshop |
|---|---|
| 接近网页渲染效果 | 几乎没有网页样式渲染 |
| 缺少快捷键 | 大把大把的快捷键 |
| 轻量级软件，运行起来非常快 | 文重量级软件，其实挺慢的 |
| 一个文档，多个画板 | 一个文档，一个画板 |
总结:Setch是一个为网页设计和UI设计而打造的软件，但是无去完全替代PS,PS是一个优秀的图片处理软件，但是在UI设计和网页设计上并不顺手。
Sketch安装
-
官网：https://www.sketchapp.com/
-
汉化
汉化插件地址：https://oursketch.com/plugin/sketchi18n
-
进入sketch
界面详解
图层
- 图层是 Sketch 中最基本的构成单位。
- 添加图层
- 添加图层最简单的方式便是直接从工具栏选择一个标准图形。比如选中矩形工具，光标会变成一个右上角有个小矩形的十字图案。这时你只需在画布上单击并拖动鼠标来添加你想要的形状。松开鼠标，随即完成这个矩形，并开始编辑它。
- 按住 shift 键来绘制等边图形
- 按住 option 键来从中心绘制图形，而不是从左上角绘制。
- 选择图层
- 同时选择多个图层
- 你可以按住键盘上的 Shift 键来同时选择多个图层，当你点击其他图层时，之前选中的图层也会为你保留。
- 编辑图层
- 双击一个图层就可以进入图层的编辑模式。
- 可以单击图层外任一点，或者按下Esc键，来随时退出图层的编辑模式
- 改变大小
- ⌘→会将图层宽度增加 1px
- ⌘←则会将宽度减少 1px
- ⌘↓ 和 ⌘↑则分别将长度增加和减少 1px
- 如果同时按住 shift 键，每一次更改的数值将会变成 10 px
图形
在你的文件中最常见的图层应该就是图形了。Sketch 提供了多种不同的基本图形供你选择：圆形，矩形，星型等等。这几个图形中会有几个有趣的额外选项，比如星型和圆角矩形。
-
图形编辑
每当你绘制一个新的图形或是编辑一个现有的图形，你其实都是在和点做交互，你在屏幕上看到的是 Sketch 将这些点连接起来的线。有时是直线，有时是曲线。
-
布尔运算
如果Sketch的标准图形中没有你想要的图形，那就需要你自己创作了。你的第一个想法也许是用矢量工具来手绘出来，然而你会发现很多复杂的图形都可以轻易地被拆分成基本的图形，布尔运算正是为了帮你实现这一点——将几个基本图形结合成一个复杂图形。
- 联集 (Union)：合并的结果是会得到两个矢量区域的总和。
- 减去顶层 (Subtract)：这一项的结果是顶层矢量的区域会从下一层的图形上移去。
- 交集 (Intersect)：与形状区域相交的结果是会保留原图形重叠的部分。
- 差集 (Difference)：排除重叠形状的结果是只保留原图形不重叠的部分。
蒙版
- Sketch里的蒙版可以让你有选择性的显示出图层的一部分。比如说在一个图片上圆形蒙版，那么这张图片就只会显示出圆形内部的内容。
- Sketch中提供两种Mask，一种是
Outline Mask，即普通的Mask，让遮罩的内容按照Mask的形状来展示；另外一种是Alpha Mask，即透明的Mask，利用透明Mask的颜色透明度实现被遮罩内容的处理。下图是官方给的两种Mask对比图。
- Outline Mask（普通蒙版）
- 普通Mask的应用场景主要是利用Mask处理图像的形状，典型的应用是处理社交网络的头像，下面以圆形头像为例看看在Sketch中是怎么操作的。
- 首先在Sketch中导入想要处理的头像图片
- 绘制一个圆形，位于头像图片上方，需要注意的是，圆形的大小不可超过图像的大小，因为超过遮罩内容后，超出的部分会显示Mask的内容，失去遮罩的效果。
- 选中头像图片和圆形，在图像上右键点击，在弹出的菜单中选择“Mask(蒙版)”即可
- Alpha Mask
- 按照普通Mask的方式先生成普通的mask，然后在组合中选中mask，再在功能菜单中依次选中“Layer”→“Mask Mode”→“Alpha Mask”
- 变更为Alpha Mask，我们就可以调整 Mask的透明度，对图像进行进一步的处理，选中Mask，再在检查器Fills中，点击fill上方的颜色选择器，再调整透明度即可。