创建和修改渐变

  1. Adobe XD 用户指南
  2. 简介
    1. Adobe XD 的新增功能
    2. 常见问题
    3. 利用 Adobe XD 进行设计、原型创建和共享
    4. 颜色管理
    5. 系统要求
      1. 硬件和软件要求
      2. Adobe XD、Big Sur 和 Apple Silicon | macOS 11
    6. 工作区基础知识
    7. 在 Adobe XD 中更改应用程序语言
    8. 访问 UI 设计套件
    9. Adobe XD 中的辅助功能
    10. 键盘快捷键
    11. 提示和技巧
  3. 设计
    1. 画板、参考线和图层
      1. 开始使用画板
      2. 使用参考线和网格
      3. 创建可滚动画板
      4. 使用图层
      5. 创建滚动组
    2. 形状、对象和路径
      1. 选择对象、调整对象的大小和旋转对象
      2. 移动、对齐、分布和排列对象
      3. 为对象分组、锁定、重复、复制和翻转对象
      4. 为对象设置描边、填充和投影
      5. 创建重复元素
      6. 使用 3D 变换创建透视设计
      7. 使用布尔运算编辑对象
    3. 文本和字体
      1. 使用绘图和文本工具
      2. Adobe XD 中的字体
    4. 组件和状态
      1. 使用组件
      2. 使用嵌套组件
      3. 向组件添加多个状态
    5. 蒙版和效果
      1. 创建一个形状蒙版
      2. 使用模糊效果
      3. 创建和修改渐变
      4. 应用混合效果
    6. 版面
      1. 响应式调整大小和约束
      2. 为组件和组设置固定的内边距
      3. 使用堆叠创建动态设计
    7. 视频和 Lottie 动画
      1. 使用视频
      2. 使用视频创建原型
      3. 使用 Lottie 动画
  4. 原型
    1. 创建交互式原型
    2. 制作原型动画
    3. 自动制作动画支持的对象属性
    4. 使用键盘和游戏手柄创建原型
    5. 使用语音命令和播放创建原型
    6. 创建定时过渡
    7. 添加叠加
    8. 设计语音原型
    9. 创建锚点链接
    10. 创建超链接
    11. 预览设计和原型
  5. 共享、导出和审阅
    1. 共享选定的画板
    2. 共享设计和原型
    3. 为链接设置访问权限
    4. 使用原型
    5. 审阅原型
    6. 使用设计规范
    7. 共享设计规范
    8. 检查设计规范
    9. 设计规范导航
    10. 审查和评论设计规范
    11. 导出设计资源
    12. 导出和下载设计规范中的资源
    13. 企业版的组共享
    14. 备份或转移 XD 资产
  6. 设计系统
    1. 带 Creative Cloud Libraries 的设计系统
    2. 在 Adobe XD 中使用文档资源
    3. 在 Adobe XD 中使用 Creative Cloud Libraries
    4. 从链接资源迁移到 Creative Cloud Libraries
    5. 使用设计令牌
    6. 使用 Creative Cloud Libraries 中的资源
  7. 云文档
    1. Adobe XD 中的云文档
    2. 协作与协同编辑设计
    3. 协同编辑与您共享的文档
  8. 集成和插件
    1. 使用外部资源
    2. 使用 Photoshop 中的设计资源
    3. 从 Photoshop 中复制和粘贴资源
    4. 导入或打开 Photoshop 设计
    5. 在 Adobe XD 中使用 Illustrator 资源
    6. 打开或导入 Illustrator 设计
    7. 将矢量从 Illustrator 复制到 XD
    8. 用于 Adobe XD 的插件
    9. 创建和管理插件
    10. XD 的 Jira 集成
    11. XD 的 Slack 插件
    12. XD 的 Zoom 插件
    13. 将设计从 XD 发布到 Behance
  9. iOS 和 Android 版 XD
    1. 在移动设备上预览
    2. 适用于移动设备的 Adobe XD 常见问题解答
  10. 故障排除
    1. 已知问题和已修复问题
      1. 已知问题
      2. 已修复的问题
    2. 安装和更新
      1. XD 似乎与 Windows 不兼容
      2. 错误代码 191
      3. 错误代码 183
      4. 安装 XD 插件时出现问题
      5. Windows 10 上提示卸载并重新安装 XD
      6. 迁移首选项有问题
    3. 启动和崩溃
      1. XD 在 Windows 10 上启动时崩溃
      2. XD 在您注销 Creative Cloud 时退出
      3. Windows 上订阅状态相关问题
      4. 在 Windows 上启动 XD 时出现“应用程序被阻止”警告
      5. 在 Windows 中生成故障转储
      6. 崩溃日志收集和共享
    4. 云文档和 Creative Cloud Libraries
      1. XD 云文档相关问题
      2. 链接组件的问题
      3. 库和链接的问题
    5. 创建原型、发布和预览
      1. 无法在 macOS Catalina 上录制原型交互
      2. 工作流程发布相关问题
      3. 浏览器中未显示发布的链接
      4. 浏览器中的原型呈现不正确
      5. 共享链接上意外出现评论面板
      6. 无法发布库
    6. 导入、导出和使用其他应用程序
      1. 在 XD 中导入和导出
      2. XD 中的 Photoshop 文件
      3. XD 中的 Illustrator 文件
      4. 从 XD 导出到 After Effects
      5. XD 中的 Sketch 文件
      6. 第三方应用程序在导出中不可见

在 Adobe XD 中创建、编辑、导入、使用渐变。使用“渐变”面板添加色标并控制渐变不透明度。

渐变是两个或多个颜色或者同一颜色或不同颜色的两个或多个色调之间的渐变混合。您可以使用渐变来创建颜色混合和饼图,向矢量对象添加卷,并在设计中添加光影效果。

XD 支持线性、径向和角度渐变。

线性渐变

XD 以直线从起点渐变到终点。

径向渐变

XD 以圆形图案从起点渐变到终点。

角度渐变

XD 会使用从圆心开始在形状周围扫过的颜色渐变应用填充。 

渐变拾色器

要访问 XD 中的渐变拾色器,请选择一个对象,然后在“属性检查器”中单击“填充”。您可以在 XD 中创建线性、径向或角度渐变。

从拾色器顶部的下拉列表中选择线性渐变径向渐变角度渐变

渐变拾色器
渐变拾色器

A. 渐变编辑器 B. 色标 C. “不透明度”滑块 D. 色域 E. 另存为色板 F. 画布上的渐变编辑器 

您可以使用渐变拾色器来选择颜色并设置渐变的不透明度。

渐变拾色器有一个渐变编辑器,可用于快速预览渐变中使用的所有颜色。棋盘表示透明部分。

渐变编辑器还在渐变中显示色标。小圆圈表示色标。颜色会根据色标彼此多近来进行改变和混合。色标还显示在应用了渐变的对象上出现的画布上渐变编辑器中。 

默认情况下有两个色标可用。您可以通过单击渐变编辑器来添加更多色标。您可以沿渐变编辑器拖动色标以更改色标的位置并更改每种颜色的传播。要删除或移除色标,请将其从渐变拾色器中的渐变编辑器中拖出。或者,在画布上的渐变编辑器中单击色标并按“删除”。

画布上的渐变编辑器可帮助您更改渐变的方向。

角手柄可帮助您更改径向渐变的起点和角度。

渐变拾色器右侧的滑块允许您控制色标的不透明度。

应用线性、径向或角度渐变填充

  1. 选择一个对象,然后在属性检查器中单击填充

  2. 从拾色器内的下拉列表中选择Linear GradientRadial GradientAngular Gradient。

    拾色器

    线性、径向和角度渐变
    线性、径向和角度渐变

  3. 单击渐变编辑器中的色标,并使用拾色器选择所需的颜色。 

    • 要添加更多色标,请单击渐变编辑器。
    • 要修改分配给色标的颜色,请单击色标。
    • 要移动色标,请沿渐变编辑器拖动它们。
      注意:您无法移动渐变编辑器两端的色标。
    • 要删除色标,请将其从渐变编辑器中拖出。如果您正在使用画布上的渐变编辑器,请单击色标并按“删除”。
    • 要在色标之间切换,请使用 Tab 键。
    • 要更改径向渐变的方向点和角度,请拖动角手柄。
    处理径向渐变
    处理径向渐变

  4. 要更改渐变的方向,请根据需要拖动画布上的渐变编辑器线段(在对象上)。

    您还可以将画布上渐变编辑器线段的端点拖动到对象边界之外。如果将色标放置在对象的边界外,则该对象上不会显示颜色(与色标关联)。

    注意:

    您可以使用箭头键和 Shift + 箭头键移动画布上渐变编辑器线段的末端。一旦您选择一个内部色标,便可以通过使用箭头键和 Shift + 箭头键来移动它。您还可以按 Tab 键在画布上的渐变编辑器中更改色标。

  5. 创建渐变后,可以将其保存以便以后在“资源”面板中重复使用。单击一个具有渐变的对象,然后单击“资源”面板中“颜色”旁边的 + 图标将其保存。 

    在“资源”面板中保存的渐变
    在“资源”面板中保存的渐变

注意:

使用设计规范中的 CSS 代码创建的角度渐变中的色标之间的颜色渐变可能与设计画布中的 Angular Gradient 渲染有所不同。

将 Angular Gradient 应用于对象

您可以使用角度渐变创建色轮、饼图或进度指示器。 Angular Gradient 使用从圆心开始在形状周围扫过的颜色渐变填充。

按照以下步骤将 Angular Gradient 应用于圆形并创建色轮。

将 Angular Gradient 应用于圆

创建色轮

在画布上选择一个圆形对象,在属性检查器中单击填充,然后选择 Angular Gradient

添加更多颜色

创建色轮

单击 Angular Gradient 编辑器以添加更多色标。单击色标并选择所需的颜色。

添加无缝颜色过渡

颜色过渡

要创建连续的色轮,请使用滴管工具对最后一个色标和第一个色标使用相同的颜色。 

添加对比色

对比色

您还可以通过为最后一个和第一个色标选择不同的颜色来创建具有鲜明对比色的色轮。 

完成色轮创建后,您可以在其他形状(例如矩形三角形)中复制并重复使用 Angular Gradient 效果。

示例

下面是使用 Angular Gradient 创建的一些示例。

进度旋转器

创建色轮

饼图或色轮

创建色轮

增强矢量图形

创建色轮

仪表板元素或对象

创建色轮

教程

角度渐变与线性渐变和径向渐变不同,对于进度旋转器和色轮等设计非常有用。观看 Adobe XD 首席产品经理 Dani Beaumont 录制的教程,了解如何使用 Angular Gradient。

观看时间:4 分 7 秒。 

导入具有渐变填充的对象

  1. 确保在导入 Adobe XD 中之前将文件另存为 .svg 文件。

  2. 单击“文件”>“导入”,选择 SVG 文件,然后单击“导入”。

将渐变作为 SVG 导入时,默认情况下拾色器会显示“渐变”选项。在 XD 中复制和粘贴对象时,也会复制渐变填充。您可以修改您导入的渐变的颜色和色标。

注意:

具有偏离中心的起点的已导入径向渐变在 XD 中不可编辑。

更多此类内容

更快、更轻松地获得帮助

新用户?