设置 Qt Bridge for Adobe Photoshop 从 Adobe XD 导出设计

使用 Qt Bridge for Adobe Photoshop

组织资产

当使用 Qt Bridge for Adobe Photoshop 将设计从 Adobe Photoshop 导出以导入到 Qt 设计工作室时，为了获得最佳结果，在 Photoshop 中操作时请遵循以下指南

  • 将您的艺术作品排列成 艺术板 并将其组织成组层，这些组层将作为单独的文件导入到 Qt 设计工作室，具体取决于您在导出设计时的选择。
  • 使用文字工具确保将所有的文本标签导出到 文本 项。
  • 以矢量格式存储所有资产，以便可以轻松按不同的屏幕尺寸和分辨率将其重新缩放。

要使用与 Photoshop 中相同的字体，您需要将其加载到 Qt 设计工作室。当您预览 UI 时，Qt 设计工作室将它们部署到设备上。有关更多信息，请参阅 使用自定义字体。

注意：您只能导出保存为 Photoshop 文件格式的文件，例如 .psd 和 .psb。对于所有其他文档格式，Qt 设计工作室会显示以下错误消息：文档不受支持。

可以导出的内容

您可以使用 Qt Bridge for Adobe Photoshop 导出以下设计部分

  • 图层
  • 文字图层
  • 组
  • 艺术板

您无法导出以下设计部分

  • 智能对象
  • 框架

使用艺术板

当您从 Adobe Photoshop 导出设计并将其导入 Qt 设计工作室时，艺术板上的组和图层之间的关系会得到保留。

当您使用Qt Bridge for Adobe Photoshop导出设计时，您将决定每组或图层如何导出：是作为组件还是子元素。组件将被导入为一个可以包含其他资源的单独的UI文件，而子元素将作为单独的图片文件，您可以用它来设置UI文件。

如果您计划将设计的部分作为单独的图片放入UI中，请在画板上将它们作为单独的图层分组。然后，您可以将其作为组件导出，并逐层将其作为子元素导出。这些子元素将作为单独的PNG文件导入到Qt Design Studio中，您可以用作图片源。

要将画板的全部内容作为一个单独的图片放到UI中，可以在导出时合并这些组和图层。在导入过程中，内容将被合并成一个PNG文件。这种合并方式允许您在Photoshop或Adobe Illustrator中更改组和图层，然后再重新导出和导入画板。例如，这是一个创建最终UI如何看起来参考文献的好方法。

将UI的不同部分，如菜单和弹出窗口，放在单独的画板上，以便将它们导出为组件或子元素，并在创建UI时作为代码和PNG文件导入Qt Design Studio的2D视图，以便拖放。

Qt Design Studio提供了预定义的UI控件集，您可以根据需要对其进行修改。您可以将自己控制的控件作为组件、Qt Quick控件或Qt Quick Studio组件导出。您控件的坐标和尺寸被保留。

但是，如果您的UI控件，如复选框，要与Photoshop中的外观完全一致，您必须在一个Artboard中创建控件，并使用该画板在控件实例应创建的图层中。Qt Bridge将控件导入为.Qt Design Studio中可以编程的定制组件。

导出资源

每个画板会自动导出为一个组件，这意味着它将被导入为包含画板上所有艺术作品的单独文件，除非设置跳过或作为子元素导出的图层。您确定每个画板上的组和图层的导出方式：是作为组件还是子元素。此外，您可以将画板的组和图层合并为一个项目或完全跳过图层。

默认情况下，导出图层的方式如下：

  • 第一个级别组图层被导出为画板的子元素。
  • 第二个级别组图层与其父级合并。
  • 资源图层被合并导出。
  • 文本图层始终作为子元素导出。
  • 图片根据您的选择以PNG或JPG格式导出。

Qt Bridge for Adobe Photoshop自动为所有组和图层提出标识符（ID）。ID将在Qt Design Studio中作为文件名使用。您可以更改ID，以便在Qt Design Studio中轻松找到它们。只是请记住，ID必须是唯一的，并且必须遵循某些命名约定。

您可以使用默认设置导出资源，并可以在Qt Design Studio中稍后进行所有更改。如果您熟悉QML语法，您可以修改设置以精确调整生成的代码。例如，您可以指定用于画板或图层的组件或Qt Quick Studio Component。如果您绘制了一个打算动画的弧，您可以将其导出为Arc Studio组件，这样可以避免在Qt Design Studio中和Arc组件替换弧图像。或者，您可以将按钮导出为Qt Quick Controls Button 类型。

您可以指定用于组或图层的特效，如模糊效果。

Qt设计工作室支持的QML类型列在了设计模式下的组件视图中。

您还可以指定组件的属性值或创建属性别名以从其他属性获取值。

指定导出资产设置

使用Qt Bridge导出Adobe Photoshop中的设计

  1. Qt Bridge for Adobe Photoshop会自动提出所有组和图层的标识符，您可以在ID字段中更改。ID必须是唯一的，它们必须以前置小写字母或下划线开始，并且只能包含字母、数字和下划线字符。有关更多信息，请参阅id属性。
  2. 在导出为字段中，选择组或图层的导出类型
    • 组件导出所选的艺术板、组或图层，并包含元数据。导出的数据可以稍后用于将组件作为单独的UI文件导入，其中包含所有艺术品，除了设置为跳过或作为子项导出的图层。
    • 子项将所选组或图层的每个资产导出为单独的PNG文件，并引用组件文件中的图像。
    • 合并将所选的组和图层合并为父项中的单个项目。
    • 跳过完全跳过所选图层。
  3. 在作为画布字段中，选择要重用的画布。例如，您可以使用画布定义一个组件，例如按钮，并在其他画布中重用它。
  4. 在组件字段中，指定要将此图层形状成该组件或Studio组件。导入期间生成的组件将为该类型。例如，如果您绘制了一个矩形，您可以将它导出为矩形 Studio组件。您可以在导入字段中提供组件类型定义的模块的导入语句。

    注意：除了位置和大小之外的隐式属性在定义组件时不会被应用。例如，如果为文本层定义了组件，则将忽略所有文本属性，但如果在属性字段中显式定义了属性，则将应用。

  5. 选择渲染文本复选框将文本层作为资产呈现。该图层将作为资产导出，文本数据不会被导出。这将允许文本层与父画布或组合并。
  6. 在添加导入字段中，输入附加的导入语句以将它们添加到生成的UI文件中。例如，要使用Qt Quick Controls 2.3，您需要导入语句QtQuick.Controls 2.3，要使用Qt Studio Components 1.0，您需要导入语句QtQuick.Studio.Components 1.0。您还可以将模块作为别名导入。
  7. 在属性字段中，指定新属性或为现有属性赋值。您还可以在Qt设计工作室中添加和修改属性。以下是一些属性示例
    property int counter: 5
property string label: "ok"
antialiasing : true
width: parent.width / 2

    要删除属性，请写一个“破折号”（-）后跟“属性名称”。例如

    - width

    将从生成的代码中删除width属性。

  8. 选择剪辑内容复选框以在从图层生成的类型中启用剪辑。生成的类型将剪辑其自己的绘制，以及其子项的绘制，到其边界矩形。
  9. 选择创建别名复选框以将从此图层生成的项目导出为父组件中的别名。
  10. 选择 级联属性 以将当前属性集应用到所选层的所有子层。
  11. 在 注释 字段中，指定组件的注释。参见 注释设计。
  12. 选择 导出 以将您的资产复制到指定的导出路径。
  13. 导出完成后，选择 确定。

所有资产和元数据都复制到指定的目录。这可能需要一些时间，具体取决于您项目的复杂性。

现在您可以在 Qt 设计工作室中创建一个项目，并将资产导入到其中，如《创建项目》和《导入设计》中所述。

注意：使用 Qt Bridge for Adobe Photoshop 将您的设计导出可能会导致含有大量图层的文档导出变慢。关闭 Photoshop 的“信息”、“图层”和“属性”窗口可以提高导出速度。

自定义 ID

Qt Bridge for Adobe Photoshop 允许自定义自动生成的 ID。在 ID 前缀 字段中，指定将添加到所有自动生成 ID 前面的 ID 前缀。在 ID 后缀 字段中，指定将附加到所有自动生成 ID 的 ID 后缀。

克隆文档

Qt Bridge for Adobe Photoshop 允许创建当前文档的副本。克隆工作流程允许用户过滤出某些类型的图层和组。在 Qt Bridge for Adobe Photoshop 的 设置 对话框中，选择 克隆 以开始克隆文档。

克隆选项

以下排除选项可用来排除克隆文档中的某些类型图层和组：

  • 不可见：选择此选项以排除不可见的图层和组。
  • 跳过：选择此选项以排除已设置 导出为 字段值为 跳过 的图层。
  • 空组：选择此选项以排除任何空组。这也适用于最终会因其他选定的排除选项而变为空的组。

清理文档

Qt Bridge for Adobe Photoshop 允许从活动文档中删除所有与 Qt Bridge for Adobe Photoshop 相关的元数据。在 Qt Bridge for Adobe Photoshop 的 设置 对话框中，选择 清理文档 以清理活动文档。一旦清理成功完成，文档将不包含与 Qt Bridge for Adobe Photoshop 相关的任何元数据，Qt Bridge for Adobe Photoshop 图层设置将回滚到 默认 值。

注意：清理在内存中完成，必须保存文档以保持清理状态。

扩展 Qt Bridge for Adobe Photoshop

您可以使用 JSX 脚本来更改 Qt Bridge for Adobe Photoshop 的默认行为。可以在脚本中编写由 Qt Bridge for Adobe Photoshop 调用的具有有用参数的特定函数。

可覆盖的 JSX 函数

您可以在覆盖 JSX 中定义以下函数。

  • preExport(document) 此函数在导出文档之前调用。参数 document 是 PSD 文档实例。此函数可用于在导出前对文档进行临时更改。
  • postExport(document) 此函数在导出文档之后调用。参数 document 是 PSD 文档实例。您可以在函数 preExport(...) 中撤销所做的临时更改。
  • customDefaultQmlId(name, instance) 函数用于设置层的默认ID。返回值用作ID。返回 false 使用自动生成的ID。参数 name 是插件自动生成的ID，instance 是PSD图层实例。

注意：请参考Adobe Photoshop CC JavaScript脚本指南以了解对象模型以及文档和图层实例。

在Qt Bridge for Adobe Photoshop 设置对话框中，选择覆盖JSX脚本来设置覆盖的JSX脚本。

导入元数据和资产

Qt Bridge for Adobe Photoshop可以导入由其他工具生成的元数据并生成Adobe Photoshop文档。一种常规的流程是从Qt Design Studio导出QML项目并使用Qt Bridge for Adobe Photoshop生成Adobe Photoshop文档。

导入的文本和资产组织到画板、图层和组中。

选择导入按钮以打开导入面板。或者，可以从窗口 > 扩展启动Qt Bridge导入。

创建一个新的PSD文档并打开导入对话框。打开要导入的元数据文件，并选择导入。

注意：导入过程删除所选PSD文档中的所有现有图层。

以下指南用于生成Photoshop文档

  • 为元数据文件中导出并为组件创建一个画板。
  • 为一个带有资产的项创建一个图像图层。
  • 为一个没有资产的项创建一个纯色填充图层。
  • 为文本项创建一个段落文本图层。

将元数据文件中指定的所有元数据分配给生成的图层。

应用了虚拟父级的重要概念来将QML DOM转换为Photoshop DOM。一个QML 项目可以有子项，但是Photoshop文档中的图层不能有子图层。为了缓解这种差异，创建了一个组图层，并将子项添加到该组图层。组图层作为虚拟父级，在从Qt Design Studio导出并重新导入Photoshop文档时分配正确的父级。

注意：如果虚拟父级组图层被移动或删除，父子关系可能会丢失。

设置Qt Bridge for Adobe Photoshop 从Adobe XD导出设计

在特定的Qt许可证下可用。
了解更多信息。