Use Photoshop Mockups as Tracing Images When Building Pages in GoLive

How To Render Cars In Photoshop

Learn Photo Editing

Get Instant Access

If you designed a detailed mockup in Photoshop containing significant portions that are not comprised of graphics, such as the one that includes form elements or large areas of text, it can be particularly useful to have a copy of that mockup in sight when building the code for the web page. GoLive has a feature that not only allows you to have that mockup in sight while you're building the code but also gives you the opportunity to "cut out" portions of that mockup and optimize them as web graphics without having to open Photoshop.


TRY IT To use a Photoshop file as a tracing image when building a web page layout in GoLive, open the file you want to work with in GoLive or choose File I New Page to create a new web page layout. Then, select Window I Tracing Image to display the Tracing Image palette.

Place a check mark in the box next to Source and click the folder icon to locate the file you want to use as a tracing image. By default, GoLive sets the Opacity of the tracing image to 50%. To edit that setting, simply move the slider to the right to increase the opacity or to the left to lessen it.

You can also move the tracing image by first selecting the Move Image tool (shaped like a hand) from the Tracing Image palette. Click and drag the tracing image to reposition it. Or type values into the Position text boxes to more precisely reposition it. To remove a tracing image, uncheck the box next to Source in the Tracing Image palette.

Select Tracing Image from the Change Window Size pop-up menu at the bottom of the document window to shrink the window to match the boundaries of the tracing image.

TRY IT To cut out an element from the tracing image and optimize it as a web graphic on the web page, select the Cut Out tool (shaped like Photoshop's Crop tool) in the Tracing Image palette and draw a selection around the section of the tracing image you want to cut out. When you're satisfied with your selection, click the Cut Out button in the Tracing Image palette or double-click the selection to launch the Save For Web dialog box, in which you can optimize the graphic. Or to cancel the Cut Out tool, deselect the tool in the Tracing Image palette.

Was this article helpful?

0 0
Understanding Adobe Photoshop Features You Will Use

Understanding Adobe Photoshop Features You Will Use

Adobe Photoshop can be a complex tool only because you can do so much with it, however for in this video series, we're going to keep it as simple as possible. In fact, in this video you'll see an overview of the few tools and Adobe Photoshop features we will use. When you see this video, you'll see how you can do so much with so few features, but you'll learn how to use them in depth in the future videos.

Get My Free Video

Post a comment