Support | 微信 & TG: @scomper

Framer X 学习笔记(四)绘图

2018.11.16 15:32

Framer X 强大的地方主要体现在它的代码「组件」上,基于 React 的实现给了组件很多可以动态变化的部分,这一点上,依靠静态 Symbol 实现元素复用的 Sketch 就差很远了,管理设计资源也没有 Framer X 方便。有了丰富的组件商店,对于大多数设计师而言由 Sketch 迁移到 Framer X,最大的忧虑不是资源问题,而是 Framer X 的绘图能力有点单薄。

Framer X 提供的绘图工具目前看上去还比较初级,只提供了基本的绘图要素(线段、矩形、圆形、多边形)和形状组合,相信未来的版本会有所变化。当然,看上去简单并不代表它不能用了创作。而且和 OmniGraffle 单纯绘图不同,Framer X 里还要有一个新的指导思想:绘图的对象是否可以作为一个组件来重复使用。本着这样的想法,画图的过程也是一个元素分析和堆叠的过程,要考虑那些部分是相同的、那些是相对独立的。

为了深入体验一下 Framer X 的绘图能力,找个喜欢的图片范本来应对枯燥的研究是比较好的方式,例如,接下来用到的这幅「日本の小鸟」,每只小鸟都萌萌的,看上去外观差不多,但是细节上又各不相同,是个不错的临摹对象。

Framer X 的绘图必须基于 Graphic 框架才能开始,所以绘图的第一步是按 G 键绘制 Graphic 框架并进入 Drawing 模式。

以临摹小鸟为例,为了输出更高分辨率的图标,Graphic 框架的尺寸可以设为 512px,并依此来缩放用于描摹的图片到合适的大小。

  • 通过 Graphic 框架确定图标的大小;
  • 缩放用于描摹的图片并锁定它,避免被误选和移动;
  • 选择 Path(P)工具勾勒轮廓;

和其它绘图软件的使用一样,勾勒轮廓的时候添加几个关键点并闭合线条即可,后面再通过点编辑来调整。

绘图模式下,Framer X 里有四个区域需要关注:

  • 左边的图层区域,绘图对象的排列顺序
  • 顶栏左边的绘图工具选择,P(线条)、R(矩形)、O(圆形)、多边形和星型
  • 顶栏右边的点的句柄模式:直线(Straight Corner)、对称(Mirrored Handles)、不对称(Disconnected Handles)
  • 右侧的绘图对象属性面板,线条粗细后的 Array 数值可以把线条变成虚线,Cap 控制单根线条两端的形状,Join 控制线条拐点的过渡方式。例如,小鸟的腿需要调教 Cap 变成圆的端点,尾巴部分就需要调节 Join 让尾巴不用那么锐利。

实际使用过程中能体会到 Framer X 设计细节上的很多贴心之处,例如:

  • 点编辑模式下,移动到线条上线段会高亮,可以移动线段的位置;
  • 鼠标指针移动到线段上会自动显示可添加的中间点,按住 ⌘ 键在任意位置添加新的点;
  • 按住 ⌥ 键再移动高亮的线条会自动转为曲线模式;
  • 每个点都有两个控制句柄,选中其中的一个句柄删除会将这一边变成直线连接;
  • 回到 Graphic 框架上,点击右侧属性面板上的「Fit to Content」,图形框架会基于绘图对象缩小。

绘图模式下,图形可以群组和翻转,如果要翻转多个绘图元素可以先将它们群组。
形状之间有 5 种方式可以组合,混合(Unite)、补集(Subtract)、交集(Intersect)、排除(Exclude)、联合(Join),混合和联合比较相像,区别是 Unite 不保留轮廓,Join 则保留轮廓。

通常组合的形状会形成一个特殊的形状群组,组合的对象依旧被保留,可以展开并对其作出调整。通过菜单项「Graphic - Flatten」后,组合的对象会变成单一的形状。例如下图中小鸟的翅膀的部分。绘图中前期会保留形状的组合模式,绘制完成后可以有选择性的 Flatten 部分形状组合,以减小复杂度输出成尺寸更小的 svg。

视频演示

临摹一只小鸟的过程(03:35)

图标绘制技巧

关闭按钮中间的 X,开始以为画两条线 45 度交叉就可以,后来发现线条旋转后中心点有点偏移,导致交叉后不对称。正确的姿势是绘制一个 20×2 的矩形,Radius 设为 1,然后再 ⌘D 复制旋转。

心形的绘制方法是先画一个 V 字型的折线,然后将笔画的粗细调大即可。图示中的图标是 32×32,以 45 度角绘制一个跨度为 3px 的折线,Stroke 宽度设为 8,Cap 选择圆角。

Stroke 中的 Array 很有用,不仅可以把线段变成虚线,还可以用来绘制不封口的进度圆环。图示中将宽度为 1 的圆形的 Array 设置成 35 就行,调整数值你会发现一点规律。

房子图标先绘制一个多边形,然后删掉中间下方的点,再绘制一个矩形用形状混合 Subtract 减去就有了门。多边形的弧度 Radius 可以设为 1 ,让边角不那么锐利。

齿轮图标是先画一个星型,弧度 Radius 设为 3,Points 的数值设置为 16,30%,中间绘制一个圆形通过形状混合减去(Subtract)即可。

单边圆角矩形在原型设计中用到的地方很多,Framer X 中绘制很简单,不用绘制两个形状进行裁切,只需要选择矩形将 Radius 选择为边角模式,然后分别设定 TL(上左)、TR(上右)、BR(下右)、BL(下左)的弧度即可。

技巧小结

形状绘制

  • 按住 ⌥ 键拖动线条可以将其变成曲线;按住 ⌘ 键在线条的任何地方添加中间点
  • ⌃C 选颜色,默认是改变 Fill 的颜色,如果没有勾选 Fill 会改变 stroke 的颜色
  • ⌥ ⌘ C 和 ⌥ ⌘ V 这组快捷键可以作为格式刷使用
  • 绘制线条时按 P 键结束当前的绘制开始新的绘制
  • 形状组合中 Join 和 Unite 的区别,相交的部分 Join 保留轮廓 Unite 不保留

选择对象

  • 按 esc 键可以选择当前目标的父级
  • 多个 Frame 嵌套的场景中,按住 ⌘ 选对象
  • 缩放 Frame 时,按住 ⌘ 键再拖动不改变里面包含的元素
Comments
Write a Comment