1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
|
/****************************************************************************
**
** Copyright (C) 2018 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Creator documentation.
**
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** GNU Free Documentation License Usage
** 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. Please review the following information to ensure
** the GNU Free Documentation License version 1.3 requirements
** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
**
****************************************************************************/
// **********************************************************************
// 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.
// **********************************************************************
/*!
\contentspage index.html
\previouspage qtquick-iso-icon-browser.html
\page quick-export-to-qml.html
\nextpage creator-qml-modules-with-plugins.html
\title Exporting Designs from Graphics Software
You can export designs from graphics software, such as Adobe Photoshop and
GIMP, to QML files.
\section1 Exporting from Adobe Photoshop to QML
You can use a QML Asset Exporter to export designs from Adobe Photoshop
to .ui.qml files. The QML Asset Exporter provides templates that are
based on the \l{http://www.pngexpress.com}{PNG EXPRESS} plugin for
Photoshop. They enable you to export PSD files to QML format, so that each
PSD file is converted into an .ui.qml file.
The filename of the generated document is based on the name of the PSD file.
Tagged image and text objects are exported with absolute positioning. Text
objects are exported with font and alignment information.
For more information, see the
\l {https://github.com/Pelagicore/QmlAssetExporter}{QML Asset Exporter}
documentation.
\section1 Exporting from GIMP to QML
\image qml-export-gimp.png
Each scene is converted into a single QML file with an
\l [QML]{Image} or a \l [QML]{Text} item for each layer and saved on the
development PC. Each layer is exported as an item.
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 the Design mode, 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.
\section2 Conversion Rules
The following rules apply to the conversions:
\list
\li Layer names are used as item names. Spaces and hash marks (#) are
replaced with underscore characters to create valid ids for the
items.
\li Layer styles, such as drop shadows, are converted to images.
\li Offset, size, ordering and opacity are preserved.
\li Text layers are converted to \l [QML]{Text} items, unless you
specify that they be converted to \l [QML]{Image} items.
\li Hidden layers can be exported, and their visibility is set to
hidden.
\li PNG images are copied to the images subirectory.
\endlist
\section2 Preparing Files for Conversion
To create QML files that are easy to use, prepare the
GIMP designs for exporting, as follows:
\list
\li To minimize the number of items, minimize the number of layers,
because each layer or is
exported as a \l [QML]{Text} or \l [QML]{Image} item.
\li To determine that some layers are not exported, hide them, and
deselect the \uicontrol {Export hidden} check box during exporting.
\li To make it easier to find the layers after
exporting them, use descriptive names for them.
\li To make sure that image dimensions are preserved during export,
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.
\li To prevent errors during export, make sure that the layers are not
locked. Locked layers cannot be exported.
\li To avoid unexpected results, do not use Blending Mode effects. They
are not exported.
\endlist
\section2 Running the Export Script
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
\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}.
\note Read the INSTALL.txt in the repository for latest information
about the script.
\li Copy the export script to the plug-ins directory in the GIMP
installation directory.
\li Check the properties of the file to make sure that it is executable.
On Linux, run the following command: \c {chmod u+rx}
\li To generate QML files that you can edit in the Design mode, edit the
import statement in \e qmlexporter.py. For example:
\code
f.write('import QtQuick 2.5\n')
\endcode
\li Restart GIMP to have the export command added to the \uicontrol File menu.
\li Choose \uicontrol {File > Export to QML} to export the design to a QML
file.
\li In the \uicontrol {Export Layers to a QML Document} dialog, enter a name
and location for the QML file, and click \uicontrol Export.
\endlist
The QML file is saved to the location that you specified. In \QC, choose
\uicontrol {File > Open File or Project} to open the QML file.
\note Existing files are replaced without warning.
*/
|
