本书讲了什么
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+更改图形尺寸:等比更改图形大小。
实战篇略,看视频更直观。