Using SmartObjects in Adobe GoLive CS
GoLive is not only a state-of-the-art Web design, site architecture, Web development, and site management tool, it’s also a tool that helps you create and manage your Web artwork through SmartObjects, one of the most powerful workflow features of GoLive! You can place native Photoshop files and set the text in text layers, place native Illustrator files and create a SWF animation or SVG, place PDF files and target specific pages within, and place a host of standard print-based formats as well, including TIF, EPS and PICT.
Once you place a non-Web standard file into a GoLive document, GoLive brings up the Save for Web dialog, lets you choose a Web format, and renders a Web graphic that can be used in your website. The “smart” part is that GoLive retains the “link” between the source file and the resulting Web graphic, meaning, if you update the original file (PSD, PDF, EPS, etc.), GoLive will automatically re-render a new Web graphic. Let’s take a closer look at an example of a SmartObject using a Photoshop file as our source file.
STEP 1 Create New Document in Photoshop for Graphic Headline
Here’s our Web page. In the area above the copy (indicated by the red box) we’ve made room for our graphic headline. The amount of space we’ve allowed is 400×40 pixels. We’re going to create the graphic headline in Photoshop, so let’s switch to Photoshop and create a new document (File>New). Set the size to 400×40 and Resolution to 72, then click OK.
STEP 2 Set Type and Add Layer Styles
Select the Type tool (T), and click-and-drag a new Type layer and enter some text. I like to type in the information for the font I’ll be using. Next, set a drop shadow on the text (Layer>Layer Style>Drop Shadow). You can use any of the special effects in Photoshop you like; GoLive will understand all of them!
STEP 3 Hide Background Layer and Save
Before saving the document, we need to hide the Background layer (click on the Eye icon next to it in the Layers palette). This will allow us to make the SmartObject transparent in GoLive. If you have a GoLive site set up, save the Photoshop file into your SmartObjects folder. If you don’t have a site set up, don’t worry; you don’t need to set up a site to use this feature; save the file to a folder on your Desktop. Let’s name the file “headings.psd.”
STEP 4 Drag PSD File into GoLive
Switch back to GoLive. From either the SmartObjects folder in your site window or directly from your Desktop, drag the PSD file into your GoLive document.
STEP 5 Change Text in Variable Settings Dialog
The first dialog you’ll see is Variable Settings. GoLive recognizes the live Type layer as a variable and gives you the option to set this text to something other than what you entered in the Photoshop document. If you choose Cancel, GoLive will set the text that’s in the original PSD file. We’re on the About Us page of the site, so set the text to “About Us.” Click on the Use checkbox and then enter your text in the box below. Click OK.
STEP 6 Select Options in Save for Web Dialog
Now you’ll see the standard Adobe Save for Web dialog. Let’s choose GIF as the file format and check the Transparency option (note that JPEG files cannot be transparent). Choose Save. You may want to create an “images” folder to keep your GIF files organized. As for naming, I use “hd_” at the beginning of my heading graphic filenames to help me identify the images. In this example, we saved the file “hd_about_us.gif” into the site’s headings folder inside the images folder (you can never be too organized!).
STEP 7 SmartObject Options in Inspector Palette
When you select the SmartObject in your page, the Inspector palette will have more options in it than when you select a GIF, JPEG, or PNG graphic. There are Source and Target fields now. The Source field refers to the native SmartObject file and the Target refers to the Web graphic file that GoLive created from the source file. Below that are two buttons called Settings and Variables. If you click Settings, GoLive will bring up the Save for Web dialog and let you reset any of the optimization settings. The Variables button will allow you to reset the text.
STEP 8 Placing Multiple Versions of Same File
The true power of this process can be realized when you begin to place the same PSD file into multiple places in your site. In this site window, there are now four GIF files set from the same Photoshop file, and each GIF has different text in it. As mentioned earlier, this method becomes an asset management solution. Let’s say you’re preparing a series of Web graphics for a site where the developers aren’t using GoLive, you can still use GoLive to produce all of your graphics and deliver only the final GIF files to your developer.
STEP 9 Edit SmartObject in Photoshop
Say your client wants to change the headings style, just Control-click (PC: Right-click) the SmartObject in GoLive and choose Source Link>Edit Original. GoLive will pass the PSD file to Photoshop. Make your changes and click Save. When you switch back to GoLive, you’ll see your changes take effect. GoLive also updates all files related to the source PSD file. In this example, the client chose the Brush Script typeface in green with a yellow outer glow. Making these changes in Photoshop lets you show the client what the change will look like across the site.
STEP 10 Add SmartObject to Different Areas
You may want to use this PSD file in other areas of your site, such as in a sidebar. Well, you’re in luck. Did you notice a few other options in the Inspector palette in addition to the ones mentioned in Step 7? There’s an area for setting a Matte color, a Crop tool, and a Scale tool (for fine-tuning your crop settings). On the Our Staff page, we have a sidebar that’s 220 pixels wide with a brown background. Drag the PSD file into the sidebar and set some text (just like in Steps 4 through 6).
STEP 11 The Graphic Is Too Wide
After placing the SmartObject and setting the text, we see that the graphic is too wide. Remembering the original file is set to 400 pixels wide, we need to crop the image. Instead of making a new Photoshop file sized to 220 pixels wide, we can crop this instance of the SmartObject directly in GoLive.
STEP 12 Crop the SmartObject Instance
With the image selected, click the Crop button in the Inspector palette. You’ll see the Toolbar (top of your screen) change to give you crop settings. In the image, click-and-drag the Crop tool (just like the Crop tool in Photoshop). Once you start dragging, GoLive allows you to enter values in the Toolbar. Enter 0 in both the Horizontal and Vertical Position fields, 220 in the Width field, and 40 in the Height field. Click the checkmark and that’s it.
STEP 13 Decide Where to Set the Matte Color
One final tweak: Notice the white halo effect around our text? This is what the Matte color setting is for. It simulates the transparent edges of your artwork, because GIF and PNG (8 bit) can only have one transparent color. You can set the color either in the Save for Web dialog or in the Inspector palette. I recommend setting the color in the Inspector palette because you can sample colors right from your Web page.
STEP 14 Set the Matte Color
Select the SmartObject and in the Inspector palette, click the color swatch next to Matte to bring up the Color palette. Click the Eyedropper, and click on the background color you’d like your image to “matte” to. Once you see the color represented in the color swatch next to Matte, click Apply.
Photoshop
Illustrator
Indesign
Dreamweaver
Fireworks
Premiere
Flash
After Effects
Lightroom
Acrobat
Featured Partner 
- Dragging an Object Between Documents
- TV Scanline Effect
- Trick to the Glossy Effect
- 3D Text
- Changing Type on a Path
