| Smart Objects enable you to import web content from any of Adobe's Creative Suite applications, such as Photoshop and Illustrator. There are many benefits to using Smart Objects in GoLive aside from the obvious convenience of being able to import an image from anywhere. The biggest advantage of using Smart Objects is probably your ability to edit your images in their native applications and have the web images automatically generated and updated in GoLive, eliminating the process of exporting images separately. Here are some of the cool things you can do with Smart Objects: Smart Objects are automatically reoptimized when you resize them in GoLive. You can have multiple Smart Objects that link to a single source file. This means that you can use the same image at multiple sizes and even cropped differently while still maintaining a single source. When you double-click a Smart Object in GoLive, the source file opens in its original application. Using the variable feature you can set layers to be variable and type your own text to be formatted in the manner of the source file. This feature is great for creating buttons, menu items, and page headers that change from time to time. Crop your Smart Objects in GoLive and retain the option to uncrop at any time. Change the matte color to make the backgrounds of your images match your web page background.
Inserting a Photoshop Smart Object Photoshop Smart Objects are probably the most popular kind of Smart Object because Photoshop's image creation and editing features lend themselves so well to creating web content. Of course, you can also use the features of ImageReady to edit and manipulate Photoshop images, so the Photoshop Smart Object is quite powerful. To insert a Photoshop Smart Object, follow these steps: 1. | Drag the Smart Photoshop Object from the Smart Objects palette onto the Layout Editor or double-click the Smart Photoshop Object to insert the image at your cursor location. You can optionally drag any Smart Object compatible file from the Site window onto the Layout Editor.
| 2. | Specify the Source file for your Smart Photoshop Object using the Inspector palette, as shown in Figure 36.18.
Figure 36.18. Choose a Source file from the Smart Object Inspector. 
| 3. | ImageReady's Save for Web dialog appears, as shown in Figure 36.19. Choose the optimization settings for your image and click the Save button to save a target file. Refer to Chapter 12, "Building Web Graphics in ImageReady," for specific information on how to use the Save for Web dialog.
Figure 36.19. The Save for Web dialog. 
| 4. | After you save the target file, your image appears in GoLive, as shown in Figure 36.20. You can always use the Settings button in the Basic tab of the Inspector to optimize your image differently.
Figure 36.20. The Smart Photoshop Object in GoLive. 
|
Inserting an Illustrator Smart Object Illustrator Smart Objects behave like Photoshop Smart Objects in most ways, but you have more options for optimizing the content. Not only can you optimize Illustrator Smart Objects in the usual bitmap formats offered by ImageReady's Save for Web dialog, you can also import them in SVG or SWF format, retaining the vector outlines. Refer to Chapter 21, "Importing, Exporting, and Saving in Illustrator," for details on SVG and SWF formats. If you choose an Adobe Illustrator EPS (encapsulated Postscript) file for a source file for the Illustrator Smart Object, you do not have the options to create an SVG or SWF file and are taken directly to the Save for Web dialog.
To insert an Illustrator Smart Object, follow these steps: 1. | Drag the Smart Illustrator Object from the Smart Objects palette onto the Layout Editor or double-click the Smart Illustrator Object to insert the image at your cursor location. You can optionally drag any Smart Object compatible file from the Site window onto the Layout Editor.
| 2. | Specify the Source file for your Smart Illustrator object using the Inspector palette.
| 3. | If you choose an Illustrator native file, the Conversion Settings dialog appears, as shown in Figure 36.21. Choose a destination format from the pop-up menu. Select the Bitmap Formats option to display ImageReady's Save for Web dialog box, or choose SVG, SVG compressed, or SWF to display dialog boxes for these formats, as shown in Figure 36.22 and Figure 36.23.
Figure 36.21. The Conversion Settings dialog for Illustrator Smart Objects. 
Figure 36.22. The SVG Options dialog. 
Figure 36.23. The SWF Format Options dialog. 
| 4. | After you save the target file, your image appears in GoLive, as shown in Figure 36.24. You can always use the Settings button in the Basic tab of the Inspector to optimize your image differently or change the SVG or SWF options.
Figure 36.24. The Smart Illustrator Object in GoLive. 
|
Inserting a Smart PDF Object When inserting an Acrobat Smart PDF Object into GoLive, you can select from multiple page PDFs or single page image PDFs made in Photoshop or Illustrator. So much graphical content is provided in PDF format these days that the ability to import images directly from a PDF file can be a big time saver: 1. | Drag the Smart PDF Object from the Smart Objects palette onto the Layout Editor or double-click the Smart PDF Object to insert the image at your cursor location. You can optionally drag any Smart Objectcompatible file from the Site window onto the Layout Editor.
| 2. | Specify the Source file for your Smart PDF Object using the Inspector palette, as shown in Figure 36.25.
Figure 36.25. Choose a Source file from the Smart Object Inspector. 
| 3. | The PDF Options dialog appears, as shown in Figure 36.26. Choose a page from the PDF file if it contains more than one page and click OK to display ImageReady's Save for Web dialog box, as shown in Figure 36.27.
Figure 36.26. The PDF Options dialog. 
Figure 36.27. The Save for Web dialog. 
| 4. | After you save the target file, your image appears in GoLive, as shown in Figure 36.28. You can always use the Settings button in the Basic tab of the Inspector to optimize your image differently or choose a different page from the source PDF file.
Figure 36.28. The Smart PDF Object in GoLive. 
|
Inserting a Smart Generic Object The Smart Generic Object supports the following file formats: BMP, PCS, Pixar, Amiga IFF, TIFF, TARGA, PDF, EPS, JPEG, JPEG 2000, PNG, and PICT (Mac only). Most high-end artwork and imagery is saved in TIFF and EPS format, so the ability to convert TIFF and EPS files on the fly in GoLive is great: 1. | Drag the Smart Generic Object from the Smart Objects palette onto the Layout Editor or double-click the Smart Generic Object to insert the image at your cursor location. You can optionally drag any Smart Object compatible file from the Site window onto the Layout Editor.
| 2. | Specify the Source file for your Smart Generic object using the Inspector palette, as shown in Figure 36.29.
Figure 36.29. Choose a Source file from the Smart Object Inspector. 
| 3. | The ImageReady Save for Web dialog appears. High resolution images usually need to be scaled down for use on web pages. Use the Image Size tab of the Save for Web dialog to scale the image while importing, as shown in Figure 36.30.
Figure 36.30. The Image Size options in the Save for Web dialog. 
| 4. | After you save the target file, your image appears in GoLive, as shown in Figure 36.31. You can always use the Settings button in the Basic tab of the Inspector to optimize your image differently.
Figure 36.31. The Smart Generic Object based on a TIFF file in GoLive. 
|
Cropping Smart Objects in GoLive You can crop any Smart Object you place in the GoLive Layout Editor. When you choose to crop a Smart Object, the Layout Editor window becomes masked and only the cropped area appears in full brightness, as shown in Figure 36.32. The tools to handle cropping are located in the main toolbar and you can revert to the uncropped image at any time, even after you've cropped the image. Figure 36.32. The Layout Editor is dimmed by a mask when cropping. 
To crop Smart Objects, follow these steps: 1. | Select a Smart Object and click the Crop Image button in the Inspector palette shown in Figure 36.33.
Figure 36.33. The Smart Object Inspector. 
| 2. | Click and drag to create a rectangle over the area you want to crop. Adjust the cropping area by dragging the handles that appear around the rectangle.
There really isn't any visual cue that a Smart Object has been cropped, but if you know you've cropped an image and want to revert it back to its uncropped state, simply click the image, click the Crop button in the Inspector, and click the Revert button in the main toolbar.
| 3. | If you want to get out without making any changes to the image, click the Cancel button in the main toolbar or press the Escape key.
| 4. | To finalize your adjustments and crop the image, as shown in Figure 36.34, click the Crop Image button in the main toolbar, double-click inside the cropping area, or press the Return/Enter key.
Figure 36.34. The cropped image. 
|
Inserting Favicons for GoLive Pages Favicons are those tiny little icons that sometimes appear next to a website's URL in the URL field of the browser. Some browsers display them in other places as well, like in Netscape's tabs, as shown in Figure 36.35, or Explorer's Favorites menu. The code for favicons is inserted in the Head section of web pages. Figure 36.35. Favicons appear in various places on browsers as in the Netscape tab and URL address field. 
To insert a favicon, follow these steps: 1. | Start by creating images that are relatively small, using Photoshop or Illustrator, as shown in Figure 36.36. Note that 16- by 16-pixel images are typical for favicons.
Figure 36.36. Create a small square image to use as a favicon. 
| 2. | Expand the Head section of the document by clicking the triangle next to the word Head in the upper-left corner of the Layout Editor.
| 3. | Drag the Smart Favorite Icon Object from the Smart Objects palette into the Head section of your document or double-click the Smart Favorite Icon Object in the Smart Objects palette to insert the favicon code, as shown in Figure 36.37.
Figure 36.37. Insert the favicon code in the Head section of the document. 
| 4. | Use the Inspector palette to link to the Source file in the same way you do for other Smart Objects.
| 5. | When the Settings dialog appears, choose which formats you want to save your favicon in. You can select one or more of the color options to create favicons for specific browser settings.
| 6. | Click OK and GoLive prompts you for a location to save the .ico file. Save the file and preview your page in a browser to view the favicon. You may have to try different browsers to find one that displays favicons.
|
|
