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

You determine whether each group or layer is exported as a component or a child item. You can also merge groups and layers together into a single PNG asset or skip layers completely.

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.

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

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.
  2. In the Export As field, select the export type for the group or layer:
    • Component creates a separate QML file for the selected group or layer that contains all the artwork in the group or layer.
    • Child creates a separate PNG file for each child of the selected group or layer.
    • 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 Custom 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 UI prototype project in Qt Design Studio and import the assets to it, as described in Creating UI Prototype Projects and Importing Designs.

Qt Bridge Videos

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

Available under certain Qt licenses.
Find out more.