《让移动设计更简单 Sketch3》丨NOTES

本书讲了什么

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+更改图形尺寸:等比更改图形大小。


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

推荐阅读更多精彩内容