Get smart with Smart Objects
[an error occurred while processing this directive]
Table of Contents
By Chris Converse for Layers Magazine
Not only is Adobe® GoLive® CS2 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 Smart Objects, one of the most powerful workflow features of GoLive! You can place native Adobe Photoshop® files and set the text in text layers, place native Adobe Illustrator® files and create a SWF animation or SVG, place Adobe 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 box, 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 Smart Object using a Photoshop file as our source file.
1. Create a new document in Photoshop for a graphic headline
The image below shows our webpage. (You can follow along using your own site or one of the sample sites in GoLive CS2.) 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 400x40 pixels. We’re going to create the graphic headline in Photoshop, so let’s switch to Photoshop and create a new document (choose File > New). Set the size to 400x40 and Resolution to 72, then click OK.
Create a new 400x40 document in Photoshop.
2. Set the 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 (choose Layer > Layer Style > Drop Shadow). You can use any of the special effects in Photoshop you like; GoLive will understand all of them!
Choose the Type tool, type some text, and then add drop shadow to the text layer.
3. Hide the background layer and save the document
Before saving the document, we need to hide the background layer (click on the Eye icon next to it in the Layers palette). This action will allow us to make the Smart Object 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.”
Click the Indicate Layer Visibility icon to hide the background layer.
4. Drag the PSD file into GoLive
Switch back to GoLive CS2. From either the SmartObjects folder in your site window or directly from your Desktop, drag the PSD file into your GoLive document.
Drag the PSD file you created in step 3 into the GoLive document.
5. Change the text in the Variable Settings dialog box
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 our site, so we’ll set the text to “About Us.” Click on the Use checkbox and then enter your text in the box below. Click OK.
Type new text in the Variable Settings dialog box.
