Transfer a Design with the Tracing Image Tool

To transfer an existing graphic design image or picture to a Web layout, you simply set the tracing image, re-create the pieces on your site, and compare you work to the final design. These steps are described in detail next.

Set the Tracing Image

Initially, you will want to place the entire graphic on the site as your tracing image. You can then produce a page layout using the Layout Tables and Cells task pane.

For more on the Layout Tables and Cells task pane and its role in the design process, see "Using Tables," p. 189.


In Figure 46.4, a very simple table layout has been developed using a single graphic file as the background image.

Figure 46.4. By using the Layout Tables and Cells task pane, the user built a layout around the artist's rendition of the site.

graphics/46fig04.jpg

Place the Pieces

Once the site is laid out in terms of tables, the artist's rendition can be cut into pieces, greatly reducing the size of the initial site. The pieces can then be placed in the layout tables accordingly. You can cut up the images using any graphics program that you feel comfortable with and that can handle the file type you are working with. This method is referred to by many in the industry as "slicing."

TIP

A great tutorial for slicing images with ImageReady can be found at http://slicetutorial.frontpagelink.com.


For more on using third-party graphics tools to edit your FrontPage images, see "FrontPage and Graphic Tools," p. 887.


TIP

Don't attempt to cut up site images using FrontPage's cropping tool. Your requirements are too specific for this approach.


In Figure 46.5, the simple site graphic was cut in to a header and footer piece with a table in the middle for the insertion of content.

Figure 46.5. The original site design graphic was chopped in to three pieces. The whitespace in the middle was discarded.

graphics/46fig05.jpg

After the pieces have been placed, creative use of background colors or images can be used to provide a blend with the site elements. By cutting out the considerable amount of whitespace in the original site design in Figure 46.5, the graphic size is cut down considerably without the loss of any quality at all.

Compare Your Work

After the site elements have been placed in the appropriate tables, the tracing image can be toggled off to assess if anything was forgotten or misplaced.

When the site passes the initial inspection within the FrontPage Design and Preview views, it should be tested in numerous browser and screen size types to ensure that the original design expectations are met.

graphics/troubleshooting_icon.jpg

If you are having problems with your layout not looking exactly as you'd like it to, see "Layout Is Off Just a Bit" in the "Troubleshooting" section at the end of this chapter.




Special Edition Using Microsoft Office FrontPage 2003
Special Edition Using Microsoft Office FrontPage 2003
ISBN: 0789729547
EAN: 2147483647
Year: 2003
Pages: 443

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net