Design Guide

Des

ign

Gui

deA

dobe

® Cre

ativ

e Su

ite 2

© 2005 Adobe Systems Incorporated. All rights reserved.

Adobe® Creative Suite 2 Design Guide

If this guide is distributed with soft ware that includes an end user agreement, this guide, as well as the soft ware described in it, is furnished under license and may be used or copied only in accordance with the terms of such license. Except as permitted by any such license, no part of this guide may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, recording, or otherwise, without the prior written permission of Adobe Systems Incorporated. Please note that the content in this guide is protected under copyright law even if it is not distributed with soft ware that includes an end user license agreement.

Th e content of this guide is furnished for informational use only, is subject to change without notice, and should not be construed as a commitment by Adobe Systems Incorporated. Adobe Systems Incorporated assumes no responsibility or liability for any errors or inaccuracies that may appear in the informational content contained in this guide.

Please remember that existing artwork or images that you may want to include in your project may be protected under copyright law. Th e unauthor-ized incorporation of such material into your new work could be a violation of the rights of the copyright owner. Please be sure to obtain any permis-sion required from the copyright owner.

Any references to company names in sample templates are for demonstration purposes only and are not intended to refer to any actual organization.

Adobe, the Adobe logo, Acrobat, GoLive, Illustrator, InDesign, Photomerge, Photoshop, PostScript, Reader, and Version Cue are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.

Mac is a trademark of Apple Computer, Inc., registered in the United States and other countries. Macromedia and Flash are trademarks or registered trademarks of Macromedia, Inc. in the United States and/or other countries. Microsoft , OpenType, and Windows are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries. All other trademarks are the property of their respective owners.

“Th e Ins and Outs of Text Wraps” excerpted from Th e Complete Manual of Typography, copyright © 2003 by James Felici. Used with permission of Adobe Press. For information on books from Adobe Press, visit www.adobepress.com.

Adobe Systems Incorporated, 345 Park Avenue, San Jose, California 95110-2704, USA.

Notice to U.S. Government End Users. Th e Soft ware and Documentation are “Commercial Items,” as that term is defi ned at 48 C.F.R. §2.101, consist-ing of “Commercial Computer Soft ware” and “Commercial Computer Soft ware Documentation,” as such terms are used in 48 C.F.R. §12.212 or 48 C.F.R. §227.7202, as applicable. Consistent with 48 C.F.R. §12.212 or 48 C.F.R. §§227.7202-1 through 227.7202-4, as applicable, the Commercial Com-puter Soft ware and Commercial Computer Soft ware Documentation are being licensed to U.S. Government end users (a) only as Commercial Items and (b) with only those rights as are granted to all other end users pursuant to the terms and conditions herein. Unpublished-rights reserved under the copyright laws of the United States. Adobe Systems Incorporated, 345 Park Avenue, San Jose, CA 95110-2704, USA. For U.S. Government End Users, Adobe agrees to comply with all applicable equal opportunity laws including, if appropriate, the provisions of Executive Order 11246, as amended, Section 402 of the Vietnam Era Veterans Readjustment Assistance Act of 1974 (38 USC 4212), and Section 503 of the Rehabilitation Act of 1973, as amended, and the regulations at 41 CFR Parts 60-1 through 60-60, 60-250, and 60-741. Th e affi rmative action clause and regulations contained in the preceding sentence shall be incorporated by reference.

Part number: 90057100

Contents

4 Welcome

6 Getting Started Learn what is contained on the product CDs and how to install software.

8 Overview Take a look at feature highlights and what’s new in Adobe Creative Suite 2, with spotlight

overviews on Adobe Bridge, Adobe Stock Photos, Version Cue, PDF Integration, and color consistency.

32 Designing a CD Cover In this fi rst print project, we’ll show you how a CD cover was designed using Photoshop and

Illustrator, while taking advantage of asset management and automation features in Adobe Bridge.

56 Designing a Magazine In this project for a printed magazine, you’ll see powerful InDesign integration features that

let you to control layer visibility on placed fi les, automatically remap styles on imported text, and create consistent PDF fi les for both online review and print output.

74 Designing a Website This project outlines a Web design workfl ow using GoLive, with a focus on leveraging assets

from the printed magazine for maximum productivity.

84 Designing for Mobile Devices In this project, we’ll show you how content for a mobile phone or PDA was designed

with GoLive using XHTML and CSS, and then tested and previewed using Small Screen Rendering and device-specifi c CSS queries.

94 Preparing Files for Print This chapter outlines the best practices for preparing and handing off fi les to a print service

provider, using InDesign, Illustrator, Photoshop, and Acrobat.

106 Index

iii

Welcome Designers, photographers, and service providers today are presented with creative opportunities that call for greater versatility and speed than ever before, spanning multiple

media and technologies. Adobe® Creative Suite 2 makes responding to this challenge easier and more fun by providing a complete set of highly integrated, state-of-the-art components in a single unifi ed environment, so that you can do more of your work in one place. Because the Adobe Creative Suite components share toolsets and common user interface elements, you’ll fi nd that new features are easier to learn and fi les are easier to create, edit, share, and publish.

Working and collaborating in this environment broadens your creative range and streamlines your workfl ow, enabling you to quickly master new techniques without interrupting your creative momentum. Use this design guide as your launch point as you explore ideas for employing Adobe Creative Suite 2 to achieve your highest creative potential in your next print, Web, and your highest creative potential in your next print, Web, and mobile designs.

4 Adobe Creative Suite 2 | Design Guide

Adobe Creative Suite 2 is the ultimate design environment for creative professionals who design and publish content for print, the Web, and mobile devices—letting them design and publish faster, more easily, and more aff ordably than ever. Making use of the full set of features in Adobe Creative Suite 2 means you don’t have to learn additional page-layout, fi le-management, or Web-authoring applications to complete your work.

Adobe Creative Suite 2 Premium combines the full new versions of Photoshop® CS2, Illustrator® CS2, InDesign® CS2, GoLive® CS2, andAcrobat® 7.0 Professional, plus Version Cue® CS2, a time-saving fi le management system that tracks versions and alternate designs for you, as well as provides the ability for Web-based, collaborative review of PDF documents. Also included is the new Adobe® Bridge

for centralized fi le-browsing, Adobe® Stock Photos service for fast acquisition of stock images, and Adobe® Help Center for central access to Help content, Adobe® Expert Support, Adobe® Studio®, and other online learning resources.

Adobe Creative Suite 2 refl ects the input of creative professionals worldwide and is packed with innovative features that build on this expertise. The high-level workfl ows we developed from our research are also the basis for the projects covered in this guide.

This book presents an overview of features and then guides you through fi ve projects—including print, Web, and mobile workfl ows—written from the creative professional’s perspective. To see which components and features a project covers, scan the “Highlighted features” list at the

beginning of each chapter. The focus throughout is on using all the tools in Adobe Creative Suite 2, emphasizing the most effi cient and intuitive way to accomplish your objectives.

This document is a workfl ow design guide rather than a comprehensive user guide. Your most complete source for in-depth feature informa-tion is the full Help content in the Adobe Help Center, accessible from every Adobe Creative Suite 2 component. In addition, take a look at the resource information printed inside the front cover to fi nd information on a variety of Adobe resources that will help you use Adobe Creative Suite 2 to enrich your creative experience.

Welcome 5

Getting Started Included in your Adobe Creative Suite 2 package are the following product CDs and extras.

Installer CDs

The Installer CDs contain all Adobe Creative Suite 2 components, including Photoshop CS2, Illustrator CS2, InDesign CS2, GoLive CS2,* Acrobat 7.0 Professional,* Version Cue CS2, Adobe Bridge, and Adobe Stock Photos. (* indicates components included with Premium Edition only.)

Comprehensive, illustrated, how-to Help documentation is included with the installation of each Adobe Creative Suite 2 component—as well as sample fi les, templates, scripts, and other goodies—for instant access at any stage of your workfl ow.

Total Training Video Workshop CD

Presented by experts in their fi elds, Total Training videos include overviews, demos of key new features, and useful tips and techniques for beginning and advanced users of Adobe Creative Suite 2. Look for accompanying step-by-step instructions to selected Total Training videos in monthly updates on Adobe Studio. Visit studio.adobe.com.

Resources and Extras CD

Media on this CD include the following:• Sample fi les and templates for all Adobe Creative Suite 2 components• Fonts.• Clip art.• Stock photos.• Color swatches.• High-resolution RGB textures (for lighting eff ects in Photoshop).• Scripting guides and sample scripts for InDesign, Photoshop, Illustrator,

and Adobe Bridge.• InCopy CS2 plug-ins• GoLive extras.• Full Adobe Creative Suite 2 documentation in PDF.• Technical documents that contain conceptual and reference material

on a variety of Adobe Creative Suite 2 topics. For an extensive library of articles on additional subjects, visit Adobe Studio at studio.adobe.com.


Installation of Adobe Creative Suite 2 software

1 Close any Adobe applications that are open.

2 Insert the Installer 1 CD into your computer’s CD drive.

3 Double-click the CD icon, and then follow the on-screen instructions.

Activation

Activation is a simple, anonymous process that you must complete within 30 days of installing the product. Activation allows you to continue using the product, and it helps prevent casual copying of the product onto more computers than the license agreement allows.

1 Start the product to access the Activation dialog box. (If you’ve just installed Adobe Creative Suite or Adobe Photoshop, the Activation dialog box appears automatically.)

2 Follow the on-screen instructions.

Important: If you intend to install the product on a diff erent computer, you must fi rst transfer the activation to that computer. To transfer an activation, choose Help > Transfer Activation.

Registration

New single-screen registration is integrated into the product installer, so all it takes is a few seconds to register Adobe Creative Suite 2. Your serial number is even entered automatically.

Register your Adobe product to receive complimentary support and notifi cations about product updates—as well as to access the wealth of tips, tricks, and tutorials in Adobe Studio.

Note: For more detailed instructions on

installing the product, see the How To Install

fi le on the product CD. For instructions on

uninstalling the product, see the How To

Uninstall fi le on the product CD.

Activation: For more detailed instructions

on activating the product and transferring an

activation, see the How To Install fi le on the

product CD. To learn more about activation,

visit the Adobe website at

www.adobe.com/activation/main.html.

Getting Started 7


Overview Adobe Creative Suite 2 Premium Edition combines all-new versions of Adobe Photoshop CS2, Illustrator CS2, InDesign CS2, GoLive CS2, Acrobat 7.0 Professional,

Version Cue CS2 fi le-version manager, new Adobe Bridge fi le browser, and Adobe Stock Photos service—along with streamlined support for consistent color and Adobe PDF creation—so that you can realize your ideas more effi ciently than ever as you publish to print, the Web, and mobile devices. The Standard Edition includes all applications that the Premium Edition has with the exception of GoLive CS2 and Acrobat 7.0 Professional.

This overview highlights the top features of Adobe Creative Suite 2 components, in particular for new users. For more on the most recently added features in each component, see the following section, “What’s New,” beginning on page 14.

Integration

Adobe Creative Suite 2 delivers superb image-editing, illustration, page design, Adobe PDF creation, and Web and mobile design and deployment capabilities in one tightly integrated design environ-ment. All Adobe Creative Suite components are designed to work together, sharing common toolsets, user interface elements, and support for native fi le formats. This makes it simpler for you to move between components as you work, activating familiar commands you recognize easily and being able to re-use and edit artwork across components. Ultimately, you have more time and energy for creating because Adobe Creative Suite 2 makes it easier to continue to develop your ideas from one medium to the next, as well as along every step in the creative workfl ow.

Version Cue enhances collaboration and ends cryptic fi le-name confusion by making it possible to track all historical versions of a fi le automatically, and associate alternative content as “alternates”—and then prepare fi les for, and initiate browser-based, collaborative reviews. Versions and alternates are easily viewed

Overview 9

and managed right in Adobe Bridge, along with all your project assets. With Version Cue managing your projects, you can access fi les at the same time as others in your workgroup without fear of overwriting another person’s work.

Adobe Bridge is a new visual fi le-browsing tool that provides fast, effi cient access to your creative assets. Easy to fi nd, view, and organize, all your assets are conveniently available for you to drag and drop into your designs as you need them. Since you can view assets as scalable thumbnails (including a multipage PDF previewer) and search among them according to visible metadata attributes, you don’t have to open them in order to make your selection. Adobe Bridge is also a central point to access support features, such as live links to Adobe Studio tips and tutorials, and the new Adobe Help Center with comprehensive how-to information.

Adobe Stock Photos provides one-stop shopping for images from some of the leading stock photography providers. Search for, browse, compare, download and purchase royalty-free stock photos using Adobe Bridge. Enjoy intelligent search options that search across multiple vendors—and then download and work with images at comp resolution without watermarks.

Color consistency in Adobe Create Suite 2 means that you can view consistent RGB and spot colors on-screen by default, auto-matically preserve CMYK values, and preview blacks more accu-rately. Use Adobe Bridge to synchronize color settings for all Adobe Creative Suite 2 components and add color settings fi les from your print service provider to fi t more smoothly into the provider’s color workfl ows.

You can produce more consistent and reliable Adobe® PDF fi les when you use shared PDF presets across all Adobe Creative Suite 2 components. You’ll enjoy a consistent interface for creating Adobe PDF fi les in Acrobat 4.0, 5.0, 6.0, or 7.0 format, and support industry standard PDF/X-1a or PDF/X-3 fi les for blind fi le exchange.


Digital imaging

The professional digital-imaging standard for creating and modifying photos, Photoshop CS2 delivers a full assortment of painting, drawing, and retouching tools, including artistic brushes, special eff ects fi lters, color correction tools, and the enhanced Healing Brush for eff ortlessly removing fl aws. The new Vanishing Point feature makes it easy to maintain the proper perspective when you clone, brush, paint, or copy and edit images. You can achieve sophisticated results by compositing images, text, and eff ects on hundreds of layers, and effi ciently create design varia-tions for clients by saving diff erent combinations of layers within the same fi le. Now you can also view, rate, sort, and batch-edit photos from the widest range of digital cameras in a fraction of the time it used to take, thanks to automation features provided by Adobe Bridge and enhanced support for digital camera raw fi les.

Illustration

The powerful, intuitive vector-drawing environment that is Illustrator CS2 brings you the industry-standard drawing tools that professionals rely on to create logos, illustrations, package designs, maps, posters, and graphics for the Web and mobile devices. Automatically turn bitmaps into beautifully detailed vector graphics with Live Trace, and then simply point and click to color and fi ll objects with Live Paint. Draw with precision using the Bezier Pen tool, or quickly sketch on-screen with the Pencil tool. Let your imagination lead as you easily warp, liquefy, and distort artwork, create custom 3D shapes and type treatments, and apply blending modes and transparency eff ects. Advanced typographical controls also make it easy to produce beautiful typography. Create completely editable graphics for the Web and mobile devices in a variety of standard formats, including SWF export, W3C, SVG and SVG-Tiny export, GIF, JPEG, and native support for Adobe PDF.

Overview 11

Page layout

The sophisticated creative features available to you in InDesign CS2 make it the perfect environment for producing outstanding page designs. Choose from a wide selection of object formatting options, such as drop shadows and feathering, and even save your own combinations of settings as Object Styles that you can apply to additional objects quickly and consistently. Some of the profes-sional type controls that make it easy to set type beautifully include the Adobe Paragraph Composer, optical kerning and margin alignment, and comprehensive OpenType support. With built-in support for native Photoshop (PSD), Illustrator (AI), and Adobe® PDF fi les, you can place native Photoshop fi les, including duotones, tritones, quadtones, spot channels, and transparent eff ects; paste and edit Illustrator objects; and selectively display and output layers or layer comps from Photoshop and PDF documents. InDesign fi ts right into all variety of publishing workfl ows through its robust support for XML and comprehensive scripting support. Also, easily repurpose InDesign layouts and assets for reuse as Web pages with the Package for GoLive command.

Web and mobile design

To produce and publish interactive content for the highest quality websites—and now the most advanced microsites for mobile devices—GoLive CS2 is the place to work. In GoLive, you can build web and mobile designs in a comfortable visual environment, intuitively manipulating native Photoshop and Illustrator fi les and importing assets from InDesign for streamlined team collaboration or your individual design process workfl ow. With support and creation tools for global emerging standards such as CSS, XHTML, SVG Tiny, and SMIL, GoLive equips you to create visually rich Web and mobile sites that can be viewed on the widest array of platforms and devices.


GoLive converts your imported fi les to Smart Objects so that you can resize, crop, and uncrop these images freely in your layouts without accidentally distorting them. Use the visual CSS layout window to build pages that conform to open Web standards, or use prebuilt CSS objects to jumpstart your layout process, and then use the visual CSS Inspector to easily produce and check type styles as well as adjust the position of elements on the page.

The enhanced Package for GoLive feature in InDesign allows you to repurpose content from a printed piece for use on Web pages.

Robust support specifi cally for mobile site development includes: CSS@media elements to help you lay out elements for optimal display on specifi c handheld devices, ensuring the appropriate layout size and object types; features that let you review and verify that your code conforms to the latest XHTML specifi cations, whether you design the site with visual tools or write the XHTML code; and the MMS Composer for visual MMS authoring support as you combine standard mobile media formats, like 3GPP movies and JPEG images, with text to create MMS slide shows.

Adobe PDF creation, review, and output

With Adobe Acrobat 7.0 Professional it is easier than ever to create reliable, compact Adobe PDF fi les for client reviews, interactive presentations, Web distribution, and high-end printing. The free Adobe Reader 7.0 is all your clients need to be able to review and provide comments directly in the Adobe PDF fi les, which you can produce from any component in Adobe Creative Suite and deliver online and via email. The Adobe PDF workfl ow is enhanced with features such as complete support for PDF/X-compliant fi les and Job Defi nition Format (JDF) fi les that accompany the Adobe PDF fi le to describe for reviewers and printers the document’s content and intent.

Overview 13

High-end print production workfl ows are streamlined with powerful print production tools in Adobe Acrobat 7 Professional. Before you print, or deliver PDF fi les to your print service provider, use these tools to detect issues with total ink coverage, incorrect image colorspaces, rich blacks, and overprinting objects. The Separations preview allows you to preview plates, and the newInk Manager allows you to map excess spot colors to process color plates. In the Adobe PDF fi le, convert RGB objects to CMYK objects with precise control, apply transparency fl attener settings, and globally adjust hairline weights to ensure that they print well on target presses. Comprehensive, easy-to-use tools help you check for problems, and can even be automated via prefl ight droplets.


Adobe Creative Suite 2 combines all-new versions of the world-class design tools Photoshop, Illustrator, InDesign, GoLive, Acrobat Professional, and Version Cue for

fi le-version management and sharing, along with the new Adobe Bridge fi le browser, and Adobe Stock Photos royalty-free services. The following are highlights of some of the new and enhanced features. Complete new features lists can be found in the Adobe Help Center or in each component’s Help.

What’s New

Tightly integrated design environ-ment—Work in the common Adobe interface and place native Photoshop, Illustrator, and Adobe PDF fi les directly into InDesign and GoLive layouts. Control layer visibility and output of Photoshop and PDF fi les placed in InDesign, or the visibility of Photoshop layer comps in Illustrator.

Intuitive fi le-version management—Save versions of fi les and alternate designs, and then easily view, sort, and manage them as a group in Adobe Bridge. With Version Cue operating transparently across all components, search and preview multiple fi les directly in new Adobe Open, Save, and Export dialog boxes.

Adobe Bridge—Locate, browse, and organize your creative assets more easily; then drag and drop them into your designs as needed using new Adobe Bridge, a visual fi le-browsing tool with scalable previews and multipage PDF viewer that’s integrated with InDesign, Photoshop, Illustrator, and GoLive.

Adobe Stock Photos service—Search, compare, download, and purchase stock photos from leading stock libraries directly within Adobe Creative Suite 2. Adobe Bridge provides central access

to Adobe Stock Photos from InDesign, Illustrator, Photoshop, and other Adobe Creative Suite components.

Consistent Adobe PDF creation—A common interface and shared PDF presets across all components of Adobe Creative Suite mean you can reliably create consistent Adobe PDF fi les with greater ease and speed.

Consistent color—Synchronize color settings across all components of Adobe Creative Suite centrally through Adobe Bridge. View consistent RGB and spot colors by default, preserve CMYK values throughout your workfl ow, and be confi dent of consistent, predictable on-screen color.

Mobile content design—Start de-signing mobile sites today in GoLive, with visual authoring tools and the ability to check designs for compliance with a wide range of contemporary devices.

Electronic reviews with broad partici-pation—Use Acrobat 7.0 Professional to enable commenting on PDF fi les with the free Adobe Reader 7.0 so that clients anywhere can participate in email-based PDF collaboration and document reviews.

Overview 15

Live Paint—Paint vector graphics more intuitively because Illustrator now automatically detects and corrects gaps that would previously have aff ected how fi lls and strokes were applied. Instead of having to plan every detail of an illustration in advance to ensure the right shading and colors, you can work more as you would drawing by hand on paper.

Control palette—Locate commonly used tools in a context-sensitive Control palette, which helps clear up on-screen clutter by reducing the number of open palettes. The Control palette makes illustration options more accessible so that you can design and edit with greater ease and speed.

Acrobat 7.0 Professional

Commenting—Work more fl exibly with clients who don’t own a full version of Acrobat by enabling them to comment on review PDFs using the free Adobe Reader 7.0. When your client opens the PDF in Adobe Reader, a set of commenting tools opens automati-cally along with instructions on how to interact with the fi le, and return or save the fi le with comments.

New PDF correction tools—Improve the quality of your high-end PDF output and prevent costly mistakes on press using new PDF correction tools. Use the new Ink Manager to properly map excess spot colors to achieve proper separations. Convert RGB images in a PDF fi le to CMYK with precise control, and verify on-screen that the conver-sion took place. Globally adjust hairline

Photoshop CS2

Vanishing Point—Maintain the proper perspective when you clone, brush, paint, or copy and edit images using the new Vanishing Point feature.

Multiple layer select—Select multiple layers at once in the Layers palette and then move, delete, or assign those layers to sets. Also, select parts of an image more intuitively by clicking on or drag-selecting around those objects.

Smart Objects—Work more fl exibly with Photoshop and Illustrator using Smart Objects: Scale raster objects freely in Photoshop without losing quality. Copy and paste live vector objects from Illustrator to Photoshop, which are fully scalable. Also, edit those vector objects in Illustrator and update them automatically in Photoshop. Edit a single Smart Object to update all linked instances of it.

Custom menus and workspaces—Customize Photoshop menus, shortcuts, and palette locations to better suit the way you work. Save multiple versions of your workspace for diff erent tasks and easily switch among them. Highlight new or commonly used menu items in color for quick identifi cation.

Illustrator CS2

Live Trace—Automatically turn bitmaps into beautifully detailed vector graphics that are easy to edit and transform without distortion. Reduce the time it takes to recreate a scanned drawing on-screen, without loss of quality.

weights to ensure that they print well on target presses. Apply transparency fl attener settings and fl atten a PDF fi le for print workfl ows that don’t output native transparency.

Enhanced output preview— Receive on-screen alerts about objects with rich black applied, objects that will over-print, and areas of a PDF that exceed user-specifi ed total ink coverage. Then make corrections to problem areas before you print.

InDesign CS2

Object Styles—Save time and ensure consistent formatting of objects by using Object Styles. An Object Style may combine any of the object formatting options available in InDesign, including drop shadows, feathering, fi lls and strokes, line weight and style—as well as text styles and layout attributes, such as anchored object options and text wrap. Redefi ning an Object Style will update it anywhere it is used.

Layer visibility—Selectively display and output layers or layer comps in placed native Photoshop (PSD) fi les and PDF fi les. You can try out diff erent graphic variations by importing a single linked fi le, and then turning layer visibility on or off .

Snippets—Use lightweight snippets to include any combination of text and graphics objects on a page, and will maintain the relative positioning of these objects when you drag them into a new page or document. Snippets are created by selecting any native InDesign


objects, and then exporting out to the fi le system or dragging and drop-ping those objects from InDesign to Adobe Bridge.

Snippets can be placed or dragged and dropped onto the page, making it easier to re-use and share layout designs. You can even email a snippet to a colleague to help jump-start a design with much less fi le overhead than mailing the full InDesign fi le.

GoLive CS2

For mobile designers and developers:

Visual CSS authoring for mobile devices—Visually lay out mobile sites for optimal display on specifi c handheld devices. To ensure that the fi nal site conforms with the device and standard specifi ed, GoLive then restricts the size of the layout and the types of objects allowed.

Native support for XHTML mobile profi le—Develop mobile content using the XHTML mobile profi le, the most widely accepted platform for mobile development. Whether designing an XHTML-based mobile site visually or writing XHTML code in GoLive, easily review and verify that the code conforms to the latest XHTML specifi cations.

Visual MMS authoring—Combine diff erent standard mobile media formats, such as 3GPP movies and JPEG images, with text to create MMS slide shows using the MMS Composer. Automatically generate MMS portal sites to display, distribute, and send MMS slide shows to cell mobile device users who request the content. Specify a wide range of parameters, including

the visual theme, content categories, overall layout, server location, payment service, and more, as you generate the MMS portal. Easily update any of these parameters after the site is live to keep both its look and content fresh.

For general Adobe Creative Suite users:

Native PSD, AI, and PDF fi le sup-port using Smart Objects—Drop native Photoshop (PSD), Illustrator (AI), or Adobe PDF fi les into GoLive, which automatically compresses them for Web output using parameters you set. GoLive also converts the fi les to Smart Objects, so that you can resize, crop, and uncrop these images freely in your Web layouts without accidentally distorting them. Instead, GoLive tracks any changes you make and automati-cally updates and recompresses the fi le to refl ect those changes.

Rich standards-based Web design and development—Develop mobile and Web sites based on global stan-dards, such as CSS, XHTML, SVG-Tiny, SMIL, and more. Working with open industry standards ensures that your websites can be viewed by leading browsers on the widest array of platforms and devices.

Visual CSS authoring and editing—Use a visual CSS layout window to build pages that conform to open Web standards, allowing your content and layouts to adapt liquidly to a variety of devices. Easily produce and check type styles, as well as adjust the position of elements on the page, using the visual CSS inspector. You can also work with prebuilt CSS objects that help you quickly lay out text and graphics.

Version Cue CS2

Version control—Throw out your ad hoc eff orts to keep track of fi le versions through diff erent naming conventions (no more funny fi le names like “brochure_fi nal_fi n3.indd”) and reclaim the time you spend hunting for, opening, moving, and renaming the many fi le versions generated in typical creative projects. Instead, track all versions of a fi le automatically, including historical versions gener-ated sequentially in a serial workfl ow and alternate content generated in tandem in a parallel workfl ow. Also, use Version Cue to prepare versions for client review, output those versions into a review cycle, and determine which version to use based on client feedback.

File-sharing management—Share fi les in creative collaboration without fear of overwriting another designer’s work. For example, access a design fi le at the same time as several other people and allow Version Cue to manage the interac-tions as well as the versions. Version Cue saves all of the versions under the same name but visually diff erentiates the versions for everyone accessing them.

Automated metadata—Automatically capture, store, and search on metadata information directly from the Adobe Bridge—an effi cient way to locate fi les without having to open them. Metadata information is embedded in all versions of a fi le and can include status, keywords, fi le descriptions, author, copyright, and fi le type, as well as content information, such as image types and dimensions.

Overview 17


Adobe Bridge

Adobe Bridge is the central hub for all Adobe Creative Suite 2 workfl ows.

Browse, organize, and view your project fi les with a powerful set of viewing and sorting options, and then drag and drop assets into your design documents. Adobe Bridge replaces the Adobe Photoshop fi le browser with faster performance and thumbnail previews, and is integrated with InDesign, Photoshop, Illustrator, and GoLive to speed up your design work.

Scalable previews allow you to preview Photoshop images, Illustrator graphics, InDesign layouts, multi-page PDF fi les, GoLive Web pages, snippets, QuickTime movies, and fi les in other standard graphics formats. Launch non-Adobe applications such as MS® Word or Excel by double-clicking the fi le icon.

Select a thumbnail and view detailed fi le information such as color mode, dimensions, and resolution—without having to open the fi les. Search for one or more assets with common metadata attributes, and then store the results as a collection.

Use the Slide Show feature to view images at full screen and fl ag them as you go using keyboard shortcuts. Or, sort thumbnails within an Adobe Bridge folder visually by dragging them to a diff erent position.

Raw digital images can be edited using Adobe Camera Raw. Batch processing and automation tasks can be applied to selected images or folders directly through Adobe Bridge —while you get back to work in Photoshop. The Batch Rename feature lets you edit fi le names on numerous documents without opening a single fi le.

Automate labor-intensive tasks across components of the Suite by writing your own JavaScripts or using included workfl ow script examples; then store your scripts in a central location for easy access or sharing with colleagues.

Set and synchronize color settings for all Adobe Creative CS2 components centrally through Adobe Bridge.

Adobe Bridge also gives you intuitive and powerful access to Adobe Version Cue CS2 for managing versions and alternates of your work in progress. For more information on Version Cue, see “Creating a managed project with Version Cue CS2” on page 30.

Finally, Adobe Bridge is much more than a fi le browser. Look through the following sections in this Overview to learn about Bridge Center, and Adobe Stock Photos service.

Overview 19

Adobe Bridge Slide Show allows you to view and rate images at full-screen size.

Built-in multipage PDF viewer in Adobe Bridge with scalable preview lets you page through PDF documents without having to open them.

Adobe Bridge window

Time-saving automation tasks such as batch-processing or exporting to Web Photo Gallery, can be done in Adobe Bridge while you get back to work in Photoshop.


In addition to fi le-browsing and as-sets management, Adobe Bridge provides a central location to

support every stage of your workfl ow. Bridge Center contains features that minimize the time it takes to stop work on one project and switch to another. (To access Bridge Center, click Bridge Center in the Favorites panel.)

Color settings for all Adobe Creative Suite components are synchronized in a central place, simplifying the task of checking each component for consistent settings—and minimizing color settings error messages when opening fi les. Click Open Color Settings at the bottom of the Bridge Center window, or choose Edit > Creative Suite Color Settings to open the Color Settings dialog box.

Adobe Stock Photos service is accessed through the Favorites pane of Bridge Center. You’ll also fi nd an RSS reader with live links to Adobe Studio for tips, tricks, and tutorials. See page 28 for more information on Adobe Stock Photos service.

Bridge Center

Ever wondered if you could save your desktop exactly as you left it when you quickly move to another project or leave your computer? Now you can, with the Saved File Groups feature. Bridge remembers and opens the applications and fi les exactly the way you left them, with a list of the recent fi les and folders accessed.

Bridge Center automatically keeps track of recent folders and fi les accessed on your computer. Opening Bridge Center when returning to your workstation gives you an instant overview of where you left off . Double-click a document thumbnail in the recent fi les column and get right back to work.

Bridge Center also lets you create new Version Cue projects. For more information on Version Cue, see “Creating a managed project in Version Cue” on page 30.

The new Adobe Help Center provides a central location for Help topics on all Adobe Creative Suite 2 components. You’ll fi nd comprehensive, consistent,

up-to-date how-to information on all features, as well as access to other services from Adobe, including Adobe Expert Support. Click the link at the bottom of the Bridge Center window to reach the Adobe Help Center, or go to the Help menu within any Adobe Creative Suite 2 component.

Adobe Expert Support provides rapid resolution of how-to issues via the phone or Web—giving you insider, priority access to the world’s leading Adobe software experts. Adobe Expert Support off ers annual support contracts or paid support on individual cases.

To access Adobe Expert Support or to learn more, click on the Expert Support tab in Adobe Help Center.

Bridge Center

Adobe Help Center

Adobe Expert Support

Color Settings AdobeHelp Center

Bridge Center in Favorites Tab of Adobe Bridge

New Version Cue Project Color Settings

Bridge Center in

Overview 21


PDF Integration

Adobe Portable Document Format (PDF) has become a key technology in both print

and Web publishing. Creative profes-sionals use Adobe PDF as an integral part of their workfl ow to streamline document distribution and review, print high-resolution output, archive documents, and more.

Uses for Adobe PDF fi les include:

• Posting to the Internet.

• Electronically distributing and reviewing by colleagues, clients, and vendors based on the Smallest File Size preset to create compact PDF fi les appropriate for email and online commenting. Use Acrobat 7.0 Professional to enable the PDF fi les for commenting in the free Adobe Reader.

• Printing proofs with desktop printers.

• Preparing fi les for prepress and high-end output by converting to industry-standard PDF/X formats.

• Preparing and delivering Adobe PDF fi les for high-resolution output, including live transparency.

• Archiving and retrieving documents.

New PDF integration features make it easier than ever to incorporate Adobe PDF in your workfl ow and generate consistent, reliable PDF fi les from any Adobe Creative Suite 2 component.

Shared PDF presets

PDF creation settings fi les, or presets, are now shared across all Adobe Creative Suite 2 components. A preset is a predefi ned collection of settings based on best practices for specifi c output, such as Smallest File Size for email reviews, or Press Quality for high-end printing.

PDF presets are based on the Acrobat Distiller .joboptions fi le format—the most widely used and accepted PDF creation settings format.

PDF presets contain settings for image downsampling and compres-sion, font embedding, fl attening of transparency, and so on—which take the guesswork out of PDF creation and ensure effi cient and consistent results.

See “Creating Adobe PDF fi les” on page 24 for a list of the PDF presets available.

Custom PDF presets

You or your print service provider may require specialized PDF creation settings. Any of the default presets can be customized, and you and your workgroup can share them among all Adobe Creative Suite 2 components.

Using custom PDF presets provided to you by your printer ensures that the PDF fi le is built according to the printer’s settings. By combining custom PDF presets with the ability to create custom PDF prefl ight profi les in Acrobat 7 Professional, you can build a reliable and consistent Adobe PDF workfl ow from creation through output.

Shared PDF preset location

The PDF preset fi les shared by all Adobe Creative Suite 2 components are stored in a central location, which greatly simplifi es the process of storing, loading, and managing PDF preset fi les. If your printer sends you a custom preset, simply double-click it and it will be loaded into the correct location—in Windows®, Documents and Settings/All Users/Shared Documents/Adobe PDF/Settings; in Mac OS®: Library/Application Support/Adobe PDF/Settings.

Overview 23

Common user interface for PDF creation

All Creative Suite 2 components now share common PDF settings and a more consistent user interface, which simplifi es the process of PDF creation across Adobe Creative Suite and makes training and use easier and more reliable.

PDF standards (PDF/X)

Among the built-in PDF export presets are several that support PDF/X, a format that is quickly becoming a standard for delivering ads and other fi nal documents that require high-resolution print output. The PDF/X standard enables reliable exchange and output of graphics fi les and eliminates many of the incorrect color, missing font, and

various fi le problems that can lead to inconsistent and unreliable output.

Adobe Creative Suite 2 includes built-in presets for creating PDF/X-1a and PDF/X-3 fi les.

Note that while the PDF/X standards specify best practices for print output, the standard does not have any minimum image-resolution requirements. For example, a 72-dpi screenshot can be included in a valid PDF/X fi le. For this reason Adobe has added PDF prefl ight checks in Acrobat 7.0 to check for image resolution. Acrobat Distiller, as well as the other Adobe Creative Suite 2 components, also includes options for specifying image resolution during PDF conversion.

Creation of PDF/X fi les from Adobe Creative Suite 2 components

You can use InDesign CS2, Illustrator CS2, Photoshop CS2, Acrobat, and Acrobat Distiller to create PDF/X fi les. When you create PDF/X fi les from, for example, InDesign CS2, all content in the InDesign layout is analyzed and then converted to meet the require-ments of PDF/X. If the layout includes RGB, the PDF/X fi le will be correct (RGB will be converted to CMYK), because the conversion manages all content and ensures that the fi le is a valid PDF/X fi le. Similarly, Distiller and other Adobe Creative Suite 2 components create valid PDF/X fi les.

Learn more

For more information, see the PDF Integration

Guide for Adobe Creative Suite 2, available on

Adobe Studio at www.studio.adobe.com.


Creating Adobe PDF fi les

Generating PDF fi les is simpler now, thanks to a consistent user interface in all Adobe Creative Suite 2 compo-nents and shared PDF presets that contain optimal settings for typical output needs. This section outlines the easy steps required to generate PDF fi les.

Creating Adobe PDF fi les from Adobe Creative Suite 2

1 Choose one of the following options from the File menu:

Illustrator—Choose Save As and select Adobe PDF (pdf ) as the Format.

Photoshop—Choose Save As and select Photoshop PDF as the Format.

InDesign—Choose Export or PDF Export Presets.

GoLive—Choose Export > HTML as Adobe PDF.

2 Name the fi le, select a destination folder, and click Save or Export.

3 In the Adobe PDF Options dialog box, choose a PDF preset that meets the needs of the intended use of your PDF, or create or load a custom PDF preset.

Settings are automatically chosen based on the preset selected. If you need to customize any of the settings or options, do so now, otherwise click Save or Export to fi nish.

Saving or exporting to Adobe PDF from any Suite component displays an Adobe PDF options dialog box, like the one above. PDF Presets, Standards, and Compatibility options are consistent throughout Creative Suite. PDF options unique to the source application also will appear, for instance, Bookmarks for InDesign, or HTML conversion for GoLive.

Learn more

For more information, see “The PDF Integra-

tion Guide for Adobe Creative Suite 2”,

and other Adobe PDF related topics, on

Adobe Studio at http://studio.adobe.com

Overview 25

Creating Adobe PDF fi les from non-Adobe applications

Some print service providers prefer Acrobat Distiller-generated PDFs. This method is often preferred for creating PDF fi les from non-Adobe applications.

To create a PostScript fi le and use Distiller to convert it to PDF:

1 Choose File > Print.

2 Choose PostScript File from the printer list and click Save.

3 Enter a fi lename and location, and click Save.click Save.click

4 Launch Acrobat Distiller and choose Set Up Job Options. (See Help for more information.)

5 Open the PostScript fi le in Distiller. The fi le is automatically converted to PDF.

To print to Adobe PDF (which makes the PostScript fi le, and then creates the PDF using Distiller in the background):

1 Choose File > Print.

2 Choose Adobe PDF 7 from the printer list and click Save.

Note: Printing to Adobe PDF requires that

Acrobat 7.0 Professional be installed. Printing

to Adobe PDF uses the last-chosen preset in

Distiller, so be sure to set up Distiller properly

before printing.

Adobe provides these PDF presets as best practices for output of PDF fi les. If you are in doubt about which settings to use, contact your print service provider.

• Smallest File Size This preset is for PDF fi les that will be electronically dis-tributed, posted to the Internet, and displayed on-screen. Keeping the fi le size small minimizes upload and download times and speeds up display. Colors are converted to sRGB, and image resolution is suffi cient for on-screen display but not appropriate for high-resolution output.

• High Quality Print This preset is ideal for creating PDF fi les for a wide variety of uses, including printing proofs to desktop output devices, such as color inkjet and laser printers. This preset also allows for the creation of accessible PDF fi les from InDesign and GoLive.

• Press Quality This preset is for PDF fi les that will be output to high-resolution color separations, digital printing, or for use in a prepress workfl ow. RGB is con-verted to CMYK, and spot colors are allowed. Transparency is live (unfl attened).

The three presets above create PDF 1.4 or higher fi les, which means all transpar-ency eff ects are live (that is, transparency eff ects are not fl attened). Printers typically handle the fl attening of transparency. If your workfl ow requires fl attened transparency, you may want to consider using PDF/X, a standard for graphic content exchange. PDF/X fi les are PDF 1.3, which requires transparency to be fl attened.

• PDF/X1a 2001 This preset is designed for high-end print output. All fonts required to print the document are embedded and color is either CMYK or spot.

• PDF/X3 2002 This preset is designed for high-end print output and supports color management through the use of an output intent.

Additional presets are included in the Extras folder on the installation CD. In addition, custom presets can be created by you or your print service provider and be loaded, saved, or copied into the common Settings folder. You can double-click a preset fi le to load it into the correct common settings location.

The common settings folder locations are in Windows,®<default drive>\Documents and Settings\All Users\Documents\Adobe PDF\Settings or in (Mac OS®): \Library\Application Support\Adobe PDF\Settings

Tip: If you’re still not sure which preset to use and your fi le is destined for print, the safest practice is to choose Press Quality. This option contains the maxi-mum amount of content your printer could need.

PDF Presets


Consistent on-scree n viewing of colors across components

View consistent RGB and spot colors by default. Also, set a preference in InDesign or Illustrator to view blacks accurately on-screen.

Exchangeable color swatches among components

Defi ne color swatches using InDesign, Illustrator, Photoshop, or GoLive, and then exchange those swatches across components. For how-to information on saving swatches for exchange, see Help.

Safe new CMYK workfl ow

Automatically preserve CMYK values throughout your workfl ow. Take advantage of immediate benefi ts, such as the ability to accurately soft-proof documents on-screen using built-in controls in InDesign and other Suite components.

Consistent color output

Because Color Management is on in all Adobe Creative Suite compo-nents and color settings have been synchronized in Adobe Bridge, color conversion and output will be managed properly.

RGB colors are managed for the specifi ed output, and spot colors display and output properly. Objects set to be 100% black (K) are output as true black only—especially important for text.

CMYK values in your placed content are preserved to eliminate unwanted conversions or re-separation of that content upon output.

These color consistency features—paired with the Separations preview, Ink Manager, Overprint preview and color conversion features in InDesign CS2 and Acrobat 7.0 Professional—give you complete control over consistent color display and output, even through any necessary conversions.

Tips for successful color workfl ow

• Synchronize Color Settings in Bridge at the start of the project.

• Keep Color Management on in all Suite components.

• Exchange color swatches across components to maintain consistency on projects.

• Turn Overprint Preview on in Illustrator, InDesign, and Acrobat when previewing the fi nal fi le.

A signifi cant feature in Adobe Creative Suite 2 is simplifi ed, consistent handling of color

display and settings. These new fea-tures manage color for you, at each stage in your process, allowing you to focus on your creative work. Here are the new features and how they fi t into a color-managed workfl ow.

Color consistency

Synchronized Unsynchronized

Central management of color settings via Adobe Bridge

Synchronize consistent color settings for all of the components in the Suite from one central management point in Adobe Bridge.

Note: Color Management is now on in all

Adobe Creative Suite CS2 components.

Learn more

For more information, see Color Workfl ows

for Adobe Creative Suite CS2, available on

Adobe Studio at http://studio.adobe.com

Overview 27

Spot-color logo from Illustrator copied and pasted into InDesign. Spot colors preview and print consistently, and auto-matically appear in Swatches palette.

Black text and hairline rules preview and print as one-color.

Spot-color duotone from Photoshop placed in InDesign. Spot color is retained and appears in InDesign Swatches palette for use on other page elements. Duotone separates and prints as two colors.

CMYK photo from Photoshop placed in InDesign. CMYK color values are retained during separation and printing of magazine pages.

Appearance of Black preferences in Illustrator and InDesign let you control display and output of one-color black and two-to-four-color black (rich black).

Exchangeable color swatches across Adobe Creative Suite CS2 components


Adobe Stock Photos service

Adobe Stock Photos is a new royalty-free stock photogra-phy service available through

Adobe Bridge. Adobe has partnered with leading providers to bring you more than 230,000 high-quality, royalty-free images right at your fi ngertips.

Adobe Stock Photos is easy to fi nd in Adobe Bridge using the Favorites pane. With Adobe Stock Photos, you won’t have to interrupt your design process to hunt down quality photos. Instead, you can use powerful search capabilities to browse and download royalty-free, unwatermarked comps directly into your Illustrator CS2 and InDesign CS2 art. This gives you the fl exibility to try out diff erent images before you pick the perfect candidate. You can work with the comps until you make your fi nal decision, at which point you can purchase and download a high-resolution photo, without ever leaving the Adobe Creative Suite CS2 component.

Comps are not licensed for produc-tion, but you can use them in mock-ups or other preliminary work. Because comps are low-resolution, they’re not suitable for printing or publishing.

Metadata is stored with all images downloaded through Adobe Stock Photos service, and

is read by Photoshop, InDesign, Illustrator, and GoLive. Metadata is detailed information about the stock image— such as image ID, purchase ID, order ID, provider, price, resolution, size, and so on.—and can be viewed through the Links palette, fi le info, or Adobe Bridge. You will no longer need to remember the fi le name, search criteria, price, and so on, of numerous stock images used in your layouts.

Metadata also allows you to track comp images still present in a document when you are preparing it for print. For example, running the Prefl ight command on an InDesign document that contains a comp image will produce a warning that the low-resolution comp image is still in place (and not a purchased, high-resolution version.)

Adobe Stock Photos reduces the number of steps to fi nd, try, and purchase stock images.

• Keyword Search allows searching across multiple stock libraries simultaneously.

• Advanced Search allows you to narrow your search criteria by specifying the types of images, the provider, and orientation of the image.

• A Previous Searches folder saves the results of search activities.

• Double-clicking a thumbnail image returned from Search results initiates automatic downloading of comps and immediate editing in Photoshop.

• Integrated shopping experience allows purchasing from multiple stock libraries in a single transaction.

• Binding of metadata (XMP) enables you to purchase and download high-resolution images even after they have been cropped, edited, renamed, and placed in a layout.

• A special icon in the InDesign Links palette and Prefl ight document command in InDesign easily identifi es comp images placed in documents, so that they won’t be mistaken for high-resolution images.

• Standard, worldwide license agreement across all images eases the burden of managing usage rights.

Adobe Stock Photos service is at your fi ngertips whenever you need a specifi c image or just inspiration. Click the Favorites panel in Adobe Bridge and select Adobe Stock Photos to get going. Then click the Overview button to learn more about how the service works, or start searching. For more information see Help in Adobe Bridge.

Overview 29

Click on Adobe Stock Photos in the Favorites pane of Adobe Bridge.

Download unwatermarked comps to try out in your layouts and let Adobe Stock Photos track information about the images for you.

A special icon in the Links palette in InDesign and Illustrator identifi es image comps.


Creating a managed project with Version Cue CS2

A managed project is one that has been set up to utilize the consistency, workfl ow, and

fi le-management features available in Adobe Creative Suite 2. This section describes the benefi ts of a managed project, along with simple steps to get you started.

Versions and alternates

A Version is an historical snapshot of a document that is captured at a key stage or turning point in a design. Versions are not individual fi les—they are versions of the same fi le—making them an effi cient way to explore infi nite design solutions without creating numerous fi les. Most designs go through many iterations, which must be kept handy for review, presentation, or production purposes.

Typically a client or art director will require that several concepts be developed at the same time. An alternate is an alternative choice of content, be it a design layout, an illustration or photo, or even text that is developed in parallel and kept in play during the design process.

Tracking versions and alternates of designs can be an error-prone and time-consuming part of any workfl ow. Fortunately, there is a solution to the chaos of long, cryptic fi le names and hunt through dozens of fi les in multiple directories.

Version Cue CS2 is an integrated component of Adobe Creative Suite that simplifi es some key activities that are an everyday part of the design process. Version Cue tracks historical versions of fi les as well as

alternates , and simplifi es the need to devise a naming convention to save iterations of a design. Version Cue is fully integrated with Adobe Bridge, as well as with the Save, Save As, Import, Export, and Place dialogs boxes in InDesign, Illustrator, and Photoshop. It is through these access points that you can take advantage of Version Cue features.

Version Cue is a transparent yet powerful production tool within Adobe Creative Suite components.

Once you create a project and add fi les to it, all you need remember to do is use the Save a Version command, along with a few descrip-tive words as a version comment, each time you want to record a version of your design. After you create several versions of a fi le, you can use Adobe Bridge to view thumbnails of all versions along with comments and dates for each, and you can then access, manage, or delete the versions as required.

Version Cue is a productivity feature for individuals as well as workgroups on a local network. In a workgroup setting, Version Cue shares fi le status as well as the fi les themselves. You know when a fi le is in use by another person, and who that person is. Files are protected from being accidentally edited by more than one person concurrently.

Versions and alternates of the same fi le viewed in BridgeVersions and alternates of the same fi le viewed in Bridge

Overview 31

Version Cue CS2 is installed ready to go by default in Adobe Creative Suite 2 components. The exception is Acrobat, which requires it be turned on manually in its General preference panel. Before the Save a Version option becomes available in any Adobe Creative Suite component, you need to set up a Version Cue project.

Once the project is created and the fi les stored within it, you can get busy with your creative work. The process is easy; just follow these simple steps.

1. Create a Version Cue project.The fi rst thing you’ll do is create a Version Cue project, which you’ll use to organize related fi les. In Adobe Bridge, choose Tools > Version Cue > New Project. Name the project, add any comments you want to about the project, and click OK. To see the folder, click on Version Cue under the Favorites tab in Adobe Bridge.

You may have a design in progress when you realize you want to start saving versions of it. You can create a Version Cue project from within an Adobe Creative Suite component. Using InDesign, Illustrator, or Photoshop, choose File > Open, click Use Adobe Dialog, and then choose Create New Project from the Tools menu.

2. Add assets to your project.Use Adobe Bridge to add existing fi les to your project from a central location without having to open them. Just drag the fi les related to the project into the Version Cue project folder. These fi les are automatically synchronized as fi rst versions.

3. Save versions and alternates.Once you’ve created a project, you can save versions using the Save a Version command, or choose to associate one fi le with another as an alternate in any Adobe Creative Suite CS2 component, as well as Adobe Bridge.

To add an open fi le from your hard drive to a Version Cue project from within an Adobe Creative Suite

Setting up a project

New Version Cue project (above) and Adobe Dialog (left)

component, just choose File > Save As, click Use Adobe Dialog, and open the appropriate Version Cue project. Then, enter comments for this version of the fi le into the Version Comments text box, enter a fi le name, and click Save. Once the fi rst version has been saved, choose File > Save a Version for all future versions.

Learn more

To learn more about Version Cue features,

including workspaces and the Advanced

Administration utility, see Version Cue topics

in Help for Illustrator, InDesign, GoLive, or

Photoshop, or in the Version Cue Help PDF

fi le on the Adobe Creative Suite 2 CD.

PR

O

J E C T

O

J E C

Our fi rst project is a CD cover and booklet that we designed for a fi ctitious

music label, Substrate Records. We created two cover designs, one for the

album and one for the CD single. Using Photoshop and Illustrator to

create artwork, Adobe Bridge to view and manage assets, and Acrobat to

send out a PDF review, we’ll show you some of the great new integration

features and time-saving techniques available for an image-editing and

print design workfl ow.

Highlighted features:• Asset viewing and organization (Adobe Bridge)

• Camera Raw (Adobe Bridge)

• Smart Objects (Illustrator/Photoshop)

• Multilayer select (Photoshop)

• Versions and alternates (Version Cue)

• Vanishing Point and Warp (Photoshop)

• Email based-PDF review (Acrobat)

• Live Trace (Illustrator)

• Live Paint (Illustrator)

• Print output (Illustrator/Acrobat)

Creating a CD Cover

1

32 Adobe Creative Suite 2 | DesignDesign Guide

Creating a CD Cover Creating a CD Cover Creating a CD Cover 33

Organizing project assets

We began this project by organizing all of our creative assets in Adobe Bridge. Two designs were developed for this project—one for the CD album and another for the CD single. Dozens of digital photographs in Camera Raw format had been taken of the DJ artist. We collected these together with stock photos, illustrations, logos, templates, and text fi les that would be used on the covers. To keep everything organized, we created a new folder called Techton Flu, the name of the music artist, and moved over all our assets into the folder.

Adobe Bridge gives you much greater control over viewing and organizing project fi les than a standard fi le browser. It’s also intuitive and fun. We’ll show you lots of tips for getting the most out of Adobe Bridge as we work through the projects in this book.

Before we began editing fi les, we made sure that color settings were synchro-nized across all Adobe Creative Suite components. From Adobe Bridge, we chose Edit > Suite Color Settings. For this project, we chose North America General Purpose 2. Once our basic setup was complete, we could move on with the creative work.

Assets organized in Adobe Bridge fi le browserSynchronized Suite Color Settings

Note: A camera raw fi le contains unprocessed

“pure” picture data from a digital camera’s

image sensor, without any in-camera process-

ing. Think of camera raw fi les as a photo

negative. You can reprocess the fi le at any

time to achieve the results you want. See

“Editing images in Camera Raw” on page 36

for more information.


Images viewed and rated using full-screen Slide Show feature in Adobe Bridge

Tip: To invoke the Slide Show feature in

Adobe Bridge, select the fi les you want to

view and press or Ctrl/Command+L.

To numerically rate images or assign color

labels while viewing images in Slide Show,

use the keyboard shortcuts listed in the

Label menu. To exit the slide show, press

the Esc key.

Images sorted by rating and color code in Adobe Bridge Details view

Tip: In Camera Raw, you can preview the

eff ect of an adjustment on multiple images

by selecting the thumbnails in the left

column. You can also apply edits like Rotate,

Crop, or Straighten.

Images viewed and rated using full-screen Slide Show feature in Adobe Bridge

Batch-editing raw images directly in Adobe Bridge using Camera Raw

Rating and correcting images in Adobe Bridge

Our fi rst step was to look at the images from our model shoot and choose the ones we wanted to use. We used the Slide Show feature in Adobe Bridge to review the images so we could see the photos at full-screen size, and rate and fl ag our favorites without having to open each one up in Photoshop. Th e Label menu in Adobe Bridge contains options for numerically rating images and assigning colored labels. We changed the view in Adobe Bridge back to Th umbnails view and sorted the images by the ratings we had assigned during the slide show. All images with a low rating were fi ltered from view by choosing a View fi lter in Adobe Bridge.

We selected the top picks and edited them as a group in Adobe Camera Raw (Ctrl/Command+R.) Because they were all shot under the same lighting conditions and camera settings, we were able to adjust contrast and color on all images at one time. Adjustments made in Camera Raw are applied to all selected images. For more information on batch-editing raw images, see page 36 for Bruce Fraser’s special topic, “Editing Images in Camera Raw.”

Making corrections to the photos early in our workfl ow ensured consistency across all our CD cover designs. We could use the images in any Adobe Creative Suite component—knowing they had all been adjusted using the same values.

Creating a CD Cover 35

Step 1

Step 2

Step 3

Editing images in Camera Raw

With Adobe Camera Raw 3.0, you’re no longer limited to editing images one at a time. Instead, you can select multiple images in Bridge and load them all into Adobe Camera Raw for editing. Th e Camera Raw plug-in is hosted by Adobe Bridge, so you can continue to work in Photoshop while Camera Raw processes your images. Camera Raw’s new Auto default settings provide an excellent starting point for each image, but you can quickly and easily fi ne-tune them to get the best from your raw images.

When you make edits in Camera Raw, you aren’t editing pixels as you would in Photoshop. Instead, you’re tailoring the conversion from the raw fi le to a color image, allowing you to do things that you simply can’t do aft er the fact in Photoshop. Th e work you do in Camera Raw lets you get the best quality from your raw images, and leaves you less work to do in Photoshop.

Editing an image in Camera raw format

Step 1: Select the thumbnails of the raw images you wish to edit in Bridge. You

can be especially productive by choosing a series of images that need similar edits.

Shift-click to create a contiguous selection, or Ctrl/Command-click to select discon-

tiguous thumbnails. Then choose File > Open in Camera Raw (Ctrl/Command+R).

Step 2: Now you’re ready to edit the images. Start with the white balance controls:

Temperature controls the blue/yellow balance, Tint controls the magenta-green

balance. For accurate white balance, you can click the white balance tool on a light-

gray or diff use white area in the image, but for more creative control, use the sliders.

In this case, I warmed the images a little by increasing the Temperature value.

Step 3: The four tone controls, Exposure, Shadows, Brightness, and Contrast, let you

shape the overall tonality of the image. Exposure and Shadows set the white and

black points, respectively, Brightness adjusts the midtone, and Contrast increases

contrast around the midtone set by Brightness. Together, the four controls let you

apply a fi ve-point curve to the image to shape the overall tonality.

Special Topic: This topic is contributed

by Bruce Fraser, a San Francisco-based

writer, teacher and consultant. Fraser is

author of Real World Camera Raw with

Adobe Photoshop CS and co-author of the

Real World Photoshop and Real World

Color Management series. For information Color Management series. For information Color Management

on books from Adobe Press, visit

http://www.adobepress.com

S P E C I A L T O P I C


Step 5

Start with Exposure. You can check for highlight clipping by holding down the

Alt/Option key as you move the slider. Then do the same for Shadows—the clipping

display works here too. Then adjust the Brightness and Contrast sliders to produce

the overall tonality you want.

In this case, I wanted to hold more detail in the skies and brighten the foreground,

so I reduced the Exposure and Shadows values from their defaults, and increased

the Brightness and Contrast.

Step 4: Fine-tune the tonality with the Curve tab in Camera Raw. To fi nd where on

the curve a point in the image lies, hold down the Ctrl/Command key as you mouse

over the image—a small white circle appears on the curve, indicating the values un-

der the cursor. To place a point on the curve, Ctrl/Command-click. You can move the

selected curve point either by dragging or by using the Up, Down, Left, and Right

Arrow keys.

The curve works best as a fi ne-tuning tool, because it operates on the results of the

adjustments you make in the Adjust tab. You’ll obtain smoother gradations, with less

risk of posterization, if you use the controls in the Adjust tab to do the initial tonal

shaping than if you try to do everything using the Curve tab.

Step 5: Apply the edits to the other images. Click Select All, and then click

Synchronize. The Synchronize dialog box lets you choose which settings to apply to

the other images—if you want to skip the dialog box and apply all the settings, hold

down Alt/Option when you click the Synchronize button. Camera Raw then updates

the thumbnails to refl ect the new settings for the other images, and writes the new

settings to the Camera Raw database, or to XMP sidecar fi les in the same folder as

the images, depending on the settings you’ve chosen in Camera Raw preferences.

These settings will be used whenever you open the images in the future.

Once you’ve applied the settings, Camera Raw off ers you several choices for

workfl ow fl exibility. You can click Done to return to Bridge, click Open to open the

images in Photoshop, or click Save to save the raw images in the DNG format, which

includes the Camera Raw settings and hence does not require XMP sidecar fi les.

Step 4



Modifying sunfl ower image Illustrator logo added as Smart Object Smart Object scaled up in Photoshop

Creating the CD album cover

Our client wanted us to develop two designs for the covers—one using the portrait of the artist—and the other using the artist’s trademark image of a sunfl ower. We collected a bunch of sunfl ower images using Adobe Stock Photos service (see page 28 for an overview) and chose our favorite.

To create the background image for this CD cover, we opened the sunfl ower image in Photoshop and resized it to our template specs. To create the duotone look of the sunfl ower, we converted the original RGB image to Grayscale, then to a Quadtone, and then back to RGB so that additional color elements could be added.

Th e music artist’s logo, an intricate vector drawing created in Illustrator, was pasted in as a Smart Object—a new feature in Photoshop that allowed us to paste vector artwork from Illustrator into Photoshop, and then apply transformations and eff ects without losing image quality. Th e original vector logo was too small for the cover design. We used the Transform tool (Ctrl/Command+T) to scale the logo up to fi ll the center of the sunfl ower. Because it was a Smart Object, the logo scaled up beautifully, maintaining its crisp vector detail.

On the next page, we’ll explain how to edit the Smart Object in Illustrator.

At this point, we were ready to save our fi rst version of the CD cover image, we chose File > Save As and clicked Use Adobe Dialog. We selected Version Cue in the left column, and then chose the New Project command in the Tools menu to create a new project named Techton Flu. We then named the fi le (all subsequent versions will be based on this name), added a version comment, “blue quadtone with logo,” and clicked Save.

Tip: To save a version, you must fi rst create a

Version Cue project to save it to. This can be

done through the Adobe Save As dialog box,

or through Adobe Bridge. For more informa-

tion, see “Creating a managed project with

Adobe Version Cue CS2,” on page 30.

New feature: A Smart Object can be a vector

or raster image. A Photoshop layer can also

be turned into a Smart Object, allowing you

to perform nondestructive transformations

of embedded vector and pixel data. Multiple

instances of Smart Objects (such as a logo)

allow you to easily edit and update all

instances at once.

New feature: Customizable menus in

Photoshop allow you to highlight new or

commonly used menu items, making it easy

to locate commands for specifi c workfl ows.

For more information, see Photoshop Help.


Editing Smart Objects

In the last section, we talked about transforming Smart Objects in Photoshop without losing image quality. But what if the client suddenly decides that the logo the client thought was fi nal could actually use some work—and you’ve already spent days integrating the logo into your Photoshop layout?

With Smart Objects, it’s not a problem. Smart Objects can be edited in Photoshop or Illustrator. In this case, the client wanted to simplify the ornate detail around the edges of the logo—a job for Illustrator.

Here’s how we did it, without losing the work we had done in Photoshop:

Note: You can copy and paste or place

artwork from Illustrator into Photoshop.

Pasting artwork displays the Paste dialog

box with options to paste as paths, pixels, or

Smart Object. Placing artwork automatically

turns it into a Smart Object. Make sure that

the Illustrator fi le has been saved with the

PDF compatible option checked (the default).

Editing a Smart Object

Step 1: In Photoshop, double-click the Smart Object layer in the Layers palette, or

choose Layer > Smart Objects > Edit Contents. Photoshop generates a temporary

copy of the object that opens in Illustrator.

Step 2: Edit the artwork in Illustrator and click Save.

Changes are saved to the Smart Object, and automatically updated in Photoshop.

Step 1 Step 2 ResultResultStep 2


New Adobe Bridge soft ware and Photoshop’s Smart Objects can radically improve your workfl ow. In the following example, we’ll produce a number of images for a complex brochure while building in a level of versatility that will make it surprisingly easy to make changes without having to rework the layout.

Before I began to create the layout, I fi rst wanted to send out images for my client’s approval. To do that, I used the new Slide Show feature in Bridge and its simple keyboard shortcuts to rate each image on a one-to fi ve-star system. Th en to cull only the best ones, I chose to view just the images that received four or more stars. Next, I used the new Image Processor automation feature to quickly resize and save all the images in JPEG fi le format. Finally, I dragged the newly created JPEG images from the Bridge window to my email program and sent them off to my client for approval.

While I was waiting for the client’s feedback, I created a new Photoshop docu-ment and started to build a complex image that took maximum advantage of Photoshop’s new Smart Objects feature. Smart Objects allows you to create a single instance of an image element that is used in multiple areas of the layout. Any changes you make to the original object are refl ected in the rest of the layout, making it wonderfully easy to make alterations.

Since I was creating the layout before I knew which images the client would choose for the project, I placed Camera Raw fi les as Smart Objects in the layout. Th at would allow me to easily replace the images while retaining any transformations that had been applied to the images within Photoshop.

Once I received client approval, I replaced each of the placeholder images with the client’s selections. Since Smart Objects were used, the replacement images were automatically scaled and rotated, just as I had done with each of the original placeholder images. Updating all the images in the document took less than fi ve minutes to complete since no layout changes were required to accommodate the new images. Next, I saved a low-resolution PDF of the updated layout and emailed it to the client to give them an opportunity to review the layout and respond with any changes they might want.

While I waited for the client’s response, I edited the original embedded raw Smart Objects to fi ne-tune the color, contrast, and sharpness, and then updated the images in the layout. Since the Smart Objects contained all the Camera Raw data from the original images, I was able to re-edit them in the Camera Raw dialog box without having to remember where the original image fi les were stored.

Effi cient workfl ow with Bridge and Smart Objects

Image Processor in Adobe Bridge

Updated layout with client-approved images

Initial layout with placeholder imagesInitial layout with placeholder images



Result of experimenting with Photoshop’s new Warp feature to make the photos appear more 3D

In the end, the client chose the non-3D version, which was easy to retrieve because it was saved as a version within Version Cue.

When his client received the PDF fi le, he used Adobe Acrobat to add comments with the desired changes. Aft er I received the comment-laden PDF fi le, I imported the comments into the high-resolution Photoshop fi le and made fi nal adjustments to the layout.

Aft er the client saw the initial layout, he requested that the photos and their frames not look quite as fl at as the originals. I knew that Photoshop’s new warping capability could be used to distort the shape of the images, but I was concerned that I might permanently change the images. As this project grew in complexity, I started to use more and more Smart Objects in order to maintain an easy editing path.

Smart Objects can be nested, one inside another, while still retaining full editing ability of each object. In this instance, the original Camera Raw fi les were placed as Smart Objects so that they could easily be adjusted or replaced without having to re-work the layout. Th en those images were included in a more complex Smart Object that included both the Camera Raw image along with a frame layer, shadow layer, and a vector mask that limited where the photo appeared. Th ose layers were then grouped into a second Smart Object which was distorted using the Transform and warping features to make them look as if they had been bent.

When I needed to change one of the Camera Raw images, I simply clicked the Smart Object that included that image, I chose Layer > Smart Objects > Edit Contents, which presented me with a new document that contained the layers that made up the Smart Object. I then clicked on the Camera Raw Smart Object that was within that document and chose Layer > Smart Objects > Replace Contents to choose a diff erent image. When I saved and closed both the Camera Raw image and the more complex Smart Object, the main layout updated to refl ect the newly changed content. Th at made the changes almost instantaneous and literally saved hours of editing that would have been required if a previous version of Photoshop was used to create the image.

Since there were multiple rounds of client changes and ever-so-many tweaks that could not easily be undone, each time an alteration was made to the image, a new version was saved using Version Cue. Th is made it easy to get back to any previous version of the image if a mistake was made (or if the client simply couldn’t make up his mind), and came in handy when the client ultimately decided he preferred the fl at version of the images over the more 3D version.

Special Topic: This topic is contributed by

Ben Willmore, author of Adobe Photoshop CS2

Studio Techniques, Up to Speed: Photoshop CS2,

and co-author of How to Wow: Photoshop for

Photography. For information on books from

Adobe Press, visit http://www.adobepress.com.



Selecting multiple layers

Once the logo was in place, we added numerous illustrations and type objects to the artwork, resulting in dozens of layers. We wanted to keep the illustra-tions and type on separate layers, but also apply edits to them as a group.

Photoshop now lets you visually select objects on diff erent layers by clicking or drag-selecting directly in your artwork. Th is intuitive approach allows you to select objects without having to fi gure out which layer they are on. We wanted to select and align several of the type layers, so we selected the Move tool, checked the Auto-Select Layer option in the Control palette, and then dragged a marquee selection around the text objects in our artwork. Th e layers containing the type objects were automatically selected in the Layers palette. We then chose Layer > Align > Left Edges and Layer > Distribute > Vertical Centers.

With the Auto-Select Layer option checked, a single click with the Move tool in the image selects topmost layer containing pixels in the area clicked.

Th ese features let you spend more time on your artwork and less time in the Layers palette. Another visual way of selecting is to use the Move tool and Right-click (Win) or Control-click (Mac OS) in the image. A pop-up menu appears showing the names of layers that contain pixels in that location. Choose a layer name to select the layer. Th is clever selection technique allowed us to isolate the purple swoosh shape—which overlapped many other elements in the image—and change its color to blue.

New Feature: Photoshop and InDesign now

display a font sample list in the Font menu,

just like Illustrator. You can turn the option

off or on and control the font sample size in

preferences.

Tip: To select multiple layers, press

Ctrl/Command+Shift and click on the layers in

the Layers palette. To deselect layers, choose

Select > Deselect Layers.

Drag-selecting objects in artwork Aligning and distributing objects on multiple layers

Clicking on artwork and choosing layer from pop-up menu


SUBSTRATE��

��

��

Using consistent colors

In the course of creating the CD covers for our client, we used Photoshop and Illustrator, and then later leverage the artwork in InDesign and GoLive for the record company magazine and website. It was critical that color settings be consistent at each stage. As we mentioned at the beginning of the project, color settings can now be set and synchronized for all Adobe Creative Suite 2 components through Adobe Bridge.

Another new feature is shared color swatches across Photoshop, Illustrator, and InDesign. Once our client chose a design direction, we set up a custom set of color swatches that everyone on our design team could use. Th is promotes not only visual consistency across all design elements, but ensures that all colors contain the same custom ink mixes of process or spot color.

Th e print budget for the covers included four-color process plus one spot color. Since we had already moved some of our artwork into Illustrator, we created the swatches there. To the default set of swatches we added the spot color, which we named Techton Yellow-PMS 124 C, and a short set of process colors from the approved design. We then chose Save Swatches for Exchange from the Swatches palette menu, named the fi le Techton.ase, and clicked Save. Th e .ase fi le is saved to the Presets > Swatches folder of the Adobe Creative Suite component where it originated, in this case, Illustrator.

To import the swatches to Photoshop or InDesign, choose Load or Open Swatches from the Swatches palette menu, locate the .ase fi le in Presets > Swatches where it was saved, and click Load/Open. To share the swatches with our team, we copied the .ase fi le to our server where everyone could access a copy. For team members working remotely, we emailed the swatches fi le.

Learn more

For more information on color consistency,

see the “Color Workfl ows for Adobe Creative

Suite 2” available on Adobe Studio at

studio.adobe.com.

New feature: CMYK values are now

preserved by default across Adobe Creative

Suite 2 components. The CMYK color you

specify in an Illustrator or Photoshop image

will retain the same number values when

placed in InDesign, exported as PDF, and

printed.

New feature: Illustrator and InDesign now

have an Appearance of Black preference

that allows you to choose how one-color

and two-to four- color blacks (rich blacks)

preview and print. This allows you to

view accurate blacks on-screen, which is

especially important for type. Photoshop

previews accurate blacks by default.

Illustrator Photoshop InDesignInDesign

��

��


Working with versions and alternates

In addition to the CD cover image containing the sunfl ower, additional pages were created for the six-page book. Many versions of each page were devel-oped for our client before a fi nal was chosen. At each key stage of our design, we saved a version of our artwork. When the client asked us to explore an alternate concept for the CD single, we saved this as an alternate. Th is way the design was tracked in parallel to the album design, making it easy to locate, review, and manage the related designs.

Once you’ve saved versions of your design, you’ll appreciate how easy it is to view them as a group or locate the one you want. In Adobe Bridge, we opened the Techton Flu project folder and choose View > As Versions and Alternates. We then clicked on the Versions View button in the upper right corner of the window. Th e versions we saved were displayed as a group, along with the version comments we added beneath them. Th is made it easy to view the progression and variations in the design process.

Learn more

For more information on versions and

alternates, see “Creating a managed project

in Version Cue CS2” on page 30.

Versions of CD cover viewed in Adobe Bridge (above), and in Adobe Dialog (right) with Thumbnails view chosen


Vanishing Point window

Using Vanishing Point

Th e new Vanishing Point feature in Photoshop allows you to paste, clone, or paint images that automatically match the perspective planes in an image. We used this feature on the inside panel of the CD book to lengthen the height of the building.

We started by opening the photograph of the building in Photoshop and choosing Filter > Vanishing Point. We used the Grid tool to draw a 4-point grid over the image. We then selected the upper section of the building, held down the Alt/Option key, and dragged the selection upward to extend the image, while automatically following the perspective in the grid.

Vanishing Point is equally handy for removing unwanted elements from an image. Our original image had a power line that ran across the image. We were able to erase it using the Clone tool and Vanishing Point.

Before and after using Vanishing Point to expand building (and remove power line)


Warping images

Th e Warp command in Photoshop lets you create dimensional eff ects by wrapping an image around any shape, or stretching, curling, and bending an image. In this panel of the CD booklet, we selected the image on the layer, then pressed Ctrl/Command+T to invoke the Transform options in the Control palette. We clicked the Warp button in the Control Palette (you can also choose Image > Transform > Warp), and then we selected the control points of the selection boundary and dragged them toward the opposite side of the artwork, to create the eff ect of a sheet of paper being curled back at the edges to reveal the artwork beneath.

Th e Warp tool is also a great tool for mocking up product shots and pack-aging. It allowed us to take some of the fi nal imagery from the CD covers and wrap them around objects, such as the cup shown below, to simulate how additional promotional pieces would look.

Dragging a control point After warping

Warp button in Control palette

Image warp used to wrap image around object shape


Six-page CD booklet in Illustrator

Constructing the fi nal layout in Illustrator

Four of the six panels for the CD book originated in Photoshop. Once we had these images to a stage we liked, we created an Illustrator template with guides and trim marks, and then placed the layered Photoshop fi les into our layout. When placing the fi les, we checked the Link option in the Place dialog so that if we needed to edit the original images in Photoshop, they would automati-cally be updated in Illustrator. All six panels fi t on a Tabloid size artboard in Landscape orientation.

We drew the ornamental shapes and dashed-line bubbles in Illustrator, and then added the logos, text for the song list, and legal copy. When painting objects and text, we made sure that we were using the same color swatches created earlier in the project, so that colors would be consistent on all panels. To load custom swatches into Illustrator, choose Open Swatch Library from the Swatches palette menu, select Other Library from the bottom of the list, locate the .ase (shared swatches format) fi le you saved, and click Open.


Sending the CD booklet out for review

At this point, our CD booklet was ready for its fi rst review. In Illustrator, we chose File > Save As and selected Adobe PDF as the format. Adobe Creative Suite 2 ships with PDF presets that make it easy to choose settings for common output needs, and know that you are sending the most effi cient and consistent PDF fi les possible. We chose the Smallest File Size preset and clicked Save PDF. Because the Smallest File Size preset converts images to RGB, it wouldn’t be suitable for proofs or printing—but it is the perfect choice for an email-based review.

We sent this comp via email to both internal and client reviewers, some of which had full versions of Acrobat 6 or later, and some which had the free Adobe Reader 7. Acrobat 7.0 Professional now has a feature that allows Adobe Reader 7 users to participate in reviews and comment on PDF fi les.

To initiate and track the review directly from Acrobat, we chose File > Send for Review > Send by Email for Review. Simple on-screen instructions will guide you through steps to choose a PDF, add reviewers’ email addresses, and compose an email message. Reviewers will receive instructions with their message on how to comment directly on the PDF and email comments back to you in an .fdf fi le—a fi le that contains comments only and thus is compact in size. Double-click the .fdf fi le to import comments automatically into your original PDF.

Th e result below shows reviewers’ comments integrated in a single PDF fi le.

Tip: The enhanced Tracker feature in Acrobat

keeps a list of which reviewers have returned

comments and provides a simple interface

for reminding reviewers about deadlines. For

information about Tracker, see Acrobat Help.

Email-based PDF review with comments

Tip: Use the Summarize Comments feature in

Acrobat 7.0 Professional to generate a print-

able text summary of reviewers’ comments.

Note: For information on initiating an online,

browser-based, collaborative review using

Adobe Version Cue CS2, see “Sending the

magazine out for review” on page 70.


Creating artwork for the CD single

While the fi rst CD booklet was out for review, we got to work on the next component of our design project—designing a cover for the CD single release. Illustrator ships with loads of new templates for everything from bumper stickers and T-shirts to matchbox covers. We started our CD layout by choosing File > New from Template, and then browsing to Applications > Illustrator CS 2 > Cool Extras > Templates > Band > CD Booklet.ait. We clicked the Use Adobe Dialog when opening the fi le, and then clicked the View icon in the upper right corner of the dialog box and chose Th umbnails. Th is view lets us see large thumbnail previews of the templates as we browse.

Th is template is designed specifi cally for CD cover artwork and contains four panels in one Illustrator document. You can either cut the existing sample art from the template, or use it for reference. You can also start with a blank CD Booklet template.

We’ll start by showing you the fi nished artwork and then back up and describe how individual elements were created using some of the amazing new features in Illustrator.

Tip: Preview all the great templates that

ship with Illustrator (or other Adobe Creative

Suite components)—without opening a

single fi le—by browsing in Adobe Bridge

to Applications > Adobe Illustrator CS2 >

Cool Extras > Templates.

Finished artwork for CD single


Step 1 Step 2 Step 3

Using Live Trace

To create the artwork of the girl on the cover and sunfl ower on the inside panel, we used a new feature in Illustrator CS2 called Live Trace. Live Trace allows you to take a raster image and convert it into a vector object. For the cover image, we started with a hand-drawn sketch of the DJ. Th e sketch was scanned and opened (it can also be placed) in Illustrator. Aft er selecting the image, the Live Trace button and options appear in the Control palette. We chose the Comic Art preset, and Illustrator traced the image. We then converted the Live Trace object to a Live Paint object and painted it.

We created the vector art for the sunfl ower in a similar way, although this image originated as a grayscale photograph, and we applied custom colors as the artwork was traced. Th e following steps describe how to use Live Trace.

Tracing and painting in three steps

Step 1: We started with a sunfl ower photograph opened, and selected, in Illustrator. We then opened a color swatches palette that contained the colors we wanted to

use in the fi nal sunfl ower art.

Step 2: The Live Trace button and options appear in the Control palette. We chose Tracing Options from the pop-up menu next to the Trace button. For Mode we chose Color, and for palette we chose 7-color trace, the name of our swatches fi le. With the Preview option checked, we could experiment with the Adjustment and Trace settings until we saw a result we liked; we then clicked Trace.

Step 3: We then used the Live Paint bucket tool to paint areas of the vector artwork in our CD cover design. See the page 51 for more information about Live Paint.


Using Live Paint

Th e new Live Paint feature in Illustrator lets you paint vector graphics intui-tively by automatically detecting and correcting gaps that would previously have aff ected how fi lls and strokes were applied. In the past you had to make clever edits with path editing tools to create closed shapes. No more. Th is new method of painting is more like the way you work when painting or coloring by hand on paper.

We started by opening the vector DJ illustration we had traced using Live Trace. With the Live Trace object selected, we clicked the Live Paint button in the Control palette. (If you aren’t starting with a Live Trace object, select the Live Paint Bucket tool in the toolbox and click over your objects to convert it to a Live Paint group.) Th is allowed us to paint the shapes where paths overlap. We then selected a fl esh color in the Swatches palette and clicked over areas in the artwork we wanted to fi ll. Illustrator highlights the area to be fi lled as your cursor moves over it; no selection is necessary.

In some places, small gaps appeared in the contour drawing where paint spilled into the adjacent area. Th e lips and the stripe in the shirt were not being recognized as distinct areas. With the Live Paint object selected, we clicked the Gap Options button in the Control palette (you can also choose Object > Live Paint > Gap Options), and turned on Gap Detection. We clicked Preview to see where gaps were being closed in our artwork. Th e Small Gaps setting worked fi ne, so we clicked OK. We were then able to fi ll the lips and stripes in the shirt as distinct color fi lls.

Live Paint Bucket tool detecting and fi lling areas in Live Paint group

After adjusting gap tolerance (note lips and stripe on shirt)

Before adjusting gap tolerance

Tip: Arrange your Illustrator palettes to suit

your workfl ow and then save those palette

locations as a named workspace, which you

can activate at any time. Workspaces help you

control on-screen clutter and streamline the

tools available to you for diff erent tasks.

Paths in Live Paint groups can be adjusted at any time—and fi lls are updated instantly.



Creating three-dimensional elements

Th e 3D eff ects in Illustrator enable you to create 3D objects from 2D artwork. You can control the appearance of 3D objects with lighting, shading, rotation, and other properties. You can also map artwork onto each surface of a 3D object, as we’ve done with here with the CD.

Creating 3D objects

Step 1: To create a 3D object, you fi rst need a 2D shape. Here, we drew the

CD jewelcase cover by drawing its profi le with the Pen tool in Illustrator. The

cover consists of the part that holds the CD cover art and the two pieces that

make up the hinge.

Step 2: Now you’re ready to apply a 3D eff ect. Extrude the jewelcase cover and

the hinges separately by choosing Eff ect > 3D > Extrude and Bevel. In the Extrude

Depth text box, enter a number (we used 364 points) to set the depth of the

box. Check the Preview option and enter unique values for Perspective (we used

85°) and Rotation (we used –21 for x, -–8 for y, and 13 for z axes) . Because there

are two pieces, you may have to move art into position and adjust perspective and

rotation accordingly to make the pieces fi t properly.

Note: There are several ways to rotate an object in 3D space. For unconstrained

rotation, drag a track cube’s face in the 3D Extrude & Bevel Options dialog box.

The front of the object is represented by the track cube’s blue face, the top and

bottom faces are light gray, the side faces are medium gray, and the back face is

dark gray. You can also choose a preset position from the Position menu, or you

can enter a value between –180 and 180 in the text boxes for the horizontal (x),

vertical (y), and depth (z) axes.

Step 3: Now use the drawing tools in Illustrator to create the profi le for the

CD tray. Notice that the profi le of the tray is actually drawn from the base of the

form so that the art will extrude to the right.

Step 1

Step 2

Step 3



Step 4: Extrude the tray art using the same perspective from the CD cover extrusion.

In this case the perspective was set to 85°. In 3D the Extrude & Bevel Options dialog

box, we chose Plastic Shading from the Surface pop-up menu and set the shading

color to white to add highlights. We adjusted the light source by moving the small

highlight icon in the center of the Surface thumbnail preview; we then experimented

with light intensity, ambient light, highlight intensity, and so on, to achieve the best

defi nition.

By changing the surface properties of a 3D object, you can create a wide variety of

appearances, from dull and unshaded matte surfaces to glossy and highlighted

surfaces that look like plastic. You can also dramatically change the appearance of

a 3D object by adjusting its lighting. For example, you can add lights, vary the light

intensity, change the shading color, and move lights around the object.

Step 5: Combine the four pieces of art to form the entire jewelcase. At this point we

had to scale the cover slightly to make it fi t visually. The bottom hinge was selected

and sent behind the tray art to appear as if it were connected.

Step 6: For the fi nishing touch, map the CD cover art onto the jewelcase cover. Start

by dragging the vector art of the CD cover into the Symbols palette. To be able to

map 2D artwork to a 3D object, the artwork must be stored in the Symbols palette.

To map artwork onto a 3D object, click Map Art in the 3D Extrude and Bevel dialog

box. Use the Surface arrows to select the surface in your artwork you want to work

with. (A light gray color marks surfaces that are currently visible; a dark gray color

marks surfaces that are hidden by the object’s current position.) Then, choose the

artwork you want to map from the Symbol menu. You can adjust the position of the

artwork by dragging it, and you can scale the artwork by dragging a corner handle.

After you map the artwork, click OK. Click OK again to render the 3D object.

This technique is just one example of the kind of artwork you can create using

3D eff ects. For complete information on creating 3D eff ects, see Illustrator Help.

Step 4

Step 6

Step 5


Tip: Choose Window > Document Info in

Illustrator to check color mode, artboard

dimensions, fonts, spot colors, linked

images (including color mode, resolution,

dimensions), and more.

Preparing the CD booklet for output

Once we incorporated the fi nal review comments, we were ready to prepare the fi les for hand-off to our print service provider. Here is the checklist we used to proof and save our fi les.

We talked to our print service provider and asked whether they preferred native Illustrator fi les or PDF fi les. Th e provider asked that we save the fi le in PDF format using the Press Quality PDF preset. Th is format embeds all images and fonts, but leaves transparency live, that is, not fl attened.

Here is the checklist we used to proof and save our fi les.

In Illustrator:

1. Choose File > Document Color Mode, and make sure that CMYK is selected.

2. Choose View > Overprint Preview and make sure that we are looking at the best quality preview for checking detail and transparency on-screen. As authors and designers of the documents, our own visual proof is an essential step in our proofi ng workfl ow.

3. Choose Edit > Color Settings, and make sure that North American General Purpose 2 is chosen. We chose this setting at the beginning of our project through Adobe Bridge, but it’s good practice to verify the setting again at hand-off stage.

4. Print a fi nal color draft that includes printers mark to a desktop printer. We check that trim marks are accurate, and do a visual hard-copy proof of all pages.

5. Save a fi nal version of the fi le and add “fi nal to print” in version comments.

6. Choose File > Save As, select Adobe PDF as the Format, and click Save. In the Save as Adobe PDF dialog box, we select the Press Quality PDF preset. To accept the settings associated with the preset, click Save PDF.

Our next step was to open the PDF fi le in Acrobat 7.0 Professional and do a Prefl ight check on the document.


In Acrobat:

1. Open the PDF fi le in Acrobat 7.0 Professional and choose View > Toolbars > Print Production. Click Output Preview to do a visual proof of our document. In this case, we spotted artwork that used two spot colors that needed to be converted to CMYK, so we clicked Ink Manager.

2. Use the Ink Manager to Convert All Spots to Process, and click OK.

3. Choose Tools > Print Production > Prefl ight. Select and run any of the Prefl ight profi les that apply to your job. In this case, we selected List Bitmaps Below 300ppi and List non-CMYK Objects, and clicked Execute for each. Th e prefl ight reported no problems, so we could proceed with handing off the fi les.

4. Copy the PDF and Acrobat Prefl ight report together in a folder and burn them onto a CD/DVD that we deliver to our print service provider.

Learn more

For more information about PDF presets, see

“Creating Adobe PDF fi les” on pages 24-25.

For information about print workfl ow, see

“Preparing Files for Print” on page 94.

Ink Manager with Convert All Spots to Process selected

Acrobat Output Preview Acrobat Prefl ight profi les

Acrobat Print Production toolbar

TrapPresets

OutputPreview

Prefl ilght

ConvertColors

InkManager

Add Printer Marks

CropPages

Transparency Flattening

PDFOptimizer

JDF Job Defi nitions

Fix Hairlines


Highlighted features:• Project and asset management (Adobe Bridge and Version Cue)

• Snippets and Object Styles (InDesign)

• Text import, styling, and wrap (InDesign)

• Placing graphics from multipage PDFs (InDesign)

• Native fi le support and layer visibility (Photoshop, PDF, InDesign)

• Transparent eff ects (InDesign)

• Saving versions (Version Cue)

• Browser-based PDF review (InDesign/Acrobat)

• Contact sheet (Adobe Bridge/InDesign)

• Print output (InDesign/Acrobat)

Designing a MagazineIn this project, we describe how a music record label magazine was

designed and produced using InDesign CS2. Asset and project manage-

ment are key features in Creative Suite 2, and we’ll show you how to

make the most of these tools. Support for native layered Illustrator and

Photoshop fi les in InDesign let you control layer visibility without having

to resave or place new fi les. Consistent color support means you see

and print the same colors across Adobe Creative Suite components, and

enhanced PDF creation options make simple work of distributing reviews

and collecting comments. Designers and writers will enjoy new InDesign

features that make page design, text editing and styling, and quality

output more streamlined than ever.

PR

O

J E C T

O

J E C

2


Designing a Magazine 57

Organizing project assets

We began this project by organizing all of our assets for this volume of the magazine together in Adobe Bridge. Th is included InDesign templates, graphics, text fi les, schedules, a contact list for team members, a list of reviewers, color swatches for exchange (.ase fi les), fonts, and photos. Scalable previews and search features in Adobe Bridge made it easy to locate the fi les we needed without having to open them. Th e multipage PDF previewer in Adobe Bridge let us page through back issues of the magazine to locate layouts for reference, without having to open individual fi les.

Our workgroup consisted of writers, art directors, designers, and produc-tion artists who would all need access to project fi les. To keep track of who was working on which fi les, and which were the latest versions, we created a new Version Cue project called “Substrate Mag Vol. 12.” For more informa-tion, see Creating a managed a project with Version Cue CS2, on page 30.

Multipage PDF viewer in Adobe Bridge

Metadata appears when selecting, or mousing over, a document thumbnail in Adobe Bridge.

Detailed metadata—including fonts and color swatches used— is saved with InDesign fi les and can be viewed in Adobe Bridge without opening fi les.


Setting up an organized document

We organized our InDesign document so that guides, graphics, text, and language translations were on separate, named layers. Master pages were set up for each of the basic layouts in our editorial and catalog sections, and contained text and graphics placeholder frames, footers, and page numbers. Paragraph, Character and Object Styles were used throughout the document for design consistency.

InDesign magazine with master pages applied to editorial and catalog pages

Masters and pages are accessed through the Pages palette.


Dragging and dropping from Adobe Bridge

Adobe Bridge is seamlessly integrated with InDesign, allowing us to quickly locate, preview, and drag and drop images into our magazine layouts. A process that used to require hunting by fi le name through by fi le name through by dialog boxes is nowaccomplished by reducing Adobe Bridge to Compact mode, where it remains in view when working in InDesign. Information about the asset, such as image dimensions, resolution, and date can be viewed immediately by moving the cursor over the image before dragging it, without having to open it. Assets can be viewed and sorted by various criteria, or you can arrange thumbnails manually according to your own preferences. Best of all, assets can be dragged directly onto our magazine pages as linked images.

Photoshop image dragged from Adobe Bridge into InDesign

Adobe Bridge in Compact mode


Using snippets

Snippets are InDesign objects containing content and formatting that are stored in an effi cient .inds format for sharing with colleagues or simply with another InDesign document. A snippet is a subset of the document and can represent page geometries, frequently used content, and XML structure of an InDesign page object. Because they are saved in XML format, snippets contain all content and formatting information, including tags, object, and character and paragraph styles.

An example of a Snippet in this magazine is the Contributors section, which was designed by our art director and emailed to our design staff to implement in this issue. Instead of having to write down the specs of the new design, all information is stored in a snippet, streamlining both communication and production.

To create a snippet, use one of the selection tools to select an object, or set of objects, on an InDesign page and drag it to Adobe Bridge; or choose File > Export and select InDesign Snippet as the format. It may be useful to add metadata to the snippet before sending it to others. Select the snippet thumbnail in Adobe Bridge and enter information such as description, title, usage, and so on. To use a snippet, select the fi le in Adobe Bridge and drag it onto your InDesign page, or choose File > Place and double-click the Snippet fi le that uses the .inds extension. All formatting is retained and content can be edited as needed.

Tip: To export a Snippet, simply select the

graphics and text objects you want, choose

File > Export, and then choose InDesign

snippet as the format. Or, drag and drop the

selected object or objects into Adobe Bridge.

Snippet dragged from Adobe Bridge to InDesign page

Snippet duplicated and content editedSnippet metadata edited in Adobe Bridge


Using Object Styles

Object Styles let you apply consistent graphic and text styling attributes to multiple objects in your document. Attributes saved with an Object Style include graphic formatting, such as transparency, stroke and fi ll, corner eff ects, and drop shadows or feathering—as well as text and layout formatting, such as paragraph and character formats, text wrap, and anchored object options.

On the News & Events page of the magazine, a system of tabbed cards was used to highlight each section. We set up an Object Style that contained the drop shadow and fi ll and stroke color, and named the style News & Events tab. Additional cards were created by drawing rectangles to size and applying the Tab style from the Object Style palette. Later on, when the client wanted to see what the cards would look like in blue, we simply double-clicked the Tab style, changed the fi ll to blue and clicked OK. All objects using that style in the document were updated without selecting a single object.

Object Style defi ned Editing Object Style defi nition updates all instances

Object Style applied to multiple objects


Importing, styling, and editing text

Much of the copy for our magazine articles comes from writers in MS Word documents and requires stripping out text formatting and style usage; the copy is then reformatted with our own styles. InDesign CS2 streamlines this time-consuming process with new Microsoft Word Import Options and Custom Style Import features. Styles in MS Word documents can be automati-cally mapped to styles in an InDesign document as they are imported, with full control over which styles to override or retain.

Automatically mapping styles lets our designers quickly strip out overall text formatting, without losing local formatting that the writer has applied to emphasize words or concepts in the text. For writers that consistently use certain styles, the designer can automate the process even more by saving a set of options as a preset and applying those settings whenever importing.

Smart text-handling features let our editors drag and drop text from one area to another—even into a diff erent text frame. Th e Story Editor feature enables editors to open the text of a story in a separate window where they can focus on copy and not design.

New Feature: Quick Apply lets you apply

Paragraph, Character, and Object Styles with-

out ever taking your fi ngers off the keyboard.

Double-click to create an insertion point in

the text, and then press Ctrl+Enter (Win) or

Command+Return (Mac OS) to invoke Quick

Apply, and start typing the name of a style.

Press Enter/Return to apply the style.

Tip: To turn on the Drag and Drop feature

in InDesign, choose InDesign > Preferences >

Type, and check the Enable in Layout

view option.

Microsoft Word Import Options



Selecting equal values for all the boundaries of this frame doesn’t create even spacing on all sides.

The ins and outs of text wraps

A good text wrap closely follows the contour of the object being wrapped. InDesign expertly detects an object’s shape and guides text around it. But in typography, what’s mathematically correct doesn’t always look correct; so there’s no perfect one-click wrap.

Text wraps look better when the margin abutting the object is justifi ed. To make the right-hand margin justifi ed in text with a ragged-right margin, go to Preferences/Composition and choose the justifi cation option that suits the shape of your wrap.

InDesign’s Text Wrap palette (Window > Text Wrap) specifi es the distance between an object or frame and the text that wraps it. But setting these values is just the beginning.

Wrapping text around a rectangle is straightforward because the shape is simple. Your main concern is balancing the white spaces on all sides of the wrapped object.

Th e value for the distance between the top of a rectangular object and the text that runs above specifi es the distance between the object and the baseline of that line of text. (Th e baseline is the invisible line upon which characters appear to sit.) Leading—the space between lines of type—is measured from the baseline of one line to the baseline of the line preceding it. A top text wrap boundary of 0 means that the wrapped object could snuggle right up to the baseline of the text above it, leaving descending parts of letters such as g and g and g y overlapping the object. Always have some positive value for this distance—try the leading of your text.

For text below the wrapped object, the boundary you specify defi nes the minimum amount of extra leading that can appear between the bottom of the object and the baseline of the fi rst line of text below it. If the text’s leading is 12 points, and you specify a value of 0, that baseline can come no closer than 12 points from the object.

Special Topic: This topic is contributed by

James Felici, author of The Complete

Manual of Typography, a hands-on guide Manual of Typography, a hands-on guide Manual of Typography

to typography and typesetting using personal

computers. For information on books from

Adobe Press, visit http://www.adobepress.com.

Dragging the lower wrap boundary upwards allowed another line of type below the wrapped frame, but the frame still had to be nudged a bit lower to center it vertically .



Clearly, having equal values for the boundaries above and below an object doesn’t guarantee that these spaces will appear equal. Ultimately, the spaces you see around the wrapped object depend on where it sits relative to the baselines of the text around it. Th e values you set in the palette are minimums, not absolutes, so adjustments are normally needed to get the boundaries to appear equal. You have several options:

• Adjust the values in the Text Wrap palette (you can type negative values, using the hyphen as a minus sign).

• Adjust the wrap boundary using the Direct Selection tool.

• Resize the object.

• Reposition the object vertically (nudge it with the arrow keys).

Once your wrap boundaries are equalized, they’ll stay that way, unless you alter the text leading.

Wrapping curved shapes is trickier. Take, for example, a simple semicircle. Where the outline curve of the object is most vertical, the space between it and the text is most predictable. But as that curve becomes more horizontal, the space between the text and the wrapped object grows, because the width of the text wrap boundary is fattened by “slices” of the white space between the lines of text. Th is makes a circular wrap appear oval, pinched at the waistline. With undulating curves the eff ect is more subtle, but it’s still there.

To compensate, select the object and use the Direct Selection tool to manipu-late the wrap boundary just like any other path. You can add points using the Pen tool. To judge the results, print a proof—even the best screen display is a coarse approximation of a printed page.

In a semicircular wrap (fi g. A), the gap between text and shape grows as the curve becomes more horizontal. Selecting the text (fi g. B) shows that the text shape is defi ned by where the lines’ bounding boxes touch the wrap boundary. Using the Direct Selection tool to modify the boundary at the “poles” of the semicircle (fi g. C) makes spacing more consistent.

Figure A

Figure B

Figure C


Placing graphics from a PDF fi le

We had more than 100 CD covers that we needed to place on the catalog pages of the magazine. Th e cover assets were delivered to us from the agency in a single PDF fi le, with one cover on each page. We looked through the pages of the document using the built-in multipage PDF viewer in Adobe Bridge.

InDesign lets you place individual pages of a PDF fi le, making this an effi cient format for handing off a large number of fi les. Th e template pages for the catalog were already set up with graphic frames at the correct size and linked to the text as anchored objects. We chose File > Place, selected the PDF fi le containing the CD covers, and then clicked Show Import Options. We chose All Pages and clicked Open. A loaded icon with a plus sign appeared, and we moved over a graphic frame and clicked to place the artwork. To automatically size the artwork to the frame, we chose Object > Fitting > Fill Frame Proportionally.

We continued to place additional CD covers throughout the catalog. Th e icon remains loaded with the contents of each successive page in the PDF fi le. Each time we moved over a graphic object and clicked, another cover was placed.

Because the artwork was anchored to the text that described it using the Anchor Object feature, we could edit text and ensure that the graphic always fl owed with the text, even when it moved to a diff erent page.

Place PDF dialog box (above) and placeholder frames in layout

Tip: When a placed image comes in much

larger (in dimensions) than the frame holding

it, choose Object > Fitting > Centerpoint

before scaling it. This way the image stays

centered, and visible, within the frame.

Multiple images from single PDF fi le placed into layout

Before and after fi tting content to fi ll frame proportionally

Multipage PDF viewer in Adobe Bridge


Controlling layer visibility

Photo editors and artists oft en work on photos and images in parallel with page design and story development—which means a decision on the fi nal cover image isn’t made until it is placed into the layout—in the context of the masthead treatment and text. Photoshop artists create variations of the background image to be used on the cover and save them as layer comps within the Photoshop fi le. Th e layered Photoshop (or Adobe PDF) fi le is then placed into InDesign, where the visibility of layers and layer comps is controlled using Object Layer Options. No longer is it necessary to save and import individual variations of the same layered fi le, just to see how various image treatments will look within the page layout. Photoshop layer comps and InDesign Object Layer Options off er an intuitive, time-saving solution.

To view diff erent treatments of the placed background image, we selected the graphic object in InDesign and chose Object > Object Layer Options. We then clicked the eye icon (it works just like in the Layers palette) next to each layer name to show or hide the various layers, and could choose one of several layer comps saved with the image from the Layer Comp pop-up list.

Layer Comp 01 visible Layer Comp 03 visible Layer Comp 02 visible

Learn more

For more information on Photoshop

layer comps, see Photoshop Help.

New feature: Place layered Photoshop or

Adobe PDF fi les into InDesign and use

Object Layer Options to control layer

visibility as you experiment with design

options. Or, work with variations of an

image multiple times within a layout while

linking to a single layered fi le.


Adding transparent eff ects

In the magazine spread below, a number of transparent eff ects are in place. Th e photograph of the DJ contains a transparent background in Photoshop. We dropped it onto our InDesign page, selected it with the text column, and in the Text Wrap palette, clicked the Wrap Around Object Shape icon. Th e text recognizes the transparency in the image and wraps around the contour of the DJ’s arm—without the need for clipping paths or custom text wrap shapes.

We then selected the photograph and added a drop shadow by choosing Object > Drop Shadow. Because the transparent background is recognized, we got a clean shadow along the contour of the image. New Drop Shadow options let us assign spread and noise values, as well as opacity and blur.

Th e ornamental shapes were drawn in Illustrator, and pasted into InDesign. We then selected the vector paths and fi lled them with a gradient, and then used the Transparency palette to adjust the opacity and blend mode of the shapes so that they interacted with the images and text beneath. We selected the “Feast for One” text and set the blend mode to Diff erence (see inset at left ); for the ornament that overlapped the photographs in the lower right corner of the page, we set the Opacity to 35%.

New Feature: InDesign and Illustrator now

support true rich-black preview. You can trust

that the black you see on-screen refl ects the

actual color mix and not a generic repre-

sentation of black. Set Appearance of Blacks

options in preferences.

Note: OpenType fonts are supported in all

Adobe Creative Suite 2 components, enabling

automatic ligatures, such as the s and t in the t in the t

title below.

Before and after text wrap and drop shadow added

Learn more

For more information on transparency

and printing, see “Preparing Files for Print”,

on page 94, as well as “The Designer’s Guide

to Transparency”, available on Adobe Studio

at studio.adobe.com.

Magazine spread with transparent eff ects on native and placed objects


Saving versions

In a workgroup setting, many team members access fi les at diff erent stages in the workfl ow. All of our project fi les and assets are shared over a server and, as we described earlier, have been saved to Version Cue projects. Each time a team member works on a fi le, he or she Saves a Version and adds a few version comments, so that the next person accessing the fi le knows what was last done to the fi le.

Saving a version aft er key content changes provides an effi cient record of edits—and maintains a reference to a single, shared fi le.

Our designers also save versions of page layouts as they are working—then present them to the art director for feedback. Instead of saving each fi le under a separate name, and trying to keep track of them for presentation and review, we simply use the Save a Version command from within InDesign. All versions of a fi le are saved under the same fi le name, making effi cient use of disk space and production time.

Th e fi rst time a document is saved as a version, choose File > Save As. Click Use Adobe Dialog to display Version Cue options. Select Version Cue in theleft column, and then click on the project that you wish to save it to. In this case, we chose Substrate Mag v.12 (the Version Cue project we created at the start of our project), named the fi le, and then clicked Save. To save subsequent versions, we chose File > Save a Version, and added a version comment, such as “gradient background,” and clicked Save.

Versions of magazine layouts viewed in Adobe Bridge

Tip: Even teams sharing a small local network

can take advantage of Version Cue features. A

document can be shared by members of your

group, without overwriting the other’s work.

For more information on saving versions,

see “Creating a managed project with Adobe

Version Cue CS2” on pages 30.

Saving the fi rst version from InDesign, using Save As command

Tip: The fi rst step to saving a version is to

create a Version Cue project. See pages 30-31

for more information.


Tip: PDF presets are available in all

components of Adobe Creative Suite 2

to ensure consistent, quality Adobe PDF

fi les using settings appropriate for your

output needs. For more information, see

“Creating Adobe PDF fi les” and “PDF Presets”

on page 24.

Sending the magazine out for review

Because of the size of our publication and numerous reviewers, we conduct browser-based reviews on a PDF of the magazine. A single PDF fi le is posted on a server and accessed through a Web browser, so that reviewers can access the document from anywhere with Internet access at anytime. All reviewers comment on the same document, and can see their comments in the context of others. Th e editor collating comments has only one document to track, with all comments summarized in one place.

Maybe you have a smaller workgroup and don’t have a server set up to host the review. Now there’s a simple way to set up an online PDF review using the Version Cue workspace as host. If you installed Version Cue, you will already have a workspace available to host the review. For more information on Version Cue PDF Review, see Version Cue Help.

To generate a review for the magazine, we started by creating a PDF from InDesign. We choose File > Export, clicked on Version Cue, and then opened the Version Cue project folder we created earlier. We selected Adobe PDF as the format, named the fi le, and clicked Save. In the PDF Export dialog box, we choose the Smallest File Size for PDF preset and clicked Export.

Save the PDF for review from InDesign to a Version Cue project.


PDF Review page in Version Cue Advanced Administration window

PDF as it appears in browser with Acrobat commenting tools and instructions to reviewers

Th e next step was to set up the review and invite reviewers. We selected the Version Cue Advanced Administration utility in the System tray (Windows) or Version Cue menu (Mac OS) and followed simple on-screen prompts to add users to our team of reviewers. We then clicked on the Version Cue CS2 PDF Review link at the top of the page and again followed simple steps to start a review. Detailed instructions on this procedure can be found in Version Cue Help.

Once the PDF fi le was specifi ed and reviewers invited, an email message was sent to the team with a URL that they could click. Th e PDF of the magazine was opened directly in their Web browser—along with Acrobat commenting tools. All reviewers commented on the same PDF fi le and could see each other’s comments. When a reviewer fi nished commenting, he or she clicked the Send Comments button and the PDF fi le was immediately updated. We were able to view and manage all review comments on our end by clicking on Active Reviews in the Version Cue CS2 Review (of the Version Cue Advanced Administration utility) window.

Tip: To enable users of free Acrobat Reader 7

to participate in browser-based reviews,

open the PDF in Acrobat 7.0 Professional and

chose Comments > Enable for Commenting

in Adobe Reader; then save the fi le.


Preparing the magazine for print

Aft er incorporating review comments, we were ready to prepare our publi-cation for hand off to our print service provider. Th is process begins with a series of checks done on our own end. It’s more effi cient, and less costly, to troubleshoot and fi x problems in-house than to pay our service provider to do the same. Here are the steps we took to ensure a smooth print workfl ow.

1. Turn on View > Overprint Preview in InDesign and do a visual proof of each page on-screen. Th is gives us the most accurate look at color (especially spot color), transparency, and detail. We can zoom in on image details where necessary to check image edges, borders, and alignment.

2. Turn on View > Separations Preview in InDesign to make sure the correct number of colors are showing up. If colors other than CMYK turn up, use the Ink Manager to convert them.

3. Choose File > Prefl ight in InDesign and examine the report on Fonts used or missing, Links and Images (which includes mode of all images, such as RGB), Colors and Inks, and Print Settings. In this case, a number of RGB images in the document were not converted to CMYK.

4. In Photoshop, we converted the images by choosing Batch > Automate and using the Conditional Mode Change action. Th is action will be available once you have chosen the Production set of actions from the Actions palette menu.

InDesign Prefl ight results Converting RGB images to CMYK using Photoshop Batch options

Tip: You can use the InDesign Contact Sheet

feature to quickly lay out multiple images for

color proofi ng. In Adobe Bridge, select the

thumbnails of the images you want to proof,

and then choose Tools > InDesign > Create

InDesign Contact Sheet. Options let you

specify layout, captions, output (InDesign or

PDF fi le), and so on.


5. Aft er converting the images to CMYK, we run a fi nal Prefl ight check from InDesign and save the error-free report with the project fi les.

6. At this point, we print a desktop proof of the fi nal project. Th is includes printers marks, to give us a record of trim and bleed marks, and page infor-mation that includes fi le name, date, and time.

7. Check with our print service provider to confi rm whether native InDesign fi les or PDF fi les are preferred. For the magazine, the provider requested we send a PDF fi le using the PDF/X-1a preset. PDF/X-1a is designed for high-end output and creates a fi le in which fonts have been embedded and transparency has been fl attened. Only CMYK or spot color is included.

8. Create a PDF fi le from InDesign by choosing File > Adobe PDF Presets > PDF/X-1a [2001]. Name the fi le and click Save. In the Export Adobe PDF dialog box, we accepted all the settings associated with the preset, and clicked Export. (Selecting the PDF/X-1a preset automatically chooses the high-quality, high-resolution fl attener preset and fl attens transparency according to those settings when creating the PDF.)

9. Open the PDF fi le in Acrobat 7.0 Professional and run a Prefl ight check. Choose Tools > Print Production > Prefl ight, and select the PDF/X-1a:2001 profi le; then click Execute. Acrobat checks the fi le to make sure that it is a valid PDF/X-1a fi le. In this case, no problems were reported. We ran an additional resolution Prefl ight check using the List Bitmaps below 300ppi profi le; this also reported no errors, so we saved a copy of the report with the project fi les. You or your print service provider can create a custom Prefl ight profi le that includes all the checks appropriate to your job.

10. Create a JDF (Job Defi nitions Format) in Acrobat to go along with the PDF fi le. A JDF fi le describes the creative intent of the print job and includes information about media and ink requirements, production quantities, and customer information. Th e JDF fi le also contains references to fi les that contain pages (such as chapters, TOC, and so on) and describes how those pages should be ordered to make the end product. Choose Tools > Print Production > JDF Job Defi nitions, and follow the on-screen prompts to enter customer and project information. Or, ask your service provider for a JDF template.

11. We copied the PDF, JDF, and Acrobat Prefl ight Report together in a folder and burned them onto a DVD that we delivered to our print service provider.

Final handoff includes the magazine in PDF, a Prefl ight Report in PDF, and a JDF (Job Defi nitions fi le).

Learn more

For more information on JDF workfl ow,

see Acrobat Help, as well as Print

Production topics on Adobe Studio

at http://studio.adobe.com. For more

information on print workfl ow, see

“Preparing Files for Print” on page 94.


PR

O

J E C T

O

J E C

3

Highlighted features:

• Site diagram (GoLive)

• PDF review (GoLive, Acrobat)

• Package for GoLive (InDesign)

• CSS design and layout (GoLive)

• Smart Objects (GoLive)

In this project, we design a website using content from a printed

magazine just published for the same client. The ability to share content

across projects and media is one of the productivity features of Adobe

Creative Suite 2. Assets and layouts can be converted for use online,

without having to open and optimize fi les in their source components.

Content common to both a printed catalog and its online version can

maintain a link to the same source fi le and be updated automatically as

edits are made to the original. You can also create a website from

scratch yourself or use one of the many templates included in GoLive. scratch yourself or use one of the many templates included in GoLive.

With support for XHTML and CSS standards, GoLive provides powerful With support for XHTML and CSS standards, GoLive provides powerful

hand-coding and visual tools to design your sites using the latest

technology available.technology available.

Designing a Website


Designing a Website 75

Creating the site diagram

Th e fi rst step in designing any site is to design the information architecture—that is, how the site will be laid out and how users will navigate through it. For this project we took advantage of the site diagramming tools available in GoLive. By diagramming directly in GoLive, we were able to build from the site diagram to the prototype to the fi nished site, without having to duplicate work along the way.

We started by choosing File > New and choosing Web > Pages > HTML Page, and clicked OK. We then chose File > Save, named the fi le, and clicked Save.

To open the Site window, we chose Reveal in Site from the document window menu. Th e HTML page just saved should be highlighted in the Files tab of the site window. To create a site diagram, we chose Diagram > New Diagram, named the diagram, and clicked OK. We then clicked the Diagrams tab in the site window, and double-clicked the Substrate diagram we just created.

Th e diagram window appears with a layout grid. In the toolbox, display the diagram toolset. You can add icons to the diagram to represent the pages and other elements of a site, and you can use connectors to organize and represent the page hierarchy and links. Th e diagram window works just like the layout grid in GoLive, so you can easily arrange pages and other elements in a diagram any way you want.

Th en, by using the Submit feature of GoLive, our designers were able to convert the diagram into real, editable HTML pages into which they could

add the assets created in earlier projects. (To reverse a submission, you can recall the diagram.) You can submit and recall diagrams and ele-ments as oft en as necessary as you develop a site.

To submit an entire site diagram, open the diagram in a design view, and then choose Diagram > Staging > Submit All.

Tip: To create an Adobe PDF fi le of a site

diagram for client review, double-click the

diagram, choose File > Export > Diagram. In

the Export Options dialog box, select PDF

from the Export Diagram menu, and then click

OK. Then, just name and save the PDF fi le. To

send the PDF for an email-based review, open

the PDF in Acrobat and choose Comments >

Send for Review > Send by Email for Review,

and follow the on-screen prompts.

GoLive site diagram window



Converting the magazine to Web assets

With the site design complete and the empty page fi les in place, we were ready to bring in the assets we created for the printed magazine. Converting the magazine assets for the website consisted of two main procedures. First, we needed to export source fi les from InDesign using the Package for GoLive feature so that they could be opened in GoLive or other applica-tions. Aft er exporting the fi les, we were able view them in GoLive, and drag in the fi les we wanted onto our Web pages.

During packaging, stories in an InDesign document are converted to XML fi les with an .idpk fi le name extension. By default, paragraph and character styles applied in InDesign are converted to their CSS equivalents in GoLive. (CSS styles can be edited before placement in GoLive, or mapped automatically to CSS styles in a template.) Th ese are all saved in a package folder. Th is feature was an ideal option for our project, because the website reuses many of the assets and formatting we had already created in previous projects.

To create the package, we opened the magazine in InDesign and chose File > Package for GoLive. We chose a name and specifi ed the web-data/web-packages folder in the site project folder as the location. We chose All Pages and selected the Original Images option, because we wanted to control optimization of the images in GoLive.

Package for GoLive feature in InDesign

Tip: You can also export an InDesign page

directly to HTML. After using the Package

for GoLive feature, open the package in

GoLive and click on the HTML Preview

button; then choose Export As HTML from

the Package menu.

Tip: Although GoLive packages are designed

for use with Adobe GoLive, the fi les in a

GoLive package are saved in nonproprietary

fi le formats, such as XHTML, XML, JPEG,

and GIF, that can be opened with other

applications.

Resulting package in GoLive

Using packaged fi les in GoLive

When you open a packaged InDesign document in GoLive, it appears in the package window, which has tabs that allow you to switch between a page view of the package and a list of the package assets, grouped by type. (You can also see both of these package views from the Inspector window.) Th e package window allowed us to navigate through pages of our original magazine, picking the assets we wanted to use. We simply dragged assets, such as images and text blocks, from the package window onto a Web page.

Because packaged images are treated as Smart Objects by GoLive, and all the original image information is retained in the packaging process, images can be resized and reoptimized at any time directly in GoLive. Use the Inspector palette or the Smart Objects settings to make adjustments to images.

Dragging assets from the package window onto a Web page

Tip: If you decide to do more work on an

original InDesign document, you can choose

to overwrite the previous package when

you save the document. The package is then

updated automatically in GoLive.



Using Smart Objects

Th e Smart Objects feature in GoLive gave us a lot of power and fl exibility as we worked with assets created in other Adobe Create Suite 2 compo-nents—you get the same power and fl exibility when working with assets from non-Suite applications, too. When you specify an image as a Smart Object, GoLive creates a target fi le in a Web-optimized format and maintains a link to the source fi le. When you move, resize, or reoptimize a Smart Object, you’re really manipulating the target fi le; the source fi le doesn’t change. As a result, we could generate multiple image variations from a single source fi le throughout our website without diminishing the image quality. And, we were still referencing the same source fi le used in the printed magazine; so if edits were made to the original Photoshop fi le, both the InDesign magazine and the GoLive website versions would be updated.

Examples of Smart Objects in our site include the vector logo from Illustrator, numerous album covers from Photoshop, and PDF documents posted to the site for download. Double-clicking on a Smart Object in GoLive opens the original in the source component for editing.

Tip: When you double-click a Smart Object in

the Layout Editor, the source fi le opens in its

original application. If you make changes to

the source fi le, GoLive automatically updates

the Web-ready version of the fi le.

Smart Objects in our site include the vector logo, album covers, and PDF fi les.

Tip: Smart Objects can be identifi ed in your

layout by the icon that appears in the upper

left corner of the object. The fi le format

(.psd, .ai, .pdf, and so on) of the original

object is indicated by another icon in the

lower right corner.

Using Cascading Style Sheets

All of the formatting on our site was done using Cascading Style Sheets (CSS). CSS lets you control the formatting, positioning, and layering order of text and other elements on an individual Web page, on multiple pages, or throughout an entire site. Because CSS can be applied to multiple pages, you can modify a single style sheet and have the changes take eff ect globally. While using CSS has long been a powerful and versatile tool for formatting styles on Web pages, it has also been a fairly complex and labor-intensive process. Th e GoLive CSS Editor, a graphical user-interface for working with CSS, makes using CSS easier than ever.

Because GoLive treats text assets in a package as components, we were able to make any text changes we wanted using the CSS Editor. Th e styles and for-matting we applied in InDesign were retained in a style sheet created during the packaging process. To open the CSS Editor, just click the Open CSS Editor button in the GoLive document window, or choose View > CSS Editor. With the CSS Editor, you can easily update styles as needed and have those updates ripple through an entire site.

One of the really powerful ways to use CSS is to create an external style sheet and then link elements in a site to it. By linking elements to an external style sheet, you can defi ne the styles you want so that you can establish a consis-tent look, and you can apply those styles throughout a site without having to defi ne them over and over again.

New Feature: GoLive CS2 now lets you

control the layering order, (or z order, as in z order, as in z

x, yx, yx and , y and , y z axis) of CSS elements. This allows z axis) of CSS elements. This allows z

you to specify whether text or graphics

appear below or above other CSS elements

on the page.

Site CSS Editor in Split Visual Design and Source Code view

Tip: Using CSS prebuilt objects in the Objects

palette eff ortlessly enables a user to create

complex “liquid-table-like” DIV / CSS design.

Hand-coding this behavior is quite diffi cult for

the novice Web user, especially if they do not

know the ins and outs of CSS design.

Tip: DIV selection is now easier than ever

using the Object Selection tool in GoLive.

Press Shift while clicking on objects, or drag-

select to select multiple objects in a region.



Here’s how to create a basic external style sheet:

Creating an external style sheet

Step 1: Chooe File > New, and then choose Web > CSS. Choose a preconfi g-

ured style sheet, or choose basic.css to open a simple stylesheet. The external

CSS Editor appears. At this point, it’s a good idea to rename and save the new

fi le, keeping the .css fi le extension. We renamed our fi le substratestyles.css.

Step 2: Next, defi ne the text and formatting styles for whatever properties

you want. Diff erent tabs of the CSS Editor let you control properties such as

fonts, borders, margins, backgrounds, and so on.

Step 3: Open one of the pages of your site (or create a new page), and then

open the CSS Editor. Click and hold the New Link to External CSS button and

choose one of the CSS style sheets from the pop-up list. You can also click and

release to create an empty reference placeholder under the Name column

and reference the external stylesheet in the Reference text box.

The styles you defi ned in the external .css fi le are now available to you in the

CSS palette.

With an external style sheet in place, any changes you make to it are automat-

ically refl ected in the pages you’ve linked to the style sheet.

Step 2

Step 3

Step 3 result

Saving images for the Web

All Adobe Creative Suite 2 components support output for both print and Web or online content. In addition to the Package for Web feature in InDesign, the Save for Web options in both Illustrator and Photoshop allow you to optimize individual images. PDF documents can be optimized specifi cally for use as downloadable fi les from a website or mobile device, or for full-screen viewing.

Using the Save for Web options, you can preview your original artwork next to three optimized previews, and adjust the settings on each until you see a suitable compromise between image quality and fi le size.

If your Illustrator artwork has placed bitmapped images or raster eff ects, or if your Photoshop artwork contains vector artwork, such as Smart Objects, you will need to experiment with optimization settings to fi nd the right match. Or, use the Slice tool in Illustrator or Photoshop and customize the optimization settings for each slice.

Adobe PDF fi les can be created and optimized for posting on websites using one of the Adobe PDF presets available through any Adobe Creative Suite 2 component. For more information, see “Creating Adobe PDF fi les”on page 24.

A Save for Web dialog box is available in Photoshop and Illustrator

Note: Illustrator fi les can be optimized as GIF,

JPEG, SVG, SVG-Tiny, SWF, PNG-8, PNG-24,

and WBMP. Photoshop supports JPEG, GIF,

PNG-8, PNG-24, and WBMP.

Learn more

For more information on saving and optimiz-

ing images for the Web, see Help topics in

the corresponding Adobe Creative Suite

component.

Tip: To optimize an existing PDF fi le for

downloading from a website or online

viewing, open it in Acrobat and chose

Advanced > PDF Optimizer or File >

Reduce File Size.


Reviewing the website

Th ere are several diff erent ways you can have others review a website. Of course, you can always launch the site and ask others to review it online. But if you want to get feedback earlier in the process, it makes sense to create an Adobe PDF fi le of your pages and send that out for review.

To convert a single HTML page to PDF, click the PDF Preview tab in the document window. Th en choose File > Export > HTML as Adobe PDF. Choose a PDF preset in the Export Adobe PDF dialog box and click OK. We used the GoLive default.

To convert multiple HTML pages to PDF, open the fi les folder in the Site window, select the HTML pages you want, and then choose File > Export > HTML as Adobe PDF. Make sure that the Create Single PDF from All Files Selected option is checked, and click Export.

We then opened the PDF in Acrobat, chose Comments > Send for Review > Send by Email for Review, and followed the simple on-screen instructions.

Th is option enables users of free Adobe Reader 7 to participate in the review.

Alternatively, you could choose to convert an entire published site to PDF if you want to show your clients a prototype of the entire site. You can convert the site from within Acrobat 7.0 Professional by using the Create PDF From Web Page command. Th is command allows you to convert everything from a single page to an entire site. For information, see “Converting Web pages by specifying a URL” in Complete Acrobat 7 Help.

As the fi nal stage in our workfl ow, we pushed the site to a live server using the new secure FTP and WebDAV capabilities in GoLive CS2.

Tip: When a PDF fi le is sent for review using

the Comments > Send for Review > Send by

Email for Review command in Acrobat, it is

atuomatically enabled for review by users of

the free Adobe Reader 7.


Web page saved as PDF for review in Acrobat or Reader

PR

O

J E C T

O

J E C

In this project, we’ll show you how we designed content for deployment

to a mobile phone or PDA device. We’ll show you what you need to know

about small-screen display and how to design content for optimal

performance on a mobile device. GoLive has the tools to design, test, and

preview mobile content using the latest technology, with support for open

standards like XHTML and CSS. We previewed content using an Opera

thin-client browser with Small Screen Rendering and checked it using

standards-based, device-specifi c CSS queries to ensure that pages

appeared exactly as intended.appeared exactly as intended.

Designing for Mobile Devices

4

Highlighted features:

• XHTML and CSS standards

• Document setup for XHTML mobile profi le

• Mobile Layout view

• Small Screen Rendering

• Device emulation

• Visual CSS

• DIV selection

• SVG-Tiny

• Export HTML pages to PDF for review

• Syntax check


Designing for Mobile Devices 85

Designing for mobile

When our music client asked us if we could design a mobile version of the client’s website that would display on cell phones, we knew it would be the perfect opportunity to show off some new GoLive skills we had acquired.

GoLive provides support for XHTML and CSS standards, templates, optimization, and preview of assets for display on variety of mobile devices. Cascading Style Sheet (CSS)-based design makes it easier to gracefully scale down to small-screen and alternative devices. XHTML (Extensible Hypertext Markup Language) continues to be the most accepted program-ming platform for mobile sites. When writing code or designing visually, users can then check and verify that their code conforms to the latest XHTML specifi cations.

Not only is having an online presence a requirement today, but having a version of your website that can scale to small-screen devices is becoming critical, especially for publishing houses and independent creators of content. As Web designers, migrating to mobile design was easy—and it gave us a competitive edge to off er a new service to our clients.

You can follow two basic design approaches for mobile. You can create one XHTML source document, using CSS @import and @media queries that enable your content to take on multiple designs for desktop and mobile devices. When done well, as the Opera website below shows, this can be an eff ective solution. Th e second approach you can follow is to create a unique user experience with a customized architecture for a specifi c device. For our music client, this was the right direction.

Single-source website design using CSS@import and @media queries that enable content to adapt to desktop and mobile devices (as shown using GoLive Small Screen Rendering)

Custom mobile design for our client

Tip: GoLive CS2 supports visual

Multimedia Messaging Services (MMS) for

mobile devices. Content can be published

using a third party service (mobile content

provider)—allowing design fi rms and ad

agencies to create mobile campaigns that can

include direct marketing to mobile

devices. MMS documents can include bitmaps

(static/animated), SVG-Tiny, mobile video,

and even Java applications.



Setting up a mobile document

We started by creating a new document in GoLive using the project-based New dialog box. Th e New dialog lets you choose from several categories (Site, Web, Mobile, and Scripting) and add fi les of several types (including XHTML pages, CSS stylesheets, images, and QuickTime movies, as well as SMIL, SVG-Tiny and RealPlayer documents) to a Favorites category. When you select a category, GoLive displays a list of fi le or site types from which you can choose.

We chose Mobile > Pages > XHTML Basic Page. Th is created a blank XHTML document for a mobile phone. We then created pages for each of the menu items on the home page and added content from our website.

GoLive assumes that you are designing for both desktop and mobile devices. However, if you want to focus just on mobile, GoLive CS2 includes special features that can streamline design and development. In the following section, we’ll describe how we set up our workspace and View options to simulate a mobile environment.

Tip: To get you started quickly, GoLive

ships with mobile content samples,

including CSS specifi cally designed for

display on a mobile phone, or PDA.

Project-based options in GoLive New dialog box

Setting up a mobile workspace

Using the Layout Editor, we chose Mobile Layout View from the Status View Confi guration pop-up menu at the bottom of the window. Th is put the Layout Editor in Split Source view, so that we could see both the formatted layout and the source code while working.

For mobile devices, the layout window in GoLive off ers a visual environment that makes it easy to specify a device and standard for designing. GoLive then restricts the layout size and types of objects that are allowed on the page while designing. Th is way there were no surprises when the content went live.

We then opened a Live Rendering window (Ctrl/Command+T) and clicked the SSR (Small Screen Rendering) tab so that we could see changes to content or layout updated automatically.

Th e Live Rendering window enables real-time browser input for all design modes in GoLive, making it easy to see how your designs and application development will appear when live. Th e Live Rendering window takes advantage of the W3C and OMA’s latest standards-compliant engine based on the industry-leading Opera browser engine.

Note to developers: GoLive CS2 includes

cross-platform Secure FTP support

utilizing SSH/SSL, and WebDAV HTTPS

(Secure WebDAV), providing a secure

protocol for uploading site data.

Live Rendering windowSplit Source Layout Editor in Mobile layout view



Choosing device emulation

Our next step was to assign a user profi le for our site. With the Layout Editor open in the document window, we opened the View palette and chose View User Profi le > Target Media > Handheld.

• Handheld emulates in Layout view how the CSS will render when a user views the content with an OMA (Open Mobile Alliance) and W3C (World Wide Web Consortium) standards-based mobile browser created by one of the leading companies, Obigo, Openwave, Access, or Opera.

• Screen emulates in Layout view how the CSS will render on a desktop browser.

• Print emulates in Layout view how the CSS will render when a user prints the document.

Device emulation in GoLive CS2 allows you to quickly jump from one type of rendering—such as the way a page would look on a desktop Web browser or mobile phone—to how it would look on an alternative device such as a home appliance, if the CSS style designs were set up ahead of time.

User Profi le set to Handheld (Target Media) in View palette

Using CSS

Cascading style sheets allow you to design pages that adapt fl exibly to both desktop and mobile browsers; and CSS layout objects produce liquid layouts that automatically adjust to diff erent screen dimensions.

For our mobile site, we wanted to specify that the same text be displayed with diff erent typefaces and placement depending on the device on which it was rendered. In the Advanced section of the CSS Editor, we clicked the Create@import button and in the Media fi eld typed the statement “handheld,screen” (screen = desktop). In the Reference fi eld, we clicked the pop-up menu and selected the CSS stylesheet we had created for the mobile site, “substrate_wap.css”. Th is creates a query to the device and assigns the CSS accordingly.

Just as CSS text adapts fl exibly to device parameters, so do CSS objects. Notice how the horizontal rules in our mobile site stretch to fi t the browser window when it is resized. For examples of how CSS displays optimally on both desktop and mobile devices, see the Opera website example on page 86, “Designing for mobile.” For more information on CSS, see GoLive Help.

Specifying CSS to use for mobile devicesCSS layout objects adapt when browser window is resized.

Tip: Hold down Ctrl or Option as you click

on CSS@import to display a pop-up list of

style sheets to choose from.



Selecting DIVs

A DIV is essentially a container for content on a CSS page. Historically, DIVs have been diffi cult to position and edit without a signifi cant amount of hand-coding and manual calculation. Th e benefi ts of CSS-based design, however, are substantial—leaner code, easier maintenance, more searchable and accessible sites, and more fl exible and visually appealing designs. Now CSS design is incredibly simplifi ed, thanks to visual layout and selection tools in GoLive.

Selection of CSS DIVs and their content has been a specifi c challenge for Web designers up until now. GoLive CS2 has solved the problem with the new Object Selection and Standard Editing tools, which enable you to quickly and easily select CSS DIVs and the content of those DIVs, such as images or text.

To visually select and edit the CSS style associated with the album titles on the index page, we used the Standard Editing tool, located in the top left corner of toolbox, and selected the album title text “Alternate Dimensions.” Notice how the DIV is automatically highlighted in the Split Source view and the CSS style “list_sub_item” is displayed. We then selected the style by name in the CSS Editor and adjusted the left margin value while previewing the change in the layout. All instances of the CSS style are updated throughout the site.

Tip: The enhanced Layer tool lets you

draw and position CSS DIVs precisely and

accurately. The Smart Guide and snap-to-grid

features can be activated while using the

Layer tool, making it easy to align content as

it is created.

Using Standard Editing tool to select CSS DIV in Layout, then editing CSS properties for site-wide formatting

Choosing formats for mobile content

Graphics in our site are a combination of JPEG, GIF, and SVG-Tiny images. Th e Substrate text logo is a GoLive Smart Object, which appears on multiple pages but is referenced to a single target image, keeping fi le size down.

GoLive CS2 also supports a number of other formats for mobile content. See the notes on this page, and refer to mobile topics in GoLive Help.

Using the SVG-Tiny format

Scalable Vector Graphic (SVG) format is used to deliver vector artwork and animation to Web and wireless devices. SVG-Tiny has become the de facto interactive standard that optimizes vector art and animations specifi cally for mobile phones and small-screen devices. Until Adobe Creative Suite 2, working with SVG-Tiny has been rather diffi cult, as most of the work has been performed in nonvisual source-code editors. Now, vector and bitmapped artwork from Illustrator CS2 can be saved in SVG or SVG-Tiny format. Adobe Creative Suite CS2 even has options to view the SVG code or preview artwork in your browser before saving.

Th e clean, optimized SVG-Tiny components can be animated using tools like Ikivo Animator and then brought into GoLive.

Note: Illustrator vector graphics for

mobile must be saved in SVG-Tiny 1.1 or

SVG-Tiny 1.1+ format. SVG-Tiny format

supports animation as well. For artwork

that includes bitmaps or raster eff ects

in addition to vector art, use the

SVG-compressed format (SGVZ). For

more information, see Illustrator Help.

New feature: GoLive CS2 includes native

support for SMIL (Synchronized Multimedia

Integration Language). Using the various

development modes, including a SMIL

timeline—mobile and desktop experiences

can be created using content leveraging

SVG-Tiny, video, bitmaps, audio, and

interactivity though ECMAScript (JavaScript).

New feature: MPEG 4 /3GPP video is

supported in GoLive CS2 with a visual layout

and timeline interface for adding interactivity,

and then compressing it for mobile devices.

3GPP (Third Generation Partnership Program)

is a movie format designed for 3G mobile

devices.

Illustrator Save as SVG Options



Reviewing the site

When we had each page, content and links in place, we created a PDF of the site to send to our client for feedback. Like any Adobe Creative Suite CS2 document, it was easy to create a single PDF containing all pages in the mobile site from GoLive.

In the Layout Editor, we clicked on the PDF Preview mode button. In the Site window, we selected the HTML pages in the fi les folder that we wanted to send for review and chose File > Export > HTML as Adobe PDF. For Adobe PDF preset, we chose the GoLive Default. We selected Site Creation and under Options, clicked Create a Single PDF from All Files Selected. We then selected HTML Conversion, specifi ed a Custom Size page 150 pixels in width by 800 pixel in height, and clicked Export. We named the fi le, and clicked Save, and then sent the PDF fi le to our reviewers for commenting. For more information on PDF email-based and browser-based reviews, see “Sending the CD booklet out for review” on page 48 and “Sending the magazine out for review” on page 70.

Running a syntax check

Aft er incorporating review comments, our fi nal step in ensuring that our mobile site was free of errors, was to run a validation, or Syntax check on the site. We chose Edit > Check Syntax, checked the following options, and clicked OK.

• iDOCType assigned.

• XHTML 1.0 Transitional.

• XHTML Basic 1.0.

• XHTML Mobile 1.0.

Th e Syntax Checker displays an error if it identifi es incorrect HTML syntax, or if your document is not compliant with the specifi ed DTD (Document Type Defi nition). For more information, see syntax check topics in GoLive Help.

No errors were detected during our syntax check, so we could upload the site to a live publish server.

Tip: To create a PDF fi le from a single

HTML page, open it in the Layout Editor,

and click the PDF Preview mode button.

Choose File > Export > HTML as Adobe PDF,

select HTML Conversion and specify a

Custom Page size for your mobile content,

for example., 150 x 800 pixels.

Learn more: Mobile publishing is at the

cutting edge of design, off ering new business

opportunities, new creative potential,

and new challenges with rapidly evolving

technologies. For more information on

mobile design using GoLive CS2, see

Mobile Authoring topics on Adobe Studio

at http://studio.adobe.com, as well as

mobile topics in GoLive Help.

PR

O

J E C T

O

J E C

5

Highlighted features:• Color settings

• Document color mode

• Resolution

• Transparency and fl attening

• Color palettes, fonts, and previews

• PDF and native fi le formats

• Print Production toolbar (Acrobat)

• Prefl ight, Output Preview, and Ink Manager (InDesign and Acrobat)

• Converting RGB to CMYK color (Acrobat)

In this chapter, we outline the best practices for preparing and saving fi les

for output to a print service provider. We give guidelines for designers to

simplify the process of creating clean, consistent fi les for color separation

and high-resolution printing. To help you follow a structured workfl ow,

we describe document settings, proofi ng, saving, and prefl ighting

topics for InDesign, Illustrator, Photoshop, and Acrobat. PDF integration

features across Adobe Creative Suite CS2 components, and powerful

new previewing and troubleshooting tools in Acrobat simplify every step

of the process, resulting in effi cient, reliable, consistent print output.

Preparing Files for Print


Ensuring a successful print job

A successful print job requires several key steps.

• Communication between a designer or customer and the print service provider, so that fi les are provided in the format preferred by that provider.

• Making use of the Adobe PDF presets available in all Adobe Creative Suite 2 components—to ensure consistent, reliable Adobe PDF fi les for your specifi c output requirements.

• Consistently following a checklist for setting up and handing off fi les, included in this chapter.

Th is chapter provides an overview of some of the settings and features that aff ect print output, and then outlines best practices to follow when preparing fi les for output to a print service provider for color separation and printing on press, or for composite digital printing. Creative profes-sionals on both the design and production end should be familiar with this workfl ow to ensure consistent, reliable results.

Adobe Creative Suite 2 ships with a set of PDF presets for all Suite compo-nents. Th ese presets contain settings for common output requirements and promote consistent PDF creation. Th e user interface for PDF creation has also improved across all Suite components so that users see similar interface and preset options.

With a basic understanding of printing requirements, and features in Adobe Creative Suite 2 that simplify fi le preparation and troubleshooting, you can focus on the design of your documents—and be confi dent of consistent, reliable output.

Note: PDF Integration makes handing off

Adobe Creative Suite fi les smoother and

more predictable. It’s important that print

service providers be familiar with the Adobe

PDF presets and have recommendations

or custom presets to share with clients to

ensure consistent output from customer fi les.

Preparing Files for Print 95

Setting up and creating a project

Adobe Creative Suite 2 Color Settings

Th e fi rst step in a successful print workfl ow is to synchronize Suite Color Settings in Adobe Bridge at the start of a project. Th e second is to know that default Color Management Policies are on by default in all Adobe Creative Suite 2 components. Th ese two factors will go a long way in ensuring a smooth design, proofi ng, and printing workfl ow.

Synchronize Suite Color Settings in Adobe Bridge to match your workfl ow.


Document Color mode

Make sure that documents and placed images are in the intended color mode. For the majority of print workfl ows, this means CMYK mode.

• In Illustrator, choose File > Document Color Mode > CMYK. • In InDesign, choose Edit > Transparency Blend Space > CMYK.• In Photoshop, choose Image > Mode > CMYK Color.

As stated previously, Color Settings (located in the Edit menu of Illustrator, InDesign, and Photoshop) should be synchronized in Adobe Bridge, so that you don’t need to adjust them in individual Suite components or fi les. If your workfl ow requires that you make an exception, refer to “Color Workfl ows for Adobe Creative Suite 2”, on the Resources and Extras CD.

Resolution

Image resolution requirements should be determined at the start of a project. Set the Photoshop image resolution before you create artwork, and make sure that images are at the correct resolution before placing them into InDesign or Illustrator, or outputting to PDF or PostScript. For quality printing, 300ppi is a safe general rule of thumb, but your printer may require more or less depending on the output device and printing methods.

Rasterization resolution aff ects how transparency eff ects—such as a drop shadows, gradients, or fi lter eff ects—are fl attened when printed. To set rasterization resolution in Illustrator, choose Eff ects > Document Raster Eff ects Resolution. To set rasterization resolution in InDesign, choose Edit > Transparency Flattener Presets.

Tip: The best practice for print workfl ows

is to create, place, and save documents in

the format that matches your output intent,

for instance, CMYK. However, if your PDF

fi le contains images that require conver-

sion, such as RGB or spot color to CMYK,

this can be done directly in Acrobat using

the Convert Colors tool in the new Print

Production Toolbar. For more information,

see “Converting colors” on page 104.

Image resolution in Photoshop Rasterization resolution set in InDesign Transparency Flattener Presets

Rasterization resolution set in Illustrator Document Raster Eff ects Settings

Tip: The best recommendation for setting

rasterization resolution in Illustrator or

InDesign for your specifi c job should come

from your print service provider.


Learn more

If your workfl ow requires that you control

transparency fl attening, see “A Designer’s

Guide to Transparency for Print Output”,

and “Getting Started with Transparency”,

on the Resources and Extras CD, or on

Adobe Studio at http://studio.adobe.com.

Transparency and fl attening

Drop shadows, opacity, feathering, blending modes, and raster eff ects are collectively referred to as transparency eff ects. All transparent objects in a fi le—as well as all text and graphics that interact with (are underneath or adjacent to) transparency—go through a fl attening process during printing. At its simplest, the process of fl attening converts all overlapping areas in a stack of transparent objects into a collection of opaque objects that retains the appearance of the original transparent objects. A fi le with fl attened transparency does not contain live, or editable, transparent eff ects.

Transparency is fl attened when you convert a fi le that contains live transpar-ency into a format that doesn’t support live transparency. Th is conversion is the job of the Flattener. During the fl attening process, the Flattener replaces transparent objects with objects that are visually equivalent to the transparent originals, but contain no transparency. Th ese new, opaque objects are oft en referred to as fl attened transparency. Flattened transparency does not contain any live transparent elements and, thus, cannot be manipulated. If you think you may have to change the artwork aft er the fl attening process has taken place, be sure to save a copy of the unfl attened artwork for future editing.

Live transparency is included in native InDesign, Illustrator and Photoshop fi les, PDF 1.4 and later (not from Distiller), and Illustrator EPS (readable by Illustrator only). Photoshop EPS fl attens transparency. Flattened transpar-ency occurs in PostScript and EPS fi les, PDF 1.3 and earlier, and any fi les run through Distiller, .

Illustrator and InDesign contain Transparency Flattener presets that aff ect only how transparent eff ects are printed. Th e presets do not aff ect how artwork or eff ects are created, and therefore do not need to be decided at the outset of a project. Th e best practice is to let your print service provider handle transparency fl attening. If you are handing off native fi les, transpar-ency will be unfl attened and your printer will have full control over the best settings to use for the printer’s specifi c equipment. Th e PDF/X presets include Transparency Flattener settings and produce PDF fi les with fl attened transparency. Th e other three PDF presets (Smallest File Size, High-Quality Print, and Press Quality) do not fl atten transparency.

Use the PDF preset recommended by your print service provider when handing off fi les, and trust that your transparent eff ects will print as intended.

Tip: Your print service provider should

provide you with a recommendation on

which default PDF presets, Prefl ight profi les,

or transparency fl attener settings to use,

or supply custom settings or PDF presets

for you to use—that support the provider’s

own print workfl ow.


Color palette

Establish your spot and process color palettes and use consistent colors throughout your artwork. Use spot colors only if they are intended to be printed as spot color inks. Use shared color swatches (.ase fi les) between Illustrator, InDesign and Photoshop for consistency. For more information, see “Color consistency”, on page 26.

Overprint Preview

Use Overprint Preview in InDesign and Illustrator at any stage in your workfl ow to see high-resolution previews of all content in your document. Overprint Preview also provides an on-screen simulation of how overprinting objects will appear on press, and provides a more accurate preview of documents that contain spot colors—especially those where spot content interacts with transparency. Since this option can slow down display, you may choose to use it at selected times.

Fonts

Know what fonts are intended to be in your document. Use paragraph and character styles and share them with team members to avoid misuse. Use the Document Info palette in Illustrator and the Prefl ight tool in InDesign (shown below) to check for fonts and other content in your document at any time in your workfl ow. If a Prefl ight check turns up an unintended font, remove or change instances of it in your document prior to PDF creation to avoid confusion for your printer.

Tip: A common, avoidable problem with

print fi les is that fonts are not embedded or

included with the fi les when they are handed

off to the print service provider. Creating

Adobe PDF fi les from Adobe Creative Suite

CS2 ensures that fonts are embedded.

InDesign Prefl ight report displaying fonts Illustrator Document Info palette displaying fonts

Tip: A spot color is a special premixed ink

that requires its own printing plate on press,

for example, Pantone 378. Specify spot colors

in your documents only if you intend to use

the spot color ink on press. Otherwise, use

named, process color swatches to specify

color in your document.


Tip: Use Adobe PDF Presets for common or

custom output needs—to create consistent,

reliable PDF fi les from any Adobe Creative

Suite 2 component. For more information, see

Creating Adobe PDF fi les on pages 24-25.

InDesign Prefl ight report


Saving fi les for deliveryAsk your print service provider if they prefer Adobe PDF, PostScript, or EPS fi les—or native InDesign, Illustrator, or Photoshop fi les.

Adobe PDF fi les

Adobe PDF (Portable Document Format) is the “master container” fi le format. PDF fi les hold everything put into it: graphics, text, fonts, spot colors, duotones, and so on. PDF fi les can contain live or fl attened transparency. Adopting PDF in your print workfl ow promotes consistency, reliability, ease of use, and reduced errors. Adobe Creative Suite 2 ships with a shared set of PDF presets, based on industry best practices, that make PDF creation from any Adobe Creative Suite CS2 component faster and easier than ever before.

Th e fi rst step in generating a PDF fi le is to ask your print service provider what PDF preset is required for compatibility with the provider’s RIP and workfl ow. Print service providers (aka printers/prepress providers) should be familiar with PDF presets and be able to recommend a default preset or supply a custom preset for you to use that meets the printer’s specifi c requirements.

Native InDesign fi les

Use the Prefl ight feature in InDesign to run a quality check on your document or publication before printing or handing off fi les. Th e Prefl ight utility warns of problems that may prevent a fi le from printing as desired, such as missing fonts or fi les, or images in an unintended color mode.

Once you’ve run an error-free prefl ight, you can use the Package feature in InDesign to copy all fi les required to print the document—including InDesign (.indd) fi le, fonts, linked images, and instructions—into a single folder for delivery.

Choose File > Package, and InDesign will perform a fi nal Prefl ight and summarize information about fonts, links and images, colors and inks, transparency, and print settings. Save a copy of the fi nal Prefl ight report with the fi les for delivery. You will be prompted to enter printing instructions, as well as options for saving your packaged fi les. Be sure to check Copy Fonts, Copy Linked Graphics, and Update Graphic Links in Package. Th e fi nal package folder should include your .indd (InDesign) fi le, Links folder, Fonts folder, Instructions.txt (generated through the Package process), and a Prefl ight report. (Make sure that you copy your Prefl ight report into the package folder before hand-off .)

InDesign has additional previewing and print production tools that let you proof and correct fi les before handing them off . For more information about Separations preview, Ink Manager, and Flattener preview, see InDesign Help.

Native Illustrator fi les

If your print service provider requests that you supply native Illustrator fi les, choose File > Save As, and select Adobe Illustrator Document from the Format pop-up menu. In the Illustrator Options dialog box, choose to include Fonts at 100% and check Create PDF Compatible File and Include Linked Files. Th is creates an Illustrator fi le (.ai) with all fonts and linked images needed for print output included. Illustrator fi les saved with the PDF compat-ible option can be opened in Acrobat 7.0 Professional and take advantage of Prefl ight features.

Native Photoshop fi les

Save fi les in Photoshop (.psd) format to retain layers, live transparency, spot color channels, and so on.

Be sure to include a copy of the fonts used in your Photoshop document along with the native .psd fi le when delivering fi les.

Final hand-off of InDesign fi les


Using Acrobat print production toolsAcrobat 7.0 Professional provides new features and enhancements designed to make it easier and more precise for graphic designers and print service providers to create, preview, correct, and output Adobe PDF fi les. You can quickly preview your document’s separations and ink coverage, adjust hairlines and stroke weights, preview and fl atten transparency, easily and accurately prefl ight print jobs, and create and preview print job options.

PDF fi les should be opened in Acrobat and checked using the new Print Production toolbar before handing them off to your print service provider.

Output preview and Ink Manager

Use Output Preview to preview separations, proof colors, view colors by source in addition to ink plates, and highlight warnings for out-of-gamut areas, ink coverage limits, and overprinting. Output Preview also provides easy access to the Ink Manager, lets you simulate black ink and paper white, and fi lter previews by color type, such as spot color. Th e Ink Manager lets you convert spot colors to process, or re-map (alias) extra spot colors to reduce the number of separations that print (as shown below.)

Tip: For complete how-to information on

using Acrobat print production tools, see

Acrobat Help .

Acrobat Output preview Acrobat Ink Manager


Acrobat Print Production toolbar

TrapPresets

OutputPreview

Prefl ilght

ConvertColors

InkManager

Add Printer Marks

CropPages

Transparency Flattening

PDFOptimizer

JDF Job Defi nitions

Fix Hairlines

Transparency Flattening tool

Use the Transparency Flattening tool to detect objects in your PDF document that are transparent, as well as how objects in your PDF document will be aff ected by transparency fl attening.

Prefl ight tool

Use the Prefl ight tool to analyze the contents of an Adobe PDF fi le based on prefl ight profi les that determine its validity for print production. Th e Prefl ight tool is also useful for determining information for various elements, such as image transparency and resolution, or Adobe PDF fi le-version compatibility.

1. Click the Prefl ight tool to open the Prefl ight dialog box. Choose a Prefl ight profi le that corresponds with the PDF preset used or the output intent of your job. Profi les for numerous other queries are provided—such as “List all bitmaps under 300ppi” or “List text using non-embedded fonts.” Work with your print service provider to determine the appropriate prefl ight check or checks to run on a PDF before submission. You can also create a custom Prefl ight profi le—by editing an existing profi le or creating a new one—that includes all the checks you need.

2. Click Execute to run the Prefl ight. Review the results to determine if you need to make corrections. If errors are detected, resolve them in your native fi les, or directly in Acrobat using the print production tools available.

3. Click the Create Prefl ight report button to save a copy of the report for delivery to your print service provider.

Acrobat Prefl ight profi les

Note: Acrobat 7.0 includes many tools to help

you preview and correct problems in your

PDF fi les. For a complete list of new features

and how-to information on print topics, see

Acrobat Help.

Tip: To help automate the prefl ight process,

you can now create a droplet, a small applica-

tion that automatically runs a Prefl ight profi le

on one or more Adobe PDF fi les that you drag

onto the droplet icon. For more information

on Prefl ight droplets, see Acrobat Help


Converting colors

New and enhanced features in Acrobat give you immediate control over common print problems without having to return to native applications.

PDF fi les that inadvertently contain RGB or spot colors that need to be con-verted to CMYK can be fi xed directly in the PDF fi le, without returning to the source application. Acrobat performs the color conversion based on the profi le that was saved with the placed image or document. Make sure that you synchronize color settings for all Adobe Creative Suite 2 components in Adobe Bridge at the start of a project. Th is ensures that all color conversions—whether they take place in Photoshop or Acrobat—are done so consistently using the same profi les.

1. Open the PDF and preview colors using Output Preview. Select RGB to see where RGB images are in the document or run a Prefl ight check.

2. Select the Convert Colors tool in the Print Production toolbar. Under Document Colors, choose [Device] RGB and choose Convert from the Action pop-up menu. Th en select the destination color space from the Profi le pop-up menu, such as US Sheetfed Coated v2, for a CMYK conversion.

3. Use the Output Preview tool or Prefl ight tool again to verify that there are no RGB images in the document.

4. Save the PDF to complete the conversion.

Tip: The PDF Optimizer provides many

settings for inspecting, analyzing, and

repairing documents, such as saving a

fi le back to PDF version 1.3. The PDF

Optimizer is also used to reduce the size

of Adobe PDF fi les.

Converting RGB images to CMYK using Convert Colors tool in Acrobat

Tip: Tools for fi xing hairlines and adjusting

trim marks, page size, and bleeds let you

make corrections to your PDF fi les directly in

Acrobat. For complete how-to information on

these features, see Acrobat Help.

Learn more

This chapter provides an overview of the

steps required when preparing fi les for

successful print handoff . For more detailed

information on print production workfl ows

using Adobe Creative Suite 2, visit Adobe

Studio at http://studio.adobe.com.


Using Adobe Creative Suite 2

Adobe Creative Suite 2 is the ultimate design solution for your print, Web, and mobile projects—allowing you to seamlessly transfer content from one media to another without interrupting your creative workfl ow. Th e integration of Adobe Creative Suite 2 components Photoshop, Illustrator, InDesign, Acrobat 7.0 Professional, GoLive, and Version Cue, along with Adobe Bridge and Adobe Stock Photos—simplifi es your process, saves time, and eliminates redundant work. Now that you’ve seen some examples of what Adobe Creative Suite 2 can do, it’s time to try it out for yourself.


Index

A

Acrobat. See Adobe Acrobat 7.0 Professional

Acrobat Distiller 23, 25actions, production 72Adobe Acrobat 6.0 48Adobe Acrobat 7.0 Professional 12 new features 14 prefl ighting 73, 103 preparing output 55 print production workfl ow 102-104 reviewing Web pages 83 tracking reviews 48 turning on Version Cue 31Adobe Acrobat 7.0 Reader enabling browser-based reviews 71Adobe Bridge 10, 16, 18-21, 58, 60 described 9 dragging and dropping objects 61 editing Camera Raw images 35-36 new features 14 organizing project assets 58 sorting images in 35 synchronizing color settings 97 Version Cue 31 viewing versions 69Adobe Camera Raw feature 18Adobe Creative Suite 2 activating 7 described 4-5 installing 7 new features 14 overview 8-31 package contents 6, 8 registering 7 synchronizing color settings 96 using Version Cue 30-31Adobe Expert Support 5, 20, 21Adobe GoLive CS2 creating new projects 87 creating PDF fi les 24 CSS Editor 80 extras 6

layout grid 76 managing workfl ow 18 new features 16 placing native fi les 14 publishing interactive content 11-12 sample mobile content 87 site diagram 76 templates 74, 86 tools 91Adobe Help Center 5, 20, 21Adobe Illustrator CS2 Control palette 15 creating artwork 49-53 new features 15 overview 10 preparing output 54 setting up documents for print 97-102 templates 47, 49Adobe InDesign CS2 converting stories to XML fi les 77 creating PDF fi les 24 designing magazine with 56-73 exporting pages to HTML 77 new features 15-16 object formatting 15 outputting Photoshop and PDF fi les 14, 15 packaging fi les 101 placing PDF fi les 66 prefl ighting 72-73, 100-101 repurposing layouts 11, 77 saving versions 69 setting up documents for print 97-102 snippets 15-16, 61 using Photoshop transparency 67Adobe Dialog 44Adobe Paragraph Composer 11Adobe PDF fi les. See PDF fi lesAdobe Photoshop CS2 converting RGB images to CMYK 72 creating PDF fi les 24 customizing menus and workspaces 15 editing images 32, 36-48 editing in 36, 37, 39

editing Smart Objects 39, 40, 41 importing PDF comments 41 new features 15 overview 10 pasting artwork from Illustrator 38, 39 printing CMYK color 27 selecting layers 42Adobe Portable Document Format. See

PDF fi lesAdobe Reader 7.0 12, 15, 48, 83Adobe Stock Photos service 5, 14, 21, 28-29Adobe Studio 5, 6Advanced Administration utility 71IDPK fi le format 77AI fi le format 16, 101alternates defi ned 8, 30 managing 18 saving 31, 44anchored objects 62, 66Appearance of Black preference 27, 43, 68archiving documents 22ASE fi les 43, 47assets adding to Version Cue project 31 converting for website 77 managing 18 organizing 32, 34-35, 55, 58 previewing 86 viewing information 60

B

baseline 64Batch Rename feature 18batch-editing images 18, 19, 35-37, 72bitmaps 86black ink 27, 43, 102bleeds 104blending modes 98blind fi le exchange 9Bookmarks option 24Bridge Center 20-21browser-based review 70-71, 93


C

camera raw fi les 10Camera Raw format 34, 35-37, 40Cascading Style Sheets. See CSSCD booklet, creating 32-55character styles 59, 62, 63, 77, 99Clone tool 45CMYK colors 9, 27, 43collaborating. See Version Cue CS2color converting to CMYK 26-27 synchronizing 26, 27Color Management Policies 26, 96color modes 18, 54, 97color output 26-27color palettes, sharing 99color proofi ng 72color settings accessing 20 synchronizing 9, 14, 18, 26-27, 34, 96-99,

104 verifying 54color swatches exchanging 26, 27, 43, 47 metadata 58colors, converting to CMYK 104Compact mode 60comps 28, 29Contact Sheet feature 72content interactive 11 repurposing 74, 77-78corner eff ects 62CSS 11, 16, 74, 90 authoring 12, 16, 86, 91 layering order of elements 80 Curves, adjusting 37custom menus 38 presets 25 swatches, loading 47

D

desktop, saving 20device emulation 89

diagram window 76digital imaging 10dimensional eff ects 46Direct Selection tool 65 DIV objects, selecting 80, 91DNG format 37Document Color Mode command 54document information 54, 99, 101Document Raster Eff ects Settings dialog

box 97drop shadows 62, 68, 97-98droplets 13, 103DTD (Document Type Defi nition) 93duotones 27, 38

E

ECMAScript 92email-based reviews 22, 48, 76, 83, 93embedded fonts 14, 15, 99Enable in Layout View option 63, 98EPS fi les 98Extensible Hypertext Markup Language.

See XHTML fi le formatexternal style sheets 80, 81Extrude & Bevel feature 52-53

F

FDF fi le format 48feathering 62, 98Felici, James 64fi le dimensions, viewing 18 fi le management. See Version Cue CS2fi le names 16, 30fi le versions. See versionsfi le-browsing 9, 34fi le-sharing management 16fi les

managing 30-31 prefl ighting 13, 72-73, 100-101 previewing 58 printing 12, 101 saving for output delivery 100 tracking recent 20fi lls 62fi lter eff ects, fl attening for print 97-98folders, tracking recent 20

fonts samples 6, 22, 23, 42, 58, 99Fraser, Bruce 36FTP capabilities 83, 88

G

GIF fi le format 10, 77, 82, 92GoLive. See Adobe GoLive CS2gradients, fl attening for print 97-98graphic styling attributes 62Grid tool 45

H

hairline rules 15, 27, 102, 104Handheld user profi le 89Healing Brush tool 10High Quality Print preset 25, 98high-resolution output 22, 23HTML fi le format 24, 76, 77, 83, 93

I

IDPK fi les 77Ikivo Animator 92Illustrator. See Adobe Illustrator CS2Image Processor automation feature 40image resolution 18, 97, 103images adding color to 38 buying high-resolution 28 compressing 22 downsampling 22 editing raw 18, 36-37 optimizing 77, 82 rating 35, 40 removing unwanted elements 45 replacing 40 transforming 46InCopy CS2 plug-ins 6InDesign. See Adobe InDesign CS2INDD fi le format 101INDS fi le format 61information architecture 76, 86ink coverage limits 102Ink Manager 13, 15, 26, 55, 102Inspector palette 78interactive presentations 12Internet posting 22

Index 107

J

Java applications 86JavaScript 18, 92JDF fi le 12, 73Job Defi nition Format (JDF) fi les 12JOBOPTIONS fi le format 22JPEG fi le format 10, 40, 77, 82, 92

L

layer comps 11, 14, 15, 67Layer tool 91layers controlling visibility 14, 15, 67 editing 42 organizing by 59 retaining on print 101 selecting multiple 15 showing and hiding 67Layout Editor 88layout formatting 62leading 64Link option 47linked images 60Links palette 28, 29Live Paint feature 10, 15, 51Live Rendering window 88Live Trace feature 10,15, 50live transparency 98, 101

M

margin alignment 11master pages 59menus, custom 15, 42metadata 9, 16, 28, 58, 61microsites 11MMS authoring 12, 16, 86mobile content providers 86mobile devices 11, 12, 14, 16, 82, 84-93MPEG4/3GPP video 92MS Excel 18MS Word 18, 63Multimedia Messaging Services. See MMSmultipage PDF fi les. See PDF fi les

N

native fi les See also individual fi le formats 14, 16, 98, 100, 101

output delivery in native fi le formats 100North America General Purpose 2 color

setting 34

O

object formatting 11, 15Object Layer Options dialog box 67Object Selection tool 91Object Styles 11, 15, 59, 61, 63OMA standards 88, 89opacity 98OpenType fonts 11, 68Opera thin-client browser 84, 86, 88, 89, 90optical kerning 11out-of-gamut color 102Output Preview 102, 104overprinting objects 99, 102Overprint Preview feature 26, 54, 72, 99

P

Package feature 101Package for GoLive feature 11, 77package window 78packaging fi les 77-78page size, adjusting 104pages, accessing 60Pages palette 59paper white, simulating on-screen 102paragraph styles 59, 62, 63, 77, 99PDAs. See also mobile devices 84, 87PDF 1.4 fi les 98PDF compatible option 39PDF fi les 14, 16, 22-23 commenting 41 commenting tools 15, 71 contents 100 correction tools 15 creating 9, 24-25 email-based reviews 40, 48 fl attening 15 for output delivery 100

from HTML page 83, 93 new features 15 online review 70-71, 93 optimizing for downloading 82 placing multiple pages 66, 67 prefl ight checks 23, 55, 103-104 previewing and correcting errors 103 reducing size 104 repairing 104PDF Optimizer tool 104PDF presets 22, 25, 95, 98PDF previewer 9, 58PDF version 1.3 104PDF viewer 14, 19PDF/X fi les 9, 12, 22, 23, 25, 73Pen tool 10, 65Pencil tool 10perspective planes 45placed images 14, 47, 66, 82placeholder images 40PNG-24 fi le format 82PNG-8 fi le format 82PostScript fi les 25, 97, 100Prefl ight check (PDF) 55Prefl ight command, InDesign 28Prefl ight profi les 98, 103Prefl ight report 72, 99Prefl ight tool 103prepress providers. See print service

providers 100Press Quality preset 22, 25, 54previewing fi les 58previews, scalable 18, 19print job options , previewing 102print output best practices 23 guidelines 94-105 handing off contents 73 Illustrator checklist 54 preparing fi les for 94-105 proofi ng 22, 54, 55, 73 troubleshooting 72-73Print Production command 55print production tools 98-104


Print Quality preset 98print service providers 54, 55, 73Print user profi le 89printers. See print service providers 100process colors 99projects, setting up 31, 96proofs 22, 54, 55, 72, 73PSD fi le format 16, 101

Q

Quick Apply feature 63QuickTime movies 18, 87

R

raster eff ects 82, 98raster images 38, 50rasterization resolution 97raw digital images 34RealPlayer documents 87real-time browser input 88RGB colors 9, 26RGB images converting to CMYK 15, 23, 72 detecting in document 104rich black 68

S

Save a Version option 31Save for Web dialog box 82Save Swatches for Exchange command 43Saved File Groups feature 20Scalable Vector Graphic format 92scanned images 50Screen user profi le 89scripts 6, 11, 18searches 9, 58secure data 88separations 102Separations preview 13, 26, 72Settings folder 25site diagrams 76Slice tool 82Slide Show feature 18, 19, 35, 40Small Screen Rendering 84, 86Smallest File Size preset 22, 25, 48, 70, 98Smart Objects 12, 15, 38

editing 39-40, 41, 79 nesting 41 packaged images 78 optimizing for the Web 82SMIL 11, 16, 92snippets 15-16, 18, 61source fi les, linking to target fi le 74, 79spot color channels 101spot colors 9, 26, 27, 99, 102 channels 101 mapping for separations 15 converting to CMYK 55SSH/SSL 88Standard Editing tool 91stock photos 6, 28, 29Story Editor feature 63stroke weights 62, 102studio.adobe.com 6styles, mapping 63surface properties, 3D 53SVG fi le format 10, 82SVG-Tiny 10, 11, 16, 82, 86, 92swatches 6SWF fi le format 10, 82Synchronized Multimedia Integration Lan-

guage. See SMILSyntax Checker 93

T

templates 47, 49text dragging and dropping 63 formatting 62, 63 editing in GoLive 80text wraps 62, 64-65, 683GPP (Th ird Generation Partnership Pro-

gram) 12, 16three-dimensional artwork 52-53thumbnails 9, 18, 30, 60Tracker feature 48transformations 38, 46transparency 62, 68, 102, 103 fl attening 13, 15, 22, 97-98, 103 live 54trim marks, adjusting 104typographical tools 11

U

US Sheetfed Coated v2 profi le 104

V

user profi les 89Vanishing Point feature 10, 15, 45vector artwork 38, 51, 82Version Cue CS2 8-9, 18 new features 14, 16 setting up projects 30-31 hosting PDF reviews 70-71versions 8, 16, 18 defi ned 30 saving 31, 38, 41, 69 viewing as group 44

W

W3C fi le format 10, 88, 89warp eff ects 41, 46WBMP fi le format 82Web pages. See also websites rendering 89Web Photo Gallery 19WebDAV capabilities 83, 88websites designing 11, 12, 74-83 downloadable fi les 82 formatting 80 reviewing online 83 saving images for 82 scaling to small-screen 86Willmore, Ben 40workfl ows color 26-27 managing 18 print 96-105 streamlining 40-41workspaces 15, 87-88

X

XHTML fi le format 11, 12, 16, 74, 77, 84, 86XML fi le format 11, 61, 77XMP sidecar fi les 37

Index 109

Design Guide

Documents

Transcript of Design Guide