Back to Blog home

Exporting QML from Photoshop and GIMP

Published on Tuesday October 19, 2010 by Jens Bache-Wiig in Qt Quick QtCreator | Comments

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.

Subscribe to Our Blog

Stay up to date with the latest marketing, sales and service tips and news.

The blog comment system has been migrated to a new platform. If you face any issues, please let us know via feedback@qt.io.