affinitydesigner教程-贝博恩创新科技网

Affinity Designer 全面学习指南

Affinity Designer 是一款功能强大、性价比极高的专业矢量图形设计软件，被广泛应用于 UI/UX 设计、插画、品牌设计、网页设计等领域，它以其流畅的性能、媲美 Adobe Illustrator 的功能和一次性买断制的模式,赢得了众多设计师的青睐。

（图片来源网络，侵删）

本教程将分为以下几个部分，帮助你从零开始，逐步掌握 Affinity Designer：

新手入门：界面与基础概念
核心功能精讲：工具与面板
实战项目：从零开始做一个设计
进阶技巧：提升效率与创意
资源推荐：持续学习与灵感

第一部分：新手入门 (Getting Started)

在开始设计之前，首先要熟悉软件的“家”。

下载与安装

官方网站：Serif Labs - Affinity Designer
支持 Windows, macOS, 和 iPad，购买一次,可在所有平台使用。

熟悉工作区

打开软件后,你会看到以下几个核心区域：

菜单栏: 位于顶部,包含了所有软件的命令和设置。
工具栏: 位于左侧,是你进行设计的主要工具集合。
上下文工具栏: 位于顶部，当你选中某个工具时，这里会显示该工具相关的选项（如画笔大小、颜色等）。
面板/泊坞区: 位于右侧和底部，用于管理图层、颜色、样式、历史记录等,你可以拖动面板标题栏来组合或分离它们。
画布: 中间最大的区域,你的设计作品就在这里诞生。
状态栏: 位于最底部,显示当前画布的缩放比例和导航工具。

基础概念：矢量 vs. 位图

这是理解 Affinity Designer 的关键。

（图片来源网络，侵删）

矢量图形: 由数学公式（点、线、曲线）定义，无论如何缩放，都不会失真，文件体积小。Affinity Designer 主要就是做矢量图形的。 (Logo, 插画, 字体)
位图图形: 由像素点阵构成，放大后会看到马赛克，变得模糊。Affinity Designer 也支持强大的位图功能，让你在一个软件里完成矢量+位图的全流程设计。 (照片, 纹理)

第二部分：核心功能精讲 (Core Tools & Panels)

选择工具组 (Selection Tools)

移动工具: 用于移动整个对象或选中的对象。
选择工具: 用于选择单个对象。
直接选择工具: 用于选择对象内部的锚点或线段,进行精细调整。
选择对象下方: 即使被其他对象遮挡,也能选择到最底层的对象。

绘图工具组 (Drawing Tools)

这是设计的核心,你需要熟练掌握它们。

钢笔工具: 最重要的工具！ 用于绘制精确的直线和曲线，通过点击创建锚点,拖动控制杆调整曲线。
节点工具: 用于编辑矢量路径的锚点和线段，你可以添加、删除、移动锚点，或将直线转换为曲线,反之亦然。
曲线工具: 一种更自由的绘制方式,通过拖拽直接创建曲线。
矩形/椭圆/星形/多边形工具: 绘制基本形状，按住 Shift 键可以绘制正方形/正圆。
铅笔工具: 自由手绘,适合绘制草图和不规则线条。
画笔/油画棒/炭笔等位图笔刷: 用于在像素 Persona（位图模式）下绘制,模拟真实画笔效果。

变换与调整

变换控制点: 选中对象后，周围会出现一个带控制点的框，你可以通过拖动这些点来缩放、旋转、倾斜和倾斜。
- Pro Tip: 按住 Shift 等比缩放，按住 Alt 从中心点变换。
变换面板: 在右侧面板中，可以输入精确的数值来控制对象的位置、大小、旋转角度等,实现精确设计。

填充与描边

颜色面板: 在这里选择填充色和描边色。
渐变面板: 创建线性、径向、锥形和网格渐变。
透明度面板: 调整对象的不透明度和混合模式（如正片叠底、滤色等）。

图层管理

图层面板: 设计的灵魂所在，你可以：
- 创建、重命名、删除图层。
- 调整图层顺序（上下拖动）。
- 创建图层剪切蒙版（将一个图层作为下一个图层的“遮罩”）。
- 锁定或隐藏图层。
- 组织图层到图层文件夹中,保持画布整洁。

Persona 切换

Affinity Designer 的核心特色,提供了三种工作模式：

Persona (矢量模式): 默认模式,用于绘制和编辑矢量图形。
Pixel Persona (位图模式): 切换到像素编辑模式，你可以将矢量对象光栅化（转换为位图），然后使用位图笔刷、修复工具等进行绘画。
Export Persona (导出模式): 用于管理和导出你的设计资源，你可以为画布上的不同部分设置导出格式（如 PNG, JPG, SVG），并生成 CSS 代码，非常方便 UI/UX 设计师。

第三部分：实战项目：从零开始做一个设计

让我们来做一个简单的扁平化风格手机 App 启动图标。

目标： 设计一个相机图标。

（图片来源网络，侵删）

新建文档:
- 文件 > 新建。
- 设置画布大小，1024x1024 像素，分辨率 300 PPI。
绘制基本形状:
- 选择 矩形工具，按住 Shift 绘制一个正方形。
- 在右侧的颜色面板中，给这个正方形填充一个你喜欢的颜色,比如蓝色。
使用布尔运算 (Boolean Operations):
- 布尔运算是 Affinity Designer 的王牌功能之一，可以快速合并、剪裁形状。
- 我们需要一个圆角矩形作为相机身体，再绘制一个矩形,覆盖掉正方形的四个角。
- 按住 Shift 键，同时选中这两个形状。
- 在顶部菜单栏找到 **图层** > **合并** > **减去前方对象**。
- 看看,一个圆角矩形就出现了！
绘制镜头:
- 选择 椭圆工具，按住 Shift 绘制一个正圆,作为镜头。
- 将它移动到相机身体的中心。
使用剪切蒙版:
- 我们希望镜头只显示在相机身体内部。
- 在图层面板中，确保镜头图层在相机身体图层的上方。
- 在图层面板中，右键点击镜头图层，选择 **创建剪切蒙版**。
- 镜头就被完美地限制在了相机身体里！
添加细节:
- 再画一个更小的白色圆圈作为镜头高光。
- 画一个小的矩形作为相机快门。
导出:
- 切换到 Export Persona。
- 在右侧的导出面板中，点击号,选择你的画布或单个图层。
- 设置格式为 PNG，并勾选 @1x, @2x, @3x (用于适配不同分辨率的屏幕)。
- 点击 导出,所有尺寸的图标就都生成好了！

第四部分：进阶技巧 (Pro Tips)

符号:

将常用元素（如按钮、图标、导航栏）创建为符号，当你修改主符号时，所有实例都会自动更新,极大提高效率。
样式:

将你喜欢的填充、描边、效果等设置保存为“样式”，一键应用到其他对象,保持设计风格的统一性。
网格和辅助线:
- 视图 > 显示网格 和 视图 > 显示辅助线，使用 对齐到网格 和 对齐到辅助线 功能，让你的设计更加规整、精确。
快捷键:
- 熟练使用快捷键是提升效率的关键。
  - V - 移动工具
  - P - 钢笔工具
  - T - 文本工具
  - Z - 放大镜工具
  - Ctrl/Cmd + C/V - 复制/粘贴
  - Ctrl/Cmd + J - 复制一层
  - F - 切换填充/描边
效果:

为对象添加非破坏性的效果，如阴影、内发光、模糊、扭曲等,这些效果可以随时在右侧面板中调整。

第五部分：资源推荐

官方资源:
- 官方帮助文档: 最权威、最准确的学习资料。Affinity Designer Help
- 官方教程: Serif 官网和 YouTube 频道会发布各种官方教学视频。
视频教程平台:
- YouTube: 搜索 "Affinity Designer Tutorial"，有大量免费且高质量的教程,推荐关注官方频道和一些知名的设计博主。
- Bilibili (B站): 国内有很多优秀的 UP主分享 Affinity Designer 的教程和技巧，搜索“Affinity Designer 教程”即可。
练习与灵感:
- Dribbble / Behance: 查看优秀的设计作品，尝试用 Affinity Designer 临摹它们,这是最好的练习方式。
- 官方挑战: 关注官方社交媒体，经常会有设计挑战活动,参与其中可以快速提升技能。

学习建议总结

不要怕，大胆试: 软件的功能远比想象中强大,只有多尝试才能发现它的奇妙之处。
从模仿开始: 找一个你喜欢的设计，试着把它做出来,这个过程中你会学到很多工具的组合使用方法。
先掌握核心: 把钢笔工具、节点工具、布尔运算、图层管理这几个核心功能学扎实,其他功能就会迎刃而解。
建立自己的工作流: 比如如何命名图层、如何组织文件、如何导出资源,形成自己的习惯。

希望这份指南能帮助你顺利开启 Affinity Designer 的学习之旅！祝你设计愉快！

affinitydesigner教程

Affinity Designer 全面学习指南