数字人Sketch入门学习笔记之一：基础知识

 

【前言】

上一篇说过，Sketch 是一款适用于所有设计师的矢量绘图应用。矢量绘图也是目前进行网页，图标以及界面设计的最好方式。但除了矢量编辑的功能之外，Sketch同样添加了一些基本的位图工具，比如模糊和色彩校正。

对于绝大多数的数字产品设计，Sketch 基本能替代 Adobe Photoshop，Illustrator 和 Fireworks。

      这篇就简单讲解一下Sketch  ，引领初学者走进矢量绘图的大门。（矢量图形编辑软件也是基本相似的）

【学习】

一、熟悉一下界面

 

1、Sketch 的界面设计的非常简洁。最顶端的工具箱包含了绘曲线、制图形、编辑等最重要的操作。

2、Sketch 的画布尺寸是无限的，可以向任意方向无限延伸，你将拥有绝对的自由来规划自己的创作区域。

3、右侧的检查器能让你对正在编辑的图层——有时是正在使用的工具——进行参数调整。包含通用属性和样式属性。

4、左侧图层列表列出了所在页面的所有图层(和切片)，每个涂层都会有一个小小的预览。Sketch支持多页面操作，你可以在图层列表上面的按钮里面添加/删除或者转换到其他页面（或者用键盘上的 Page Up/Page Down来切换）。图层列表始终只会显示当前页面的图层。（这如同EXCEL中的多个电子表格，整个文件为工作簿一样）

     【小结】

      你别看界面简单，麻雀虽小五脏俱全，MAC平面软件设计非常巧妙，很多工具不在表面，该有功能都有。

二、矢量绘制基础

图层是 Sketch 中最基本的构成单位。

不同于其他将图层和对象混为一谈的应用，在 Sketch 里每个对象都有自己的图层。我们所说的“图层”和“对象”其实是一样的意思，这两个词是可以相互替换的。所绘制的点、线、面、图形都是对象，也都占有一层。添加新图层是非常容易的，但我们同时提供了几个隐藏快捷键来帮助你方便的绘制。比如说你可以按住 shift 键来绘制等边图形；按住 option 键来从中心绘制图形，而不是从左上角绘制。

1、移动：直接可以用鼠标移动之，按SHIFT键垂直移动它。也可以按建模方向键，每次移动一个像素。

2、缩放：直接点击，即可缩放。按SHIFT建等比缩放；按ALT键从中间缩放。

3、复制对象：按住ALT建，移动鼠标，就复制一个对象。

 4、下图，为四个对象，矩形、五星图形和复制的五角星图形、线。每个对象占用一层，相互可以覆盖叠加，但互不影响。

 

5、每个对象（图层）都能前后移动位置，覆盖下面的图形。

 

6、不同对象（图层）可以进行布尔运算，形成新的对象。

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

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

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

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

 

你以为布尔之后就变成一个物体了吗？不是的，点击图层列表，你还可以看到布尔之前的两个对象。当点击这个按钮时。

 

你仍然可以更改布尔的算法。选择INTERSECT

 

两个图形就又改变了。

 

7、图层扁平化 Flatten

其实就是把布尔运算的结果转换成为图形，不能再拆分。

 

 

8、矩形改变圆角

第一步建立矩形图形。

 

第二步 调整RADIUS半径。

 

9、点模式编辑。

 首先选择编辑的对象，点击EDIT编辑进入点编辑模式。在编辑图形的时候，检查器会显示出四种不用的点模式：

 

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

 

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

下图是不对称 (Asymmetric)：两个锚点到主点之间的距离是独立的，但他们依然相互对应。

 

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

 

你也可以进入点模式，选择任意一个“直线角点”进行圆角处理。

 

10、建立封闭和开放路径。（你注意，有些命令面板没有，就到菜单里边去找。）选择LAYER--PATHS--CLOSE PATH.

 

使用该命令把封闭路径变成开放路径。

 

再使用该命令能把开放路径变为封闭路径。

 

11、变形旋转工具

变形TRANSFORM可以对多个对象同时变形。

 

旋转工具，可以先移动旋转中心，然后转动。

 

12、旋转复制

这个命令在菜单里 layer--paths--rotate copies.

 

让你选择复制的数量，输入12，就是有13个对象。

 

点击OK，就会出现一个手柄让你调整中心点和半径大小。

 

写的有点太多了，下一篇再谈吧。按照上面说的，演习一遍，基本上就熟悉了。

【后记】

1、矢量格式好啊，文件非常小、由图形对象构成的画面，编辑非常方便。ADOBE FLASH软件就是矢量动画软件，当年非常流行，原因是文件非常小适合在网络传输，显示效果好适合制作卡通类动画、交互编程也非常方便。但后来为什么没有流行起来？不单单是因为网络漏洞问题。乔布斯之所以废了它的缘故，FLASH的SWF矢量格式的动画，硬件设备显示播放的时候，解算相当耗费CPU的计算资源。如果应用到手机平板上，CPU不停地工作，导致设备会发烫，相当耗电的。可能当初FLASH就没有考虑网络应用吧？所以漏洞非常多，补丁一直在打，现在的PDF不也是吗？总是再更新。所以现在的网页上的动画，过去是FLASH天下，现在都是HTML5+CCS3+JQ的天下了。目前只有一些视频FLW格式的还在用，应用范围已经很窄了。可惜，当年我购买FLASH、FLEX、AS3几十本图书，耗费了1年的学习时间呢？好在FLASH在单机2D多媒体交互和片子方面还是有发展空间的，也没有白学。计算机发展的速度就是快啊，你跟不上，就淘汰了。

 2、软件竞争就是激烈啊！ADOBE最近也推出了一款软件测试版，名字叫做Adobe Experience Design CC（ADOBE XD）。这是干什么用的？这是对抗Sketch的吧？ADOBE 好像说 “我的设计地盘，岂能它人进入！”

ADOBE XD 功能与Sketch功能和界面非常像。现在的ADOBE的AI已经非常强大了，但她可能忽然发现UI、UX设计应用软件，这个领域丢失了吧？所以，她有能力把AI软件功能进行精简，把流程简化，面向UI UX设计领域，形成新的产品而占领这块阵地。这对于像ADOBE这样大公司是非常容易的事。

这种做法，不仅在软件是这样的，在硬件产品世界里，也是这样。比如佳能研发出非常高端的相机，然后针对对手不同层次的相机产品，对其高端相机进行精简和阉割，就出品了一系列不同低价格的相机。Intel的CPU生成据说也是这样子，I7 4470K内部还有显示处理芯片（显卡），志强Xeon E3-1230系列CPU去掉内置显示处理芯片，仍然是四核八线程，功能没有差多少，价格却差不少，目的形成不同价位的产品，对抗AMD 。

       3、简单谈谈位图与矢量图吧。他们分别是两种图形算法而保存的两种数据结构。各有优点，各有缺点。

图像格式总体分为为位图（栅格图）与矢量图。

 

矢量数据的优缺点：

优点为数据结构紧凑、文件小、冗余度低，有利于网络和检索分析，图形显示质量好、精度高、放大没有锯齿。

缺点为数据结构复杂，多边形叠加分析比较困难，消耗计算资源。

矢量文件格式：ai、cdr、wmf、fh、swf 、EPS

总之，矢量图：色彩不丰富（缺点），放大不失真（优点），占用空间小（优点），转换格式难（缺点）

位图数据的优缺点：

位图是以像素为基础，图像记录细节丰富，但与分辨率有关，分辨率太低容易在放大会出现锯齿，文件存储量也大。但显示速度很快。优点为数据结构简单，便于空间分析和地表模拟，颜色丰富、表现力较强；

缺点为数据量大，放大有锯齿，有分辨率有关。

位图文件格式很多：JPG、GIF、TIF、BMP、PDF、PNG等

总之，位图：色彩丰富（优点），放大失真（缺点），占用空间大（缺点），转换格式容易（优点）。