Introduction to Image Slicing
Tutorial by Matt Doyle. 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:
Share this article on:
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 or two. Sign up now.
Keep in touch
Subscribe to our feed or follow us on Twitter for news of our latest articles and other fun stuff.
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 need help with a Web-building issue, check out our online Webmaster Forums, where you can get assistance from members of Elated and other webmasters.
Link to this page
Feel free to link to this article in your own Web pages. Click one of the boxes below to select the text, then copy and paste it into your page:
