Suite Solutions: Adobe Creative Suite 2 Application Integration

CATEGORIES: Columns, November/December 2005 | Chris Converse | November 05, 2005

Over the past few years, Adobe has been standardizing its graphics model. The Adobe Graphics Model (AGM) exists to ensure that all Adobe applications import, preview, and publish the files the same way. This means an Illustrator or Photoshop file looks identical when imported into InDesign, GoLive, After Effects, Premiere…well, you get the idea. Through this standardization, we’re beginning to see the benefits everywhere. When Apple overhauled its operating system to Mac OS X, they standardized on PDF as the interface’s “guts” (which is why screen captures are now saved as “Picture 1.pdf”). In addition, many non- Adobe applications across video editing, print, and Web import native Photoshop and Illustrator files, as well as PDF and EPS (Encapsulated PostScript—also created by Adobe).

However, there’s no environment more suited to take advantage of AGM than the Creative Suite itself. With each new revision of Photoshop, Illustrator, InDesign, and GoLive, the integration gets tighter and tighter. In addition, the number of open standards supported stays current as well.

Let’s start by taking a look at Adobe Bridge. This is the “glue” for all of the applications in the Creative Suite. Bridge allows you to view, organize, preview, add metadata, set and check color management settings across the suite, view Version Cue projects and assets, and run batch processing scripts for Photoshop, Illustrator, and InDesign. One of Bridge’s most important management functions is its ability to update file information, even across multiple documents at once.

Many of you may already use Photoshop’s File>File Info option to add a host of information to your file, including author, keywords, and usage rights, but this can get tedious if much of the information is the same for a particular set of photos. To save time, view a folder containing all of the images in Bridge and marquee select (click-and-drag) a series of photos you’d like to modify. In this case, we want to add Creator information to each image. With the photos still selected, toggle open the IPTC Core region in the Metadata tab of Bridge, click on the Creator field, click the Yes button in the warning dialog informing you that you’ve selected multiple files, and then simply type a name in the Creator field. The information you enter is now added to each file.

Bridge also lets you preview many file formats without opening the fi les in special readers or browsers; you can even preview animations and listen to sound files. Among the many file formats supported are SWF (Shockwave-Flash), QuickTime, Animated GIF, AIFF and WAV fi les, multipage PDF files, SVG, and of course, native Photoshop and Illustrator files.

In addition to managing and previewing your assets, Bridge also enables you to perform batch processes to your assets. With multiple items selected, the Tools menu allows you to Batch Rename and change metadata; create a Version Cue project; run Photoshop services (such as greeting cards and ordering prints); and access batch functions in Photoshop (such as Picture Package), Illustrator (Live Trace a series of images), and InDesign (create a contact sheet)—all without leaving Bridge.

Synchronizing PDF settings across applications just got a whole lot easier; in fact, you don’t have to do anything except make some settings in the first place. If you’re working in InDesign and you create and save custom settings in the PDF Preset dialog, you’re actually making a preset across all of the Creative Suite 2 applications. Start from any CS2 application (we’ll start from InDesign), choose File>Adobe PDF Presets>Define (in Photoshop, Illustrator, and GoLive, go to Edit>Adobe PDF Presets), click the New button, and choose your custom settings. Name your preset and click OK, and then click Done in the Adobe PDF Presets dialog. Now from Photoshop or Illustrator, simply choose File>Save As, specify the file type as PDF, and you’ll see your custom preset in the Adobe PDF Preset pop-up menu. From Acrobat Distiller you’ll see the preset in the Default Settings pop-up menu in the main dialog.

Your PDF settings are also available in GoLive! With a webpage open in GoLive, select the PDF Preview tab at the top of the document’s window. With the tab selected, open the Inspector palette (Window>Inspector) and in the Preset pop-up menu you’ll see all of the possible settings for rendering an HTML file to PDF, with more reliable results than using Acrobat’s Web Capture or printing to PDF from a Web browser. Can you guess which presets are available?

When designing in the Creative Suite, there are many options available for nondestructive editing of your work. Styles and effects are available in all of the applications, and they allow you to separate your content from design. You may be familiar with these concepts in InDesign as style sheets, or in Photoshop as layer effects. But in actuality, you can apply these nondestructive principles throughout your workflow.

Illustrator CS2—The latest version of Illustrator brings us Live Trace and Live Paint. With Live Trace, you can actually “swap out” the bitmap image you’re tracing by simply selecting the image in the Links palette (Window>Links), clicking on the Relink icon at the bottom of the palette, and selecting another image file. Illustrator will automatically update the vector trace information. This is great for testing different bitmap files against your trace settings. And when you have just the right image, you can fine-tune it in Photoshop by clicking the Edit Original icon in the Links palette.

As for Live Paint, you may have seen demos of painting a Live Trace object (which does break the “link” of the Live Trace effect, by the way), but did you know you could use this feature as a live Pathfi nder tool? In this example, you don’t need to split these two shapes apart in order to color the intersecting area a different color. Simply select both shapes with the Selection tool (V), select the Live Paint Bucket tool (K), choose a color, and click in an area where the two shapes intersect. The “live” part of the tool’s name refers to the fact that you can still move the shapes around using the Direct Selection tool (A), and the live painted intersection area will continuously update without destroying the original shapes as with the Pathfinder palette.

The Illustrator effects under the Effects menu let you apply styling to objects and text without changing the base artwork. These effects include arrowheads on rules (that will always point in the right direction if you rotate them), 3D effects, and rounded corners, to name a few. To make changes to effects, open the Appearance palette from the Window menu, select your object, and double-click the appearance list item.

InDesign CS2—InDesign wins the most stylin’ points in the Suite with object styles. Now you can create styles such as drop shadows, strokes, and corner effects and save them into a single object style. First, select an object and apply some attributes and effects to it. In this case, we’ll color the background of the selected frame black. With the object selected, click the Create New Style icon in the Object Styles palette (Window>Object Styles). Now select the remaining objects you’d like to style, and then simply click the object style name. To rename an object style and to see a full list of the attributes that can be stored in an object style, double-click a style item in the Object Styles palette.

GoLive CS2—GoLive has added even more support for visual CSS (cascading style sheets) development, allowing you to take full advantage of separating content from design on your sites: CSS defi nitions can contain background images, borders, padding, indents, and position. After applying the CSS item (class or id) to an object in your page, you’ll see the object take on those characteristics. You can then make further modifications to your CSS objects and see a live update in the open page.

You can begin to experiment by opening your document’s CSS editor and selecting an HTML element or class. In this example, we’re going to select the <a> element, which is the HTML tag for a link. Changing this element’s appearance affects the way links look on the page. We select red here, and GoLive gives a live preview of what red will look like as the link color in our page—without even saving the document first!

Adobe has made it easier than ever to version your projects with Version Cue. Starting a new project is as easy as clicking on the New Version Cue Project button in the lower-left of the Bridge Center in Adobe Bridge (click on the Favorites tab and then click on Bridge Center). Next, in the New Project dialog, name your project and decide if you want to share with others on your network.

Once your project shows up in the Version Cue channel of Bridge (you’ll find it in the Folders tab under Version Cue), grab any existing files you want to add to your project and simply drag them into the open project folder in Bridge. Now you can access these files from any of the Creative Suite applications. For example, let’s choose File>Open from Illustrator. In the Open dialog, choose Use Adobe Dialog in the lower-left corner, select Version Cue, then twirl down your project, and select a file you want to work on.

Once you’ve made changes to the file, you’ll see a new option under the File menu called Save a Version. Because you opened this file from a Version Cue project, Illustrator will be instructed to save a completely new version of this file. Versioning allows you to select this file in Version Cue and “roll back” to a previous version of the file. You can view all versions of a particular file in Bridge! Say goodbye to filenames like “logo_final.ai,” “FINAL_logo_final.ai,” etc.

GoLive takes the Version Cue integration one step further. Version Cue is incorporated into GoLive’s Site Window and gives you even more information about your project, such as who’s in your project and what they’ve checked out, in addition to an Alternates status for each file. This integration isn’t surprising since Version Cue was first introduced by Adobe as GoLive Workgroup Server, back at version 6.

Version Cue has an Advanced Administration option available through your Web browser. You can access the Advanced Administration a few ways. First, Control-click (PC: Right-click) a project folder in the Bridge view of Version Cue, and select Edit Properties. In the Edit Properties dialog, click the lower-left button labeled Advanced Administration. This launches the Advanced Administration Web application in your browser, giving you the ability to create users, perform project backups, run reports, remove old versions, and even start a PDF review with your colleagues!

Making their debut in GoLive a few versions back, Smart Objects have made their way into all of the Creative Suite applications in one way or another. You can begin using Smart Objects without dramatically changing the way you prepare art and photos. What will change is the way you use these fi les once they’re in your layouts. No more saving layered TIFF fi les or exporting artwork to EPS or JPEG fi les. Once you begin using the native fi les, you’ll wonder how you ever lived without Smart Objects.

InDesign CS2—After importing a PSD file into InDesign, select the image, then Control-click (PC: Right-click) on the image and select Object Layer Options. You’ll see a dialog that gives you access to all of the layers and layer comps available in your Photoshop file. Selecting the Preview option gives you a live representation of the changes in your document. You may also notice an area called Update Link Options, with the ability to choose an option called Keep Layer Visibility Overrides (the other option is Use Photoshop’s Layer Visibility). If you choose to have overrides, InDesign will automatically reactivate the layers you select in InDesign regardless of changes you may make to the file later in Photoshop (assuming, of course, you don’t delete a needed layer).

Illustrator CS2—Illustrator also supports accessing layers and layer comps set up in Photoshop. When choosing the Place option in the File menu and selecting your Photoshop file that has layer comps, you’ll see a dialog similar to InDesign’s. In this example below, we’re using the same Photoshop file, except we’re accessing the layer comp named “design 1″ on the left and “design 2″ on the right.

Photoshop CS2—Photoshop offers its own form of Smart Objects, allowing you to embed Illustrator and other Photoshop documents in your original Photoshop document. What’s different about Smart Objects in Photoshop is that they travel inside the Photoshop file. This means that any application that supports native Photoshop fi les will also be able to see the artwork from a Smart Object, even applications like After Effects and Premiere!

To create an Illustrator Smart Object, select some artwork in Illustrator with the Selection tool (V) and choose Copy from the Edit menu. Next, switch to an open document in Photoshop and select Edit>Paste. Notice that Photoshop has a new Paste dialog item called Smart Object. Select this new option, click OK, and then press Enter: You’ll see a small document icon in the Layers palette signifying the embedded document. You can scale this object up, then down, then back up again, and Photoshop will continue to re-rasterize the image to the document’s full resolution. Double-click the Smart Object icon in the Layers palette and Photoshop will extract the document and pass it over to Illustrator for editing. Once you finish editing in Illustrator, simply save and close the document, and Illustrator will give the revised artwork back to Photoshop.

The second type of Smart Object you can make in Photoshop is a Photoshop Smart Object. Here’s how: In our layout, we want to create a Smart Object out of a series of layers. To do this, we’ll select the layers that make up the statistic callout by selecting the first layer, then Shift-selecting the last. With all of our desired layers selected, Control-click (PC: Right-click) on the selected layers and choose Group Into New Smart Object. Now when you double-click the Smart Object’s layer thumbnail, Photoshop will open these layers in a separate Photoshop document for editing. Once you finish editing, simply save and close the document and the edited Smart Objects will be passed back to the original document.

GoLive CS2—The July/August 2005 issue of Layers magazine (page 62) featured an in-depth look at using Smart Objects in GoLive. However, there’s another Smart Object feature—automatic rollover creation from ImageReady. Using ImageReady’s Web Content palette, you can create states of your artwork to use as buttons. These rollover states work exactly the same way as layer comps, except that they tell GoLive to create multiple images along with custom text.

When you place the ImageReady file (same as a Photoshop file), you’ll see the Variable Settings dialog. Set your button text and click OK. The only difference here is GoLive asks for a folder name instead of a filename. The files for this particular button will be stored in that directory. Once created, you can use these button states in your website. In the example shown, the same images we used for the HTML pages in the site were also imported into Flash for use on portions of the site published in SWF format. Now GoLive becomes your graphics creator and manager, as well as your site development tool.

One of the most amazing integration features occurs between InDesign and GoLive. Start with a document in InDesign and then choose File>Package for GoLive. Save the package into the
Web-data:InDesign Packages directory of your GoLive site. In the Package for GoLive dialog, you’ll see a new option in CS2 allowing you to specify a range (instead of the entire document). Click the Package button and InDesign will begin to package all assets, graphics, and stories, and create XML fi les to explain to GoLive how to treat all of the assets. This is just like packaging InDesign fi les for your service bureau.

Now, switch to GoLive, toggle the InDesign Packages folder open in the right portion of the site window under the Extras tab, and double-click the package icon. This launches GoLive’s package viewer. There are three views to this viewer: InDesign Layout, Assets (with Bridge-like image resizing), and HTML Preview (to export the whole page as a CSS-based HTML page). In the InDesign Layout, you can rollover individual assets and drag them from the viewer directly into your page. This creates a Smart Object and writes a Web graphic to the destination of your choice. What’s more, you can drag stories into your webpage and create Smart Objects out of InDesign stories! To update the source files of these package Smart Objects, simply modify your original InDesign document, choose Package for GoLive, and overwrite the exist ing package with the new one. GoLive automatically updates all the Web art and stories linked to those assets.

With the integration level of these applications, there’s no limit to the workflows you can develop around the Creative Suite. As you begin to leverage your design across mediums, remember that you can use the same files for multiple purposes. Import native files whenever possible, use Smart Objects and Object Layers whenever possible, and always design in the most nondestructive way possible. Let the tools do the work for you.

Chris Converse is a graphic designer and multimedia developer specializing in websites, interactive media, print, and CD-ROMs. Visit his website at www.chrisconverse.com.

Share This

No Comments

No comments yet.

Sorry, the comment form is closed at this time.

Featured Partner

From our Partners