Quantcast
Channel: 少数派
Viewing all articles
Browse latest Browse all 13781

打造移动设计工作室:Affinity Designer for iPad 入门指南

$
0
0

在 iPad 拥有一个专业矢量绘图工具是很多人长期梦寐以求的。这样的工具出现了,它的名字叫 Affinity Designer,下文简称 Designer。

Designer 是一款矢量图及像素图创作软件。无论你是业余爱好者,还是专业设计师,都可以它找到属于你的功能。其 iPad 版是与电脑版功能完全相同。从像素草稿,矢量绘图,到无比全面的文件格式导出等,它都可以专业应对。

@Minja 使用 iPad 版 Designer 创作的花店 LOGO
@Minja 使用 iPad 版 Designer 创作的花店 LOGO

本文我将从 Designer 的核心功能以及对不同用户群支持的特有功能开始,首先介绍软件界面,触摸手势;接着谈谈部分高级功能及矢量,像素,导出,文本四大工具,结尾处我将给出购买建议及学习资源。

核心功能

Designer 的最核心功能正是满足对矢量图和像素图创作需求。本节将从宏观角度简谈矢量图及像素图混合编辑及对比查看。

有人将 Designer 和 illustrator 类比,其实不全对。若你了解矢量图和像素图,会发现这两者各具优劣,矢量图由路径及锚点构成,无论放大多少倍依旧清晰顺滑;像素图由每一个像素点构成,放大后画面会变成一个个纯色的小格子。

矢量图对比像素图
矢量图对比像素图

你可能经历过先在电脑上先用 PS 画像素稿,接着用 illustrator 补充矢量图形的情况,这种持续打断思路的工作流一直很不理想。矢量绘图一定程度上的限制了作品自由洒脱的感觉,而像素图很难实现清晰平顺的边缘棱角。

Designer 允许你将二者结合,各自利用其优势处理不同部分。它不但支持矢量绘图,也同时支持像素绘图,你可以充分利用两者的特性根据需要即使切换模式。

在下图的狮子脸部图中,狮子脸颊的轮廓是矢量勾勒,保证了轮廓的清晰分明;而脸颊内的细节则是用像素笔刷绘制,充分利用了像素笔刷带来的朦胧与无序感。

矢量 + 像素组合使用
矢量 + 像素组合使用

在矢量工作中,您可能常会想,我的作品如果打印出来放在海报上是什么样,放在一般显示器上呢?这时候你可以更改视图模式进行查看,在导航器中根据需要选择矢量,标准像素,高清像素,轮廓稿即可。你还以如下图中将两种模式放在同一屏上对比,做到心中有数。

双视图查看
双视图查看

介绍完了像素图和矢量图的混合编辑及对比查看,接着我们来看看在不同使用情景下 Designer 有什么特色功能。

适用对象

Designer 对于创作者的实际需求考虑十分全面。对于平面设计,绘图,UI 设计,文本设计等工作常见需求均有支持。下面我将对每一种需求下常用的功能一一简述。

  • 平面设计:它支持平面设计所需要的矢量工具如钢笔,铅笔,节点管理,形状,边角控制,矢量画笔,渐变,涂层效果等工具。以下图中使用的铅笔为例,你可以设置用压力控制线条粗细,开启笔迹稳定器保证线条流畅,设置好填充色以便自动填充,开启雕刻以增强线条连贯性。

易用的矢量笔刷
易用的矢量笔刷

  • 绘图:对于像素绘画中常见的几个需求如巨大画布,完备的图层管理,涂抹,区域填充,完整的笔刷库等 Designer 都支持优秀。你即可以创建笔刷也可以导入现有的 Affinity 或 Adobe 笔刷( Adobe 提供的数千个免费优质笔刷),Designer 的画布大小没有上限,你可以根据实际需求创建的巨大画布,下图中的作品就是在 8K 分辨率下完成的。

丰富的预设笔刷
丰富的预设笔刷

  • UI 设计:对于 UI 设计工作流中常需要的几个痛点功能它都支持完备,比如画板,UI 库,像素实时预览,类似 Sketch 的同步符号,响应式限制,@1x @2x @3x 切片导出,Xcode Json 自动生成等。

内置 UI 库
内置 UI 库

  • 文本设计:对文字设计中所常见的网格与参考线,导入字体,字体精细化设置,文本转矢量图形,文本沿路径移动,文本对齐等都有完整支持。

全面的文本支持
全面的文本支持

以上介绍的几种使用场景及部分功能只是几个典型的例子,并不代表着 Designer 只被局限在这些场景中。你可以把它们当作参考,按自己实际所需打造自己的工作流

基本界面

若这是你第一次接触 Affinity 系列软件,你可能会在众多按钮和模式切换中迷茫,因此我们先来它界面的交互逻辑。

本节将完整介绍一个完整工作流中最常使用的功能。包括文件的创建,导航,图层编辑,复制,历史记录,保存及导出。

创建

创建一个新画布很简单,点击主界面上的巨大「➕」并点击「新建文档」即可。若你想要新建文件夹,可以点击下方的「新建项目」按钮。

值得注意的是下图界面中的「从云端打开和从云端导入」,这两个选项的区别是从云打开后,保存的文件会存回云端本身的文件中,比较适合与电脑版联动编辑同一个文件。而从云端导入是将文件提取出来,并另存一个新文件。

创建文件
创建文件

主界面

打开一个文件后,你会看到下图中的界面。它由顶部的核心模式切换,文档设置;左侧的当前模式下所有工具,快速选项;右侧的通用工具及注释;底部的所选工具设置组成。

主界面
主界面

其中最为重要的当属核心模式切换。顶部的三个选项分别为矢量绘图,像素绘图及导出。你可以根据当前创作需要随时切换。以一副简笔画为例,你可以先在像素绘图模式下用像素笔刷快速打草稿,接着切换回矢量绘图进行润色,最后切换到导出模式选择所需区域及格式导出。

模式切换
模式切换

在画面中导航

当画面过大,或你希望避免误选取画面中物件的时候,可以使用通用工具中的「导航器」导航。除控制大小外,你还可以用它控制画面旋转锁定,调节视图模式等。

导航器
导航器

调整当前选择的物件

当你选择一个物体时,常见的复制粘贴几何处理等操作在左上角的控制区。旋转,尺寸,对齐,锚点等选项在右下角的「变换」工具中。

变换
变换

记忆复制

接着上面的选择物件继续说。有时当你想要创建一组图案时,针对每一个新复制的图案调整变换是非常困难且不现实的,这时候你可以使用记忆复制。复制完一次物体并修改变换后,才次点击「复制」则会触发相对于上一次位置的记忆复制。

记忆轨迹复制
记忆轨迹复制

图层控制

当你需要管理图层时,可以点击通用工具中的「图层」。涂层选项中第一排第三个那个不明所以的图标其实是「成组」,第四个图标加号允许你创建矢量,像素或蒙版图层。当你需要快速导航到某个图层时,只需双击该图层前面的小图案即可。

图层
图层

回退到某一时间点

总有一些操作你会不想要,那么该如何回到之前的某个时间点呢?点击通用工具中的「历史记录」即可。Designer 默认只会记录最近一百步操作,这经常不够用。你可以在「设置 - 常规中」将记录的步骤提高到最多 2048 步。

历史记录
历史记录

保存

Designer 中的所有文件均会默认保存在本机软件文件夹中,很难被找到。若你希望将它们存在 iCloud 中或其它位置,可以在「设置 - 常规」中更改默认保存位置。更改完成后点击待保存文件右下角的「三道杠 - 保存」。

保存
保存

快速导出

当你需要将文件分享给其他人时,只需点击「导出」,选择需要的格式并拖动到待分享的位置即可。

快速导出到其它应用
快速导出到其它应用

基本操作到这里就介绍完了,接下来我们来看看具体操作中最重要的手势及其它进阶功能。

手势操作

手势姿势在 Designer 的操作中所占比重太大,几乎可以说用 iPad 版的 Designer 却不知道手势操作会寸步难行。学好了手势,可以大幅提高你的工作效率。本节我会从基础的撤销与选择开始,依次介绍 Designer 所需要学习的手势操作。

注意:以下手势操作对任何模式均有用。

基本

基本手势
基本手势

  • 撤销与反撤销:双指点击屏幕以撤销上一步造作,三指点击屏幕以取消撤销。
  • 单选:点击屏幕来选择物体,点击坐下角「X」以取消选择,点击左下角「垃圾桶」则删除选择。
  • 多选:单指点击屏幕并拖动来选择拖选框内的多个物体。一只手双指点按屏幕不松,另一只手依次点击多个物体为逐个多选。

对物体操作

对物体操作
对物体操作

  • 菜单:单指点按物体并持续一秒不松则会显示当前物体的复制粘贴菜单。
  • 旋转:单指点按所需按物体框顶端白点来旋转物体,同时用另一只手双指点击屏幕来限制旋转角度。
  • 移动:单点选择待移动物体后,拖动来变更位置,同时另一只手双指点按屏幕同时拖动则以水平,竖直或正 45 度角移动。
  • 缩放:单点选择待缩放物体后,拖动四周蓝点来自由调整大小。一只手拖动的同时另一只手单指点按屏幕则固定比例缩放,双指点按则以中心为原点自由缩放,三指点按则以中心为顶点并固定比例缩放。
  • 快速复制:当你需要复制当前物体时,先单点选中待复制物体,并用另一只手三指点击屏幕以进入复制模式,移动之前选中物体即可复制到指定位置。

整体控制

整体控制
整体控制

  • 移动画布:双指点按屏幕并拖动即可移动画布。
  • 旋转画布:旋转画布本身可以让你以一个顺手的姿势创作。这个功能默认没有打开,你可以在「设置 - 工具」中开启「在所有工具中使用画布旋转」,接着双指旋转即可旋转画布,若想禁用旋转,在导航其中点击锁定旋转按钮即可。
  • 快速调整:单指上下拖动通用功能中的字体,笔迹或颜色,可以快速调整字体大小,笔记粗细或颜色浓度。

颜色控制

颜色控制
颜色控制

  • 交换填空色与边缘色:当你需要将主色与副色交换时,只需点击任意颜色并左右滑动即可。
  • 取消填充:当你需要取消颜色时,可以点按主色或副色向上滑动。

图层控制

图层控制
图层控制

  • 快速蒙版:将图像拖入待作为蒙版的图层中即可快速生成蒙版。
  • 逐一多选图层:依次选择图层并向右滑动即可选择多个图层。
  • 连续多选图层:单指点按开始的图层,双指点按结束的图层,即可选择两次点按间的所有图层。
  • 成组或取消成组:在选中的图层上双指捏合即可将所选图层成组,在已成组的图层上双指扩张即可取消成组。
  • 快速定位:双击图层前的小图标以快速在画板中定位。

矢量笔刷

矢量笔刷
矢量笔刷

  • 切换为尖角:矢量钢笔默认为圆形转角,若需要尖角,绘画时需用另一只手单指点按。
  • 控制位置:矢量钢笔默认控制器可以任意方向旋转,若需要控制笔记方位,绘画时需用另一只手双指点按。
  • 变更位置:矢量钢笔默认为固定在松手位置,若你对其位置不满,可以在绘画时用另一只手三指点按进行修改。

像素笔刷

像素笔刷
像素笔刷

  • 取色器:单指长按屏幕一秒并拖动即可调出取色器。
  • 绘制直线:绘制时,另一只手单指点按,即可绘制直线。

Designer 的手势操作基本就是这些,学会并灵活运用,会让你的创作快人一步。

高级功能

掌握了基础的界面,文件存取,基本手势,你基本已经可以在 Designer 中自由行动了。但它能为你提供的远不止这些,接下来我们看一些针对性更强但非常实用的功能。

画板

你可以创建不同大小的画板来满足设计需求,也可以使用内置的不同设备画板。若你想要以当前选取的内容创建一个新画板,则可以选择「画板 - 从选取项 - 新建」。

画板
画板

同步符号

若你习惯用 Sketch,可能已经离不开同步符号了,Designer 也支持这一功能。与 Sketch 不同的是,你不需要指定更新主体,同步符号允许你选定任意一个对象,对其作出的更改会同步在其它所有对象中。你也可以根据实际需求断开或暂停同步。

符号
符号

图层特效

当你希望对所选对象添加阴影,高光等特效时,可以点击「图层 FX」选项进行设置。设置好后,你可以点击「粘贴图层特效」按钮来将此特效应用在其它图层上。

图层特效
图层特效

图层调整

Designer 的图层调整是非破坏性的,它以一个调整图层的形式存在,这意味着它不会直接覆盖在待修改的文件上,你可以随时根据需要进行调整。其调整选项非常丰富,如色彩平衡,滤镜,LUT 等。

图层调整
图层调整

矢量工具

Designer 中的第一个模式为矢量模式。它包含了矢量画笔,节点,拐角,铅笔,钢笔,填充,透明度,拾色器等常用工具。本节我将介绍 Designer 有特色的几个功能。

矢量画笔工具

矢量画笔和像素画笔类似,但其只能在矢量模式下使用。同理,像素笔刷只能在像素模式下使用。矢量笔刷的优势是放大不会失真,而且绘制完成后可以编辑节点来做调整。矢量笔刷所绘制的部分会出现在线稿视图中。

线稿视图
线稿视图

透明度工具

透明度工具和渐变工具类似,但是调整的是选中图像的透明度,你同样可以指定线性透明度渐变,椭圆形渐变等方式。点击「透明度工具」,在想要施加透明度变化的物件上拖动即可。

透明度工具
透明度工具

边角工具

边角工具允许你精确控制任何拐角,将其转为圆角凸出或凹陷。点击任意一个拐角并向中心拖动即可,你可以在底下的控制栏中更改拐角类型。

边角工具
边角工具

像素工具

Designer 中的第三个模式为像素模式。它包含了像素画笔,笔擦,涂抹,填充等常用工具。本节我将介绍 Designer 有特色的几个功能。

在矢量图中绘制像素

Designer 让矢量与像素的合作更密切,你可以用矢量图形充当绘图的边界,在矢量区中使用像素笔刷绘制。切换至像素模式,选择一个喜欢的笔刷,在矢量图形中绘制即可,你的笔刷不会刷出矢量图的边界。这是因为在你绘制时,Designer 会自动帮你在矢量图中添加一个像素图层。

在矢量图中绘制像素图
在矢量图中绘制像素图

羽化选区

有时非常精确的切边也许不一定是你想要的。这时候你可以考虑像素工具「羽化/外形/增大选取工具」,他们的作用是根据不同规则扩大当前选区,以便实现不同效果。在下图中,我希望给车的边沿加上一些泥土的痕迹,这时可以在智能选取车架后,点击外形选区工具,以轮廓为中心创建一个边沿选区,在这里面涂刷泥土色即可。

选择轮廓
选择轮廓

精细化选区

当你需要非常精确的提取选取时,可以使用「优化选取区域」, Designer 会自动判断所选区域与背景之间的关系并优化选区细节。当然,你也可以手动指定某些区域为前景,某些为背景,某些为模糊区来加强 Designer 判断的准确性。

优化选区
优化选区

导出工具

Designer 中的第三个模式为导出模式。导出在不同工作流中有不同的需求,本节我们来看看如何满足这些需求。

直接导出

Affinity Designer 在 iPad 上拥有非常全面的导出功能。无论是基础的 JPEG、PNG、GIF,还是全面分层的 PSD、SVG EPS 都可以轻松处理。对于导入来说,它也支持导入 AI、BMP、HEIF、RAW 等文件格式。想要直接全局导出只需点击「文档 - 导出」并选择格式即可。

直接导出
直接导出

根据图层创建切片

你可以手动选择需要导出的切片区域,也可以根据现有图层或画板自动生成切片。先用导出模式下的「切片选择工具」选中所需区域,接着点击图层中的「创建切片」即可。

创建切片
创建切片

切片导出

在切片管理器中根据需要选择格式,更高分辨率,JSON 文件后点击「全部导出」即可。这里值得注意的是连续自动更新的功能,有时候你希望自己做出更改会直接同步到导出文件中,这时候你可以开启「连续导出」,Designer 会根据你的更改自动更新导出的文件。

切片导出
切片导出

文本工具

优秀的设计离不开对细节的专注,以及对文本创作的巧思。本节将简介几个处理文本时的常用功能。

框架文本

当你需要大段文字时,可以点击「框架文本」,它的功用和文本框类似,但又非常丰富的可控性。在选择并编辑完成后,你可以点开右侧的「文本通用工具」,在里面进一步调整基线,缩进,字形,排版等设置。文本框的右下角有两个点。内点调节大小时会文字重排,但不会调整字体大小;外点会直接调整字体大小以匹配文本框架。

框架文本缩放
框架文本缩放

路径文本

若你想为路径上添加文本,点击「艺术字工具」,并点击任意路径并输入文字即可。若你希望调节文字在路径上的位置,可以拖动文字左侧的绿色小箭头。

路径文本
路径文本

导入字体

当你需要导入外来字体时,需先将字体存放到 iOS「文件」应用内。打开 Designer,点击右上角「设置 - 字体 - 云导入」,选择待安装的字体点击「打开」即可安装。

导入字体
导入字体

学习资源

你可能需要更多的学习资源来熟练掌握 Designer。目前官方共提供四种教学资源,分别是软件自带的提醒,自带的说明文档,实体纸质书,和网页版视频教程。

  • 自带的提醒:因 Designer 中所有功能均为图标显示,刚上手时很可能遇到找不到某个功能或不清楚其含义的情况,这时可以点击右下的「?」按钮临时显示每个功能的释义。

自带的提醒
自带的提醒

  • 自带的说明文档:当你遇到某个概念或操作不懂时,可以回到 Designer 主界面并点击右上角的「?」按钮进入说明文档,这里有每个功能及操作的详细介绍及步骤。这个说明文档中文翻译较生硬,读起来比较枯燥无味。更适合当字典用,但不适合刚上手时连续阅读。

自带的说明文档
自带的说明文档

  • 实体纸质书:若你喜欢阅读纸质书,且希望系统性完整学习 Designer 的全部功能,可以考虑 Designer 官方工作手册。这本书非常棒的展示了用 Designer 设计的各个方面,并附有多位艺术家给出的实例供你参考。购买前需要注意的是,此书讲解的是桌面版 Designer。虽然本书在官网上是以中文介绍,但实际内容为英文。连接:Affinity Designer 工作手册

实体纸质书
实体纸质书

  • 视频教程:若你喜欢边看边学,官方提供了 62 个 iPad 版 Designer 的短视频教程,这些教程均有中文字幕且质量奇佳,非常推荐。但是由于众所周知的原因,国内暂时只能通过科学上网的方法观看。连接:Affinity Designer iPad 版教程

视频教程
视频教程

购买建议

  • 使用费用:若你订阅过 Adobe CC,可能会被动辄其数千元的订阅年费所震惊。Designer 采用一次性付费机制,这点要比 Adobe 良心许多。

  • 支持的 iPad 版本:Designer 需要可观的运算量,因此对设备硬件有一定要求。它仅支持所有版本的 iPad Pro, 二代之后的 iPad Air,2017 年之后的 iPad,其它机型一律不支持,购买前务必需确认自己的 iPad 处在支持型号中。

  • 触控笔及键盘:Designer 本身对于手势支持极好,若非重度用户不需要触控笔和键盘也完全没问题,所有操作都可以用多指手势完成。若你希望在手绘精准性和操作效率上有所提升,可以考虑搭配 Apple Pencil 和 Smart Keyboard 使用。若你想使用 Apple Pencil 绘画的话,建议在「首选项 - 工具」中开启「仅限手势触摸」以明确分工,避免发生误操作。

写在文后

简单来说,我很喜欢 Affinity Designer。我认为这是一款针对设计者实际需求认真思考优化后的软件,大到矢量与像素模式的同步使用,无限的画布大小,小到专为 iPad 优化的每一个手势操作,丰富的导出格式等,每一个细节 Designer 都致力于解决创作过程与用户体验中的痛点。

而这一切美好的事物,都在你手边的 iPad 上,它能跟着你随时,随地创作。若你有需要就买吧,这是个不必犹豫的软件。


Viewing all articles
Browse latest Browse all 13781

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>