Styling Qt Quick Controls with Photoshop (research)

Published Friday April 28th, 2017
7 Comments on Styling Qt Quick Controls with Photoshop (research)
Posted in Design, Qt, Qt Quick 2.0, Roadmap

The Qt Quick Controls 2 undoubtedly have a great look and feel out-of-the box. But if the available styles don’t suit your needs, you can customize the look and feel by defining your desired style in QML.

Styling without coding QML?

However, we at Qt are wondering: what if you want to have your Qt Quick Controls 2 to be styled by a graphic designer? A designer certainly masters tools like Photoshop, Illustrator, SketchApp or similar, and may want to use these tools directly for that styling task without coding QML. Also according to Qt users’ feedback, a repeatable workflow involving a design tool and automatic styling of the application would be very appreciated.

Plan to support image based styling

Qt will support such a workflow with an upcoming version of Qt. The effort can be split in two major tasks:

  1. Adding support for image based styling in Qt Quick Controls 2. That feature will scan through a directory of images and apply them to the controls according to a file naming convention like “control-subitem-state.png”.
    The feature implementation is in progress. One nice extra feature worth mentioning is the support of Nine-patch images which are certainly known by Android developers and which are supported by a few tools out there.

  2. Creating “template” style documents first for Photoshop (and then for others) which have the required structure (e.g. special layer names) to export the image elements with the right names. Style designers can take these templates as a starting point. One promising option for exporting is the built-in Asset Exporter of Photoshop, perhaps with custom extensions to it. We are however also considering other options.

Research implementation

In order to try out how such envisioned workflow feels like and in order to get early feedback by Qt users, we implemented the following example project. An included Photoshop document can be used to define the style of a few Controls. The style images get exported by the Asset exporter and land in the resources of the example application. In order to be able to develop this example under Qt 5.8 and 5.9 which do not yet contain image based styling and Nine-patch images, the example includes its custom image style and assumes a fixed border size for the border images.
This means you can clone the example right now from the git repo or download the zipped sources.

We demonstrated the example at the Embedded World 2017 and got quite positive feedback from interested users. A film crew was also there and filmed me performing my demonstration.

The research implementation in pictures

The style in Photoshop
A designer can work with the provided style template and tweak it in order to meet the desired look.

The style in Qt Quick Designer
The Qt Quick Designer tool in the Qt Creator IDE provides a preview of the style while the form is being edited.

targetdevice
The launched application (in this example on an embedded device) is using the style.

Items left to be researched…

  1. Some styling data like font faces, text colors, etc. should also be possible to be defined in the design tool and be exported as metadata in conjunction with the image files. In the case of Photoshop, there are a few options to achieve we have in mind. We still need to evaluate these options.

  2. How to generate Nine-patch images. Also here, we see a few options worth to be tried out.

What do you think of the plan? Please leave a comment below to let us know 🙂 Thank you for reading.

Do you like this? Share it
Share on LinkedInGoogle+Share on FacebookTweet about this on Twitter

Posted in Design, Qt, Qt Quick 2.0, Roadmap

7 comments

joe bermejales says:

hey, thank you and good work!

I can’t wait to see these new workflows or some kind of photoshop plugin in order to easily separate graphical design from implementation, I am programmer and I love photoshop, there are many reusable components out there (http://lakmus.deviantart.com/art/Ruthenium-UI-Kit-FREE-PSD-352793718) that would fit perfectly with our projects and save many time.

Best regards

Marco Piccolino Marco Piccolino says:

This is a quite useful feature, thank you for your work. I’d recommend a couple of things:

1) Sketch has just (v43) switched its file format from binary to json – this might make exporting from it easier.

2) Please consider adding early support also for Affinity Designer exports, which has got excellent export features and is already THE runner up to the Adobe Suite

Incidentally, both programs support some sort of adaptive sizes, that might be an addition for the future.

Melanie Cooper says:

Very excited about this!

However, I would say that many UI designers (like myself) have been turning away from Photoshop towards tools like Sketch.

Photoshop is still very popular, of course – but Sketch has a lot of advantages for use in UI design, and more and more people are adopting it every day. Hopefully your templates will be easy enough to adapt for use with Sketch!

Alan Uthoff says:

This looks really cool, however, imagine.psd does not load correctly for me in GIMP (all the green is black)

Volker says:

I did something like that for my own framework using Illustrator. What’s useful in Illustrator is that it has a attribute field that allows designers to add custom data for the export to each graphical item which allows e.g. instancing a specific classes​ for a layer or adding parameters without the need for special layer names

Jason says:

Does this mean 9-patch styling is coming back?

Louis says:

Great work!
I am not familiar with these tools, but as a developer, I wonder how you define that a Button is scalable while a Checkbox is not, and how you can define the animations of the transitions of your components. I generally have to recode from the QtQuickControls a set of tools and style them before using them everywhere, so it looks interesting, if it can answer all the needs.

Commenting closed.

Get started today with Qt Download now