[If you’d like to download the assets used in this tutorial, visit www.layersmagazine.com/downloads.html.]

STEP 1 Start with a Complete HTML Layout
To begin, download and open the site file Sample Site.site. Then, double-click the file named for_template.html in the Site window to open it. As my proof of concept, I build one complete and functioning HTML page before creating my template.

STEP 2 Simple as Save As
Choose File>Save As and save the file to the Templates directory in the web-data folder. (Use the Site Folder shortcut in the Save As dialog for faster access.) That’s it. Templates are just a regular ol’ HTML file. Name the template “myTemplate.html.” (We’ll ignore the myOtherTemplate.html file until later in this tutorial.)

Now we want to specify editable areas in our template that can be customized on each page of our site. To do this, we first select an area of the HTML page. Put your cursor inside the word “Welcome” and press Command-A (PC: Ctrl-A) to select everything in the content cell.

STEP 3 Make an Editable Paragraph Region
Open the Template Regions palette from the Window menu. Then, click the Create New Editable Paragraph Region icon at the bottom of the palette. Deselect the text and the new editable area in your page will now show in light green (as long as you have Show Invisible Items selected in the View menu).

STEP 4 Rename Your Region
Select the new region in the Template Regions palette and press Return (PC: Enter) to rename the region. You can use any name for the region, so in this case, let’s name it “Main Content.” Close and save the template file.

STEP 5 Make Some Pages
Control-click (PC: Right-click) in the Site window area and choose New>HTML Page from the contextual menu. Control-click (PC: Right-click) the new HTML page and choose Duplicate. Repeat this two more times. Select one of the new HTML pages, press Return (PC: Enter), and rename it “about_us.html.” Rename the other new files “products.html,” “services.html,” and “locations.html.” Notice the little construction icon under the Status column; this indicates that this file has no content in it to help you keep track of your progress.

STEP 6 Apply Template
Open the file we just made named products.html. When you create new HTML files in GoLive’s Site window, GoLive adds a reference to the site’s default CSS document. To apply the template, Control-click (PC: Right-click) in the page and choose Template>Apply Template>myTemplate.html. Once the template is applied, you’ll see all of the items from the template applied to your site. You’re permitted to edit anything inside the Main Content region of the template file. Let’s replace the word “Welcome” with the word “Products.” Repeat this process for about_us.html, services.html, and locations.html.

STEP 7 Link the Navigation
Open the myTemplate.html file again, and let’s link the left side navigation to the pages we’ve made. GoLive will ask you if you want to Modify or Create a new template when you access a template file. Choose Modify. Select the “About Us” text, hold Command (PC: Ctrl), point-and-shoot to the about_us.html file in the Site window. Repeat this process for products.html, services.html, and locations.html.

STEP 8 Update Files
Once you complete the links, close and save the myTemplate.html file. GoLive will prompt you with a dialog indicating all of the files that will be modified based on changing the template. Click OK, and GoLive will modify all areas of each page that are not inside of the Main Content region.

STEP 9 Test Your Links
At this point, we have a functioning website. GoLive has added the links from the template to all pages in the site. Open the products.html file in a Web browser and click each navigation item.

STEP 10 Apply Template to Existing Page
If you have a page with existing content, you can still apply a template to it. To demonstrate, we’ll open the file contact_us.html and apply our template to this page as we did with the other pages.

STEP 11 Select Editable Region
When a page has existing content, or another template applied, GoLive will preserve the content and give you the choice of where to apply the existing content. Let’s choose Main Content in the Select Editable Region dialog and click OK.

STEP 12 Content Assigned to Region
As you can see, the existing content has been applied to the Main Content region.

STEP 13 Update to a Different Template
You can duplicate your template file, make layout changes, add items, and make new regions. If you’re careful to keep the same region names, you can update the layout of your site with one action. In the Site window, select the myTemplate.html file, then open the In & Out Links palette (Window>Site>In & Out Links). Point-and-shoot the myTemplate.html file from the In & Out Links palette to the myOtherTemplate.html file in the Templates directory of the Site window. Click OK in GoLive’s Change Link dialog.

STEP 14 Preview New Layout
Open the products page again in a browser. Click the links (now on the right) to see the changes to each page. In addition to layout, you can change the template’s CSS file reference as well, allowing you to modify even more of the appearance. Use alternate templates to “try out” different layouts and user experiences. With the In & Out Links palette, you can always go back to the original.

STEP 1 Open the Site
Let’s start with a three column CSS-based layout, so after downloading the practice files, open the site file Inline Frames.site, and then double-click on the advanced_css_objects.html file in the Site window to open it.

STEP 2 Adjust the CSS-Based Layout
Using the Object Selection tool, click on the outermost DIV to select it, and then bring up the Inspector palette (Window>Inspector). Set the Right Column Width to 250 pixels. You’ll notice the center area automatically shrinks to accommodate the new size (thanks, GoLive, for doing the math and CSS adjustments for us!).

STEP 3 Set the Default Text for Inline Frame
Double-click on the file called start.html in the Site window to open it. Type in “Choose a destination from the list on the left.” This will act as the default view inside the inline frame when a visitor first opens this page.

Note: You may choose the first destination page (Destination #1) to be the default instead of an instruction page.

STEP 4 Drag Out the Inline Frame Object
Back in the advanced_css_objects.html file, click inside the right DIV with the Standard Editing tool and select all of the contents (Edit>Select All). Press Delete (PC: Backspace) to remove all the contents. Next, click on the flyout menu at the top of the Objects Toolbar and choose Frame. Select the Inline Frame object (top-left icon) from the set of Frame objects and drag it into the rightmost DIV.

STEP 5 Set the Properties for Inline Frame
Select the Inline Frame object that you just inserted and bring up the Inspector palette. Enter (or point-and-shoot to) the start.html file in the Source field, set the Name/ID field to “descriptions,” set the Width and Height to 250 pixels, and uncheck (if checked) the Frame Border setting. Another important option is to leave the Scrolling set to Auto. This will allow the inline frame to attach a scroll bar if the content of the webpage is longer than the inline frame’s height.

STEP 6 Make Your Border with CSS
Let’s make a custom border based on a CSS definition to ensure graphic consistency. Double-click the stylesheet.css file in the css folder in the Site window to open it. Click the Create a New Class Style icon, and use “.border” as the name. Then, select the Border and Outline Properties tab and enter 1 pixel in the All field. Select Blue from the pull-down menu next to the color chip, and select Solid from the last pull-down menu. Close and Save the file.

STEP 7 Apply the CSS Border
Select the inline frame in the advanced_css_objects.html and open the CSS palette from the Window menu. With the inline frame selected, there’s an option to apply CSS definitions to the iframe; let’s apply the border definition we just created to the iframe.

STEP 8 Make Content Pages
Next, we need to make the pages that we’re going to load into the inline frame. Since we’re loading HTML pages, we can create our pages with any technologies a webpage can have, such as text, database results, audio, images, video, and even Flash animations (as I have embedded in the destination_03.html file that you’ll use in the next step).
[For more on using different types of media files in GoLive, see www.layersmagazine.com/category/tutorials/golive.]

STEP 9 Make Links to Content Pages
Select the text “Destination #1” with the Standard Editing tool, hold the Command key (PC: Control key), and point-and-shoot to the file named destination_01.html in the Site window. Repeat this for “Destination #2” and “Destination #3.”

STEP 10 Target the Links
Now we need to target the links so that the pages will load into the inline frame. Select some of the linked text in the Destination #1 link (you don’t have to select all of the linked letters). In the Inspector palette, choose “descriptions” from the Target pull-down menu. Repeat for Destination #2 and #3.

STEP 11 Cross-Link the Content Pages
Double-click the destination_01.html file in the Site window to open it, select the “destination 2” text at the bottom, and link it to destination_02.html in the Inspector palette. Do not set the Target; this will make the link default to the same window the file is in (which is the inline frame). Close and Save the file.

STEP 12 Link Outside of the Inline Frame
Open the destination_02.html file, select the “Link outside of frame” text at the bottom, and make a link to a website in the Inspector palette. For this link, choose “_top” in the Target pull-down menu. This link setting will make sure the link breaks out of the inline frame and takes over the topmost window of the browser.

STEP 13 Add Extra Content to See Scrolling
Before closing destination_02.html, let’s add some extra content to the page. This will ensure overflow in the inline frame so we can see our automatic scroll bar kick into action when we preview the file. Close and save the file.

STEP 14 Preview the Experience
Preview your pages in a Web browser. Notice the border on the inline frame, and how the links target the page into the inline frame area. View the content for Destination 1 and notice how it links to Destination 2 inside of the inline frame. And finally, take a look at the scroll bar on Destination link #2, test the link to the outside page, and then come back and view the Flash animation in Destination 3.

If you design for any medium’s strengths, your design will benefit from what the medium has to offer. Many websites look like print pages, stopping short on the right or using layout techniques optimized for paper. In this tutorial, we want to show you how to take an image and turn it into a tile (in Photoshop) and create the necessary HTML and CSS (in GoLive) to make a liquid design element.

[If you’d like to download the assets used in this tutorial, visit www.layersmagazine.com/magazine-downloads.]

Create Banner in Photoshop

STEP 1 Open New Document; Add Image to Tile
Create a wide canvas and make the height the same as your desired banner. In Photoshop, choose File>New and enter 1000 pixels for Width and 175 pixels for Height. Open the image you want to tile, select the Move tool (V), and drag the image onto your new document. Now drag your image layer onto the Create a New Layer icon to create a duplicate. Position the images so they span the width of the canvas. Click the Add Layer Mask icon, choose the Gradient tool (G), and drag out a short linear Black, White gradient to blend the images.

STEP 2 Style Your Banner; Make Area for Logo
Click the Create New Adjustment Layer icon, choose Hue/Saturation, and boost the Saturation (we used +4). Now click the Create a New Layer icon, select the Rectangular Marquee tool (M), press D to set your default Foreground/Background colors, and drag out a selection across the bottom of the banner (ours is 1000×40 pixels). Press Command-Delete (PC: Control-Backspace) to fill the selection with white, lower the Opacity to 50%, and rename it “white transparent.” Follow the same steps above to create a 1000×65 pixel selection across the top of the banner (leave Opacity at 100%) and rename this layer “white solid.”

STEP 3 Add a Rule; Merge Layers
Click the Create a New Layer icon, choose the Line tool (in the Rectangle tool’s flyout menu), and click the Fill Pixels icon in the Options Bar. Select a pinkish Foreground color and drag out a 1-pixel rule across the image (use the Shift key to keep the rule straight). Name this layer “rule.” Create another new layer and hide any other layer that’s not part of the tiled image (click each layer’s Eye icon to hide it). With your new layer selected, press Command-Option-Shift-E (PC: Control-Alt-Shift-E) to merge a copy of all visible layers into the new layer.

STEP 4 Find the Seams
Select the merged layer (Layer 2), hide all the others, and choose Filter>Other>Offset. In the dialog, enter +500 in the Horizontal field, choose Wrap Around, and click OK. This takes the pixels on the rightmost edge and wraps them around next to the pixels on the leftmost edge, and puts this seam in the center. Now use the Clone Stamp tool (S) or the Smudge tool (under the Blur tool’s flyout menu in the Toolbox) to obscure this transition. Once you hide this seam you’re done with the tile.

STEP 5 Make Some Slices
Make the layer containing your logo visible again. Select the Slice tool (K) and drag out a selection across the top (logo) portion of the image that’s 760×65 pixels. Double-click the slice, name it “logo,” and click OK. Now make a slice for the tiling artwork that’s 1000×110 pixels, name it “tile,” and click OK. Choose Save for Web from the File menu, Shift-click to select the two slices, choose a JPEG preset, and click Save. In the dialog that appears, navigate to the Web folder you’ll be using, and click Save again. Now, we’re ready for GoLive!

Create Liquid Effect in GoLive

STEP 1 Make a New Webpage
In GoLive, choose File>New and select Web from the list on the left. Now click Pages then HTML Page, set your Options (as shown above), and click OK. Choose File>Save As, name your file “banner.html,” navigate to the Web folder (where you put the images in Step 5), and click Save.

STEP 2 Make a CSS Class
Find your logo image and drag it into the webpage. Click the Open CSS Editor icon on the far right to open the CSS Editor. In the dialog, click the Create a New Class Style icon to create a class named “.banner.”

STEP 3 Make a DIV
Control-click (PC: Right-click) in the webpage (not on the image) and select CSS Div>Banner. This will create a DIV in our page and assign it the class of banner (that we just defined in our CSS Editor). You can click the Source Code Editor tab on your HTML page to peek at the source code to see what GoLive is actually doing.

STEP 4 Style Your DIV
Now let’s assign some properties to our DIV. Back in the CSS Editor, select the .banner definition, and click on the Block Properties tab. Enter a Height of 175 pixels and a Width of 100%.

STEP 5 GoLive Represents DIV Area
You should now see a dotted line around your DIV. You may need to switch to Source mode then back to Layout view to give GoLive a chance to render the new DIV settings.

STEP 6 Add the Background Tile
Back in the CSS Editor, select the .banner definition and click on the Background Properties tab. Next to the Image setting in the right side, select URL from the pull-down menu. Then click the Folder icon and navigate to your tile.jpg file. Notice the tile image fills the DIV area.

STEP 7 Repeat Only Horizontally
To make sure the tile only repeats horizontally, select the Repeat setting and choose “Repeat X.” You’ll see GoLive update the DIV preview, representing the tile only repeating across. Now set the Horizontal field to 50%.

STEP 8 Vertical Offset
Next, in the Vertical setting, enter an amount of 65 px (the height of the logo graphic). This tells the Web browser to start the background image’s first pixel at the 65-pixel mark on the y-axis. Lastly, Control-click (PC: Right-click) in the page area and choose Document>Set Page Margins to Zero (to make the banner touch the edges of the browser).

STEP 9 Preview the Page
Click the Preview in Browser icon in the Toolbar to open the banner.html file in your Web browser. As you resize the browser window, notice how the banner fills in the window. This banner now has a “liquid” quality, and given the irregular texture (as opposed to a solid color or vertical blend), the visual appeal is much greater.

Note: You can do the same background image techniques on table cells. Some Web browsers won’t honor height settings in (table cells), so you may have to use a transparent spacer.gif to force the height.

There are many ways we see color. We see colors reflected off of magazine pages and billboards; we see colors in light emitted from television screens, monitors, and cell phones; and colors are “seen” and “re-represented” by capturing existing objects with our digital cameras and scanners.

With all these mediums, the definition of a “color” changes depending on the device. And by “definition,” I mean how the color is perceived by our eyes, not the digital settings that define the color.

So if you have a color you’re trying to reproduce, you can play around with the color settings and eventually you’ll get one device’s color to look exactly like another device’s color. The problem is, who has that kind of time?

Why colors “change”
Each manufacturer has a different way their devices represent color. Two different digital cameras set side-by-side to take the same shot will still represent the subject differently. One brand may have a greater sensitivity for capturing color, while another brand is better at capturing detail and tonal range. The same is true for printers, monitors, and televisions, even though we can feed these devices the exact same colors.

In addition to manufacturers and devices, there are also two color spaces to keep in mind. Our eyes see and process colors in RGB. This is the same color model for all devices that emit light. However, for any printed surface, we see reflected light. Unfortunately, after colors are reflected from a surface, the color properties do not mix the same way anymore; meaning red and green no longer make yellow. The four-color process was developed as a way for us to re-represent colors we see in the natural world. This color model, CMYK, is the standard by which we mix colors on surfaces (remember blue and yellow making green in grade school?).

Lastly, we have colors that are premixed, just like getting a custom gallon of paint at your home improvement store. In commercial printing, there are a few manufacturers widely used such as Toyo (www.toyoink.com), Pantone (www.pantone.com), and TRUMATCH (www.trumatch.com) to name a few. However, these colors still need to be represented using reflective color properties.

RGB is what our eyes see and the color model for devices that emit light.

CMYK is used for the printed page—the color properties in reflected light do not mix the same as colors in emitted light.

Swatches show examples of premixed colors.

The fact that we design and develop our files on a computer means that all colors we specify are represented in RGB on the monitor, even if the color is representing a CMYK color. Scanners and digital cameras also need to use the RGB color space because they are capturing light, the same way our eyes do. This means that all workflows involving printing on physical surfaces must involve RGB as well as CMYK.

Setting up your project
The solution to changing colors is called “color profiles.” Most devices have a color profile that describes how that particular device represents a series of colors. These profiles typically follow a format provided by the International Color Consortium (ICC) as a way for manufacturers to define how their device represents color. These profiles are used in conjunction with your color management software to create a set of “rules” for how colors are supposed to behave. Adobe’s color management software, built into the Creative Suite 2, uses these profiles along with its own color settings files (CSFs) to create workflows for you to choose from.

The easiest way to choose a color management workflow is to use Adobe Bridge. When you select the Bridge Center in the Favorites tab, you’ll see the Color Management button in the bottom center. You may also notice that this button will give you instant feedback on whether the applications in the suite are synchronized, meaning, they are all set to use the same CSF files. If they are synchronized, Bridge will tell you so. If not, that means at least one of the applications is set to use different color settings.

The Bridge Center lets you know immediately if your Adobe applications are synchronized or not.

To make a selection for color management, click the Color Management button, and you will see a list of predefined color setting files. These predefined settings include brief descriptions to help you decide which settings are best for your project. Adobe has provided a list of the most commonly used settings in the publishing industry. In addition, if you select the option for Show Expanded List of Color Settings Files, you’ll see even more settings.

And, of course, you can make your own color settings as well. To create your own color settings file, start with any Creative Suite application and choose Color Settings from the Edit menu (in Acrobat, select the Color Management category in Acrobat>Preferences [PC: Edit>Preferences]). Once you create and save your custom settings, you’ll see this new CSF option available in all of the other Creative Suite applications. What’s more, you can use Bridge to deploy these settings to all of the other applications, as well.

The “anatomy” of a color settings file includes your Working Spaces and your Color Management Policies. A Working Space tells the Creative Suite how you would like the different color models to look both onscreen and when printed. In the top option of the Working Spaces is the RGB setting. This will control how the monitor represents your colors. Adobe recommends using sRGB for Web graphics and Adobe RGB for printing (since it includes some printable colors in its gamut). The CMYK settings are used when printing your documents. These settings are supplied based on standard commercial print conditions.

Color Management Policies are set to represent files that were created before you started with color management—files from cameras, scanners, or from other people. When you’re using Color Management and you get a file that has no profile, or a different profile, you can tell the Creative Suite applications how you would like to represent the colors in that file. Your options include converting the colors to your settings, preserving the settings in the file, or preserving the numbers and ignore linked profiles. This process will give you more consistent color representation across a wide range of files and sources.

Evaluate your colors and begin management
Now that we have chosen some settings, now what? Well, it’s important to realize that these settings do not change the information in your files. You can think of color management as “stylesheets for color.” The actual numbers that represent a color in a file are constant; however, the color settings you choose affect the way that color is represented onscreen and on paper. It’s the same idea as changing the font used for a headline; the actual words in the headline remain the same, just the display looks different. In the example shown below, we have a color we would like to be represented both onscreen and on paper, and to be accurately captured from our scanner. As we discussed earlier, each device is representing the same color a little differently.

After choosing a color workflow that best represents the equipment you’ll be working with, you can start to see how the device profiles are taken into account when applying your color management settings. In the example, we are still replicating the same color; however, the settings for each device have changed as they attempt to replicate the desired color. Again, the original color has not changed from the previous example; but the color combinations for each device have changed.

You can make a few test prints and screen adjustments to fine-tune your settings if you wish, and use Bridge to set the rest of the applications. It’s also a good idea to talk with anyone you share files with, such as your commercial offset printer, video production house, or Web development company, and see if they have specific color profiles or color management in place that you can take advantage of when preparing files for their equipment.

Apps without color management
Sometimes you may need to use applications that do not have their own color management component. For example, the current version of Flash doesn’t support color management—directly. If you have color management activated at your system level, you can successfully translate colors by making sure the operating system is set up with the same RGB profile that you’re using in the Creative Suite. On the Macintosh, use the Color tab located in the Displays pane of the System Preferences; for Windows use Adobe Gamma in the Control Panels.

Once these settings are consistent, you can save a file from Photoshop, Illustrator, or from GoLive as a SmartObject and import the resulting image into Flash. The display of the colors in Flash will match the display of the same colors in the rest of the Creative Suite. This will be the case for most applications that support color settings provided by the operating system.

When you get a new piece of equipment, such as a new color printer that supports RGB, or a new fancy widescreen LCD monitor, how do you add the device into your workflow? When adding a new device into a color management workflow, the device will be treated as if it supports the current profiles. So for example, a new monitor and printer by a manufacturer who already has established profiles will most likely have built the same color management into their device. If you find, however, the device does not “plug-and-play” nicely into your color workflow, there are a few things you can check.

1. Check with the manufacturer about their support for ICC profiles. Find out which profiles they support.

2. Refer to the ICC website at www.color.org to see if the device is listed.

3. Check Adobe.com (www.adobe.com/support/downloads) for updated ICC profiles that may include your new device.

If you still need to tinker with the device’s performance, you may have to create your own custom CSF. From any of the Creative Suite applications, go to the Edit>Color Settings (for Acrobat, go to Preferences>Color Management). Under the RGB and CMYK pull-down menus, make alternate selections based on similar devices or color spaces. For the Gray and Spot options (for printers), choose dot gain amounts that will correct your test prints. When you select Save, name your profile; it will then be available to all other applications in the Creative Suite. You can even use Bridge to set all applications to your new color settings at once.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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