SLICING GRAPHICS

Rational


In some work situations, web designers work with designers who create the look of the web site using imaging software. The web designer must take this image and create html code through the use of tables. The way to do this is to use software that does all of that for you such as Image Ready found in PhotoShop.

Challenge


Create an image for slicing in PhotoShop. The image should have a title, some text, images, and buttons that can be used as links.
Step 1
Start Image Ready and open the image to be sliced.
Drag guidelines to layout how you want to slice up the image. Make sure the Snap to Guidelines and Snap to Slices is set. You will find it in the View drop down menu.
Step 2
Select the Slice tool. Drag a slice box around the Title. 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. Each slice is numbered.

Tip
There are two types of slices. 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. No Image slices contain either just a color or HTML

Step 3
With the image sliced you can now assign a link, a target, a text message, and an Alt tag to each individual slice. For the buttons and a link.
When you select each slice you can specify an image format and compression scheme for that slice. Use either .gif or .jpg format but keep the compression settings the same. Optimize each slice separately.

Step 4
Save your work once you have it the way you want it. Choose File-Save Optimized as.... The Save Optimized dialog box opens. Change to the folder where you'd like to place the graphics and the HTML. Give the HTML file a name and click OK. Note: Make sure that you have Save HTML File and Same Images checked. This will write your HTML file and save the slices a graphics.