设置对象的描边、填充、投影和内阴影

上次更新日期: 2021年6月8日

了解如何在 Adobe XD 中为对象设置描边、填充、投影和内阴影并创建混合效果。

将填充颜色应用于对象

选择对象。

单击“填充”旁边的矩形。 此时会出现“拾色器”。

拾色器
拾色器

注释

您还可以使用滴管工具来填充颜色。 [i] 键可激活“填充”滴管。

  • 单击该键一次将会打开“填充”滴管。
  • 再次单击该键将会关闭“填充”滴管。

您可以选择:

  • 如果您知道准确的颜色值,请指定 HSBA、RGB 或十六进制值。 您也可以在不同的颜色模式之间进行切换。
  • 使用颜色字段和颜色滑块调整颜色。 执行此操作时,HSBA、RGB 和十六进制的数字值会相应地进行调整。  
  • 您可以使用颜色滑块或通过指定一个百分比值来设置填充及其不透明度。
  • 使用“滴管”工具从画板中选择颜色。
  • 您也可以将渐变填充应用于对象。 如需更多有关渐变的信息,请参阅创建和修改渐变

修改拾色器中的选项时,您可以预览画板上的更改。

注释

Adobe XD 还支持十六进制代码的简略形式。 例如,如果输入 0 并按 Return 键,则 XD 将自动显示代码为 #000000 的颜色。

您可以将颜色保存为色板,以供将来使用。 如需将颜色保存为色板,请单击“拾色器”底部的 + 图标。 

添加色板
添加色板

您可以通过将色板拖到新位置来重新排列拾色器中的色板。 如需删除色板,请将其拖出拾色器。

将图像填充应用于对象

首先,启用填充(如果尚未启用)(如将填充颜色应用于对象中所述)。 然后,将图像从其保存位置(例如,Finder 或 Windows 资源管理器)拖动到对象上。

裁切和放置图像填充

现在,您可以通过双击放置在容器中的图像(“对象”>“使用形状遮盖”)来裁切图像并调整图像填充中图像的位置(从桌面拖动时)。 使用图像填充中的裁切模式可以:

  •      双击并进入图像填充的裁剪模式
  •      在裁剪模式下调整图像的位置,或
  •      在裁剪模式下将图像移动到任意位置

此增强功能也适用于从 Photoshop 和 Sketch 导入的文件。 导入的文件会保留图像填充和在源应用程序中执行的裁切。

从剪贴板粘贴图像

您还可以从 Adobe XD 之外将图像复制到操作系统的剪贴板中,选择一个形状,并从操作系统剪贴板中将图像作为图像填充进行粘贴。 用户也可以通过在选择形状后,选择“文件”>“导入”,来使用图像填充形状。

创建描边并指定描边颜色

选择对象。

默认描边宽度为 1。 如需指定其他值,请更改“边框”值。

单击“边框”旁边的矩形色卡。 此时会出现“拾色器”。

拾色器
拾色器

您可以选择:

  • 如果您知道准确的值,请指定 HSBA、RGB 或十六进制值。
  • 使用颜色字段和颜色滑块调整颜色。 执行此操作时,HSBA、RGB 和十六进制的数字值会相应地进行调整。  
  • 使用“滴管”工具从画板中选择颜色。
  • 使用颜色滑块或通过输入一个百分比值来设置边框的不透明度。
  • 编辑边框大小和创建点线
  • 指定端点(平头、圆头、方头)和连接(斜接、圆角、斜面),以及内部描边和外部描边。

修改拾色器中的选项时,您可以预览对象上的描边颜色。

您可以将颜色保存为色板,以供将来使用。 如需将颜色保存为色板,请单击“拾色器”底部的 + 图标。 

添加色板
添加色板

您可以通过将色板拖到新位置来重新排列拾色器中的色板。 如需删除色板,请将它拖离拾色器。

如果对象是闭合路径,则您可以指定描边宽度。 如需沿路径对齐描边,请选择下一个插图所列的以下选项之一:

默认情况下,XD 会使闭合路径中的内部描边对齐。

笔触样式
笔触样式

A. 内部描边 B. 外部描边 C. 中心描边 D. 平头端点 E. 圆头端点 F. 方头端点 G. 斜接连接 H. 圆角连接 I. 斜面连接 

注释

更改描边宽度或描边对齐方式并不会更改对象的实际大小(从定界框的角度来说)。 不过,当您导出对象时,对象的测量值可能会根据所使用的描边的类型发生变化。

SVG 仅支持中心描边。 如果您将具有内部描边或外部描边的对象导出为 SVG,则导出的图像的大小看上去就好像它具有中心描边。

使用轮廓化描边将描边转换为形状

使用 Outline Stroke 从线条、路径、形状、文本、图像和布尔值组创建可编辑的矢量形状。创建形状后,您可以使用控件进一步修改它,或者在 Properties Panel 中更改其属性。
\n

按照以下步骤使用 Outline Stroke 创建图标。 

使用画布上的“文本”工具键入任何字母,比如 S

选择字母 S,然后选择 对象 > 路径 > 轮廓化描边
。您可以在"图层"面板中查看两个图层:1.S - Outline 和 2.S

在文本字母上使用轮廓描边。
在文本字母上使用轮廓描边。

双击矩形以添加锚点。

单击并拖动锚点以创建自定义形状。 

创建形状后,您可以使用 Properties 面板修改它,例如使用 FillsGradients 更改其颜色。
\n

添加颜色和样式以自定义形状
添加颜色和样式以自定义形状

教程

通过 Adobe XD 中的“轮廓描边”功能,可轻松地自定义路径、边框和形状,毫不费力地制作缩放对象并将其导出为 SVG 用于 Web。 观看 Adobe XD 首席产品经理 Dani Beaumont 录制的教程以了解如何使用“轮廓描边”。

观看时间:2 分 50 秒。

将阴影效果应用于对象和组件

内阴影和投影通过模拟光照效果,使您的设计对象看起来更逼真。

内阴影

内阴影可用于在二维图像中模拟 3D 深度。例如,内阴影可以帮助模拟按钮的按下状态。

将内阴影应用到对象
将内阴影应用到对象

投影

投影除了为对象提供 3D 效果外,还可以在不应用边框笔划的情况下提供边界感。

将投影应用到对象
将投影应用到对象

按照以下步骤将内阴影或投影应用到设计对象:

将对象添加到画板。

单击对象,然后在属性检查器中单击投影内阴影

在拾色器中,添加颜色并设置阴影的不透明度:

a. 要为阴影添加颜色,请执行以下操作之一:

  • 指定颜色的 HSB、RGB 或十六进制值。您可以使用菜单在这些颜色模式之间轻松切换。
  • 使用色域和颜色滑块调整颜色。 在此期间,将自动调整 HSB、RGB 或十六进制值。  
  • 使用“滴管”工具从画板中选择颜色。

b. 要设置阴影的不透明度:使用不透明度滑块或输入不透明度值(以百分比形式)。

要将选择的颜色和不透明度保存为色板,请单击拾色器底部的+图标。您可以通过拖动来重新排列拾色器中的色板。如需删除色板,请将它拖离拾色器。

在“属性检查器”中指定以下各项:

  • X Y 位移:指定从对象边框到阴影偏移位置的距离。
  • B (模糊):指定从阴影边缘到模糊效果发生位置的范围。
    \n

您可以使用"粘贴外观"轻松将应用于对象的阴影复制到其他对象。在已应用阴影的对象上按 Ctrl+ C ,然后在目标对象上按 Ctrl+Alt+V (粘贴外观)。
\n

当您生成设计规范时,其中的阴影会转化为开发人员可以直接使用的 CSS。
\n

示例

拟态设计

示例 1 拟态设计

应用了阴影的对象集合

示例 2:应用了阴影的对象收藏集

教程

如果您希望为设计增加深度,Adobe XD 中的内阴影功能是个真正的利器。观看 Dani Beaumont(Adobe XD 主体产品经理)的教程,了解如何使用内阴影。

观看时长:3 分钟。 

应用混合效果

在设计画布上选择图像或对象(包括形状、文本图层、组、蒙版或组件)。 从“属性检查器”中,选择并应用所选的混合模式。 有关更多信息,请参阅应用混合效果。

从对象中删除填充、阴影或描边

选择对象。 然后,单击“属性检查器”中的“边框”“填充”“阴影”旁边的复选框。 如果您想恢复填充、描边或阴影,请再次单击复选框。

更多此类内容