Exporting QML from Photoshop and GIMP

Published Tuesday October 19th, 2010 | by

Creating QML is incredibly fun, but quite often it can be problematic to split up that shiny Photoshop mockup that your designer sent you into a fully usable Qt Quick interface. Wouldn’t it be great if we could automate that process? I thought so too, so I wrote a couple of scripts that might be useful. The first one is a Photoshop script. Just drop it in there with your other scripts and you’ll get a shiny new “Export QML” option in the menu. Using this will dump your scene into a single QML-file with an Image or Text element for each layer. Since Adobe illustrator comes with a handy Photoshop export option, you can also use the script with vector graphics.

I made a simple demonstration video to give you a better impression of how it works in practice:

http://www.youtube.com/watch?v=9BRJ1qJkjZM (video has been updated, the original is here)

This is of course work in progress, so use at your own risk, but as you can see it’s already quite usable. The code can be downloaded directly from here.

Of course not everyone out there have access to Adobe Photoshop.. Fortunately there is an open source alternative called Gimp which serves more or less the same purpose, and allows you to import from Photoshop as well. So I have also made a similar plugin script for GIMP.  That script can be found here.

Edit: I just noticed that someone also put up a video of this in action.

Did you like this? Share it:
Bookmark and Share

Posted in Qt Quick, QtCreator

54 comments to Exporting QML from Photoshop and GIMP

Axel Jäger says:

Does it also work with Photoshop Elements?

Jens Bache-Wiig says:

Axel: I have only tested it on Photoshop CS 4 and 5. Elements is a quite different application as far as I understand. If Elements support saving layered files to Photoshop .psd format, then you could open them with the GIMP and export from there.

AnTs says:

Any plans for also creating this script for Krita? Oh and wouldn’t designers usually use vector tools like Karbon or inkscape for mocups? So maybe it would be better to make similar scripts for these kinds of tools?

Jens Bache-Wiig says:

AnTs: I haven’t looked into Krita yet since I’m not too familiar with it, but I imagine it should be simple to modify or make a similar script for it if anyone have some spare time on their hands. As I suggested you can already export to Photoshop from Illustrator and you will have to rasterize your vector graphics in order to run it at reasonable performance on your phone. For pure vector graphics, I’m experimenting with a html5 canvas API for Qt Quick. There are already third party tools that will export from illustrator to canvas if you keep your illustrations reasonably simplistic.

Declan says:

Thanks very much fpr the helpful script.

ponna77 says:

This would be great if it worked..
I tried this but got error saying ???

Error 8 Syntax error.
Syntax error
var ga=document.create.Element(‘Script’) ….etc. etc..

ponna77 says:

small addition, I have Photoshop version CS4

Jens Bache-Wiig says:

ponna77: Thanks for the heads up. Admittedly I only have CS5 myself so I only know an older version ran fine on CS4. It would be great if you could file off a bugreport at http://bugreports.qt.nokia.com and include the entire error message. You can use Qt Solutions as the product ID for now.

ponna77 says:

Promlem solved. :) When I saved the file as advised above it got corrupted – thanks to my colleaque it was pointed out to me.. I got the raw data in .zip-file from where I could get the file not corrupted. So thanks! It is working now. Great!

Jens Bache-Wiig says:

ponna77: Good news! I was really puzzled by that error. It made no sense whatsoever :)

2beers says:

great news. I start sketching my first qt quick application in photoshop, and today I was thinking if there is such a tool for exporting elements to QML.
I will try the tool and see how is working.

So far the first problem I see is exporting font color :) it’s always white no matter what color I choose in Photoshop

Jens Bache-Wiig says:

2beers: Actually it works as you can see from the example files (black/white). However photoshop allows you to change the font and color per-character. This is not possible in QML. If you set the text color on the text item itself without double clicking the text first it should work. I’m not really sure how to deal with those situations though. You can of course check the “rasterize text” which will make your text a static image element.

edit: Well I guess I could map those cases to rich text… Anyways your feedback has been noted :)

2beers says:

@Jens Bache-Wiig I didn’t use per-character color. however there is a bug. and I think it’s from qml visual editor

I made another simple test and created a text in photoshop with the color #120082(RGB: 18,0,130)
The qml exporter exported the text with the color: Qt.rgba(18.3346298709512,0,130.000007450581, 1.0) bit in visual editor it shows me the color: #ff00ff .
I filled a bug here: http://bugreports.qt.nokia.com/browse/QTCREATORBUG-2805 .

However I think it will be better if the exporter will export the color in #xxxxxx format , and not in Qt.rgba(R,G,B, 1.0)

Hope this helps

Jens Bache-Wiig says:

2beers: Thanks for the feedback! I just updated the script to save colors as hex values as you suggested. Hopefully that solves your export issue.

Gezim Hoxha says:

This is WAYYY too neat!

Thanks so much :)

sjbyun says:

Great!!!!

Texrat says:

This is extremely useful, thanks for doing it!

2beers says:

@Jens Bache-Wiig thanks. anyway there was a bug with the exporter since it exported floated RGB numbers :)

Jens Bache-Wiig says:

2beers: Yes I know. I was the one pointing it out in the bug report. :)

Timo Strömmer says:

Interesting indeed. Any plans on doing QtCreator integration someday? Something like the JavaFX production suite does: http://download-llnw.oracle.com/javafx/1.3/tutorials/integrate-graphic-assets/

Jens Bache-Wiig says:

Timo: This is almost equivalent to what the javaFX production suite offers already. As far as I understand, the production suite consists of an exporter for Photoshop that exports directly to an FXD(QML) descriptor with Image and Text elements with png images for each layer and a viewer (QMLViewer/Creator). If the question is if we are planning on bundling the plugin with Creator and rebrand it as Qt Creative Suit, I’d say that might be a good idea but I’ll leave that up to marketing. :) But bundling it with the SDK and install it automatically probably makes sense.

Andre says:

Way cool, but like someone else mentioned too: Inkscape would be a great target for such a plugin too!

Thanks for your work!

Benjamin Arnaud says:

The is seriously nice.

One question I have is : what happens if I export my PSD, tweak my QML a bit with animations and stuff and then modify my PSD and export it again. Will it erase my modifications ? Have you thought of a workaround ?

Jens Bache-Wiig says:

Benjamin: It could be made to work for a very small subset of cases, i.e if you did not rename anything, if you did not add sub-elements and did not do any re-organizing of elements. But I think it would be too fragile to really be useful. If you want to move things around after you have performed the export, you should do so within the QML designer. However, I think I will add a checkbox so rewriting the QML file itself is optional. I.e, just update the pixmaps but don’t touch the QML. That way you can conveniently update the layer artwork after the original export, provided you keep the layer names without touching your own modifications.

Jens Bache-Wiig says:

Andre: say no more…

Timo Strömmer says:

Updating the designs was one thing I had in mind when thinking about that QtCreator integration. Basically some way of separating the generated QML from the logic, analogous to how the widget UI’s are built, so you could work on the designs with gimp, logic with creator and then use creator build button (or something similar) to push the stuff together.

Great news Jens! I love this scripts!
What do you think about the possibility to load multiple Photoshop/GIMP images as different state in QML? So you can build an object for every layer, like you do now, and then build a state for each image tracking the properties of each object.

Jens Bache-Wiig says:

Timo: Gimp cannot properly express parent-child relationship between layers or re-use the same layer in different places. So I don’t see how we can bring it along further into the design process. It simply is not expressive enough for such a purpose. (neither is Photoshop) We are creating the Qt Quick designer to make such designs easier to use for graphics designers.

Timo Strömmer says:

Jens: Yup, could be a problem, but I’m not sure if it’s that bad. Anyway, have to play around a bit more. Thanks for the great work!

Joseph Girouard says:

Inkscape!

Bearnaise says:

Too bad I can not use it with GIMP 2.6.11 and Windows XP!

Jens Bache-Wiig says:

Bearnaise: You can but I’m afraid it is rather hard to set up.
To use this on Windows, you will need to enable python support in Gimp. Se the first section here http://www.pygtk.org/downloads.html

Essentially, you have to uninstall your existing Gimp, install python, pygtk, some dependencies and then install Gimp again. After that it should work fine.

Flavio says:

I think this approach is completely flawed. A user interface is both form and function. Form and function melded in a way that they depend on each other. You cannot “draw” a UI and then make it work. Well, you can do it if you’re aiming for mediocre results.

Jens Bache-Wiig says:

Flavio: Then I think you are missing the point. Nobody is suggesting that you should write your standard widget based control panel in Photoshop. Modern app development is about much more than that. Most popular apps have uniquely designed components that you simply can’t make using a standard widget library. Think interactive children’s books. Music apps with realistic synthesizer controls. Beautifully animated full screen dials. This exporter makes it easy to animate and make them interactive using Qt Quick.

Flavio says:

Thanks for replying, Jens. I was not referring to standard widgets. I was thinking about graphic designers being put in charge of the UI with developers implementing what the designer came with, which somewhat implied in this post. Well, in my experience this does not work. Or, as I said above, it works with mediocre results.

Michael Devin says:

Jens, certainly appreciate your work on this script. Believe it will save our visual designers and UI engineers quite a bit of time. Notably image slicing and red-lining.

Found a bug regarding OSX file export paths. Looks like it is hard coded to use paths. Nothing a good batch file rename can’t fix in the meantime.

Issue filed as:
http://bugreports.qt.nokia.com/browse/QTSOLBUG-147

Michael Devin says:

Believe the network ate my first post, tubes here in India are less than reliable :(

Appreciate the work on this script Jens, it’s saving our visual designers quite a bit of time on red-lines and production slicing.

Found an issue regarding file paths on OSX. Logged as bug:
http://bugreports.qt.nokia.com/browse/QTSOLBUG-147

Let me know if you have any other questions, in the meantime it’s nothing a good batch file rename can’t fix.

Enrique says:

On mac the script does not work, it creates long names, whereas should be folders.

Jens says:

Enrique: Try fetching the script from source again. I already addressed an issue with exporting on the mac.

NumberSix says:

No way to made appear the new voice in file menu in Gimp.
Tried both in Win7 and PuppyLinux.
Loaded all library.
But it do not show anyway. Some suggestions?

NumberSix says:

edit: now all OK!

Markyboy says:

Is this supposed to work on Windows?

I’ve just tried it with GIMP on windows and I’m not seeing the menu option appear anywhere…

Jens says:

Markyboy: You need to read the included installation notes. It is possible to make it work on windows but not easy. You have to install pyhon and a set of gtk dependencies before you install Gimp for it to work.

Markyboy says:

Jens: I see nothing mentioned about installing python or anything else in the INSTALL.txt that is part of the GIMP version of your script. Should there be some other script/link/file I should look at? I likely have all of the dependencies on this system already (in a MinGW environment)

…or actually, do you mean GIMP installation docs???

Amit says:

This is such a nice idea. And thank you so much for doing it for GIMP users as well.

VStevenP says:

Hi Jens – Is there anything about these Photoshop/GIMP –>QML plug-ins that will need/want touching up for use with the forthcoming Qt Creator 2.7, which has Qt Quick 2 support? (I was just kicking the tires on Qt Creator 2.7 built from Gitorious). I haven’t used your plug-in yet, but I saw a video on you tube, and thought I saw an import 4.7 command atop the QML, or something similar. Maybe the output QML has to be tweaked to work/be optimal for Qt Quick 2, but maybe not?

Jens says:

I already made the Qt Version editable in the photoshop exporter so the plugin works fine with QtQuick 2.0. I have not had any complaints or bug reports about it so far. Let me know if you run into any trouble.

The Gimp plugin needs to be updated with customisable imports though. Obviously hard-coding the qt version is not very optimal.

VStevenP says:

The only thing I’ve seen so far is that a few of the images needed by the Example.qml file in the repo are not submitted, namely banner.png, textcircle.png, and button.png. It might be nice to put those in the repo so you have a complete example there.

dental assistant training says:

Hey are using WordPress for your blog platform? I’m new to the blog world but I’m
trying to get started and set up my own. Do you
require any html coding expertise to make your own blog?
Any help would be really appreciated!

Arnab says:

Wow, this is so cool Jens! I just finished making a ui for an iOS app..Does this mean that when the official iOS port is here, I can do photoshop->QML->iOS painlessly? If yes, this is super-awesome. If not, still awesome :)

Jens says:

That is pretty much the idea :)

Arnab says:

Awesome! love it :D

If you want to get a good deal from this article then you
have to apply these techniques to your won webpage.

modjo says:

Hello, i’m trying to install QMLexpoter on gimp 2.8 but it didn’t work. In gimp 2.8 python is already installed, perhaps the extension is not compatible with this version of python ? Do you have a solution for this problem ?

Commenting closed.