Adobe
Sign in My shipments My support
Back to index
Printable version
Import Photoshop layers as separate images
page: 1 2
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.
main_int
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.
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.
step02_int
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.
step03_int
back to top
previous next