TIP 157: Tracing Images

You can use a design comp from an application such as Photoshop or Illustrator as a quick way to start a new page design. Just as you can place a sheet of tracing paper over a printed design and trace over parts of it, you can place an image in the background of a GoLive page and trace parts as well. Such an image is called a tracing image. Open the Tracing Image palette from the Window menu, click the Source checkmark, and then point and shoot to the tracing image you want to use as the basis for your design. You can change the position of the tracing image as required by using the Hand tool in the palette (not the one in the toolbar, which moves the entire page) and you can change the opacity depending on how much visibility you need (Figure 157).

Figure 157. Use the Tracing Image palette to place an image in the background of a page and then cut out the parts you want to use.

Cropped Images Are Smart Objects

All the images that are cut out of a tracing image behave like Smart Objects. This means if you go make changes in the tracing image file, all the cutouts update automatically. This is a really interesting way to prototype new page designs quickly.

Next, start cropping. Select the Crop tool in the Tracing Image palette, drag over the part you want to use, and click the Cut Out button to use that piece. When you cut out a part of the tracing image, the Save For Web window opensthis is where you set the compression options and save the resulting image into your site. The cut-out pieces are automatically placed into CSS Layers, and you can easily rearrange the Layers to experiment with the layout. When you're done cutting out pieces, turn off the tracing image by disabling the Source checkbox in the Tracing Image palette.