README.md 4.4 KB
Newer Older
Alessandro Portale's avatar
Alessandro Portale committed
1 2
# Research: Styling Qt Quick Controls 2 with Photoshop

Alessandro Portale's avatar
Alessandro Portale committed
3
The Qt Quick Controls 2 undoubtedly have a great look and feel out-of-the box. But if the [available styles](http://doc.qt.io/qt-5/qtquickcontrols2-styles.html) don't suit your needs, you can [customize the look and feel](http://doc.qt.io/qt-5/qtquickcontrols2-customize.html) by defining your desired style in QML.
Alessandro Portale's avatar
Alessandro Portale committed
4

Alessandro Portale's avatar
Alessandro Portale committed
5 6
## 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.
Alessandro Portale's avatar
Alessandro Portale committed
7

Alessandro Portale's avatar
Alessandro Portale committed
8 9
## 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:
Alessandro Portale's avatar
Alessandro Portale committed
10

Alessandro Portale's avatar
Alessandro Portale committed
11 12
 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](https://codereview.qt-project.org/188127). One nice extra feature worth mentioning is the support of [Nine-patch images](https://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch) which are certainly known by Android developers and which are supported by a few tools out there.
Alessandro Portale's avatar
Alessandro Portale committed
13

Alessandro Portale's avatar
Alessandro Portale committed
14 15 16 17 18 19 20 21 22 23 24 25
 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](https://helpx.adobe.com/photoshop/using/generate-assets-layers.html), perhaps with [custom extensions to it](https://github.com/adobe-photoshop/generator-core). We are however also considering other options.

## Still to be to be figured out...
 * 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.
 * How to generate Nine-patch images. Also here, we see a few options worth to be tried out.

## 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. See the example in action.
The 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](https://codereview.qt-project.org/188127), the example includes its [custom image style](http://doc.qt.io/qt-5/qtquickcontrols2-customize.html) and assumes a fixed border size for the border images.
This means you can clone the example right now [from the git repo](https://git.qt.io/aportale/photoshop-qqc2-style) or [download the zipped sources](https://git.qt.io/aportale/photoshop-qqc2-style/repository/archive.zip?ref=master).

## The research implementation in pictures
Alessandro Portale's avatar
Alessandro Portale committed
26
[![style in photoshop](photoshop.png "The style in Photoshop")](photoshop.png)
Alessandro Portale's avatar
Alessandro Portale committed
27 28 29

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

Alessandro Portale's avatar
Alessandro Portale committed
30
[![style in ide](ide.png "The style in Qt Creator")](ide.png)
Alessandro Portale's avatar
Alessandro Portale committed
31 32 33

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

Alessandro Portale's avatar
Alessandro Portale committed
34
[![style on target](targetdevice.jpg "The styled application on the Target")](targetdevice.jpg)
Alessandro Portale's avatar
Alessandro Portale committed
35

Alessandro Portale's avatar
Alessandro Portale committed
36 37
The launched application (in this example on an embedded device) is using the style.

Alessandro Portale's avatar
Alessandro Portale committed
38 39 40 41 42 43
## Feedback so far
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.

[![demonstration on youtube](http://img.youtube.com/vi/M6filklNtbo/0.jpg)](http://www.youtube.com/watch?v=M6filklNtbo)

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