© The Author(s), under exclusive license to APress Media, LLC, part of Springer Nature 2022
J. HarderPerspective Warps and Distorts with Adobe Tools: Volume 2https://doi.org/10.1007/978-1-4842-8829-0_14

14. Using Your Warped Designs Between Other Adobe Apps

Jennifer Harder1  
(1)
Delta, BC, Canada
 

Chapter Goal: This concluding chapter looks at how you can use the content you have created along with this book—or your own projects—using Photoshop or Illustrator later in other Adobe software, and at how to move the assets using either the copy/paste method or the Library panel.

So far in this book, we have looked at how to create warps and distorts using the Adobe applications Photoshop and Illustrator. As you have seen throughout the book, you can continue to work between these two applications. Using Illustrator, you can copy and paste Smart Objects layers into a Photoshop file. Refer to Figure 14-1.
Figure 14-1

Photoshop Paste dialog box for an Illustrator logo set as a Smart Object layer stored in the Layers panel with a layer style of Inner Shadow applied

Then, continue on to warp and distort your Illustrator vector graphics as Smart Object layers in Photoshop, whether they be illustrations, logos, or 3D text, and apply layer styles or smart filters with graphics created in either Photoshop or Illustrator.

However, there are other Adobe applications to which we can transfer our graphics, and in this chapter I will briefly discuss a few of them, which you may want to explore on your own, as well as some of the methods you can use to do so.

Note

There are no projects in this chapter. However, I have included a PDF file in the Chapter 14 folder with extra instructions on how to Print an Adobe Illustrator file as a flattened image (.tif) with Photoshop should you run into unwanted thin lines that can appear due to some complex effects. See file Additional_Notes_Illustrator_Print.pdf.

Workflow of Photoshop and Illustrator Graphics to Other Adobe Applications

Once you have created your final warped and distorted designs, you need to ask yourself, “How do I plan to display them so that others can view my creations?”

The possibilities include the following:

  • Print: for a portfolio, art canvas, advertisement, or other document layout

  • 3D Designs: to be incorporated into another 3D application

  • Animation: to be used in comical GIF animation or animated instructional infographic

  • EPUB: online document to be viewed on a tablet

  • Web Design or Online Portfolio: your own personal web page, blog, or a client’s social media page, where the graphic will be part of gallery or a GIF animation

  • Video: watermark, logo, or a part of the animated footage or special effect

What you plan to use your artwork for will affect what Adobe application you will choose to complete your project. Refer to Figure 14-2.
Figure 14-2

Workflow of various Adobe apps that are included in the Creative Cloud desktop

So, on the following pages, I have presented a few Adobe applications that you may want to learn more about, as well some similar warping features those applications possess.

InDesign

Once you have gained skills in Photoshop and Illustrator, the next step is to learn how to use InDesign. If your intention is to create a print document or a digital EPUB, then InDesign is a good program in which to design your document layout before you print or export your files. Your (.ai) and (.psd) files can easily be accessed via File ➤ Place and there by linking them to an InDesign document (.indd). Refer to Figure 14-3.
Figure 14-3

InDesign app icon and file format for saving files

Illustrator and InDesign share many of the same tools and panels, so once you master Illustrator, learning InDesign is quite easy. The one main difference I find is learning how to compose multiple pages on Layers for a document rather than using single artboards. Refer to Figure 14-4.
Figure 14-4

InDesign’s Tools panel, Layers panel, and Pages panel

Some of the similar warping tools and panels that InDesign shares with Illustrator include the following:

  • Pen tools (see Chapter 2 to review in Illustrator). Refer to Figure 14-5.

Figure 14-5

InDesign’s Pen, Add Anchor Point, Delete Anchor Point, and Convert Direction Point tools

  • Selection and Direct Selection tools: used for moving graphics and linked images. (See Chapter 2 to review in Illustrator.) Refer to Figure 14-6.

Figure 14-6

InDesign’s Selection and Direct Selection tools

  • Type tool and Type on a Path tool (see Chapter 10 to review). Refer to Figure 14-7.

Figure 14-7

InDesign’s Type tool and Type on a Path tool

  • Free Transform tool, Rotate tool, Scale tool, and Shear tool (see Chapter 3). Refer to Figure 14-8.

Figure 14-8

InDesign’s Free Transform, Rotate, Scale, and Shear tools

  • There are also settings similar to those in Illustrator’s Pathfinder panel as well as to its Convert Shape options. (Refer to Chapter 2 to compare to Illustrator Pathfinder options). Refer to Figure 14-9.

Figure 14-9

InDesign’s Pathfinder panel

  • The Effects panel can be used to add object effect blending modes and opacity to a shape. This is like a combination of Illustrator’s Transparency and Appearances panels. Refer to Chapters 8 and 11 to compare panels. These applied effects can be stored as Object Styles and accessed via that panel, which is like Illustrator’s Graphic Styles panel. Object Styles can affect the object’s stroke, fill, and text. Refer to Figure 14-10.

Figure 14-10

InDesign’s Effects and Object Styles panels

  • Another connective feature between InDesign, Photoshop, and Illustrator is the CC Libraries panel. When certain styles are applied to text or an object in Illustrator, these graphics can be linked or embedded in the document using this panel. Refer to Figure 14-11.

Figure 14-11

InDesign’s CC Libraries panel with new Capture Extract from Image option

For more details, refer to this link:

https://helpx.adobe.com/indesign/using/creative-cloud-libraries-sync-share-assets.html.

Recently, InDesign has also added to the CC Libraries panel a new Capture (Ca) feature (Extract from Image) for color themes, shapes, and type. Refer to Figure 14-11

Later, you could turn your work into a PDF (.pdf) or EPUB (.epub) document for your online portfolio by choosing File ➤Export. Refer to Figure 14-12.
Figure 14-12

Adobe Acrobat and Digital Editions apps

Note

You can use Acrobat or Acrobat Reader to view PDF files. However, you will need a tablet or a program like Adobe Digital Editions to view EPUB documents. Digital Editions is not part of the Creative Cloud desktop, but it is free to download from Adobe; you can learn more about it from this link.

https://www.adobe.com/solutions/ebook/digital-editions/faq.html

Animate

If you enjoy working with GIF and video animations in Photoshop or creating shapes in Illustrator, then Adobe Animate is the next application that you may want to learn. It stores its saved files as (.fla), but later the file can be exported as (.gif) for GIF animations, in various video formats such as .mp4, or published as a (.oam) file to be used in InDesign and eventually exported as an EPUB document. Refer to Figure 14-13.
Figure 14-13

Animate app icon and Tools panel

Photoshop (.psd) files and Illustrator (.ai) files can be imported into the (.fla) file, or with Illustrator you can use Edit ➤ Copy and Edit ➤ Paste to bring a shape or symbol directly onto the Animate Stage; it is also stored in the Animate Library panel. Refer to Figure 14-14.
Figure 14-14

Animate Paste dialog box and Library panel

Like Photoshop, Animate uses its Timeline panel to create animations frame by frame and to store layers. Refer to Figure 14-15.
Figure 14-15

Animate Timeline panel

Animate also has many of the same or similar tools as Photoshop and Illustrator, which you can use to do basic warps to some symbols; these include the following:

  • Selection tool (V) and Subselection tool (A), like the Direct Selection tool (see Chapter 2 for Illustrator). Refer to Figure 14-16.

Figure 14-16

Animate’s Selection and Subselection tools

  • Free Transform tool (see Chapter 3). Refer to Figure 14-17.

Figure 14-17

Animate Free Transform tool

  • Width tool for altering strokes (see Chapter 5). Refer to Figure 14-18.

Figure 14-18

Animate Width tool

  • Various brush tools (see Chapter 8 in reference to brushes). Refer to Figure 14-19.

Figure 14-19

Animate’s Fluid Brush, Classic Brush, and Paint Brush

  • Eraser tool (see Chapter 8). Refer to Figure 14-20.

Figure 14-20

Animate Eraser tool

  • Pen tools (see Chapter 2). Refer to Figure 14-21.

Figure 14-21

Animate’s Pen, Add Anchor Point, Delete Anchor Point, and Convert Anchor Point tools

  • Selected symbols can have basic blend and filter effects applied using the Properties panel. Just be aware that complex items may have parts rasterized if they are very detailed when placed on the Animate stage or in the Library panel. Animate cannot render as accurately certain complex details that you may have created in Illustrator or Photoshop, as the animations are meant for a website. Refer to Figure 14-22.

Figure 14-22

Animate’s Properties with Blend and Filter options and CC Libraries panel

  • Animate, like the other mentioned Adobe apps, is connected to the CC Libraries panel, so you can use this panel to add your warped graphics and text to the stage, or add symbols to the Animate Library panel to enhance your animations. Refer to Figure 14-22.

You can learn more about the Animate CC Libraries panel from this link:

https://helpx.adobe.com/animate/using/creative-cloud-libraries-stock.html

As mentioned, Animate can be used to create animations that can later be used in InDesign to create an EPUB document or added as an animation for your site that you build using Adobe Dreamweaver or even WordPress or another social media page.

Dreamweaver

While Dreamweaver may be a bit of a learning curve, as many of the application’s tools are quite different, if you’re planning to create a basic online portfolio with images and GIF animations, it can be a great starting point once you learn a bit of basic HTML, CSS, and JavaScript to create your own custom website. Refer to Figure 14-23.
Figure 14-23

Dreamweaver app icon

Also, like the other Adobe programs, it too has a connection to the CC Libraries panel so that you can transfer some of your graphics in a select file format and link them to the code in your document. Refer to Figure 14-24.
Figure 14-24

Dreamweaver CC Libraries panel and conversion setting options for linked or extracted file

Note

Adobe recommends that you do all your color editing and cropping to your graphic files in your native application of Photoshop or Illustrator and no longer supplies these tools in its Properties panel as in past versions.

Saving Exported Files or Assets from Photoshop and Illustrator

Regardless of what application you prefer to use to lay out your website, you can use Photoshop and Illustrator to make your image ready for the web.

Photoshop and Illustrator can save files such as .png, .jpg, and .gif using the following options within their applications:

File ➤ Export ➤ Save For Web (Legacy): In Photoshop, this is good for saving GIF animations as well as the previously mentioned file formats. If this is a topic you are interested in, refer to my books that I mention in the introduction. However, Illustrator will not allow you to export GIF animations; only Photoshop and Animate will (File ➤ Export ➤ Export Animated GIF).

File ➤ Export ➤ Export As: This is available in Photoshop and Illustrator. However, in Illustrator you also can use this option to save (.svg) files (Scalable Vector Graphics).

Note

If in Photoshop you are planning to save a file in the newer (.webp) format, go to File ➤ Save As.

Illustrator also has the Asset Export panel, which allows you to save your graphics quickly as small files if you don’t want to save the whole document. As mentioned in Chapter 13, you can also use this panel to export your 3D object OBJ, USDA, and GLTF files. Refer to Figure 14-25.
Figure 14-25

Illustrator’s Asset Export panel for creating web or 3D graphics quickly using drag and drop

Drag your artwork into this panel and then set your Export Settings before clicking the panel’s Export button at the bottom of the panel.

Though not required for this book, if you want to learn more about saving and exporting graphics for the web you can check out my book Graphics and Multimedia for the Web with Adobe Creative Cloud and Perspective Warps and Distorts with Adobe Tools: Volume 1.

Other Adobe Applications

Keep in mind that graphics you create in Photoshop or Illustrator can be used later in video files in applications like Media Encoder, Premiere Pro, After Effects, or later transferred via Bridge. These apps, except for Media Encoder, all have access to the CC Library panel. Refer to Figure 14-26.
Figure 14-26

Adobe app icons for Media Encoder, Premiere Pro, After Effects, and Bridge, and the Bridges Libraries panel

Note

Another alternative is to copy your illustrator drawings into Character Animator, which is similar to Animate; however, it does not appear that this application has access to the CC Libraries panel yet. Refer to Figure 14-27. For more details on this application, you can review this link: https://helpx.adobe.com/adobe-character-animator/user-guide.html.

Figure 14-27

Adobe app icons for Character Animator and Fresco

Fresco, as well, is an application that you may want to use to add additional painterly effects to your Photoshop files as well as work with basic animations. Refer to Figure 14-27 and this link:

https://www.adobe.com/products/fresco.html

For creating further warps and distorts in 3D beyond what you did in Chapter 13, make sure to check out the Adobe Substance Collection, which has been added to the Creative Cloud desktop, as many of the 3D Photoshop features have been migrated there. Refer to Figure 14-2 and Figure 14-28.
Figure 14-28

Adobe Creative Cloud desktop apps of Aero, Substance 3D Painter, Sampler, Designer, and Stager

Some of these apps you can try as part of a trial, but you will have to pay extra for on your Creative Cloud subscription. The Dimension App, refer to Figure 14-2, is similar to Substance 3D Stager, and you can learn more about that at this link:

https://community.adobe.com/t5/dimension-discussions/introducing-adobe-substance-3d-stager-and-dimension-update/m-p/12134595/page/3.

Refer to this link if you want more information on Adobe Substance 3D Modeler:

https://www.adobe.com/products/substance3d-modeler.html

Summary

This concludes this book. I hope that you enjoyed learning about how to create some unusual transformations in Illustrator as well as some ideas on what additional Adobe applications, including Photoshop, you need to learn about to take your next graphics project to its completion.

If you enjoyed these topics, please make sure to check out my other books from Apress as well.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.191.189.211