Adjust Smart Objects in GoLive

The new Smart Objects feature in Adobe GoLive CS2 makes it easy to use native files from other Adobe Creative Suite applications in your site. Since you may use the Smart Object in a different way on your site than in its native application, GoLive lets you crop, scale, apply matting, and make other adjustments from within GoLive.

Crop Smart Objects

After a Smart Object is placed on a page, you may decide you don’t want to use the entire image on the web. A perfect example of this would be when you use an Adobe Photoshop image for a print piece in Adobe InDesign, but then want to use just a portion of that image on your website. Instead of creating and managing two versions of the same Photoshop file, just use the GoLive crop feature to customize the target file for appropriate web use.

Select the Smart Object in the Layout Editor and choose the Crop tool in the Inspector palette. When you select the Crop tool, a new set of options appears in the toolbar at the top of the screen.

When you crop a Smart Object, you can use the tools in the toolbar to achieve various results, such as trimming transparent pixels from one or more sides

Click and drag over the Smart Object you want to crop just as you would in Photoshop. As you drag, the parts of the image that will be cropped out are dimmed. Click one of the buttons in the toolbar to crop transparent pixels from any or all edges of the image. If you want to align the crop to the image itself, click the Open Align palette button in the toolbar and use the Align palette to line up the edges perfectly. The Scaling pop-up gives some neat options. For example, choose Keep Scaling if you simply want to crop off parts of the image. Select Keep Object Size, and you can then use the Crop tool to select an area that fills the image at its current size. Choose Scale To Source Size to select an area with the crop tool and have only that area render at the image’s original size.

Confirm a crop with the checkmark icon in the toolbar, cancel a crop with the X icon in the toolbar, and revert a crop with the circle arrow icon in the toolbar. Remember that any crop you make here only affects the target file and never the source file.

Scale Smart Objects

When you scale Smart Objects, hold the Shift key to constrain the proportions of the image. Holding Shift to constrain proportions is pretty typical in just about every graphics and layout application in the world and will probably give you the results you expect.

Hold Shift to constrain proportions when you scale a Smart Object

However, when you scale the bounding box of a Smart Object non-proportionally, GoLive gives you three unique ways to scale the results. The option you choose will depend on the composition of the image and how it fits with the other objects on the page. The three scaling options in the Basic section of the Image Inspector are as follows:

• Exact Fit (default option): This option forces the image to fill the entire bounding box of the image. If the Smart Object is resized non-proportionally, the image will be distorted.

  

  Resize a Smart Object non-proportionally with Exact Fit, and the image will be distorted

• No Border: If you scale a Smart Object proportionally with this option, nothing peculiar happens, and the image just scales. It gets interesting when you scale the Smart Object non-proportionally (from an edge or the corner without the Shift key). The No Border option maintains the proportions of the image and fills the entire image’s bounding box with image data. If the proportions are uneven, then any extra pixels are cropped off. This setting is great if you want to use text variables in Smart Objects for navigation buttons but want the images to be different sizes.

  

  The No Border option crops image data but preserves the proportions of the image

• Show All: This option scales the image proportionally as large as possible within the image’s bounding box and adds transparent or matte-colored borders to whichever sides need the padding. This setting is particularly helpful if you have a Smart Object that needs to be resized to fill a table cell or a template region but you don’t want to crop off any of the image data.

  

  The Show All option maintains image proportions, crops nothing, and adds padding as needed.

Matte Smart Objects

Have you ever tried to eliminate the amateur-looking white fringe around transparent images? It’s normally a pain in the you-know-what, but with GoLive Smart Objects it’s a piece of cake.

Place a source file that has a transparent background. Then select the Matte field in the Inspector palette and select the appropriate matte (fringe) color with the Eyedropper tool from the Color palette or a swatch from the Swatches palette. When you have the right matte color selected, click the Apply button in the Inspector to matte the image.

The following image shows a good before-and-after comparison of the benefits of using a custom matte color to eliminate the anti-aliased fringe. See the yucky white halo in the image on the left and the perfect anti-aliasing on the image on the right?

Use the matte feature for Smart Objects to remove the amateur-looking white fringe on transparent images.

Adjusting matte works with Adobe Photoshop, Illustrator, and PDF files and even works with target file formats that don’t support transparency, such as JPEG.

Note: Smart Illustrator objects that use the SVG or SWF format for the target file do not support a matte color.

Excerpted from “Adobe GoLive CS2 Tips and Tricks” by Adam Pratt and Lynn Grillo© 2005 Adam Pratt and Lynn Grillo. Published by Adobe Press. Used with the permission of Pearson Education, Inc. and Peachpit Press. To buy this book, visit www.adobepress.com.