Slicing Images in
Image Ready 3
Home > Build
> Software > Photoshop
by Don Herion
One
of the major improvements in Photoshop 6/Image Ready 3 is the power to quickly
slice up complex images, export the slices in either .gif, .jpg or .png formats
and place them within a saved HTML document.
I first created
an image for slicing in Photoshop. It's a header image w/buttons for my imaginary
African Safari company I've dreamed of starting after I either win the lottery
or invent a longer lasting light bulb. Unfortunately, since the longer lasting
light bulb has been created I'm down to the lottery. By the way, adventuresunlimited.com
is already taken and the image I created has nothing to do with their Web site.
Step
1
Start Image Ready 3.0 and open the image to be sliced. My first step
is to drag guidelines to lay out how I want to slice up my image. Make sure the
'Snap to Guidelines' and 'Snap to Slices' is set. You'll find it in the 'View'
drop down menu. The image below is my final slice plan. It is a little busy.
| |
| Use 'Guidelines' to plan your image slicing. |
Step 2
Select the 'Slice' tool 
.
Now drag a 'slice box around the 'Adventures Unlimited' type. It should snap to
the guidelines. To adjust the 'slice box' put the cursor over the 'Slice' tool
until the sub-menu appears. Select the 'Slice Select' tool 
.
You can now adjust the dimensions of the 'slice box.' Continue slicing the image
until every portion of the image has a slice. As you can see each slice is numbered.
'adventures_orig.jpg' has 12 slices.
Tip: You can create
slices in white or empty areas. Create them as you would any slice and select
'No Image' in the 'Type' drop down menu in the Slice Window. In the image below
slices 05, 07, 09, 11 and 12 are 'No Image' slices.
 |
| Sliced Image |
