注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

数字人的学习空间

分享技能和感悟

 
 
 

日志

 
 

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

2016-09-23 06:54:42|  分类: 平面设计 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
数字人Sketch入门学习笔记之一:基础知识 - 数字人 - 数字人的学习空间
 
【前言】

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

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

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

【学习】

一、熟悉一下界面

数字人Sketch入门学习笔记之一:基础知识 - 数字人 - 数字人的学习空间

 

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

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

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

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

     【小结】

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


二、矢量绘制基础

数字人Sketch入门学习笔记之一:基础知识 - 数字人 - 数字人的学习空间

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

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

数字人Sketch入门学习笔记之一:基础知识 - 数字人 - 数字人的学习空间

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

2、缩放:直接点击,即可缩放。按SHIFT建等比缩放;按ALT键从中间缩放。

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




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

数字人Sketch入门学习笔记之一:基础知识 - 数字人 - 数字人的学习空间

 
5、每个对象(图层)都能前后移动位置,覆盖下面的图形。
数字人Sketch入门学习笔记之一:基础知识 - 数字人 - 数字人的学习空间

 

6、不同对象(图层)可以进行布尔运算,形成新的对象。

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

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

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

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

数字人Sketch入门学习笔记之一:基础知识 - 数字人 - 数字人的学习空间

 

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

数字人Sketch入门学习笔记之一:基础知识 - 数字人 - 数字人的学习空间

 

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

数字人Sketch入门学习笔记之一:基础知识 - 数字人 - 数字人的学习空间

 

两个图形就又改变了。

数字人Sketch入门学习笔记之一:基础知识 - 数字人 - 数字人的学习空间

 

7、图层扁平化 Flatten

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

数字人Sketch入门学习笔记之一:基础知识 - 数字人 - 数字人的学习空间

 

数字人Sketch入门学习笔记之一:基础知识 - 数字人 - 数字人的学习空间

 

8、矩形改变圆角

第一步建立矩形图形。

数字人Sketch入门学习笔记之一:基础知识 - 数字人 - 数字人的学习空间

 

第二步 调整RADIUS半径。

数字人Sketch入门学习笔记之一:基础知识 - 数字人 - 数字人的学习空间

 

9、点模式编辑。

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

数字人Sketch入门学习笔记之一:基础知识 - 数字人 - 数字人的学习空间
 

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

数字人Sketch入门学习笔记之一:基础知识 - 数字人 - 数字人的学习空间

 

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

数字人Sketch入门学习笔记之一:基础知识 - 数字人 - 数字人的学习空间


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

数字人Sketch入门学习笔记之一:基础知识 - 数字人 - 数字人的学习空间

 

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

数字人Sketch入门学习笔记之一:基础知识 - 数字人 - 数字人的学习空间

 

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

数字人Sketch入门学习笔记之一:基础知识 - 数字人 - 数字人的学习空间

 

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

数字人Sketch入门学习笔记之一:基础知识 - 数字人 - 数字人的学习空间

 

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

数字人Sketch入门学习笔记之一:基础知识 - 数字人 - 数字人的学习空间

 

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

数字人Sketch入门学习笔记之一:基础知识 - 数字人 - 数字人的学习空间

 

11、变形旋转工具

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

数字人Sketch入门学习笔记之一:基础知识 - 数字人 - 数字人的学习空间

 

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

数字人Sketch入门学习笔记之一:基础知识 - 数字人 - 数字人的学习空间

 

12、旋转复制

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

数字人Sketch入门学习笔记之一:基础知识 - 数字人 - 数字人的学习空间

 

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

数字人Sketch入门学习笔记之一:基础知识 - 数字人 - 数字人的学习空间

 

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

数字人Sketch入门学习笔记之一:基础知识 - 数字人 - 数字人的学习空间

 

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




【后记】
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 好像说 “我的设计地盘,岂能它人进入!”
数字人Sketch入门学习笔记之一:基础知识 - 数字人 - 数字人的学习空间
ADOBE XD 功能与Sketch功能和界面非常像。现在的ADOBE的AI已经非常强大了,但她可能忽然发现UI、UX设计应用软件,这个领域丢失了吧?所以,她有能力把AI软件功能进行精简,把流程简化,面向UI UX设计领域,形成新的产品而占领这块阵地。这对于像ADOBE这样大公司是非常容易的事。

数字人Sketch入门学习笔记之一:基础知识 - 数字人 - 数字人的学习空间
这种做法,不仅在软件是这样的,在硬件产品世界里,也是这样。比如佳能研发出非常高端的相机,然后针对对手不同层次的相机产品,对其高端相机进行精简和阉割,就出品了一系列不同低价格的相机。Intel的CPU生成据说也是这样子,I7 4470K内部还有显示处理芯片(显卡),志强Xeon E3-1230系列CPU去掉内置显示处理芯片,仍然是四核八线程,功能没有差多少,价格却差不少,目的形成不同价位的产品,对抗AMD 。
       3、简单谈谈位图与矢量图吧。他们分别是两种图形算法而保存的两种数据结构。各有优点,各有缺点。
图像格式总体分为为位图(栅格图)与矢量图。
数字人平面设计学习笔记之一:Sketch入门 - 数字人 - 数字人的学习空间
 
矢量数据的优缺点:

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

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

矢量文件格式:ai、cdrwmf、fh、swf 、EPS

总之,矢量图:色彩不丰富(缺点),放大不失真(优点),占用空间小(优点),转换格式难(缺点)


位图数据的优缺点:

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

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

位图文件格式很多:JPG、GIF、TIF、BMP、PDF、PNG等
总之,位图:色彩丰富(优点),放大失真(缺点),占用空间大(缺点),转换格式容易(优点)。

  评论这张
 
阅读(234)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016