Home : Articles : Introduction to Image Slicing

Introduction to Image Slicing

Tutorial by Matt Doyle | Level: Intermediate | Published on 22 March 2002

Categories:

Understanding image slicing is essential for working with the PSD files to produce new graphics, menu options and section headings for your website. This introductory article explains the basics of slicing.

Slicing is a fundamental skill that you'll need to learn if you want to modify the images in the PageKits. This section will show you how to slice using your graphics program.

What is slicing?

"Slicing" refers to the process of chopping up a large image into smaller images for use in a Web page. The images are then placed in the Web page, usually in HTML tables or divs, which causes them to join together again to form the original, large image.

Slicing is used heavily when making the PageKits. The original PageKit design is usually created as one big, layered Photoshop document, also called a PSD file because the filename ends in .psd. The PSD is then sliced to produce the individual images for the Web page itself:

Original PSD document
1) The original PSD document, showing the whole image
Slices
2) Individual GIF Images (slices) are created from the above PSD document
Slices placed in HTML tables
3) The above GIF slices are placed in HTML tables on the Web page, in the same positions as they appeared in the original PSD
Final image in the Web page
4) With table borders set to zero, and the page background set to the right shade of green, the finished web page shows the reconstructed image

Why slice?

So why not just have one big image in your Web page? Well, there are three main reasons:

  1. Rollovers. In order to create rollover menus that integrate well with the rest of the graphics on the page, you need separate, small images for the menu items. It would simply take too much bandwidth to have one big image for every single rollover.
  2. Control over layout. By splitting the big image up into lots of smaller images, you can control the position of other page elements, such as HTML text and Flash movies, more easily. For example, you can place a Flash movie "inside" your big image by creating a table around the movie that contains the slices of your big image. You wouldn't be able to do this if you just had one big image, as there would be nowhere to put your Flash movie!
  3. User Friendliness. It's not nice to have to wait ages for a big image to download. By splitting the image up into smaller images and placing these images in the Web page, the user can get a feel for the layout and look of the page before the whole page has loaded.

How to slice

Slicing an image can be a bit fiddly. Luckily, most modern graphics editors such as Photoshop, Paint Shop Pro and The Gimp come with an excellent feature called Guides. Guides are horizontal and vertical lines that you can drag over the top of your image to help you visualise how to slice them up. You can even use the "Snap to Guides" feature to make sure that your slices are accurate right down to the nearest pixel!

To make life easy for you, most of the PageKits PSDs contain the guides that were used to make the original PageKit, making it easy for you to re-slice your modified PSDs.

For details on how to produce a slice from a PSD using your graphics program, click on the appropriate link below:

Follow Elated

Related articles

Responses to this article

There are no repsonses yet.

Post a response

Want to add a comment, or ask a question about this article? Post a response.

To post responses you need to be a member. Not a member yet? Signing up is free, easy and only takes a minute. Sign up now.

Top of Page