Sketch的界面设计非常简洁。工具箱包含了最重要的操作。左侧管理图层,右侧编辑图层,中间就是创作的大画布。
画布Sketch 的画布尺寸是无限的,可以随意发挥。可以在画布上直接创作,也可以新建固定尺寸的画板创作,画板数不受限制。
编辑器对齐、坐标、大小、透明度、对称、角度、圆角
position:坐标
size:大小
trasform:角度
flip:对称
radius:圆角
样式属性
边框与填充你可以根据需要勾选,可以控制它们的透明度与叠加模式,也可以分别控制它们的颜色、透明度与叠加模式等。
带“ ”的都可以重复多次添加(叠加)
opacity:透明度
blending:叠加模式
fills:填充
borders:描边
position:位置(描边)
shadows:内阴影
inner shadows:外阴影
gaussian blur:高斯模糊
图层列表
多页面操作
Sketch支持多页面操作,你可以在图层列表上面的按钮里面添加/删除或者转换到其他页面(或者用键盘上的 Page Up/Page Down来切换)。图层列表始终只会显示当前页面的图层。
画板
蒙版
布尔运算
共享组件
工具栏
Sketch 的工具栏涵盖了你创作当中所需要的所有工具。
你还可以根据自己的习惯在自定义,右击工具栏,进入Customize toolbar…来添加工具和快捷键。
图层图层是 Sketch 中最基本的构成单位。在 Sketch 里每个对象都有自己的图层。
添加图层
添加图层最简单的方式便是直接从工具栏选择一个标准图形,或使用快捷键。
图层:单击选择,双击编辑
同时选择多个图层
按住 Shift 键选择多个图层。反之按住 Shift 键去点击一个已经选中的图层,则会取消选择。
快速选择组中的图层
编组能方便的管理内容,有时还能预防无意的编辑操作。单击组,整个组会被视为一个图层,双击才会进入组内选择具体图形。
当然,一次直接选中某一具体图层,按住 command 键,来直接选择组里的图层。
同时按住 shift 键,则能选择多个图层。
移动图层
按住 alt 键拖动图层拷贝图层,也可以command c/v。command D重复拷贝。
键盘
直接使用键盘调整图层大小。相对于鼠标,使用键盘能更好实现精确到像素的调整。按住 command 键和方向键来操作。⌘→会将图层宽度增加 1px,⌘←则会将宽度减少 1px。同样的,⌘↓ 和 ⌘↑则分别将长度增加和减少 1px。同时按住 shift 键,每一次更改的数值将会变成 10 px。
缩放
改变一个图层的大小时,它的式样元素并不会随之变大变小:一个 24x10的图形上 4px的描边在这个图形被拉伸至 240x240的时候,将仍保持 4px的描边。想同时改变的话那就需要使用编辑菜单当中的缩放工具。
图层透明度快捷键
选中一个图层,按 1-9 的数字快捷键来快速将图层透明度从 10% 调至 90%,按下0则会将透明度调至100%。
填充
Sketch 里为图形填充纯色、渐变、图片(或图案)以及杂色。
填充选项从左至右分别是:
・纯色
・线性渐变
・径向渐变
・环形渐变
・图案填充
・杂色填充
描边
除了文本之外的所有图层都可以有添加描边,可以给边框设定不同的粗细、颜色和混合模式。
边框选项从左至右分别是:
・纯色填充
・线性渐变
・径向渐变
・环形渐变
描边属性设置
阴影
模糊
Sketch提供了四种不同的模糊方式,可以在模糊工具的区域中进行选择:
・高斯模糊(Gaussian Blur):能让图层均匀的模糊
・动态模糊 (Motion Blur):仅向一个方向模糊,造成一种运动的错觉
・缩放模糊 (Zoom Blur) :从一个特定的点向外模糊
・背景模糊 (Background Blur) :将图层下一层的内容模糊
编组
command G
添加画板
添加新画板,添加 > 画板 (Insert > Artboard), command D 的快捷键来重复添加画板。
画布放大
按住 command 键并滚动鼠标滚轮来放大查看。
按住Z 键 鼠标框选来快速放大某一特定区域(option Z缩小)。
距离
按住option 键,Sketch会显示出已选中的图层和的鼠标现在所悬浮的图层之间的距离。
导出
文件 > 导出… (File > Export…) 或者直接单击工具栏中的导出按钮。
图层 VS 切片
选中画板或者切图,单击检查器底端的 Make Exportable,设置前缀,选择图片格式。
添加切片
添加 > 切片(Insert > Slice),并在画布上单击拖动鼠标创建一个新的切片区域。在切片工具中,也可以直接直接单击一个图层,Sketch 会立即围绕那个图层建立一个新的切片。
命名
可以为每一个切片单独命名,同时他们也会以这个名字保存进磁盘。
小技巧:在文件名中加入了一个斜杠 (一个"/"),那么Sketch就会自动新建一个文件夹,并把这个文件放入其中。如果将切片命名为 foo/bar.png ,那么Sketch会先创建一个叫做 foo 的文件夹,然后在里面创建一个叫 bar.png 的图片。
支持导出的文件格式
JPG、PNG、TIFF、PDF、EPS、SVG:
不支持导出的文件格式
PSD: Photoshop 文件是封闭且不支持导出的,如果有Adobe CC的套件,可以将PS文件导出为 .PDF,并导入Illustrator。
AI: Sketch目前不支持.AI文件,但是Illustrator可以打开从 Sketch 里导出的 .PDF 或 .SVG 文件。
导入支持导入的文件格式
JPG、PNG、TIFF、SVG(Sketch 支持导入 SVG 文件,但是可能并不是100%,目前 SVG 有一些概念我们还不支持)、PDF 、 EPS(Sketch 支持导入 PDF 和 EPS 文件,但是和 SVG 一样,有一些概念无法支持,文件内容可能无法完整显示)
不支持导入的文件格式
PSD: Sketch 只能以位图形式打开 .psd 文件。
AI: Sketch 只能以位图形式打开 .ai 文件。
快捷键Sketch 有一系列为数不多但相当实用的快捷键,他们能大大提高你的工作效率。
通用快捷键
・control h: 触发选区手柄
・control l: 触发自动参考线
・control g: 触发网格
・Space: 抓手工具
・Enter: 编辑所选图层
・⌘ 3: 滚动至所选图层
・⌘ 2: 放大所选图层
・Z: 放大工具。按住 Z 键,用鼠标单击拖拽出一个区域放大。缩小啧使用 Z alt 再用鼠标单击。
・Escape: 退出当前工具,取消选择所有图层或返回检查器。
・Tab/Shift-tab: 在当前群组中切换不同图层。
添加图层
・R: 添加一个矩形
・O: 添加一个椭圆
・L: 添加一条直线
・U: 添加一个圆角矩形
・T: 添加一个文本图层
・V: 添加矢量图层
・P: 铅笔工具
移动图层 & 更改尺寸
・alt 拖拽鼠标: 复制一个图层
・alt 鼠标悬停: 显示两个图层之间的距离
・alt 更改图形尺寸: 两边对称的更改图形尺寸
・shift 更改图形尺寸: 等比更改图形大小
隐藏命令 :Sketch 有一些隐藏的偏好设置,对于一些特定的使用需求将会很有用。想要使用这些指令,进入到 Mac 下的 “终端” ,然后输入这些命令。重启 Sketch 即会生效。要想关闭其中的任何一项设置,把命令中的 YES 改成 NO 即可,反之亦然。
defaults write com.bohemiancoding.sketch svgExportSkipAssignIdToLayerName -bool YES
例如上面这条指令被设置成 YES, 图片导出 SVG 格式时,Sketch 就不会使用图层 ID 作为名称。
,