CBT Cafe :: Photoshop Tutorials Slicing Images

CBT Cafe > Photoshop > Buttons & Web

Step 6: Editing the Slice Options

In here, you can change the name of the slice to something more identifiable as well as give the sliced image a URL, target, text and alt tag.

In this example I only added a name for the slice

Step 7: Saving for Web

Now, you only need to go to File>Save for Web. This exports the images and the HTML code.

The Save For Web Dialog window comes up

Step 8: Finishing Up

Click OK and save to a new folder
In the folder you'll see that Photoshop created an html file and a folder called images

Step 9: Testing the Page

Double click the slicing.html file and you'll see the image placed in it's own table.

You can also view the code by right-clicking in the web page (not on an image) and selecting View Source from the menu to see the code generated by Photoshop.

You can see the names of the image slices we renamed: topleft.jpg, topright.jpg, bottom.jpg, and bottomright.jpg. Photoshop wrote the html and put these into a table for us:)

Page 1 | Page 2

Copyright © 1999-2015 CBT Cafe, All rights reserved

Flash®, Fireworks™, and Dreamweaver® are registered trademarks of Macromedia, Inc. in the United States and/or other countries
Photoshop®, Photoshop Elements® and Illustrator® are registered trademarks of Adobe Systems, Inc.
QuickTime® is a registered trademark of Apple Computer, Inc.
Ebay® is a registered trademark

CBT Cafe | Multimedia Learning | Interactive Graphics