Return Home Author Designer Trainer

Photoshop 6
Layer-based slices & Save for Web

by Joyce Evans

 

Layer-based slices is necessary when you want to do rollovers for your buttons in Photoshop.

1
 Open a file with your buttons on separate layers. I borrowed 2 buttons from the bookstore to demonstrate.

2 In the Layers palette, click on the layer of the first button.

 

3
 Now, with the layer selected go to the menu bar and choose File>New Layer Based Slice

 

4

 Notice below how many slices were made. This is one drawback of using a tool that does automatic slicing, there are 8 image pieces instead of 2.

5 We will now save our file. From the menu bar choose File>Save for Web

 

6 Click the Select slice tool   and select a slice

 

7

 If you click the down arrow next to Settings, there are some preset options. I choose the Gif 64 No Dither for this image. Or you can put any custom settings you want and save them as presets as well.

8

 Before you save for the first time you may want to take a look at the Output Settings. If you click the down arrow next to the HTML below there are other options as well, such as slices. Make any changes you'd like and click OK

9




 You can also optimize certain areas of your image, any area can be optimized separately without being rectangular by using channels. Make a mask in Photoshop, then when you go to Save for Web another option will be available. For Gif a Lossy option is available in jpg a quality option is available. I choose jpg for this example

Select your slice, select jpg medium the click the dot next to the quality setting.

10
 When the dialog box comes up, select your channel and choose your settings. Click OK when you are done.

11




 When you click OK to save your image/images, notice it is a HTML file. A table or CSS has been generated for you with the code to place the pieces all together. From the save as menu you will the option to choose Save All the images or just the Selected image.

The option for Tables or for CSS can be accessed through the Output Settings dialog

 

12 Well that's it for slicing and saving for now. Be sure to check out JavaScript Rollovers.

 

 

Reviews | Tutorials | Contact

 



© Copyright 2000-2003 Idea design, All rights reserved.

All graphics, text, HTML and contents of this website are protected by Canadian, American and International copyright laws and may not be reproduced or distributed in any manner without the explicit permission of Joyce J. Evans.

{Sidebar Header}
{Sidebar Content}