Webinar Demo

Contains sources for the From Photoshop to Prototype video tutorial.

Webinar Demo contains the source files for the From Photoshop to Prototype with Qt Design Studio webinar that shows how to export designs from Adobe Photoshop to Qt Design Studio and to edit them to create a UI.

The following sections describe some of the main points of the webinar. Select the Tutorials tab to watch the webinar video for the full details.

Exporting from Adobe Photoshop

We use Adobe Photoshop to design our application and Qt Bridge to export our artwork to Qt Design Studio as PNG images and custom QML types.

Before we can begin, we must set up Qt Bridge as instructed in Exporting Designs from Adobe Photoshop.

We organize our artwork in Photoshop using artboards as instructed in Organizing Assets in Adobe Photoshop.

Qt Bridge automatically proposes identifiers for all groups and layers. The ids will be used as filenames in Qt Design Studio. We want to change some of them in the QML ID field, so that we can easily find them in Qt Design Studio. We must keep in mind that the ids must be unique, that they must begin with a lower-case letter or an underscore character, and that only letters, numbers, and underscore characters are allowed.

Each artboard is exported automatically as a component. That is, a separate QML file that contains all the artwork on the artboard. We determine whether each group or layer is exported as a component or a child item. Child items will be exported as PNG files, with references to them in the component file that contains them.

We can export some components as QML types that provide the functionality that we want. To use the types in Qt Design Studio, we need to add import statements that pull in the modules that contain the types. We can even specify properties for the types to export, so that we won't have to do that in Qt Design Studio.

Creating a Reference Image

"Settings for exporting stackLayout artboard"

We want to create a reference image of the UI that has no functionality, but shows all the UI controls as we designed them in Adobe Photoshop. We design all the controls visible on the layoutReference separately on other artboards, and therefore we can select Merged in the Export As field to merge them all into one image when this artboard is exported.

Creating the UI Main Page

We want to use the backgroundGradient artboard as the main page of the UI. Initially, it will contain a gradient image that we will build the UI on in Qt Design Studio.

We set the gradient image on the artboard to Child in the Export As field to export it as a PNG file that is referred to from the main page.

Using Stack Layout

"Settings for exporting stackLayout artboard"

For the stackLayoutFrame layer, we want to use a StackLayout QML type, which provides a stack of items where only one item is visible at a time. In the QML Type field, we enter StackLayout.

To be able to use the type, we enter the statement that imports the Qt Quick Layouts module, which contains the type, in the Add Imports field: QtQuick.Layouts 1.3.

We will add content to the stack layout in Qt Design Studio.

Using Qt Studio Effects

"Settings for exporting blurEffect layer"

We want to apply the FastBlur effect to the smallPopup UI control. In the artboard, we have a blurEffect layer that we want to export as a FastBlurItem QML type. In the QML Type field, we enter FastBlurItem.

To be able to use the type, we added the statement that imports the Qt Quick Studio Effects module: QtQuick.Studio.Effects 1.0.

We specify that the artwork to which we want to apply the effect is a child of the effect. We then specify the radius property for the effect, in the QML Properties field. We can modify the property in Qt Design Studio.

"FastBlurItem QML item in Design mode"

Creating a Menu with Reusable Buttons

The miniMenu artboard contains menu buttons that we will use to toggle popup dialogs in the UI. We want to be able to reuse the buttons and to change their appearance depending on whether they are on or off. Therefore, we select Component in the Export As field for each button to export them as separate components that we can modify in Qt Design Studio.

Within the artboard, we export each icon as a child and the background as merged. This merges the background art together while it keeps the icons separate, so that we can switch the icons depending on the state of the button. We will implement this functionality in Qt Design Studio.

Preparing for Animation

We want to animate the contents of the largePopup artboard in Qt Design Studio, so we export each group and layer as a child.

Exporting Artwork

When we have specified settings for all the artboards and the groups and layers in them, we select Export to copy the assets and metadata to the export path we specified.

Importing Artwork

After using Qt Bridge in Adobe Photoshop to export our artwork, we import it into a project that we create in Qt Design Studio, as instructed in Importing Designs.

If we need to make changes in Photoshop later and export our artwork again, Qt Design Studio will try to merge our changes during the import, so that none of the changes we mage in Qt Design Studio are lost.

Using Imported Components

The LayoutReference.ui.qml file contains a reference image of the UI we will create. We use the imported components to create the UI in the MainApp.ui.qml file. The imported components are listed in Library > QML Types > My QML Components, and we can drag and drop them to the scene.

"Main app UI in Design mode"

To view the structure of a particular component, we right-click it on the scene and select Go into Component in the context menu. Any changes we make to a component are immediately visible in all the other components where it appears.

We can view the QML code for each component in the Text Editor tab in the Design mode.

We can now use states and the timeline to animate the components in the UI.

Animating Components

We open the Largepopup.ui.qml file in the Design mode to add animation to it. In the States view, we add the opening, open, closing, and closed states for the popup.

"Popup states in the States view"

For more information about using states, see Creating Animations.

We then use the Timeline view to add animations that are run when moving from one state to another.

"Popup animations in the Timeline view"

For more information about using the timeline, see Creating Animations.

Example Files

Files:

Images:

Available under certain Qt licenses.
Find out more.