feedc0de/qt-creator
1
0
Fork 0
forked from qt-creator/qt-creator
Code Pull Requests Activity

Doc: Clarify what happens during export and import with Qt Bridge

Browse Source 
Fixes: QDS-2433
Change-Id: Ia30957863c7200eb0438db4e271e5c2be0208637
Reviewed-by: Vikas Pachdha <vikas.pachdha@qt.io>
This commit is contained in:
Leena Miettinen
2020-06-26 18:08:55 +02:00
parent 42b5aa4aca
commit 41a69be366
6 changed files with 63 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
doc/qtdesignstudio/src/qtbridge/qtbridge-ai.qdoc
View File

@@ -36,7 +36,8 @@
\list
\li Place your Illustrator content into Adobe Photoshop and
use \QBPS to export the assets to .ui.qml files.
use \QBPS to export the assets to \e {.metadata} format that
you can import to \QDS.
\li Use the Illustrator \e {export for screens workflow} to export your
assets into formats supported by \QDS, such as PNG and JPEG.
\endlist

20
doc/qtdesignstudio/src/qtbridge/qtbridge-overview.qdoc
View File

@@ -30,13 +30,17 @@
\title Exporting Artwork from Design Tools
You need to use \QB to first export 2D assets from design tools and then
import them. When working with 3D assets, you can use the export functions
provided by the 3D graphics tools to save the assets in widely-used 3D
graphics formats, and then use \QB to import them. You can download \QB
from the \l{https://marketplace.qt.io/}{Qt Marketplace}.
You need to use \QB to first export 2D assets from design tools and then use
\QB to \l{Importing Designs}{import} them into \QDS.
For best results when importing 3D assets, follow
When working with 3D assets, you can use the export functions provided by
the 3D graphics tools to save the assets in widely-used 3D graphics formats,
and then use \QB to import them into \QDS.
You can use the Qt online installer to install \QB if you have a license, or
download \QB from the \l{https://marketplace.qt.io/}{Qt Marketplace}.
For best results when importing assets, follow
the guidelines for creating and exporting them.
\list
@@ -50,13 +54,13 @@
\li \l{Exporting Designs from Adobe Photoshop}
You can use the \QBPS export tool in Adobe Photoshop to convert
artwork into Qt Quick files (.ui.qml) that you can import to
artwork into \e {.metadata} format that you can import into
projects in \QDS.
\li \l{Exporting Designs from Sketch}
You can use the \QBSK export tool in Sketch to convert artwork into
Qt Quick files that you can import to projects in \QDS.
metadata that you can import into projects in \QDS.
\li \l{Exporting 3D Assets}

12
doc/qtdesignstudio/src/qtbridge/qtbridge-ps-overview.qdoc
View File

@@ -1,6 +1,6 @@
/****************************************************************************
**
** Copyright (C) 2019 The Qt Company Ltd.
** Copyright (C) 2020 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Design Studio documentation.
@@ -32,7 +32,8 @@
\title Exporting Designs from Adobe Photoshop
You can use \QBPS to export designs from Adobe Photoshop to .ui.qml files.
You can use \QBPS to export designs from Adobe Photoshop to \e {.metadata}
format that you can \l{Importing 2D Assets}{import} to projects in \QDS.
\image studio-ps-export.png
@@ -43,13 +44,12 @@
\li \l{Setting Up Qt Bridge for Adobe Photoshop}
You must install and set up the \QBPS export tool before you can use
it to convert artwork into Qt Quick files that you can import to
projects in \QDS.
it to export artwork.
\li \l{Using Qt Bridge for Adobe Photoshop}
To get the best results when you use \QBPS to export designs from
Photoshop to Qt Quick files, you should follow the guidelines for
working with Photoshop and organizing your assets.
Photoshop, you should follow the guidelines for working with
Photoshop and organizing your assets.
\endlist
*/

41
doc/qtdesignstudio/src/qtbridge/qtbridge-ps-using.qdoc
View File

@@ -33,7 +33,8 @@
\section1 Organizing Assets
To get the best results when you use \QBPS to export designs from Adobe
Photoshop to \QDS, follow these guidelines when working with Photoshop:
Photoshop for importing them to \QDS, follow these guidelines when working
with Photoshop:
\list
\li Arrange your art into artboards and organize it into groups and
@@ -55,9 +56,9 @@
when you export designs from Adobe Photoshop and import them into \QDS.
When you use \QBPS to export your designs, you will determine how you want
each group or layer exported: as a \e component or \e child. A component is
a single QML file that can contain other assets. A child is a single PNG
file that you can use within QML files.
each group or layer exported: as a \e component or \e child. A component
will be imported as a single QML file that can contain other assets. A child
will be imported as a single PNG file that you can use within QML files.
If you plan to use pieces of your artwork as separate images in the UI,
group them on an artboard as separate layers. You can then export the group
@@ -74,7 +75,7 @@
Place different parts of the UI, such as menus and pop-ups, on separate
artboards to be able to export them as components or children and to
import them as QML and PNG files that you can drag and drop to the
import them as QML and PNG files that you can drag and drop to
\uicontrol {Form Editor} in \QDS Design mode while creating a UI.
\QDS offers predefined sets of UI controls that you can modify according
@@ -85,12 +86,13 @@
However, if you want your UI controls, such as check boxes, to look exactly
like they do in Photoshop, you have to create the control in an Artboard and
use the artboard in the layers where the control instance is to be created.
\QB exports the control as a custom QML component that you can program in
\QB imports the control as a custom QML component that you can program in
\QDS.
\section1 Exporting Assets
Each artboard is exported automatically as a component. That is, a separate
Each artboard is exported automatically as a component, which means that it
will be imported as a separate
QML file that contains all the artwork on the artboard, except layers that
are set to be skipped or exported as child items. You determine how
each group or layer in an artboard is exported: as a component or a child
@@ -147,13 +149,14 @@
\li In the \uicontrol {Export As} field, select the export type for the
group or layer:
\list
\li \uicontrol Component creates a separate QML file for the
selected artboard, group, or layer that contains all the
artwork in it, except layers that are set to be skipped or
exported as child items.
\li \uicontrol Child creates a separate PNG file for each asset
of the selected group or layer, with references to the
images in the component file.
\li \uicontrol Component exports the selected artboard, group,
or layer with metadata. The exported data can be used later
to import the component as a separate QML file that contains
all the artwork in it, except layers that are set to be
skipped or exported as child items.
\li \uicontrol Child exports each asset of the selected group
or layer as a separate PNG file, with references
to the images in the component file.
\li \uicontrol Merged merges the selected groups and layers into
the parent as one item.
\li \uicontrol Skipped completely skips the selected layer.
@@ -162,9 +165,9 @@
to reuse. For example, you can use an artboard to define a
component, such as a button, and reuse it in other artboards.
\li In the \uicontrol {QML Type} field, specify the QML type
or Studio component to morph this layer into. The generated
component will be of this type. For example, if you drew a
rectangle, you can export it as a Rectangle Studio component.
or Studio component to morph this layer into. The component that is
generated during import will be of this type. For example, if you
drew a rectangle, you can export it as a Rectangle Studio component.
You can provide the import statement of the module where the QML
type is defined in the \uicontrol {Add Imports} field.
\li In the \uicontrol {Add Imports} field, enter additional
@@ -225,8 +228,8 @@
PSD Document instance. You can undo the temporary changes done in the function
\e preExport(...).
\li customDefaultQmlId(name, instance)
The function is called for settings the default QML id of the layer. The returned value
is used for the QML id. Return \e Falsey to use the auto generated QML id instead.
The function is called for setting the default QML id of the layer. The returned value
is used for the QML id. Return \c false to use the auto generated QML id instead.
The parameter \a name is the auto generated QML id by the plugin and \a instance is the
PSD layer instance.
\endlist

10
doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-overview.qdoc
View File

@@ -32,7 +32,8 @@
\title Exporting Designs from Sketch
You can use \QBSK to export designs from Sketch to .ui.qml files.
You can use \QBSK to export designs from Sketch to \e {.metadata}
format that you can \l{Importing 2D Assets}{import} to projects in \QDS.
\image studio-sketch-export.png
@@ -43,13 +44,12 @@
\li \l{Setting Up Qt Bridge for Sketch}
You must install Sketch and the \QBSK export tool before you can use
the tool to convert artwork into Qt Quick files that you can import
to projects in \QDS.
the tool to export artwork.
\li \l{Using Qt Bridge for Sketch}
To get the best results when you use \QBSK to export designs from
Sketch to Qt Quick files, you should follow the guidelines for
working with Sketch and organizing your assets.
Sketch, you should follow the guidelines for working with Sketch and
organizing your assets.
\endlist
*/

31
doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-using.qdoc
View File

@@ -77,10 +77,10 @@
The relationships between artboards and layers are preserved when you export
designs from Sketch and import them into \QDS.
An artboard can only be exported as a component or skipped. A component is
a separate QML file that contains all the artwork on the artboard, except
layers that are set to be skipped or exported as child items. The child
items can contain graphical assets or text.
An artboard can only be exported as a component or skipped. A component will
be imported as a separate QML file that contains all the artwork on the
artboard, except layers that are set to be skipped or exported as child
items. The child items can contain graphical assets or text.
To use the contents of an artboard as a single image in the UI, you can
merge the groups and layers when you export them. During import, the
@@ -149,23 +149,24 @@
\li In the \uicontrol {Export As} field, select the export type for the
group or layer:
\list
\li \uicontrol Component creates a separate QML file for the
selected symbol that contains all the artwork in it, except
layers or groups that are set to be skipped or exported as
child items.
\li \uicontrol Child creates a separate file for each asset
of the selected group or layer, with references to the
images in the component file. You select the image format
in the \uicontrol {Asset Format} field.
\li \uicontrol Component exports the selected symbol with
metadata. The exported data can be used later to import
the component as a separate QML file that contains all
the artwork in it, except layers or groups that are set
to be skipped or exported as child items.
\li \uicontrol Child exports each asset of the selected group
or layer a separate PNG file, with references
to the images in the component file. You select the image
format in the \uicontrol {Asset Format} field.
\li \uicontrol Merged merges the selected groups and layers into
the parent artboard or group as one item.
\li \uicontrol Skipped completely skips the selected layer.
\endlist
\li In the \uicontrol {QML Type} field, specify the QML type or
\l {Studio Components}{Qt Quick Studio Component} to morph this
layer into. The generated component will be of this type. For
example, if you drew a rectangle, you can export it as a
\l Rectangle component.
layer into. The component that is generated during import will be
of this type. For example, if you drew a rectangle, you can export
it as a \l Rectangle component.
You can provide the import statement of the module where the QML
type is defined in the \uicontrol {QML Imports} field.
\li In the \uicontrol {QML Imports} field, enter