qtquick-exporting-qml.qdoc 7.89 KB
Newer Older
1 2
/****************************************************************************
**
Eike Ziller's avatar
Eike Ziller committed
3 4
** Copyright (C) 2015 The Qt Company Ltd.
** Contact: http://www.qt.io/licensing
5
**
hjk's avatar
hjk committed
6
** This file is part of Qt Creator
7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
**
**
** GNU Free Documentation License
**
** Alternatively, this file may be used under the terms of the GNU Free
** Documentation License version 1.3 as published by the Free Software
** Foundation and appearing in the file included in the packaging of this
** file.
**
**
****************************************************************************/

// **********************************************************************
// NOTE: the sections are not ordered by their logical order to avoid
// reshuffling the file each time the index order changes (i.e., often).
// Run the fixnavi.pl script to adjust the links to the index order.
// **********************************************************************

/*!

27
    \contentspage {Qt Creator Manual}
28
    \previouspage qmldesigner-connections.html
29
    \page quick-export-to-qml.html
30
    \nextpage creator-qml-modules-with-plugins.html
31 32 33 34 35

    \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
36 37
    Image or a Text item for each layer and saved on the development PC.
    Top-level layer groups are converted into merged QML Image types.
38 39 40 41

    \note GIMP does not support grouping, and therefore, each layer is exported
    as an item in GIMP.

42 43 44 45 46 47
    You can open the QML file in \QC for editing. By default, the export scripts
    generate Qt Quick 1 files. To edit the files in \QMLD, change the import
    statements in the export scripts to import Qt Quick 2. Or, you can change
    the import statement in each file after generating the files.

    If you edit the file in Adobe
48 49 50 51 52 53 54 55 56 57 58 59 60 61
    Photoshop and export it to the same directory again, any changes you made in
    \QC 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 Conversion Rules

    The following rules apply to the conversions:

    \list

62
        \li Layer names are used as item names. Spaces and hash marks (#) are
63
            replaced with underscore characters to create valid ids for the
64
            items.
65

66
        \li Layer styles, such as drop shadows, are converted to images.
67

68
        \li Offset, size, ordering and opacity are preserved.
69

70 71
        \li Text layers are converted to Text items, unless you specify that
            they be converted to Image items.
72

73
        \li Hidden layers can be exported, and their visibility is set to
74 75
            hidden.

76
        \li PNG images are copied to the images subirectory.
77 78 79 80 81 82 83 84 85 86

    \endlist

    \section1 Preparing Files for Conversion

    To create QML files that are easy to use, prepare the Adobe Photoshop or
    GIMP designs for exporting, as follows:

    \list

87
        \li To minimize the number of items, minimize the number of layers or
88
            use top-level layer groups, because each layer or layer group is
89
            exported as a Text or Image item.
90

91 92
        \li To make sure that all related items are exported to the same
            item, use top-level layer groups.
93

94
        \li To determine that some layers are not exported, hide them, and
95
            deselect the \uicontrol {Export hidden} check box during exporting.
96

97
        \li To make it easier to find the layers and layer groups after
98 99
            exporting them, use descriptive names for them.

100
        \li To make sure that image dimensions are preserved during export,
101 102 103 104
            create at least one fully filled layer (which can be hidden), such
            as a background layer. If the export script does not find a fully
            filled layer, it resizes all images to the size of the canvas.

105
        \li To prevent errors during export, make sure that the layers are not
106 107
            locked. Locked layers cannot be exported.

108
        \li To avoid unexpected results, do not use Blending Mode effects. They
109 110 111 112 113 114 115 116 117 118 119 120 121
            are not exported.

    \endlist

    \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

122 123 124 125
        \li Clone the repository that contains the export script,
            \e{Export QML.jx}, from
            \l{https://codereview.qt-project.org/#/admin/projects/qt-labs/photoshop-qmlexporter}
            {Qt Code Review}.
126 127 128 129

            \note Read the README.txt file in the repository for latest
            information about the script.

130 131 132 133 134 135 136
        \li To generate QML files that you can edit in \QMLD, edit the import
            statement in \e {Export QML.jx}. For example:

            \code
            qmlfile.write("import QtQuick 2.5\n");
            \endcode

137
        \li Double-click the export script to add the export command to the
138
            \uicontrol Scripts menu. You can also copy the script file to the Adobe
139 140 141
            Photoshop scripts directory (typically, \c{\Presets\Scripts} in the
            Photoshop installation directory).

142
        \li In Adobe Photoshop, choose \uicontrol {File > Scripts > Export to QML} to
143 144
            export the scene to a QML file.

145
        \li In the \uicontrol {Export Document to QML} dialog, enter a name and
146 147
            location for the QML file.

148
        \li Select the \uicontrol {Rasterize text} check box to export text layers as
149
            images, not as Text items.
150

151
        \li Select the \uicontrol {Group layers} check box to export each top-level
152
            group as a merged QML Image item.
153

154
        \li Select the \uicontrol {Export hidden} check box to export hidden layers
155 156
            and to set their visibility property to hidden.

157
        \li Deselect the \uicontrol {Export QML} check box if you have modified the
158 159
            QML document in \QC, but still want to re-export graphical assets.

160
        \li Click \uicontrol Export.
161 162 163 164

    \endlist

    The QML file is saved to the location that you specified. In \QC, choose
165
    \uicontrol {File > Open File or Project} to open the QML file.
166 167 168 169 170 171 172 173 174 175 176 177

    \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}.

    \list 1

178 179 180 181
        \li Clone the repository that contains the export script,
            \e qmlexporter.py, from
            \l{https://codereview.qt-project.org/#/admin/projects/qt-labs/gimp-qmlexporter}
            {Qt Code Review}.
182 183 184 185

            \note Read the INSTALL.txt in the repository for latest information
            about the script.

186
        \li Copy the export script to the plug-ins directory in the GIMP
187 188
            installation directory.

189
        \li Check the properties of the file to make sure that it is executable.
190 191 192

            On Linux, run the following command: \c {chmod u+rx}

193 194 195 196 197 198 199
        \li To generate QML files that you can edit in \QMLD, edit the import
            statement in \e qmlexporter.py. For example:

            \code
            f.write('import QtQuick 2.5\n')
            \endcode

200
        \li Restart GIMP to have the export command added to the \uicontrol File menu.
201

202
        \li Choose \uicontrol {File > Export to QML} to export the design to a QML
203 204
            file.

205 206
        \li In the \uicontrol {Export Layers to a QML Document} dialog, enter a name
            and location for the QML file, and click \uicontrol Export.
207 208 209 210

    \endlist

    The QML file is saved to the location that you specified. In \QC, choose
211
    \uicontrol {File > Open File or Project} to open the QML file.
212 213 214 215

    \note Existing files are replaced without warning.

*/