XD中文用户手册:绘图工具和文本工具

绘图工具

您可以使用左侧工具栏上的绘图工具(矩形、椭圆、线条和钢笔工具)在 Adobe XD 中快速绘制简单的图标和图形。选择工具可帮助您选择特定的线条、形状或对象以对其进行编辑。

然后,您可以用不同方式组合这些形状来创建复合形状和对象,或者形状的蒙版部分。如需有关组合和蒙版技术的更多信息,请参阅使用布尔运算和蒙版技术编辑对象

 

绘制矩形和方形

 - 选择矩形工具 XD中文用户手册:绘图工具和文本工具 - US - UI设计素材库
 - 执行以下操作之一:
  • 若要绘制一个矩形,向对角线方向拖动直到矩形达到所需大小。
  • 若要绘制一个方形,在按住 Shift 键的同时向对角线方向拖动直到方形达到所需大小。

 - 要绘制一个圆角矩形,请绘制一个矩形,然后单击它以查看半径编辑手​​柄。单击任何手柄并将其拖向矩形的中心。您还可以使用“属性检查器”为一个或多个角的半径输入特定的值。

XD中文用户手册:绘图工具和文本工具 - US - UI设计素材库
绘制圆角矩形和方形

- 要进一步自定义您的方形或矩形,您可以编辑圆角半径。

 

  • 要仅调整单个角的半径,请执行以下操作之一:
    • 按住 Option 键 (Mac) 或 Alt 键 (Win),单击圆角手柄,然后拖动鼠标。
    • “属性检查器”中选择 XD中文用户手册:绘图工具和文本工具 - US - UI设计素材库 后,分别编辑每个圆角半径值。
  • 要同时调整所有角的半径,请执行以下操作之一:
    • 单击圆角半径并拖动鼠标。
    • “属性检查器”中选择 XD中文用户手册:绘图工具和文本工具 - US - UI设计素材库 后,编辑半径的值。
XD中文用户手册:绘图工具和文本工具 - US - UI设计素材库
同时调整所有四个角

 

XD中文用户手册:绘图工具和文本工具 - US - UI设计素材库
逐个调整角

 

 

绘制椭圆和圆

 - 选择椭圆工具 XD中文用户手册:绘图工具和文本工具 - US - UI设计素材库
 - 执行以下操作之一:
  • 向对角线方向拖动直到椭圆达到所需大小。
  • 如需创建圆形,请按住 Shift 键并拖动鼠标。
XD中文用户手册:绘图工具和文本工具 - US - UI设计素材库
拖动大小并调整椭圆大小。

 

XD中文用户手册:绘图工具和文本工具 - US - UI设计素材库
按住 Shift 并拖动以调整圆大小。

 

 

绘制线条

 - 选择直线工具 XD中文用户手册:绘图工具和文本工具 - US - UI设计素材库
 - 将指针定位到希望线段开始的地方,然后拖动到希望线段终止的地方。
XD中文用户手册:绘图工具和文本工具 - US - UI设计素材库
使用直线工具绘制直线。

 

 

用钢笔工具绘图

 

使用钢笔工具可以绘制的最简单路径是直线,方法是通过单击钢笔工具来创建两个锚点。继续单击可创建由角点连接的直线段组成的路径。

- 选择钢笔工具 XD中文用户手册:绘图工具和文本工具 - US - UI设计素材库

- 将钢笔工具定位到所需的直线段起点并单击,以定义第一个锚点。

- 再次单击希望线段结束的位置(按住 Shift 键并单击以将线段的角度限制为 45 度的倍数)。

- 继续单击,为更多直线段设置锚点。

注意:

如需将锚点从直线转换为曲线(或执行相反操作),请双击锚点。

 - 最后添加的锚点总是会显示为实心圆形,这表示其已被选中。当添加更多的锚点时,以前定义的锚点会变成空心并被取消选择。

- 通过执行下列操作之一来完成路径:

  • 要使路径保持打开状态,请单击 Esc
  • 要闭合路径,请将“钢笔”工具定位在第一个(空心)锚点上。单击或拖动以闭合路径。
  • 如需选择并拖动起点而不闭合路径,请按住 Cmd/Ctrl 键。
XD中文用户手册:绘图工具和文本工具 - US - UI设计素材库
使用钢笔工具绘制直线段。

绘制曲线

可以通过如下方式创建曲线:在曲线改变方向的位置添加一个锚点,然后拖动构成曲线形状的方向线。方向线的长度和斜度决定了曲线的形状。

如果您使用尽可能少的锚点拖动曲线,可更容易编辑曲线并且系统可更快速显示和打印它们。使用过多点还会在曲线中造成不必要的凸起。请通过调整方向线长度和角度绘制间隔宽的锚点和练习设计曲线形状。

- 选择钢笔工具 XD中文用户手册:绘图工具和文本工具 - US - UI设计素材库

- 将钢笔工具放到曲线的起始位置,并按住鼠标按钮。

- 拖动以设置要创建的曲线段的斜度,然后松开鼠标按钮。

注意:

按住 Shift 键并拖动鼠标可将工具限制为 15 度的倍数。

 - 将“钢笔”工具定位到希望曲线段结束的位置,请执行以下操作之一:

  • 若要创建 C 形曲线,请向前一条方向线的相反方向拖动。然后松开鼠标按钮。
  • 若要创建 S 形曲线,请按照与前一条方向线相同的方向拖动。然后松开鼠标按钮。
XD中文用户手册:绘图工具和文本工具 - US - UI设计素材库
使用钢笔工具绘制曲线

 - 如需创建一系列平滑曲线,请继续从不同的位置拖动钢笔工具。

注意:

您也可以通过拖动方向线,切断锚点的方向线。

 - 通过执行下列操作之一来完成路径:

  • 要闭合路径,请将“钢笔”工具定位在第一个(空心)锚点上。单击或拖动以闭合路径。
  • 如需让路径保持开放,请按 Esc

绘制跟有曲线的直线

 - 使用“钢笔”工具 (XD中文用户手册:绘图工具和文本工具 - US - UI设计素材库),单击两个位置的角点以创建直线段。
 - 将“钢笔”工具定位在所选端点上。若要设置将要创建的下一条曲线段的斜度,单击锚点并拖动显示的方向线。
 - 将钢笔定位到所需的下一个锚点位置,然后单击(在需要时还可拖动)这个新锚点以完成曲线。

绘制跟有直线的曲线

- 使用钢笔工具 (XD中文用户手册:绘图工具和文本工具 - US - UI设计素材库),拖动创建曲线段的第一个平滑点,然后松开鼠标按钮。

- 在需要曲线段结束的位置重新定位“钢笔”工具,拖动以完成曲线,然后松开鼠标按钮。

- 将“钢笔”工具定位在所选端点上。

- 将钢笔工具重新定位到所需的直线段终点,然后单击以完成直线段的绘制。

XD中文用户手册:绘图工具和文本工具 - US - UI设计素材库
绘制跟有直线的曲线

绘制由角点连接的两条曲线段

- 使用钢笔工具 (XD中文用户手册:绘图工具和文本工具 - US - UI设计素材库),拖动以创建曲线段的第一个平滑点。

- 重新定位钢笔工具并拖动以创建具有第二个平滑点的曲线。

- 将钢笔工具重新放在第二条曲线段的结束位置,然后通过拖动一个新平滑点,完成第二条曲线段。

绘图与编辑模式

如需在绘图模式和编辑模式之间切换,请按 Esc 键。

您还可以通过双击形状或路径进入“路径编辑模式”。在此模式下,形状的锚点是可见的,但移动鼠标不会绘制任何东西。您可以操作现有的锚点/控制点或在路径上的现有线段上插入新的锚点。

使用钢笔工具进行绘图时,您除了绘制新的线段外,还可以执行上述所有编辑。

扩展现有路径

选择钢笔工具时,鼠标下面画板上的所有路径都将在其开始和结束点上显示手柄。单击其中一个手柄以继续从该点绘制路径。

扩展一个闭合路径将会重新打开该路径,然后将钢笔工具置于该路径的绘制模式中。

选择锚点

双击绘图以查看锚点。然后,您可以单击锚点以选择它。要选择多个锚点,请按住 Shift 键并选择锚点,或使用选择工具选取锚点。

使用键盘轻推选定锚点,使用鼠标拖动它们或在“属性检查器”中编辑其属性(x 和 y 坐标)。

禁用锚点对齐

在放置新的锚点或拖动现有锚点时,当一个锚点垂直或水平靠近另一个锚点时,会显示对齐线。按住 Cmd /Ctrl 键可禁用锚点对齐。

添加和编辑锚点

双击绘图以选择它并查看现有锚点。单击路径以在光标位置添加新的锚点。

XD中文用户手册:绘图工具和文本工具 - US - UI设计素材库
添加和编辑锚点

删除锚点

选择锚点,然后按“删除”

绘图快捷键

 

绘图工具 MacOS 上的键盘快捷键 Windows 上的键盘快捷键
选择 V V
矩形 R R
椭圆 E E
直线 L L
钢笔 P P
缩放 进入缩放模式:Z

放大:单击 Adobe XD 画布中的任意位置,或单击所需的画板。或者选取一个区域进行放大。

缩小:Option+ 单击

暂时激活放大和缩小:

空格键 +Cmd,然后单击画板或框选一个区域进行放大。

空格键+Cmd+Opt 缩小

进入缩放模式:Z

放大:单击 Adobe XD 画布中的任意位置,或单击所需的画板。或者选取一个区域进行放大。

缩小:Alt + 单击

暂时激活放大:

空格键 +Ctrl,然后单击画板或框选一个区域进行放大。

缩放至选区 ⌘3 Ctrl 3

 

测量距离

通过单击对象并按下 Option 键 (在 Mac 上) 或 Alt 键 (在 Windows 上),测量对象与画板之间的距离或对象与其他周围对象之间的距离。

注意:

如果所选对象不是方形或矩形,则 XD 会在对象周围绘制定界框。然后,它会显示来自定界框边界的测量值。

测量对象到画板边缘的距离:

只需单击对象并按 Option 键(在 Mac 上)或 Alt 键(在 Windows 上)。

只要按下 Option 键或 Alt 键,Adobe XD 就会测量距离并显示测量值。

XD中文用户手册:绘图工具和文本工具 - US - UI设计素材库
测量对象与画板边缘的距离

测量对象与画板中其他对象的距离:

单击对象,按 Option 键(在 Mac 上)或 Alt 键(在 Windows 上),然后将鼠标悬停在其他对象上。

只要按下 Option 键或 Alt 键,Adobe XD 就会测量两个对象的邻近边界之间的距离并显示测量值。

XD中文用户手册:绘图工具和文本工具 - US - UI设计素材库
测量两个对象之间的距离

 

文本工具

在某个点输入文本

单击文本工具,然后单击您希望文字开始的位置。输入文本,然后按 Esc 键提交文本更改,或者按 Return 键转到下一行。

当您通过选择画布上的某个点来键入文本时,将会出现一个水平文本行,该文本在您单击的位置开始,并在您输入字符时展开。每行文本都是独立的;对其进行编辑时,该行将扩展或缩短,但不会换行。这种方式非常适用于在图稿中输入少量文本的情形。

XD中文用户手册:绘图工具和文本工具 - US - UI设计素材库
在点处输入文本.

您可以在其他对象上键入文本,并使用“对象”>“排列”选项排列文本以显示在前面。

在区域中输入文本

单击文本工具,在您想要文本出现在画布上的位置处单击并拖动以定义文本区域。然后,在该区域内单击以开始键入文本。

定义文本区域时,对象的边界将控制字符流(水平或垂直)。当文本触及边界时,会自动换行,以落在所定义区域的外框内。当您想要创建一个或多个段落(比如为宣传手册创建)时,采用这种方式输入文本十分有用。

XD中文用户手册:绘图工具和文本工具 - US - UI设计素材库
单击文本工具并开始输入文本。

在点文本和区域文本之间切换

只需单击一下,即可在点和区域文本之间切换。

选择文本对象并在“属性检查器”中的“点文本”“区域文本”选项之间切换。

XD中文用户手册:绘图工具和文本工具 - US - UI设计素材库
在点文本和区域文本之间切换

从文本文件导入文本

您可以使用以下方法之一轻松地将预先写好的文本包含到画板中:

  • 将文本文件拖到画板上。

只需将纯文本文件拖到画板上,即可轻松地将预先编写的文本添加到设计中。此操作会使用文本文件的内容在画板上创建区域文本。

  • 将文本文件拖动到重复网格上。

您还可以将一个文本文件(带有换行符)拖动到重复网格中的文本组件上。所有文本元素都会使用该文件中的文本进行填充。

如需更多信息,请参阅将用回车分隔的文本文件拖到重复网格中的文本对象上

  • 将文本复制并粘贴到画板上。

您还可以通过将文本复制并粘贴到画板上,创建可在 Adobe XD 中轻松移动和编辑的区域文本元素。

调整文本区域的大小

 

单击文本并拖动手柄以更改字体的大小。此功能仅可用于点文本。

XD中文用户手册:绘图工具和文本工具 - US - UI设计素材库
拖动手柄可调整文本大小。

设置文本格式

单击文本,然后使用“属性检查器”指定文本的类型、字体大小和文本对齐方式。

您还可以选择文本块中的单个单词或字符,并单独设置这些部分的格式。

XD中文用户手册:绘图工具和文本工具 - US - UI设计素材库
设置整个文本对象或各个文本部分的格式

更改字符、行和段落间距

如需更改字符间距,请单击文本对象并使用“属性检查器”中的“字符间距”选项指定字符间距。

要更改文本子集中的字符间距,请使用“属性检查器”选择文本并修改字符间距(以毫 ems 为单位)。

XD中文用户手册:绘图工具和文本工具 - US - UI设计素材库
更改文本对象中文本的字符间距

要更改行间距,请单击文本区域并使用“属性检查器”中的“行间距”选项指定行间距。

如需将行高度重置为默认值,请在“属性检查器”“行间距”选项中输入 0。

XD中文用户手册:绘图工具和文本工具 - US - UI设计素材库
更改行间距

与 Photoshop 和 InDesign 类似,使用 Adobe XD,您可以更改同一文本元素内的段落的前后间距。

如需更改段落间距,请选择一个段落并单击“格式设置”面板中的段落图标。根据需要更改间距值。

 

XD中文用户手册:绘图工具和文本工具 - US - UI设计素材库
设置段落间距

为文本添加下划线

如需为文本添加下划线,请单击文本区域,然后单击“属性检查器”中的“下划线”图标。XD 绘制一条平滑的下划线,可断开文本中的下行字母(创建更美观的线条)。

XD中文用户手册:绘图工具和文本工具 - US - UI设计素材库
在 XD 中添加下划线

使用数学计算创建精确设计

使用数学计算创建精确度更高的设计,或将对象移动到新位置或修改宽度和高度。

选择一个或多个对象。在“属性检查器”中,在任何接受数值的框中执行简单的数学运算。Adobe XD 支持通过 +、-、/、* 数学运算来计算更改。

例如,如果要使用当前测量单位将选定对象向右移动 3 个单位,请在当前值之后输入 +3。

在接受数值的属性检查器文本框中,执行下列操作之一:

  • 如需使用数学表达式替换整个当前值,请选择整个当前值。
  • 如需在数学表达式中使用当前值,请在当前值之前或之后单击。

 

XD中文用户手册:绘图工具和文本工具 - US - UI设计素材库
数学计算

 

注意:

Adobe XD 一次只能执行一项运算。也就是说,它可以处理“4in + 2p”,但不能处理“4in + 2p-1p”,因为它们会被视为两种不同的运算。

2215