Building a Web page using tracing images


    You can design Web pages by using tracing images as visual guides. As a design develops, you can cut out parts of a tracing image and convert them into Smart Objects on the final Web page. (See Working with Smart Objects.)

    You can import the following formats as tracing images: Illustrator AI, Photoshop PSD, JPG, JP2, GIF, PNG, BMP, TARGA, EPS, PCX, PDF, PICT, PIXAR, SVG, TIFF, and Amiga IFF.

To add a tracing image to your Web page:

  1. Select Window > Tracing Image.
  2. In the Tracing Image palette, select Source and specify a file for the tracing image.
  3. If the source is a PDF file, rotate the document if desired, and then select a page.
  4. Set the opacity of the tracing image in the Tracing Image palette.
  5. Do one of the following to position the image in the Layout Editor:
    • Type pixel values in the Position text boxes.
    • Click the Move Image tool table selection pointer in the Tracing Image palette, and drag the image in the Layout Editor. When you're done, click the Move Image tool again to disable the tool.

    Note: You can quickly resize the window to fit the tracing image by selecting Tracing Image from the Change Window Size pop-up menu in the bottom right corner of the document window.

To align a tracing image with an object in the document window:

  1. Select the object.
  2. From the Tracing palette menu, choose Align with Selection.
  3. TipYou can align tracing images with objects such as table cells and GoLive layers.

To return a tracing image to the default position:

    From the Tracing palette menu, choose Reset Position. The image returns to the upper left corner of the page.

To remove a tracing image:

    Deselect the Source check box in the Tracing Image palette.

To cut out a portion of a tracing image:

  1. Select the tracing image.
  2. Click the Crop tool Crop tool and select a rectangular portion of the tracing image.
  3. Note: You can cancel the cut out process by clicking the Cut Out tool again.

    Illustration of Cutting out a portion of a tracing image with these callouts: A. The Cut Out tool selects a portion of the tracing image. B. Save For Web generates a target file from the cut out portion.
    Cutting out a portion of a tracing image A. The Cut Out tool selects a portion of the tracing image. B. Save For Web generates a target file from the cut out portion.
  4. Double-click the selection in the Layout Editor, or click Cut Out in the Tracing Image palette.
  5. In the Save For Web dialog box, make your desired optimization settings, and click Save.
  6. Specify a destination for the file and click Save. The cutout becomes a Smart Object in the document window.