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>
This commit is contained in:
Leena Miettinen
2020-11-26 10:55:37 +01:00
parent 7f28237915
commit e1a8923699
17 changed files with 55 additions and 51 deletions

View File

@@ -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

View File

@@ -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.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 228 KiB

After

Width:  |  Height:  |  Size: 206 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.1 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 14 KiB

View File

@@ -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.

View File

@@ -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

View File

@@ -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}

View File

@@ -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}

View File

@@ -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.

View File

@@ -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}

View File

@@ -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

View File

@@ -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}

View File

@@ -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.

View File

@@ -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}

View File

@@ -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}