Doc: Replace most occurrences of "artwork" with "design"
...or remove the term. Qt Bridge can be use to export complete UI designs, instead of just artwork, and we want to stress that. Task-number: QDS-2744 Change-Id: I843b09d822c77ca4a59b993a9b3e392b747c15f6 Reviewed-by: Brook Cronin <brook.cronin@qt.io> Reviewed-by: Antti Aaltonen Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
@@ -43,7 +43,7 @@
|
|||||||
|
|
||||||
\if defined(qtdesignstudio)
|
\if defined(qtdesignstudio)
|
||||||
For guidelines on how to achieve best results when importing assets, see
|
For guidelines on how to achieve best results when importing assets, see
|
||||||
\l {Exporting Artwork from Design Tools}.
|
\l {Exporting from Design Tools}.
|
||||||
\endif
|
\endif
|
||||||
|
|
||||||
\section1 Naming Conventions
|
\section1 Naming Conventions
|
||||||
|
@@ -42,19 +42,20 @@
|
|||||||
for you.
|
for you.
|
||||||
\endif
|
\endif
|
||||||
|
|
||||||
Qt Quick enables you to build UIs around the behavior of
|
Qt Quick enables you to build UIs around the behavior of \e components and
|
||||||
\e components and how they connect with one another. You
|
how they connect with one another. You create components using Qt Quick and
|
||||||
create components using Qt Quick and QML types that are available in
|
QML types that are available in the \uicontrol Library view in the Design
|
||||||
the Design mode. You can specify values for the \e properties of a
|
mode. You can specify values for the \e properties of a
|
||||||
component to change its appearance and behavior. All QML types have a
|
component to change its appearance and behavior. All QML types have a
|
||||||
set of predefined properties, some of which control things that are
|
set of predefined properties, some of which control things that are
|
||||||
visible to users, while others are used behind the scene.
|
visible to users, while others are used behind the scene.
|
||||||
|
|
||||||
While it is useful to learn the basics of Qt Quick, you can also rely on
|
While it is useful to learn the basics of Qt Quick, you can also rely on
|
||||||
\QMLD to write the code for you when you drag-and-drop the ready-made
|
\QMLD to write the code for you when you drag-and-drop the ready-made
|
||||||
components to the \uicontrol {Form Editor} view and change them to your
|
components from the \uicontrol Library view to the \uicontrol {Form Editor}
|
||||||
liking by modifying their properties in the \uicontrol Properties view in
|
or \uicontrol Navigator view and change them to your liking by modifying
|
||||||
the Design mode. You can always check up details in the extensive Qt Quick
|
their properties in the \uicontrol Properties view.
|
||||||
|
You can always check up details in the extensive Qt Quick
|
||||||
documentation by pressing \key F1.
|
documentation by pressing \key F1.
|
||||||
|
|
||||||
\list
|
\list
|
||||||
@@ -62,9 +63,8 @@
|
|||||||
\if defined(qtdesignstudio)
|
\if defined(qtdesignstudio)
|
||||||
\li \l {Designing Application Flows}
|
\li \l {Designing Application Flows}
|
||||||
|
|
||||||
After you export and import your artwork, you can design the
|
You can design an application in the form of a \e {schematic diagram}
|
||||||
application flow in the form of a \e {schematic diagram} that
|
that shows all significant components of an application UI and their
|
||||||
shows all significant components of an application UI and their
|
|
||||||
interconnections by means of symbols. This results in an
|
interconnections by means of symbols. This results in an
|
||||||
interactive prototype that can be clicked through to simulate
|
interactive prototype that can be clicked through to simulate
|
||||||
the user experience of the application.
|
the user experience of the application.
|
||||||
@@ -72,16 +72,15 @@
|
|||||||
|
|
||||||
\li \l {Creating Components}
|
\li \l {Creating Components}
|
||||||
|
|
||||||
In addition to your imported artwork, you can use the Design
|
You can enhance imported designs by customizing ready-made
|
||||||
mode to customize ready-made components or design any custom form
|
components or design custom forms and shapes directly as
|
||||||
and shape directly as QML types. You can import visual assets in
|
QML types. You can import visual assets in various formats,
|
||||||
various formats, such as PNG, JPG, and SVG for use in the
|
such as PNG, JPG, and SVG for use in the components.
|
||||||
components.
|
|
||||||
|
|
||||||
\li \l {Managing Item Hierarchy}
|
\li \l {Managing Item Hierarchy}
|
||||||
|
|
||||||
You can manage the items in the current QML file and their
|
You can manage the items in the current QML file and their
|
||||||
relationships in the \uicontrol Navigator.
|
relationships in the \uicontrol Navigator view.
|
||||||
|
|
||||||
\li \l {Specifying Item Properties}
|
\li \l {Specifying Item Properties}
|
||||||
|
|
||||||
@@ -92,6 +91,13 @@
|
|||||||
type. You can specify properties for your components in the
|
type. You can specify properties for your components in the
|
||||||
\uicontrol Properties view.
|
\uicontrol Properties view.
|
||||||
|
|
||||||
|
\li \l {Positioning Items}
|
||||||
|
|
||||||
|
The position of an item in a UI can be either absolute or relative
|
||||||
|
to other items. While manual positioning is efficient for a static
|
||||||
|
UI, consider the other available method, such as anchors, layouts,
|
||||||
|
positioners, and property bindings, for dynamic UIs.
|
||||||
|
|
||||||
\li \l {Using Custom Fonts}
|
\li \l {Using Custom Fonts}
|
||||||
|
|
||||||
You can load custom fonts to \QMLD and use them in your designs.
|
You can load custom fonts to \QMLD and use them in your designs.
|
||||||
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 41 KiB |
Before Width: | Height: | Size: 228 KiB After Width: | Height: | Size: 206 KiB |
Before Width: | Height: | Size: 8.1 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 14 KiB |
@@ -42,12 +42,12 @@
|
|||||||
\section1 Exporting from Adobe Photoshop
|
\section1 Exporting from Adobe Photoshop
|
||||||
|
|
||||||
We use Adobe Photoshop to design our application and \QB to export our
|
We use Adobe Photoshop to design our application and \QB to export our
|
||||||
artwork to \QDS as PNG images and custom QML types.
|
design to \QDS as PNG images and custom QML types.
|
||||||
|
|
||||||
Before we can begin, we must set up \QB as instructed in
|
Before we can begin, we must set up \QB as instructed in
|
||||||
\l{Exporting Designs from Adobe Photoshop}.
|
\l{Exporting Designs from Adobe Photoshop}.
|
||||||
|
|
||||||
We organize our artwork in Photoshop using artboards as instructed in
|
We organize our design in Photoshop using artboards as instructed in
|
||||||
\l{Organizing Assets}.
|
\l{Organizing Assets}.
|
||||||
|
|
||||||
\QB automatically proposes identifiers for all groups and layers. The ids
|
\QB automatically proposes identifiers for all groups and layers. The ids
|
||||||
@@ -116,10 +116,10 @@
|
|||||||
To be able to use the type, we added the statement that imports the
|
To be able to use the type, we added the statement that imports the
|
||||||
Qt Quick Studio Effects module: \c {QtQuick.Studio.Effects 1.0}.
|
Qt Quick Studio Effects module: \c {QtQuick.Studio.Effects 1.0}.
|
||||||
|
|
||||||
We specify that the artwork to which we want to apply the effect is a
|
We specify that the component to which we want to apply the effect is a
|
||||||
child of the effect. We then specify the radius property for the effect,
|
child of the effect. We then specify the radius property for the effect,
|
||||||
in the \uicontrol {QML Properties} field. We can modify the property in
|
in the \uicontrol {QML Properties} field. We can modify the property in
|
||||||
\QDS.
|
the \uicontrol Radius field in the \uicontrol Properties view in \QDS.
|
||||||
|
|
||||||
\image webinardemo-blureffect.png "FastBlurItem QML item in Design mode"
|
\image webinardemo-blureffect.png "FastBlurItem QML item in Design mode"
|
||||||
|
|
||||||
@@ -142,18 +142,18 @@
|
|||||||
We want to animate the contents of the \e largePopup artboard in \QDS, so
|
We want to animate the contents of the \e largePopup artboard in \QDS, so
|
||||||
we export each group and layer as a child.
|
we export each group and layer as a child.
|
||||||
|
|
||||||
\section2 Exporting Artwork
|
\section2 Exporting Our Design
|
||||||
|
|
||||||
When we have specified settings for all the artboards and the groups and
|
When we have specified settings for all the artboards and the groups and
|
||||||
layers in them, we select \uicontrol Export to copy the assets and metadata
|
layers in them, we select \uicontrol Export to copy the assets and metadata
|
||||||
to the export path we specified.
|
to the export path we specified.
|
||||||
|
|
||||||
\section1 Importing Artwork
|
\section1 Importing Our Design
|
||||||
|
|
||||||
After using \QB in Adobe Photoshop to export our artwork, we import it into
|
After using \QB in Adobe Photoshop to export our design, we import it into
|
||||||
a project that we create in \QDS, as instructed in \l{Importing Designs}.
|
a project that we create in \QDS, as instructed in \l{Importing Designs}.
|
||||||
|
|
||||||
If we need to make changes in Photoshop later and export our artwork again,
|
If we need to make changes in Photoshop later and export our design again,
|
||||||
\QDS will try to merge our changes during the import, so that none of the
|
\QDS will try to merge our changes during the import, so that none of the
|
||||||
changes we mage in \QDS are lost.
|
changes we mage in \QDS are lost.
|
||||||
|
|
||||||
@@ -185,7 +185,7 @@
|
|||||||
|
|
||||||
\image webinardemo-states.png "Popup states in the States view"
|
\image webinardemo-states.png "Popup states in the States view"
|
||||||
|
|
||||||
For more information about using states, see \l {Creating Animations}.
|
For more information about using states, see \l {Creating States}.
|
||||||
|
|
||||||
We then use the \uicontrol Timeline view to add animations that are run
|
We then use the \uicontrol Timeline view to add animations that are run
|
||||||
when moving from one state to another.
|
when moving from one state to another.
|
||||||
|
@@ -31,7 +31,7 @@
|
|||||||
\title Exporting Designs from Adobe Illustrator
|
\title Exporting Designs from Adobe Illustrator
|
||||||
|
|
||||||
Even though \QDS does not provide a specific export bridge for Adobe
|
Even though \QDS does not provide a specific export bridge for Adobe
|
||||||
Illustrator, you can create artwork in it and export it to \QDS in
|
Illustrator, you can desing UIs in it and export your designs to \QDS in
|
||||||
the following ways:
|
the following ways:
|
||||||
|
|
||||||
\list
|
\list
|
||||||
|
@@ -28,7 +28,7 @@
|
|||||||
\page qtbridge-overview.html
|
\page qtbridge-overview.html
|
||||||
\nextpage qtbridge-ai.html
|
\nextpage qtbridge-ai.html
|
||||||
|
|
||||||
\title Exporting Artwork from Design Tools
|
\title Exporting from Design Tools
|
||||||
|
|
||||||
You need to use \QB to first export 2D assets from design tools and then to
|
You need to use \QB to first export 2D assets from design tools and then to
|
||||||
\l{Importing Designs}{import} them into \QDS.
|
\l{Importing Designs}{import} them into \QDS.
|
||||||
@@ -56,12 +56,12 @@
|
|||||||
\li \l{Exporting Designs from Adobe Photoshop}
|
\li \l{Exporting Designs from Adobe Photoshop}
|
||||||
|
|
||||||
You can use the \QBPS export tool in Adobe Photoshop to convert
|
You can use the \QBPS export tool in Adobe Photoshop to convert
|
||||||
artwork into \e {.metadata} format that you can import into
|
designs into \e {.metadata} format that you can import into
|
||||||
projects in \QDS.
|
projects in \QDS.
|
||||||
|
|
||||||
\li \l{Exporting Designs from Sketch}
|
\li \l{Exporting Designs from Sketch}
|
||||||
|
|
||||||
You can use the \QBSK export tool in Sketch to convert artwork into
|
You can use the \QBSK export tool in Sketch to convert designs into
|
||||||
metadata that you can import into projects in \QDS.
|
metadata that you can import into projects in \QDS.
|
||||||
|
|
||||||
\li \l{Exporting 3D Assets}
|
\li \l{Exporting 3D Assets}
|
||||||
|
@@ -44,7 +44,7 @@
|
|||||||
\li \l{Setting Up Qt Bridge for Adobe Photoshop}
|
\li \l{Setting Up Qt Bridge for Adobe Photoshop}
|
||||||
|
|
||||||
You must install and set up the \QBPS export tool before you can use
|
You must install and set up the \QBPS export tool before you can use
|
||||||
it to export artwork.
|
it to export designs.
|
||||||
|
|
||||||
\li \l{Using Qt Bridge for Adobe Photoshop}
|
\li \l{Using Qt Bridge for Adobe Photoshop}
|
||||||
|
|
||||||
|
@@ -60,7 +60,7 @@
|
|||||||
will be imported as a single QML file that can contain other assets. A child
|
will be imported as a single QML file that can contain other assets. A child
|
||||||
will be imported as a single image file that you can use within QML files.
|
will be imported as a single image file that you can use within QML files.
|
||||||
|
|
||||||
If you plan to use pieces of your artwork as separate images in the UI,
|
If you plan to use pieces of your design as separate images in the UI,
|
||||||
group them on an artboard as separate layers. You can then export the group
|
group them on an artboard as separate layers. You can then export the group
|
||||||
as a component and each layer within it as a child. The children are
|
as a component and each layer within it as a child. The children are
|
||||||
imported to \QDS as separate PNG files that you can use as image sources.
|
imported to \QDS as separate PNG files that you can use as image sources.
|
||||||
|
@@ -44,7 +44,7 @@
|
|||||||
\li \l{Setting Up Qt Bridge for Sketch}
|
\li \l{Setting Up Qt Bridge for Sketch}
|
||||||
|
|
||||||
You must install Sketch and the \QBSK export tool before you can use
|
You must install Sketch and the \QBSK export tool before you can use
|
||||||
the tool to export artwork.
|
the tool to export designs.
|
||||||
|
|
||||||
\li \l{Using Qt Bridge for Sketch}
|
\li \l{Using Qt Bridge for Sketch}
|
||||||
|
|
||||||
|
@@ -30,10 +30,8 @@
|
|||||||
|
|
||||||
\title Designing Application Flows
|
\title Designing Application Flows
|
||||||
|
|
||||||
After you \l {Exporting Artwork from Design Tools}{export} your artwork from
|
You can design the application flow in the form of a \e {schematic diagram}
|
||||||
your favorite design tool and \l{Importing Designs}{import} it to \QDS, you
|
that shows all significant components of an application UI and their
|
||||||
can design the application flow in the form of a \e {schematic diagram} that
|
|
||||||
shows all significant components of an application UI and their
|
|
||||||
interconnections by means of symbols. This results in an interactive
|
interconnections by means of symbols. This results in an interactive
|
||||||
prototype that can be clicked through to simulate the user experience of
|
prototype that can be clicked through to simulate the user experience of
|
||||||
the application. The QML code is created in the background and can be used
|
the application. The QML code is created in the background and can be used
|
||||||
|
@@ -30,12 +30,12 @@
|
|||||||
|
|
||||||
\title Getting Started
|
\title Getting Started
|
||||||
|
|
||||||
Typically, you as a designer would create artwork in imaging and design
|
Typically, you as a designer would design a UI using imaging and design
|
||||||
tools, such as Adobe Photoshop, Sketch, Blender, or Maya, and then send it
|
tools, such as Adobe Photoshop, Sketch, Blender, or Maya, and then send your
|
||||||
to a developer for adding it to the application. With the \QB export tool,
|
design to a developer for implementation. With the \QB export tool,
|
||||||
you can convert 2D assets into \l {Qt Quick} files. You can use the export
|
you can convert 2D assets into \l {Qt Quick} files. You can use the export
|
||||||
functionality of 3D graphics tools to save your 3D assets in a format
|
functionality of 3D graphics tools to save your 3D assets in a format
|
||||||
supported by \QDS. You can import the 2D and 3D assets into \QDS for
|
supported by \QDS. You can import the 2D and 3D assets into \QDS for
|
||||||
editing, before you submit the UI to the developer for adding the
|
editing, before you submit the UI to the developer for adding the
|
||||||
functionality to the application.
|
functionality to the application.
|
||||||
|
|
||||||
@@ -46,8 +46,8 @@
|
|||||||
The workflow consists of the following steps:
|
The workflow consists of the following steps:
|
||||||
|
|
||||||
\list 1
|
\list 1
|
||||||
\li Export your artwork from a design tool.
|
\li Export your design from a design tool.
|
||||||
\li Create a project in \QDS and import your artwork to it.
|
\li Create a project in \QDS and import your design to it.
|
||||||
\li Create reusable components in the Design mode.
|
\li Create reusable components in the Design mode.
|
||||||
\li Animate your design with the timeline and easing curve editor.
|
\li Animate your design with the timeline and easing curve editor.
|
||||||
\li Create interactions using states and connections.
|
\li Create interactions using states and connections.
|
||||||
@@ -59,16 +59,16 @@
|
|||||||
way around \QDS:
|
way around \QDS:
|
||||||
|
|
||||||
\list
|
\list
|
||||||
\li \l {Exporting Artwork from Design Tools}
|
\li \l {Exporting from Design Tools}
|
||||||
|
|
||||||
Describes how to export 2D and 3D assets into files that
|
Describes how to export designs containing 2D and 3D assets into
|
||||||
you can import to projects in \QDS.
|
files that you can import to projects in \QDS.
|
||||||
\li \l {User Interface}
|
\li \l {User Interface}
|
||||||
|
|
||||||
Describes the parts and basic features of \QDS.
|
Describes the parts and basic features of \QDS.
|
||||||
\li \l{Editing QML Files in Design Mode}
|
\li \l{Editing QML Files in Design Mode}
|
||||||
|
|
||||||
Describes the parts and basic features of the Design mode.
|
Describes the views and basic features of the Design mode.
|
||||||
This is where you'll do most of your work.
|
This is where you'll do most of your work.
|
||||||
\li \l {Tutorials}
|
\li \l {Tutorials}
|
||||||
|
|
||||||
|
@@ -30,13 +30,13 @@
|
|||||||
|
|
||||||
\title Importing 2D Assets
|
\title Importing 2D Assets
|
||||||
|
|
||||||
\image studio-imported-assets.png "Artwork imported into Qt Design Studio"
|
\image studio-imported-assets.png "UI imported into Qt Design Studio"
|
||||||
|
|
||||||
\QB enables you to export assets and then import them to a \QDS project
|
\QB enables you to export assets and then import them to a \QDS project
|
||||||
as image and QML files for editing in the \uicontrol {Form Editor}. If you
|
as image and QML files for editing in the \uicontrol {Form Editor}. If you
|
||||||
make changes to your design in the design tool, you can merge the changes
|
make changes to your design in the design tool, you can merge the changes
|
||||||
into existing QML files without overwriting the changes you have made in
|
into existing QML files without overwriting the changes you have made in
|
||||||
\QDS. For more information, see \l {Exporting Artwork from Design Tools}.
|
\QDS. For more information, see \l {Exporting from Design Tools}.
|
||||||
|
|
||||||
\note Attempting to import assets exported on another system might fail.
|
\note Attempting to import assets exported on another system might fail.
|
||||||
|
|
||||||
|
@@ -31,7 +31,7 @@
|
|||||||
\list
|
\list
|
||||||
\li \l{Getting Started}
|
\li \l{Getting Started}
|
||||||
\list
|
\list
|
||||||
\li \l{Exporting Artwork from Design Tools}
|
\li \l{Exporting from Design Tools}
|
||||||
\list
|
\list
|
||||||
\li \l{Exporting Designs from Adobe Illustrator}
|
\li \l{Exporting Designs from Adobe Illustrator}
|
||||||
\li \l{Exporting Designs from Adobe Photoshop}
|
\li \l{Exporting Designs from Adobe Photoshop}
|
||||||
|
@@ -45,7 +45,7 @@
|
|||||||
\row
|
\row
|
||||||
\li \b {\l{Getting Started}}
|
\li \b {\l{Getting Started}}
|
||||||
\list
|
\list
|
||||||
\li \l{Exporting Artwork from Design Tools}
|
\li \l{Exporting from Design Tools}
|
||||||
\li \l{User Interface}
|
\li \l{User Interface}
|
||||||
\li \l{Editing QML Files in Design Mode}
|
\li \l{Editing QML Files in Design Mode}
|
||||||
\li \l{Tutorials}
|
\li \l{Tutorials}
|
||||||
|