Exporting Designs from Adobe Photoshop
You can use Qt Bridge to export designs from Adobe Photoshop to .ui.qml files.
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.
To use ZXPInstaller to install Qt Bridge:
- Download and install ZXPInstaller.
- Start ZXPInstaller.
- Drag and drop the Qt Bridge ZXP package from the
photoshop_bridgedirectory in the installation directory of Qt Design Studio to ZXPInstaller.
- Follow the instructions of the installation program.
The Qt Bridge installation process differs depending on the platform you are installing on.
To install Qt Bridge on Windows without using ZXPInstaller:
- Copy the Qt Bridge ZXP package from the
photoshop_bridgedirectory in the installation directory of Qt Design Studio to the
Documentsdirectory in your user directory.
- Open Windows PowerShell.
- 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"
To install Qt Bridge on macOS without using ZXPInstaller:
- Copy the Qt Bridge ZXP package from the
photoshop_bridgedirectory in the installation directory of Qt Design Studio to your
- Open Terminal.
- 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
To set up Qt Bridge:
- Once the installation is completed, restart Adobe Photoshop to make Qt Bridge appear in Window > Extensions.
- Select Edit > Preferences > General > Plug-ins to enable a remote connection.
- Select the Enable Remote Connections check box and enter a password in the Password field.
- To test that the connection is working properly, start Qt Bridge and select the settings icon in the top right corner.
- In the Password field, enter the password you entered in Adobe Photoshop and select Connect.
- 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.
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.
To export your design using Qt Bridge:
- 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.
- 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.
- 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.
- 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.
- 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.3and 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.
- In the QML Properties field, specify properties for the QML type. You can add and modify properties in Qt Design Studio.
- 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.
- Select the Create Alias check box to export the item generated from this layer as an alias in the parent component.
- Select Export to copy your assets to the export path you specified.
- 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.
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.
For more information, watch a video tutorial and webinar about using Qt Bridge:
Available under certain Qt licenses.
Find out more.