Tutorial: 1. Introduction to image slicing
Level: Intermediate. Published on 22 March 2002 in How to slice an image
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:
Why slice?
So why not just have one big image in your Web page? Well, there are three main reasons:
- 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.
- 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!
- 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:
The end
That's the end of this article. We hope you found it useful. If you're still stuck and would like further help, check out our online Help Forums, where you can get assistance from members of Elated and other webmasters.
Also, don't forget the free ELATED Extra Newsletter, where you can get more great Web-building articles and tips sent straight to your inbox!
If you would like to offer us feedback on this or any of our articles, please contact us. Have fun!