From 6c9a88913af98c4add28e8ce9799a6a75646bc04 Mon Sep 17 00:00:00 2001 From: Leena Miettinen Date: Tue, 11 Jan 2011 13:44:39 +0100 Subject: Doc: export to QML scripts Reviewed-by: jbache --- doc/images/qml-export-gimp.png | Bin 0 -> 107734 bytes doc/images/qml-export-photoshop.png | Bin 0 -> 124762 bytes doc/qtcreator.qdoc | 144 +++++++++++++++++++++++++++++++++++- 3 files changed, 143 insertions(+), 1 deletion(-) create mode 100644 doc/images/qml-export-gimp.png create mode 100644 doc/images/qml-export-photoshop.png diff --git a/doc/images/qml-export-gimp.png b/doc/images/qml-export-gimp.png new file mode 100644 index 0000000000..663bfa1171 Binary files /dev/null and b/doc/images/qml-export-gimp.png differ diff --git a/doc/images/qml-export-photoshop.png b/doc/images/qml-export-photoshop.png new file mode 100644 index 0000000000..2c92b8ba8e Binary files /dev/null and b/doc/images/qml-export-photoshop.png differ diff --git a/doc/qtcreator.qdoc b/doc/qtcreator.qdoc index a2b9330304..db8bd99fd9 100644 --- a/doc/qtcreator.qdoc +++ b/doc/qtcreator.qdoc @@ -106,6 +106,7 @@ \o \l {Creating Screens} \o \l {Animating Screens} \o \l {Adding User Interaction Methods} + \o \l {Exporting Designs from Graphics Software} \o \l {Implementing Application Logic} \endlist \o \l{Developing Widget Based Applications} @@ -7399,6 +7400,7 @@ \o \l {Creating Screens} \o \l {Animating Screens} \o \l {Adding User Interaction Methods} + \o \l {Exporting Designs from Graphics Software} \o \l {Implementing Application Logic} \endlist @@ -8065,7 +8067,7 @@ \contentspage index.html \previouspage quick-animations.html \page quick-user-interaction.html - \nextpage quick-application-logic.html + \nextpage quick-export-to-qml.html \title Adding User Interaction Methods @@ -8092,6 +8094,146 @@ \contentspage index.html \previouspage quick-user-interaction.html + \page quick-export-to-qml.html + \nextpage quick-application-logic.html + + \title Exporting Designs from Graphics Software + + You can export designs from graphics software, such as Adobe Photoshop and GIMP, + to QML files. Each scene is converted into a single QML file with an Image or a + Text element for each layer and saved on the development PC. Top-level layer + groups are converted into merged QML Image elements. + + Note: GIMP does not support grouping, and therefore, each layer is exported as + an item in GIMP. + + The following rules apply to the conversions: + + \list + + \o Layer names are used as element names. Spaces and hash marks (#) are + replaced with underscore characters to create valid ids for the elements. + + \o Layer styles, such as drop shadows, are converted to images. + + \o Offset, size, ordering and opacity are preserved. + + \o Text layers are converted to Text elements, unless you specify that they + be converted to Image elements. + + \o Hidden layers can be exported, and their visibility is set to hidden. + + \o PNG images are copied to the images subirectory. + + \endlist + + You can open the QML file in Qt Creator for editing. If you edit the file in Adobe + Photoshop and export it to the same directory again, any changes you made in Qt + Creator are overwritten. However, you can re-export graphical assets without + recreating the QML code. + + If you create vector graphics with other tools that have an Adobe Photoshop export + option,such as Adobe Illustrator, you can export them first to Photoshop and then + to QML. + + \section1 Exporting from Adobe Photoshop to QML + + \image qml-export-photoshop.png + + The script has been tested to work on Adobe Photoshop CS 4 and 5, but it might also + work on other versions. + + \list 1 + + \o Download the export script, \e{Export QML.jx}, from + \l{http://qt.gitorious.org/qt-labs/photoshop-qmlexporter/trees/master}{Gitorious}. + + \note Read the README.txt file in the repository for latest information about + the script. + + \o Double-click the export script to add the export command to the \gui Scripts + menu. You can also copy the script file to the Adobe Photoshop scripts directory + (typically, \c{\Presets\Scripts} in the Photoshop installation directory). + + \o In Adobe Photoshop, choose \gui {File > Scripts > Export to QML} to export the + scene to a QML file. + + \o In the \gui {Export Document to QML} dialog, enter a name and location for the + QML file. + + \o Select the \gui {Rasterize text} check box to export text layers as images, + not as Text elements. + + \o Select the \gui {Group layers} check box to export each top-level group as a + merged QML Image element. + + \o Select the \gui {Export hidden} check box to export hidden layers and to set + their visibility property to hidden. + + \o Deselect the \gui {Export QML} check box if you have modified the QML document + in Qt Creator, but still want to re-export graphical assets. + + \o Click \gui Export. + + \endlist + + The QML file is saved to the location that you specified. + In Qt Creator, choose \gui {File > Open File or Project} to open the QML file. + + \note Existing files are replaced without warning. + + \section1 Exporting from GIMP to QML + + \image qml-export-gimp.png + + The script has been tested to work on GIMP 2. You can download GIMP 2 from + \l{http://www.gimp.org/downloads/}{GIMP Downloads}. + + To use the export script on Microsoft Windows, you also need to install the + GIMP Python extension (Python, PyCairo, PyGobject, PyGTK). However, GIMP is + not officially supported on Windows, so we cannot guarantee that this will + work. + + \list 1 + + \o On Microsoft Windows, you must first add Python support to your GIMP + installation, as instructed in + \l {http://www.gimpusers.com/tutorials/install-python-for-gimp-2-6-windows}{Tutorial: Installing Python for GIMP 2.6 (Windows)}. + + \o Download the export script, \e qmlexporter.py, from + \l{http://qt.gitorious.org/qt-labs/gimp-qmlexporter/trees/master}{Gitorious}. + + \note Read the INSTALL.txt in the repository for latest information about the + script. + + \o Copy the export script to the plug-ins directory in the GIMP installation + directory. + + \o Check the properties of the file to make sure that it is executable. + + On Linux, run the following command: \c {chmod u+rx} + + \o Restart GIMP to have the export command added to the \gui File menu. + + \o Choose \gui {File > Export to QML} to export the design to a QML file. + + \o In the \gui {Export Layers to a QML Document} dialog, enter a name and + location for the QML file, and click \gui Export. + + \endlist + + The QML file is saved to the location that you specified. + In Qt Creator, choose \gui {File > Open File or Project} to open the QML file. + + \note Existing files are replaced without warning. + +*/ + + +/*! + + \contentspage index.html + \previouspage quick-export-to-qml.html \page quick-application-logic.html \nextpage creator-using-qt-designer.html -- cgit v1.2.3