【前言】
上一篇说过,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、简单谈谈位图与矢量图吧。他们分别是两种图形算法而保存的两种数据结构。各有优点,各有缺点。
图像格式总体分为为位图(栅格图)与矢量图。
矢量数据的优缺点:
优点为数据结构紧凑、文件小、冗余度低,有利于网络和检索分析,图形显示质量好、精度高、放大没有锯齿。
缺点为数据结构复杂,多边形叠加分析比较困难,消耗计算资源。
总之,矢量图:色彩不丰富(缺点),放大不失真(优点),占用空间小(优点),转换格式难(缺点)
位图数据的优缺点:
位图是以像素为基础,图像记录细节丰富,但与分辨率有关,分辨率太低容易在放大会出现锯齿,文件存储量也大。但显示速度很快。优点为数据结构简单,便于空间分析和地表模拟,颜色丰富、表现力较强;
缺点为数据量大,放大有锯齿,有分辨率有关。
位图文件格式很多:JPG、GIF、TIF、BMP、PDF、PNG等
总之,位图:色彩丰富(优点),放大失真(缺点),占用空间大(缺点),转换格式容易(优点)。