The creative tutorial home of image wrangler, Lesa Snider.

Getting "Smart" with GoLive

August 24, 2005 by
Using a Smart Illustrator Object

One of the many reasons I switched from Dreamweaver to GoLive was its ability to use Smart Objects. Put simply, GoLive can enjoy a very special relationship with native Photoshop, Illustrator, and .pdf (Acrobat) files. This comes in super handy when you're resizing and optimizing web graphics.

Resizing a Smart Object file in GoLive doesn't mean your graphic gets resized by HTML code. Oh heavens no. GoLive generates a *new* graphic from the *original* native source file at the *new* pixel dimensions, without you dipping a single toe into the application from whence it came.

Let us explore this little gem for ourselves in the form of a Smart Illustrator object.

Getting Started

Recently I needed an icon to represent my "metal self" for use with my donate button on the right-hand sidebar (see "Send Lesa to a heavy metal concert"). I found just the thing on iStockphoto, purchased it for a couple of credits, and downloaded an Illustrator file which was perfect for tweaking. (Once you download an image from iStockphoto, you can do just about anything to it, save for reselling it.) After a few modifications (hair & eye color, etc.), I was ready to pop it into my web page. NOTE: I did not export the file, I simply saved it in native Illustrator (.ai) format.

Step 1: In GoLive, with the document you wish to place the graphic into open, load up the Smart tools in your toolbox, like so:

Step 2: Drag the Smart Illustrator icon from the toolbox into your web page and drop at the desired insertion point. I deposited it to the left of the first letter in the first paragraph.

Step 3: Drag the source file (our native Illustrator file) into the Extras > SmartObjects portion of your site window (you can drag straight into the site window from the Desktop). This is where GoLive likes to keep source files. However, this is optional; your source file can be stored anywhere you like so long as it's accessible within your site window.

Step 4: In the Inspector palette, click on the little "at" sign and point GoLive's "whip" to the source file as shown below:

Step 5: The following dialog box will appear, asking what format you'd like the resulting graphic to be. I chose Bitmap because I wanted to end up with a GIF.

Step 6: Next you'll see the familiar "Save for web" dialog box. I chose GIF with no Transparency (since it'll be sitting on a white background), and a color palette of 64.

Step 7: Enter a filename for your new graphic, and point to where you'd like it to live. This is the file that will get uploaded to your web server, which GoLive affectionately calls the target file.

Step 8: Back in the Inspector palette, I selected Left in the Align pop-up menu so that my graphic floats within the text, on the left side.

Step 9: I also clicked on the More tab at the top of the Inspector, and entered 7 pixels for HSpace. This stands for horizontal space, and gives the text a bit-o-breathing room where I've circled it in red, below left.

Step 10: Hmmm, it's a little larger than I'd like. I can resize it right there in GoLive by clicking and dragging inward with the bottom right handle. Be sure to hold down the Shift key to keep things proportional.

Step 11: The original size of my Illustrator graphic was 116 x 136 pixels, and after Step 10 above, it's now 81 x 99 pixels (I liked the way the text wrapped at that size). I'm fairly skeptical, and since I didn't see anything happen in GoLive -- no delay, no status bar--I popped open a Finder window to check the graphic dimensions.

Sweet! GoLive resized the graphic and created a brand new GIF all by itself.

NOTE: If you changed your mind back and want to revert to the original size, just click the button shown below:

That's all there is to it. Smart Photoshop Objects work the same way, though you may have a different options here and there. Using Smart Objects is a huge time saver for me, and makes the production process feel a little less tedious. I hope you'll think so too ;)