|
|
 |
|
|
|
|
|
|
Tutorials |
|
|
|
|
|
Import Photoshop layers as separate images |
|
|
|
|
|
|
You can design your Web page in Adobe® Photoshop® and then import the file layers into Adobe GoLive®. Each layer in the Photoshop file is opened separately in the Save For Web dialog box where you can optimize and save it as a separate Web image. GoLive places the Web images in floating boxes on your Web page. You can use floating boxes to stack images on top of each other or you can animate the floating boxes.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1. Create a Web page and import the Photoshop file layers.
In GoLive, create a new page. Then choose File > Import > Photoshop Layers to Floating Boxes and open your Photoshop file. GoLive asks you to choose a folder for the Web images you’ll be saving. You can select an existing folder in your site or create a new folder. |
| |
|
|
|
2. Optimize each layer as a separate Web image.
The Save For Web dialog box opens automatically for each layer that is in your Photoshop file, beginning with the background layer. If you don’t want to save a particular layer as a Web image, click Cancel and the Save For Web dialog box will close for that layer. Then it will reopen for the next layer in the Photoshop file. Using the slice select tool, select the image in the Optimized tab and then choose the settings and optimize the Web image just as you would in Photoshop—remember to select transparency for GIF or PNG images that are layered on top of others. Click Save to close the dialog box and save the Web image. GoLive names each image based on the name of its corresponding Photoshop layer. |
| |
|
| |
|
|
|
3. Arrange the floating boxes.
Floating boxes are DHTML layers that let you overlap images and position them anywhere you want on the page. To select a floating box with its image, move the pointer over the edge of the floating box and make sure the pointer is a hand rather than an arrow, and then click. The Floating Box Inspector and the Floating Boxes palette also show you when a floating box is selected. When you position a floating box and its image, the anchor of the floating box stays in the upper-left corner of the page where it was first inserted. Use the Floating Box Inspector to set the Z-Index value of each floating box. A floating box with a value of 1 will show the image behind another floating box with a value of 2. |
| |
|
| |
|
|
|
4. Convert the floating boxes to a layout grid.
If you want your page to display in Web browsers that don’t use dynamic HTML 4.0 layers, you can convert them to a layout grid. Make sure that your floating boxes don’t overlap (you’ll have to delete or move any floating box that is in the background), and then choose Convert to Layout Grid from the pop-up menu in the Floating Boxes palette. GoLive creates a new untitled page and places all of the Web images on a layout grid in the same positions that they are in the original page. With adjustments to the design, the floating boxes in this example can be converted to a layout grid. |
| |
|
| |
|
|
|
For more tutorials, and to see art related to these tutorials, visit http://www.adobe.com. |
|
|
|
|
|
2002 Adobe Systems Incorporated. All rights reserved. |
|
|
|
|
