TIP 147: Optimizing Photoshop Layouts

Most users place normal Photoshop files, but you can also place entire page comps complete with slices. Create your layout in Photoshop, slice it as desired, and then use either of the two methods outlined in Tip 146 to place the sliced PSD file onto your GoLive page. As expected, the Save For Web window opens and displays the entire document, including the slices. To set the compression for a slice, select it with the Slice Select tool on the left side of the Save For Web window and then adjust the settings using the options on the right (see Tip 142 for more on Save For Web).

ImageReady and Illustrator Layouts

You can use the very same methods outlined in Tip 147 to place sliced Illustrator or ImageReady documents into GoLive as well. The bonus to using ImageReady is that it supports slices, rollovers, remote rollovers, hyperlinks, and more. For yet another method for using ImageReady layouts in GoLive, take a gander at Tip 150.

Note

If you've used ImageReady to create the sliced layout and have already set your compression settings there, those settings will be honored when you use the PSD in GoLive.

When you're done fine-tuning your settings, click Save to save the resulting files into your site. You'll notice in the Save dialog box that the file extension is .data. Upon saving the .data file you'll see that GoLive has created a folder whose contents include a settings.opt file and images created from the slices in the PSD (Figure 147).

Figure 147. GoLive automatically generates a folder with a .data extension that holds a settings file and images.

If later you want to adjust the design, you can simply double-click on the edge of the SmartObject you placed into your page, and the original PSD file will open in Photoshop or ImageReady for you to edit. When you save the PSD file, GoLive will update the SmartObject, including its slices. In GoLive, you can adjust the size of the entire image, crop it, or change the matte color as you can with any other SmartObject. However, you cannot adjust the table, add text to any of its cells, or add functionality such as Actions to the slices. This method works best if you prefer to edit the design in Photoshop.