当前位置: 首页 > 文档资料 > Adobe XD 用户指南 >

了解如何使用 Adobe XD 的绘图工具和文本工具来创建图形和文本对象。

优质
小牛编辑
137浏览
2023-12-01
学习使用 Adobe XD 的绘图和文本工具来创建图形和文本对象。

绘图工具

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

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

绘制矩形和方形

  1. 选择矩形工具
  2. 执行以下操作之一:

    • 若要绘制一个矩形,向对角线方向拖动直到矩形达到所需大小。
    • 若要绘制一个方形,在按住 Shift 键的同时向对角线方向拖动直到方形达到所需大小。
  3. 要绘制一个圆角矩形,请绘制一个矩形,然后单击它以查看半径编辑手柄。单击任何手柄并将其拖向矩形的中心。您还可以使用“属性检查器”为一个或多个角的半径输入特定的值。

    绘制圆角矩形和方形
  4. 要进一步自定义您的方形或矩形,您可以编辑圆角半径。

    • 要仅调整单个角的半径,请执行以下操作之一:
      • 按住 Option 键 (Mac) 或 Alt 键 (Win),单击圆角手柄,然后拖动鼠标。
      • 在“属性检查器”中选择  后,分别编辑每个圆角半径值。
    • 要同时调整所有角的半径,请执行以下操作之一:
      • 单击圆角半径并拖动鼠标。 
      • 在“属性检查器”中选择  后,编辑半径的值。
    同时调整所有四个角逐个调整角

绘制椭圆和圆形

  1. 选择椭圆工具
  2. 执行以下操作之一:

    • 向对角线方向拖动直到椭圆达到所需大小。
    • 如需创建圆形,请按住 Shift 键并拖动鼠标。
    按住 Shift 并拖动以调整圆大小。

绘制线条

  1. 选择直线工具
  2. 将指针定位到希望线段开始的地方,然后拖动到希望线段终止的地方。

    使用直线工具绘制直线。

用钢笔工具绘图

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

  1. 选择钢笔工具
  2. 将钢笔工具定位到所需的直线段起点并单击,以定义第一个锚点。
  3. 再次单击希望线段结束的位置(按住 Shift 键并单击以将线段的角度限制为 45 度的倍数)。
  4. 继续单击,为更多直线段设置锚点。

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

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

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

    • 要使路径保持打开状态,请单击 Esc。
    • 要闭合路径,请将“钢笔”工具定位在第一个(空心)锚点上。单击或拖动以闭合路径。
    • 如需选择并拖动起点而不闭合路径,请按住 Cmd/Ctrl 键。
    使用钢笔工具绘制直线段。

绘制曲线

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

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

  1. 选择钢笔工具
  2. 将钢笔工具放到曲线的起始位置,并按住鼠标按钮。
  3. 拖动以设置要创建的曲线段的斜度,然后松开鼠标按钮。

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

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

    • 若要创建 C 形曲线,请向前一条方向线的相反方向拖动。然后松开鼠标按钮。
    • 若要创建 S 形曲线,请按照与前一条方向线相同的方向拖动。然后松开鼠标按钮。
    使用钢笔工具绘制曲线
  5. 如需创建一系列平滑曲线,请继续从不同的位置拖动钢笔工具。

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

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

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

绘制跟有曲线的直线

  1. 使用“钢笔”工具 (),单击两个位置的角点以创建直线段。
  2. 将“钢笔”工具定位在所选端点上。若要设置将要创建的下一条曲线段的斜度,单击锚点并拖动显示的方向线。
  3. 将钢笔定位到所需的下一个锚点位置,然后单击(在需要时还可拖动)这个新锚点以完成曲线。

绘制跟有直线的曲线

  1. 使用钢笔工具 (),拖动创建曲线段的第一个平滑点,然后松开鼠标按钮。
  2. 在需要曲线段结束的位置重新定位“钢笔”工具,拖动以完成曲线,然后松开鼠标按钮。
  3. 将“钢笔”工具定位在所选端点上。
  4. 将钢笔工具重新定位到所需的直线段终点,然后单击以完成直线段的绘制。

    绘制跟有直线的曲线

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

  1. 使用钢笔工具 (),拖动以创建曲线段的第一个平滑点。
  2. 要创建具有第二个平滑点的曲线,请重新定位钢笔工具并拖动。
  3. 将钢笔工具重新放在第二条曲线段的结束位置,然后通过拖动一个新平滑点,完成第二条曲线段。

绘图与编辑模式

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

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

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

扩展现有路径

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

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

选择锚点

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

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

禁用锚点对齐

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

添加和编辑锚点

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

添加和编辑锚点

删除锚点

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

绘制多边形

多边形工具可帮助您创建各种新形状,例如三角形、菱形、五边形或多达 100 条边的任何多边形。

多边形工具
  1. 要开始绘制多边形,请单击键盘上的“Y”,或从工具栏中选择三角形图标。
  2. 在画板或画布上,单击并拖动以绘制所需大小的形状。您会注意到默认形状是三角形。

    • 在绘制时按住 Shift 键可创建等边形。
    • 在绘制时使用键盘上的向上和向下箭头键,可增加或减少多边形的边数。
  3. 创建完形状后,您可以通过“属性检查器”更改多边形的边数。选择形状,在“属性检查器”中单击“边计数”字段,然后键入所需的边数。

    多边形属性
    A. 边计数 B. 圆角半径 
  4. 要更改多边形的圆角半径,可在形状的上角单击并拖动半径装饰手柄,或在“属性检查器”中单击“圆角半径”字段并输入所需的值。

    注意:每个形状都有一个半径装饰手柄。您不能更改形状每条边的圆角半径。

  5. 为多边形设置形状属性(“填充颜色”“边框粗细”“颜色”“阴影”以及“背景模糊”)。在更改形状的边数时,这些属性将予以保留。
  6. 双击多边形可查看形状的所有锚点。您可以通过单击形状路径上的任意位置来创建新锚点。 

    注意:创建或编辑形状的锚点会将其转换为路径,并且它会失去多边形能力。

绘图快捷键

绘图工具MacOS 上的键盘快捷键Windows 上的键盘快捷键
选择VV
矩形RR
椭圆EE
多边形YY
直线LL
钢笔PP
缩放

进入放大模式:Z

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

暂时激活放大和缩小:

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

进入放大模式:Z

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

暂时激活放大:

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

测量距离

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

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

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

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

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

测量对象与画板边缘的距离

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

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

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

测量两个对象之间的距离

文本工具

在某个点输入文本

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

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

在点处输入文本.

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

在区域中输入文本

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

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

单击“文本”工具并开始键入文本。

拼写检查

从“编辑”菜单中,选择“打开拼写检查”。 拼写检查功能仅适用于文本容器中的错误文本。拼写错误的词带红色下划线,自动更正的词带蓝色下划线。语法错误以绿色下划线突出显示。

打开拼写和语法选项

右键单击拼写错误的词,然后从建议的列表中选择上下文准确的拼写。

选择拼写正确的词

要将自动更正的拼写恢复为您最初输入的词,请按 Mac OS 上的 Cmd + Z 和 Windows OS 上的 Ctrl + Z

撤销自动更正学习拼写

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

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

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

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

从文本文件导入文本

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

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

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

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

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

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

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

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

调整文本区域的大小

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

拖动手柄可调整文本大小。

设置文本格式

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

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

设置整个文本对象或各个文本部分的格式

更改字符、行和段落间距

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

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

更改文本对象中文本的字符间距及行间距

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

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

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

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

 

文本变换

要应用任何文本变换,请选择要更改的文本。从“属性检查器”中选择以下任一选项:

  • 大写图标 (TT),用于将文本设置为大写。
  • 小写图标 (tt),用于将文本设置为小写。
  • 词首大写图标 (Tt),用于将文本设置为词首大写。
  • 文本上标图标,用于将文本设置为上标。
  • 文本下标图标,用于将文本设置为下标。
文本变换

为文本添加下划线

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

文本删除线

要为文本添加删除线,可选择文本区域,在“属性检查器”中单击删除线图标。在文本的中间绘制一条平滑的线,使文本看起来像是被删除了。

全局样式更改

要轻松更改全局样式,可将文本变换或删除线应用于字符样式

“资源面板”中,将您在整个文档中使用的样式另存为字符样式。然后,右键单击字符样式,并从下拉菜单中选择“编辑”选项。选择“大写”“小写”“词首大写”“删除线”选项中的其中一个,使用字符样式的文本将在整个文档内发生变化。

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

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

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

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


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

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

 

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

更多此类内容

  • 使用布尔运算和蒙版技术编辑对象