Doc: export to QML scripts

Reviewed-by: jbache

3 files changed, 143 insertions, 1 deletions

diff --git a/doc/images/qml-export-gimp.png b/doc/images/qml-export-gimp.png
new file mode 100644
index 0000000000..663bfa1171
--- /dev/null
+++ b/doc/images/qml-export-gimp.png
diff --git a/doc/images/qml-export-photoshop.png b/doc/images/qml-export-photoshop.png
new file mode 100644
index 0000000000..2c92b8ba8e
--- /dev/null
+++ b/doc/images/qml-export-photoshop.png
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