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 ImageInitially, 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.Place the PiecesOnce 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.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 WorkAfter 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.
|