/**************************************************************************** ** ** Copyright (C) 2016 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 {Qt Creator Manual} \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. Each scene is converted into a single QML file with an 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. \note GIMP does not support grouping, and therefore, each layer is exported as an item in GIMP. 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 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 \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 Text items, unless you specify that they be converted to 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 \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 \li To minimize the number of items, minimize the number of layers or use top-level layer groups, because each layer or layer group is exported as a Text or Image item. \li To make sure that all related items are exported to the same item, use top-level layer groups. \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 and layer groups 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 \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 \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}. \note Read the README.txt file in the repository for latest information about the script. \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 \li Double-click the export script to add the export command to the \uicontrol Scripts menu. You can also copy the script file to the Adobe Photoshop scripts directory (typically, \c{\Presets\Scripts} in the Photoshop installation directory). \li In Adobe Photoshop, choose \uicontrol {File > Scripts > Export to QML} to export the scene to a QML file. \li In the \uicontrol {Export Document to QML} dialog, enter a name and location for the QML file. \li Select the \uicontrol {Rasterize text} check box to export text layers as images, not as Text items. \li Select the \uicontrol {Group layers} check box to export each top-level group as a merged QML Image item. \li Select the \uicontrol {Export hidden} check box to export hidden layers and to set their visibility property to hidden. \li Deselect the \uicontrol {Export QML} check box if you have modified the QML document in \QC, but still want to re-export graphical assets. \li 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. \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 \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 \QMLD, 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. */