Home > Articles > Graphics & Web Design > Dreamweaver & Flash

  • Print
  • + Share This
This chapter is from the book

Using a Tracing Image to Transfer a Design to Your Web Page

The tracing image feature is useful when you are creating a page design and you have an image showing all of the completed page elements. You can use this image as a tracing image. Instead of estimating where the elements go onscreen, you can display a tracing image and lay the individual image and text elements over the tracing image perfectly. A tracing image makes it easy to align objects.

Load a tracing image into Dreamweaver in the Page Properties dialog box. The tracing image is visible only in Dreamweaver and is never visible in the browser. A tracing image covers any background color or background image. The background color or background image will still be visible in the browser.

To load a tracing image into Dreamweaver

  1. Open Page Properties and select the Browse button beside the Tracing Image box (at the bottom of the dialog box). Or select the Tracing Image command from the View menu and choose Load.

  2. Browse to the tracing image file. It needs to be a GIF, JPEG, or PNG.

  3. Drag the Image Transparency slider to set how opaque (solid) or transparent the tracing image will be, as shown in Figure 12.13.

  4. Figure 12.13 You can load a tracing image into the Page Properties dialog box. Set the transparency with the slider.

  5. Click OK.

After you've loaded your tracing image, you can turn on Dreamweaver Layout view and begin to draw the design that you see "behind" the Document window in the tracing image, as shown in Figure 12.14. This feature is very helpful when you are implementing a complicated design that has been created by a graphic artist. Usually page elements, such as buttons, titles, and logos, are sliced up in an image-editing program. The graphic artist (or you!) can export an image of the complete design to use in Dreamweaver as a tracing image.

Figure 12.14 With a tracing image loaded, you can trace the design onto the Web page.

  • + Share This
  • 🔖 Save To Your Account