Graphics Zone

CE CASH 3.0

Photoshop's Slice :: Cut up images and html tables too!

by BarryHilton, Adult NetSurprise

In this tutorial we'll be looking at Photoshop's Slice function... it chops up an image into pieces, makes an html table for you and even adds hyperlinks!

We'll start by looking at our original graphic...

Next we need to use the slice tool, a small knife on the main tool bar. Draw a slice box, by clicking and dragging with your left mouse button... starting at the top we need to define the outer edge of our buttons... so draw a box that covers the buttons in the middle of the graphic, see the example below...

You don't have to be too accurate on your first go... if you're out a little, just go to the slice tool on the main tool bar, click and hold, then select the Slice Select tool. We have three slices 01, 02 and 03... click in the center slice (02), its border should go orange to indicate that it's selected. Then move your mouse over the 'drag handles' and click and drag the slice to a new size. It's helpful to zoom into the image when you're positioning slices exactly. In our example I used a zoom of 200% to make it easier to get a 'pixel accurate' slice. When you modify a slice all the other slices will automatically adjust to fit.

Next we need to 'slice' our buttons, select the Slice tool from the main tool menu (you will need to change it from the Slice Select Tool). Zoom in to 200% and draw a slice box around each button...

Now we've got our slices set up, select the Slice Select Tool again from the main tool bar and click on the top button, slice 04. Then click on the Slice Options button in the options menu. If you don't see the options menu go to the Windows menu at the top of the screen and select Show Options'.

From here you can rename your slices, add a URL link, a Target for Frames Based Navigation and even an Alt Tag! Photoshop automatically adds a Border = 0 (no link border showing) so your table wont get out of alignment.

Now go to the Image menu at the top of the screen and select 'Save for Web'. In the Save for Web menu, click OK to save your image then change 'Save as Type' to 'HTML and Images (*.html)'. Click Save and your done! Photoshop will save all the slices in your image as separate graphics and produce an html table for you to use!

To see the final example, our completed sliced up image and table... click here!

Have fun and save time!