Organizing Assets in Adobe Photoshop

To get the best results when you use Qt Bridge to export designs from Adobe Photoshop to Qt Design Studio, follow these guidelines when working with Photoshop:

  • Arrange your art into artboards and organize it into groups and layers that are imported into Qt Design Studio as separate files, depending on the choices you make when exporting designs.
  • Use the Type tool to make sure that all of your text labels are exported to Text items.
  • Store all assets in vector format to be able to easily rescale them for different screen sizes and resolutions.

If you would rather use Adobe Illustrator for creating artwork, you can copy-paste your assets to Adobe Photoshop as smart objects. You can then double-click the smart objects in Photoshop to open them in Illustrator for editing. Because you use smart objects, all your changes are propagated to all instances of the objects used in your designs in Photoshop.

To use the fonts that you use in Photoshop also in Qt Design Studio, you need to load them to Qt Design Studio. Qt Design Studio deploys them to devices when you preview the UI. For more information, see Using Custom Fonts.

Using Artboards

The relationships between the groups and layers on an artboard are preserved when you export designs from Adobe Photoshop and import them into Qt Design Studio.

When you use Qt Bridge to export your designs, you will determine whether you want each group or layer exported as a component or child. A component is a single QML file that can contain other assets. A child is a single PNG file that you can use within QML files.

If you plan to use pieces of your artwork as separate images in the UI, group them on an artboard as separate layers. You can then export the group as a component and each layer within it as a child. The children are imported to Qt Design Studio as separate PNG files that you can use as image sources.

To use the contents of an artboard as a single image in the UI, you can merge the groups and layers when you export them. During import, the contents are flattened into one PNG file. The merge is done in a way that enables you to change the groups and layers in Photoshop or Adobe Illustrator and then export and import the artboard again. This is an easy way to create a reference image of how the final UI should look like, for example.

Place different parts of the UI, such as menus and pop-ups, on separate artboards to be able to export them as components or children and to import them as QML and PNG files that you can drag and drop to the working area in Qt Design Studio Design mode while creating a UI.

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.