本书讲了什么

Sketch3基本操作介绍。

作者什么来头

郑成云，社会化媒体营销实践者，专注网络社交领域。从业6年，涉及社区管理、网络营销,以及移动产品设计工作。曾就职于金山、新浪、海尔、巧贝科技等公司，后加入微博，任高级产品经理。

第1章Sketch介绍（Introduction）

Sketch是一款天量绘图应用。对于大多数的互联网产品设计工作，Sketch能替代Adobe Photoshop，Illustrato:以及Fireworks.

第2章界面（The Interface）

Sketch的界面组成：

画布（Canvas）位于界面中间，快捷键A在画布上创建画板。

画板(Artboards)在画布中的白色背景区域便是画板，一个画板不能被嵌入到另一个画板。

检查器（Inspector）位于界面右侧，显示正在编辑图层的属性。

图层列表（Layer List）位于界面左侧，列出了当前画布中画板的所有图层。可以通过拖动操作改变页面的顺序，也可以从一个页面拖动图层至另外一个页面。

工具栏（Toolbar）位于界面顶部，共60多个工具。右击工具栏，进入“定制工具栏”(Customize toolbar)对话框来添加工具和快捷键。

第3章图层（Layers）

在Sketch里，每个对象—包括图形、图片、文本等，有自己的图层。图层和对象是可以相互替换的。

添加图层（Adding Layers）

直接从工具栏添加就好，拖动画出图形。按住shitf可以绘制等边图形；按住option可以从中心点向外绘制图形；按住空格可以拖动图层和画板的起始点。

选择图层（Selecting Layers）

点击图形选择或从图层列表中选择，选择多个时按shift，或用鼠标拉虚线矩形框选，框选时按option则只能选中完全包含在矩形内的图层。重叠的图层，鼠标右键选择Pick Layer即可。如果是一组图层，单击选中组，双击选组中图层。按住command+点击可以直接选择组中图层，双击可以进入更深层。

移动图层（Moving Layers）

直接拖动就可移动图层，拖动时按住shift可让图层按水平或垂直方向移动。按住option再拖动可以直接复制一个图层，再按command+D，会重复刚才的操作。按option找到被覆盖的图层选种它，按command+鼠标移动该图层。

调整大小（Resizing Layers）

按shift拖动手柄，等比变化。按住option拖动手柄，以中心点调整大小。Command+方向键调整1px宽或高，按住shift后，每次调整10px。

编辑图层（Editing Layers）

双击进入或选种图层点击Edit进入编辑模式，按两次ESC或一次Return退出编辑模式。

第4章图形（Shapes）

点是组成每一个图形的基本单位，它们会被直线或曲线连接成一条路径。一个图形可以包含一个或多个路径。

4.1编辑图形（Editing Shapes）

双击图形进入编辑模式，可以拉动点，新增点，以及用delete删除点。要将直线变成曲线，双击某一个点，拉动新出现的手柄即可。

不同的点模式(Different Modes)

直线角(Straight )当刚刚点击画布的时候，会添加一个直角，也就是说没有任何锚点所得的便是一条直线。

镜像(Mirrored)锚点会镜像对应。两个锚点将会与主点距离相同并且正好相对。当主点并非直角时，镜像便是默认的点模式。

不对称（Asymmetric）两个锚点之间的距离是独立的，但它们依然相互对应。

断开连接(Disconnected)锚点间完全独立，互不影响。

可以用1~4键来选中不同的模式，1直角，2镜像角，3断开连接，4不对称。

绘制VS编辑(Drawing versus Editing )

除了用图形工具添加图形，还可以用矢量工具绘制图形，点击Insert>Vector，在画布上单击添加第一个锚点，继续点击别处添加第二个锚点。系统会自动绘制线条连接两点，单击别处不松开鼠标，拖动锚点可以绘制曲线，然后点击第一个锚点，便能绘制出封闭的矢量图。

封闭路径VS开放路径(Closed versus Open )

封闭图形的最后一条边会与第一条相连接，开放图形则会在起点和终点间留出一个间隔。可以通过点击Layer>Paths>Close Path，来切换封闭/开放路径。

快捷键(Shortcuts)

绘制矢量图时，可以按住shift再画之后的点，Sketch会自动对齐到前一点的45度角方向。如果在两点之间添加新的锚点时按住shift，便会得到两点间的锚点。如果按住command键，单击两点间的线条，则会在线条正中间添加锚点。

选中多个点(Multiple Selection)

选择点的时候按住shift。

4.2布尔运算（Boolean Operations）

子路径(Subpaths)

使用布尔运算，Sketch会通过布尔算法将最上层的图形变成下一层图形的子路径。

布尔运算方式(Operations)

合并形状(Union):结果会得到两个矢量区域的总和。

减去顶层形状(Subtract ):结果是顶层矢量的区域会从下一层的图形上移。

与形状区域相交(Intersect):结果是会保留原图形重叠的部分。

排除重叠形状(Difference ):结果是只保留原图形不重叠的部分，是“与形状区域相交”运算方式的反向。

图层列表(LayerList)

对于一个含有多个子路径的图形，可以浏览左侧的图层列表。

扁平化(Flattening)

将一个图形里的子路径呈现为一个路径，将层级变得更扁平。但有的图形无法扁平为一个路径。选择需要扁平化已完成布尔运算的图形，然后点击工具栏中的Flatten。

4.3变形工具（Transform）

选中图形，点击Transform，可以拖动四角任意锚点来改变图形形状。拖动中间的锚点可以使图形显得倾斜。

4.4蒙版（Masking）

蒙版能够让设计师有选择性地显示出图层的一部分。所有图形都可以变成蒙版，选中图形，然后点击Layer>Use as Mask，所有在这个蒙版上的图形都会被剪切成蒙版的内容并显示出来。

限制蒙版(RestrictingMasks)

如果不想所有的图层都被蒙版剪切，可以将蒙版和想要被剪切的图层单独编组，通过这种方式来限制蒙版的使用情景。一旦蒙版被编组，其他一切在组外的图层就都不会被蒙版剪切了。

图形蒙版(Maskwith Shape)

同时选中一个图形和图片，点击Layer>Mask with Selected Shape，可以直接将这个图形作为选中图片的蒙版。

Alpha蒙版(Alpha Mask)

渐变图片，选中蒙版，点击Layer>Mask Mode>Alpha

Mask。

4.5剪刀工具（Scissors）

用来剪去矢量图形的线条，先选中矢量图形，然后点击剪刀工具。然后点击矢量图形的边来剪切图形，完成后单击图形外的画布，或按回车。

4.6复制旋转（Rotate Copies）

Layer>Paths>Rotate Copies，它能复制选中的图形并按特定的中心和角度旋转。

分离路径(Splitting)

所有的复制图形都会被视为原图形的子路径，如果想让它们成为完全独立的图层，点击Layer>Paths>Split即可。

4.7铅笔（Pencil）

可以使用铅笔工具来自由地绘图。当松开鼠标键之后，Sketch会简化路径，顺滑曲线。

第5章文本（Text）

5.1文本检查器（Text Inspector）

自动大小文本框VS固定大小文本框(Auto vs Fixed)

点击Width后面的Auto自动或Fixed固定来设置。

5.2文本渲染（Rendering）

Sketch使用操作系统原生的字体渲染，好处就是当进行网页设计时，可以肯定作品中的文本都是精准的。

子像素杭锯齿技术(Sub-Pixel Anti-Aliasing)

一台电脑显示器是由网格状的像素组成的。可是普通屏幕没有足够多的像素来精确地展现文字的曲线，这就要用到抗锯齿技术，将那些被文字曲线遮住的像素稍稍变亮一些，并在视觉产生更平滑的效果。

子像素抗锯齿更进一步，考虑到屏幕上的像素由红色、绿色和蓝色组成，子像素抗锯齿并非是高亮全部像素，而是只高亮红色或者蓝色部分。

无法实现抗锯齿时(When it Fails)

没看懂，暂时也用不上，略。

为iOS设计(Designing for iOS)

Apple开始发布iPhone时，决定不用子像素抗锯齿技术渲染手机上的文本，原因是显示器上的像素都是由红、绿、蓝的光形成的。而iPhone是可以横屏、竖屏切换的，也就是说本来垂直排列的红、绿、蓝像素会水平排列。这样一来，整个子像素抗锯齿技术就崩溃了。Apple原本可以保持竖屏时候文字渲染，而放弃横屏情况，但Apple理智地决定保持竖屏与横屏一致的体验。

所以在为iPhone或者iPad设计交互页面时需要记住在画布上，Sketch会对文字进行子像素抗锯齿渲染，但在移动设备上，又字并不会被这样处理。设计师需要告诉Sketch无需进行子像素抗锯齿渲染，点击Sketch>Preferences>General，取消选择Sub-Pixel Anti-Aliasing。

5.3共享式样（Shared Style）

将多个文本设置为同一式样并且能够重复利用、提高设计效率。

创建文本式样(Creating Style)

书中方法已过时，选中文本直接点击右侧检查器里的Create New Text Style。

新的文本图层(New Layers)

选中新建的文本图层，然后再指示器中选择之前设置好的式样即可。

5.4文本路径（Text on Path）

将文字放在矢量图上，点击Type>Text on Path。

5.5文本转化为轮廓（Convert To Outline）

把文本转化为矢量图形，点击Type>Convert Text to Outline。（耗内存）

第6章图片（Images）

6.1位图编辑（Bitmap Editing）

任意图层都能转化成位图，Layer>Flatten Selection to Bitmap。双击图片进入编辑模式，

选区(Selection)在图片上选择一个矩形区域。

魔棒(Magic Wand )单击画布士任一点开始拖动以选择一个区域，拖动的范围越大，容差就会越大。

反向(Invert )当前未被选中的区域会被选中，反之亦然。

剪切(Crop )剪去选区之外的区域。

填色(Color )为选区填充特定颜色，出现拾色器供设计师选择颜色。

矢量化(Vectorize ):将选区转变为的图形图层。

6.2色彩校正（Color Adjust）

检查器中的色彩校正板可以微调现有图片的颜色。

色调(Hue )调整图片色调。

饱和度(Saturation )调整图片饱和度。

明亮度(Brightness )调整图片明亮度。

对比度(Contrast )调整图片对比度。

第7章符号（Symbols）

符号本身其实就是一种特殊的组，在图层列表中也是以组的形式出现，符号会有一个紫色的图标。

7.1创建符号（Creating Symbols）

选中几个图层，然后点击工具栏的Creat Symbol或点击Layer>Creat Symbol。如果选中多个图层，Sketch会先编组，然后图层列表里这个组的图标变成紫色。再进入Insert>Symbol，在画布中使用这个符号。可以复制粘贴这个符号，任何针对某一副本的编辑，都会同步到其他所有副本上。

7.2排除文本（Exclude Text）

这个功能貌似没有了。

7.3管理符号（Organising Symbols）

双击任一符号，或点击图层列表左上角Page的向下箭头，切换到Symbol来管理符号。

7.4交换符号（Swapping Symbols）

没看懂。

第8章式样（Styling）

检查器中，会显示出所选图层的式样选项。从共享式样开始，接着是通用透明度、通用混合模式，然后是填充、边框、阴影、模糊和镜像。细节略过。

第9章编组（Grouping）

9.1编组（Groups）

选中多个图层command+G或右键选择Group Selection。双击组内图形或按住command单击组内图层，可以直接选中组内图层。也可以选中组后，在检查器中勾选Click-through when selecting。

9.2画板（Artboards）

Sketch里的画板是在无限的画布中的一块固定大小的画框，画板是可选择的。当设计师的文件中包含画板的时候，画板之外的部分会变暗，这样设计师就可以清晰地看到什么在画板中，什么不在画板中。

添加画板(AddingArtboards)

Insert>Artboard，或按A，点击检查器底部的“+”，可以创建自定义画板。点击Arrange>Make Grid可以创建固定行列的画板，并能设置画板的间距。

移动画板(MovingArtboards)

如果画板中有内容了，Sketh就不会让设计师直接选中画板。可以现在图层列表中选中画板，然后拖动或者在检查器中改位置和大小。

网格和标尺(Grids and Rulers)

每一个画板都是在画布上相对独立的创作空间，所以每个画板都有自己的标尺和网格选项。点击右上角View>Show Rulers，点击标尺出现基准线。

模板(Templates)

File>New from Template，如果选择Mac APP Icon，会看到每种常用尺寸的画板。

9.3页面（Pages）

一个Sketch文件内可以包含多个页面。与其一个页面一个文件，不如将多个相关页面放在一个Sketch又件中。这样做的好处很多，比如说符号和共享式样将在一个Sketch文件中的所有页面内通用。另一个好处就是，虽然每个页面都可以轻松地编辑12个画板，但是取决于不同的内容、大小和数量，设计师会发现把过多的画板分布在多个页面中会更加高效。

第10章画布（Canvas）

10.1像素缩放（Pixel Zoom）

在Sketch里，设计师可以用两种万式查看设计师的作品，这两种r,式可以在View>Show/Hide pixel Grid中切换。按实际尺寸查看时，两种方式没区别，放大之后有区别。设计师所看到的，就相当于先把这张图处理为PNG格式，再在MAC自带的预览中放大查看。

10.2标尺、参考线、网格（Rulers，Guides，Grids）

双击标尺可重设标尺原点。把参考线移出标尺外就能移除参考线。网格分为规则网格和布局网格两种，规则网格control+G，不规则网格没介绍。

10.3测量（Measuring）

距离(Distance)按住option键，会显示已选中图层与鼠标悬浮所在图层之间的距离。

大小(Size)如果要调节图层的大小，Sketch会显示出具有相同长度或宽度的图形数据。

第11章导出（Exporting）

11.1导出图层（Exporting Layers）

单击工具栏中的导出按钮时，Sketch会列出画布、画板、切片中所有可导出的图层，可以从中选择导出。也可以事先选好图层再点击导出按钮（工具栏）。如果只想导出一个图层，可以选中图层，点击检查器底部的Export。

导出图层时画布上其他的元素都不会被一起导出，如果它表面有其他图层或者有背景图层，也都不会被包含进导出的文件。这个方法适用于在画板中导出图标。单击检查器导出右边的+按钮，添加新的导出尺寸。

图层列表(LayersList)

在图层列表中，有的图层多了一个小刀的图标，说明这个图层是可导出的。下次点击导出按钮，这个图层也会和其他切片一起显示在列表中。无需先建立切片也能直接从图层列表中导出图层。直接在列表中将图层拖到Finder或者其他App里，Sketch会迅速地帮助设计师导出一张PNG图片。如果按住option键，则会将它以PDF数据写入剪贴板中。

11.2切片（Slices）

设计师能够将画布中的特定区域导出为一个文件。一个Sketch文件可以有无数个切片，每个切片都能导出不同文件。

图层切片(Slicesas Layers)

切片被视为普通图层 。设计师可以把想要导出的多个图层编组，形成一整个切片。当设计师移动这个组的时候，切片也会跟着移动。当图层显示为切片状态下的时候，在检查器中能够设置切片导出属性，这和导出图层是一样的原理。但要确保该图层为切片模式。

添加切片(AddingSlices)

Insert>Slice，在画布上创建切片区域，也可点击一个图层，Sketch会立即围绕所选图层建立一个新的切片。

修剪(Trim)

选中修剪后，每一个被导出的切片中的透明外围都会被剪去。

11.3文件格式（File Formats）

JPG:照片文件所常用的格式，但不支持透明度二

PNG:如果设计师画的内容中有透明的像素，选择NN(;将是最好的选择。

TIFF:支持透明度，但这种格式的文件会更大、

PDF:EPS:保存矢量对象，目前基本支持。

SVG:能很好地保留图形和文本的导出，但是不支持阴影使用这种格式，主要可以让该文件在其他应用中导入。

11.4画板导出（Artboards）

当画布上己经有几个画板了，单击导出，Sketch会推测想要导出的画板，并自动把它们变为可导出的状态。

11.5CSS式样（CSS Attributes）

当设选中了任意数量的元素，选择Edit>Copy CSS Attributes，Sketch便会为设计师选中的对象声明CSS中的边框、填充、渐变、阴影，以及文字样式。

11.6打印（Printing）

Sketch由的画板和切片都是可以打印的。进入File>Print,会得到一个画板列表，果没有画板的话就会是切片列表。接着会出现一个标准的打印对话框让设计师设置打印需求。

第12章导入（Importing）

Sketch支持导入JPG/PNG/TIFF/SVG/PDF/EPS格式的文件，可以将文件拖进Dock中的Sketch图标，或直接拖进一个已经打开的画布里。PSD和AI文件只能以位图形式打开。

第13章设置（Preferences）

13.1通用设置（General）

略

13.2画布设置（Canvas）

Retina

Mac和i0S的显示器会用4个像素来显示1个传统的像素。新的Retina

Mac Book Pro上的像素是旧版本的4倍，只是用更多的像素来展现图片。默认设置下，Sketch也会这么做，更多的像素会被用来展现细节，如果只想让显示器显示实际的每个像素，那么可以关闭Retina Canvas的选项。

放大至选区(Zoom In on Selection)

通过View>Zoom In/Out，或command++/-，会放大/缩小至画布的中心。

13.3图层设置（Layers）

比例缩放(ResizeProportionally)

如果新建组的比例是被锁住的，那么这个图只会按照固定比例缩放。如果没有锁住，可以任意改变其大小。

剥去文本式样（Strip Text Style）

对于粘贴进Sketch的文本，将除去所有的字体、段落、颜色信息。

第14章性能（Performance）

模糊（Blurs)

模糊是非常消耗系统资源的效果，需要先将图层渲染成一个位图(已经很消耗资原)，然后再在上面添加一个模糊(这将更加消耗资源)，模糊半径越大。消耗的资源一也就越大。

阴影(Shadows)

在图片上渲染阴影也是很耗费资源的，阴影越多(大)，延迟也越长。

多页面(MultiplePages)

一个画布/页面能轻松负载12个画板，但如果多个画板上都有大面积的阴影和模糊效果，操作起来就会很慢，解决方法就是把一部分画板移到新的画布/页面上去。

文本转化为轮廓（Text to Outlines)

布尔运算是一种非常复杂的数学运算，如果一个阴影效果包含了数个做布尔运算的子路径的话，那么文件就会遇到问题。如果执意要将文本转化为轮廓，要将每个字母都单独放在一个图层当中。

第15章Sketch镜像（Sketch Mirror）

IPhone（安装Sketch）和Mac连接同一wifi，点击右上角的Mirror，可在iPhone上查看

第16章Sketch工具箱（Sketch Toolbox）

Sketch Toolbox是下载和安装Sketch插件的利器，并非是Sketch官方发布的，而是Shahruz在Github上提交了源代码的一个插件编译包。

使用Sketch工具箱(Use Sketch Toolbox)

直接在Sketch Toolbox里面安装感兴趣的插件，然后什么都不用做，再打开，就会在菜单中的Pluqins里找到刚才下载的所有插件。

自动生成内容插件(Content Generator Sketch Plugin)

可以自动随机填充男性、女性或者自然风光的图片、名称、电话号、性别、邮箱等。

Sketch测量插件(Sketch Measure)

Sketch测量插件(SketchMeasure)超级智能地在作品上添加图形尺寸、距离、颜色、坐标、设置和文本属性的附注，方便快捷，而且成品整洁漂亮。宪全不用手写标注，搞定后导出成PDF，直接发给技术小伙伴，大大提高沟通效率。Plugins>Sketch Measure。

Sketch导出插件(Sketch Export Assets)

Sketch导出插件用于导出符合iOS、Android需要的图片元素。在画板中选择要导出的图层.后，通过Plugins>Sketch Export Assets。

重命名插件(Rename It)

为了帮助设计师批量修改图层名称，使用control + command + R组合键。

第17章快捷键（Shortcuts）

17.1通用快捷键（General Shortcuts）

control+h:触发选区手柄。

control +l:触发f}动参考线。

control+g:触发网格。

Space:抓手工具。

Enter:编辑所选图层。

Command+3:滚动至所选图层。

Command +2:放大所选图层。

Z:放大工具。按住Z键，用鼠标单击拖动出一个区域放大。缩小使用Z+alt组合键再鼠标单击。

Escape:退出当前工具，取消选择所有图层或返回检查器。

Tab/Shift—tab:在当前群组中切换不同图层。

17.2插入图层快捷键（Inserting Layers）

略，界面上写的一清二楚。

17.3移动和编辑图层（Moving and Resizing Layers）

option+拖拽鼠标:复制一个图层。

option+鼠标悬停:显示两个图层之间的距离。

option+更改图形尺寸:两边对称地更改图形尺寸。

shift+更改图形尺寸:等比更改图形大小。

实战篇略，看视频更直观。