Exporting Designs from Adobe Photoshop

You can use Qt Bridge to export designs from Adobe Photoshop to .ui.qml files.

Setting Up

Qt Bridge is delivered as an Adobe extension (ZXP) package and requires Adobe Photoshop version 19.1.1, or later to be installed. The Qt Bridge installation process differs depending on whether you use ZXPInstaller and whether you are installing on Windows or macOS.

Installing with ZXPInstaller

To use ZXPInstaller to install Qt Bridge:

  1. Download and install ZXPInstaller.
  2. Start ZXPInstaller.
  3. Drag and drop the Qt Bridge ZXP package from the photoshop_bridge directory in the installation directory of Qt Design Studio to ZXPInstaller.
  4. Follow the instructions of the installation program.

Installing Without ZXPInstaller

The Qt Bridge installation process differs depending on the platform you are installing on.

Installing on Windows

To install Qt Bridge on Windows without using ZXPInstaller:

  1. Copy the Qt Bridge ZXP package from the photoshop_bridge directory in the installation directory of Qt Design Studio to the Documents directory in your user directory.
  2. Open Windows PowerShell.
  3. Enter the following commands:
    cd "$env:UserProfile\Documents"
    mv .\io.qt.QtBridge.zxp .\io.qt.QtBridge.zip
    expand-archive .\io.qt.QtBridge.zip
    xcopy /E /I .\io.qt.QtBridge  "$env:APPDATA\Adobe\CEP\extensions\io.qt.QtBridge"

Installing on macOS

To install Qt Bridge on macOS without using ZXPInstaller:

  1. Copy the Qt Bridge ZXP package from the photoshop_bridge directory in the installation directory of Qt Design Studio to your Documents directory.
  2. Open Terminal.
  3. Enter the following commands:
    cd ~/Documents
    unzip io.qt.QtBridge.zxp -d io.qt.QtBridge
    sudo mkdir -p /Library/Application\ Support/Adobe/CEP/extensions
    sudo cp -R ./io.qt.QtBridge /Library/Application\ Support/Adobe/CEP/extensions

Enabling Remote Connections

To set up Qt Bridge:

  1. Once the installation is completed, restart Adobe Photoshop to make Qt Bridge appear in Window > Extensions.
  2. Select Edit > Preferences > General > Plug-ins to enable a remote connection.
  3. Select the Enable Remote Connections check box and enter a password in the Password field.
  4. To test that the connection is working properly, start Qt Bridge and select the settings icon in the top right corner.

  5. In the Password field, enter the password you entered in Adobe Photoshop and select Connect.
  6. In the Export Path group, select the browse button (...) to specify the location where Qt Bridge copies the exported files.

Once the connection is successfully created, Qt Bridge is ready to use.

Exporting Assets

Each artboard is exported automatically as a component. That is, a separate QML file that contains all the artwork on the artboard, except layers that are set to be skipped or exported as child items. You determine how each group or layer in an artboard is exported: as a component or a child item. In addition, you can merge the groups and layers of an artboard together into a single PNG asset or skip layers completely.

By default, layers are exported as follows:

  • First level group layers are exported as child items of the artboard.
  • Second level group layers are merged to their parent.
  • Asset layers are exported as merged.
  • Text layers are always exported as child items.

Qt Bridge automatically proposes identifiers (QML ids) for all groups and layers. The ids will be used as filenames in Qt Design Studio. You can change the ids, so that you can easily find them in Qt Design Studio. Just keep in mind that the ids must be unique and that they must follow some naming conventions.

You can export assets using the default settings and make all the changes later in Qt Design Studio. If you are familiar with the QML syntax, you can modify the settings to tailor the generated QML to a certain degree. For example, you can specify the QML type or Studio component to use for a component or layer. If you have drawn an arc that you mean to animate, you can export it as an Arc Studio component to avoid having to replace the arc image with an Arc component in Qt Design Studio. Or you could export a button as a Qt Quick Controls 2 Button type.

Similarly, you can specify effects, such as a blur effect, to use for a group or layer.

The QML types supported by Qt Design Studio are listed in the QML Types tab in the Library in the Design mode of Qt Design Studio. For more information, see Creating Components.

You can also specify values for the properties of the QML type or create property aliases to fetch the values from other properties.

Specifying Settings for Exporting Assets

To export your design using Qt Bridge:

  1. Qt Bridge automatically proposes identifiers for all groups and layers that you can change in the QML ID field. The ids must be unique, they must begin with a lower-case letter or an underscore, and they can only contain letters, numbers, and underscore characters. For more information, see The id Attribute.
  2. In the Export As field, select the export type for the group or layer:
    • Component creates a separate QML file for the selected artboard, group, or layer that contains all the artwork in it, except layers that are set to be skipped or exported as child items.
    • Child creates a separate PNG file for each asset of the selected group or layer, with references to the images in the component file.
    • Merged merges the selected groups and layers into a single PNG asset.
    • Skipped completely skips the selected layer.
  3. In the As Artboard field, select an artboard to reuse. For example, you can use an artboard to define a component, such as a button, and reuse it in other artboards.
  4. In the QML Type field, specify the QML type or Studio component to morph this layer into. The generated component will be of this type. For example, if you drew a rectangle, you can export it as a Rectangle Studio component. You can provide the import statement of the module where the QML type is defined in the Add Imports field.
  5. In the Add Imports field, enter additional import statements to have them added to the generated QML file. For example, to use Qt Quick Controls 2.3, you need the import statement QtQuick.Controls 2.3 and to use Qt Studio Components 1.0, you need the import statement QtQuick.Studio.Components 1.0. You can also import a module as an alias.
  6. In the QML Properties field, specify properties for the QML type. You can add and modify properties in Qt Design Studio.
  7. Select the Clip Contents check box to enable clipping in the type generated from the layer. The generated type will clip its own painting, as well as the painting of its children, to its bounding rectangle.
  8. Select the Create Alias check box to export the item generated from this layer as an alias in the parent component.
  9. Select Export to copy your assets to the export path you specified.
  10. When the exporting is done, select OK.

All the assets and metadata are copied to the directory you specified. This might take a little while depending on the complexity of your project.

You can now create a project in Qt Design Studio and import the assets to it, as described in Creating Projects and Importing Designs.

Sanitizing Documents

Qt Bridge enables removing all Qt Bridge related metadata from the active document. In the Qt Bridge Settings dialog, select Sanitize Document to sanitize the active document. Once the sanitization is successfully done, the document will contain no Qt Bridge related metadata and the Qt Bridge layer settings will fall back to the default values.

Note: The sanitization is done in memory and the document must be saved to keep the sanitized state.

Qt Bridge Videos

For more information, watch a video tutorial and webinar about using Qt Bridge:

© 2019 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.