Doc: Describe exporting assets from Adobe Illustrator

There are some tricks the users need to know.

Fixes: QDS-1745
Change-Id: Ie6ea417335ed47b7960636fccc5946f8f5e6024a
Reviewed-by: Brook Cronin <brook.cronin@qt.io>
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
This commit is contained in:
Leena Miettinen
2020-05-27 14:22:32 +02:00
parent 4430d40e29
commit d4a1f1ae90
5 changed files with 84 additions and 12 deletions

View File

@@ -0,0 +1,74 @@
/****************************************************************************
**
** Copyright (C) 2020 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Design Studio 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.
**
****************************************************************************/
/*!
\previouspage qtbridge-overview.html
\page qtbridge-ai.html
\nextpage psqtbridge.html
\title Exporting Designs from Adobe Illustrator
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
the following ways:
\list
\li Place your Illustrator content into Adobe Photoshop and
use \QBPS to export the assets to .ui.qml files.
\li Use the Illustrator \e {export for screens workflow} to export your
assets into formats supported by \QDS, such as PNG and JPEG.
\endlist
\section1 Placing Illustrator Content into Photoshop
You can place Illustrator content into Photoshop in several ways. If you
select \uicontrol File > \uicontrol {Place linked} in Illustrator, the
content updates automatically. However, the whole file content is placed
on a single Photoshop layer, which means that you cannot use \QBPS to
export the individual parts of the Illustrator design.
Therefore, you have to copy-paste your assets to Photoshop as
\e {smart objects}, one by one, at the layer level. You can then
specify export settings for \QBPS.
If you need to edit smart objects after copying them to Photoshop, you can
double-click them in Photoshop to open them in Illustrator. Because you use
smart objects, all your changes are propagated to all instances of the
objects used in your designs in Photoshop. For more information about using
smart objects, see the Illustrator and Photoshop documentation.
For more information about exporting designs from Photoshop, see
\l{Exporting Designs from Adobe Photoshop}.
\section1 Exporting Assets for Screens
Sometimes it is easier to just export layers and artboards from Illustrator
and to create scalable layouts and UI flows in \QDS. You can export assets
to multiple formats and sizes, such as PNG, JPEG, and SVG.
For more information, see
\l{https://helpx.adobe.com/illustrator/using/collect-assets-export-for-screens.html}
{Collect assets and export in batches} in the Illustrator documentation.
*/

View File

@@ -26,7 +26,7 @@
/*!
\previouspage studio-getting-started.html
\page qtbridge-overview.html
\nextpage psqtbridge.html
\nextpage qtbridge-ai.html
\title Exporting Artwork from Design Tools
@@ -41,6 +41,12 @@
\list
\li \l{Exporting Designs from Adobe Illustrator}
You can either copy-paste your assets to Adobe Photoshop as
\e {smart objects} or export them into file formats supported
by \QDS.
\li \l{Exporting Designs from Adobe Photoshop}
You can use the \QBPS export tool in Adobe Photoshop to convert

View File

@@ -26,7 +26,7 @@
// Note: The \page value is hard-coded as a link in Qt Bridge for Adobe Photoshop.
/*!
\previouspage qtbridge-overview.html
\previouspage qtbridge-ai.html
\page psqtbridge.html
\nextpage qtbridge-ps-setup.html
@@ -36,9 +36,6 @@
\image studio-ps-export.png
If you would rather use Adobe Illustrator for creating artwork, you can
copy-paste your assets to Adobe Photoshop as \e {smart objects}.
The following topics describe setting up and using \QBPS:
\list

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 Bridge documentation.
@@ -45,12 +45,6 @@
for different screen sizes and resolutions.
\endlist
If you would rather use Adobe Illustrator for creating artwork, you can
copy-paste your assets to Adobe Photoshop as \e {smart objects}. You can
then double-click the smart objects in Photoshop to open them in Illustrator
for editing. Because you use smart objects, all your changes are propagated
to all instances of the objects used in your designs in Photoshop.
To use the fonts that you use in Photoshop also in \QDS, you need to load
them to \QDS. \QDS deploys them to devices when you preview the UI. For more
information, see \l{Using Custom Fonts}.

View File

@@ -33,6 +33,7 @@
\list
\li \l{Exporting Artwork from Design Tools}
\list
\li \l{Exporting Designs from Adobe Illustrator}
\li \l{Exporting Designs from Adobe Photoshop}
\list
\li \l{Setting Up Qt Bridge for Adobe Photoshop}