Image Slicing You Can Understand

Image slicing is commonly used to break up images to speed load time. It is also helpful to slice an image that you can repeat as a background, such as a gradient or pattern. You can create a website in Photoshop and then "slice" the file into smaller parts and reassemble them as the site. You can use tables or divs to assemble them, then eliminate any border or padding on the images, so they are side by side. This way there is no seam in between the images, and to the naked eye they are seen as one image. For more information or step by step instructions, please reference the links to the right.

Helpful References

About.com- Very brief introduction on why and how to image slice. Gives three examples of the use of tables to assemble images. I think I get the idea of it now, but lets figure out how to really make it work...

Netmechanic- Ok, ok I know. This article was written 10 years ago... however, again, it really helped me understand what's going on. It's a simpler version of an actual photo or animation. We've come a long way!

Layers Magazine- Alright, here we go, a much more complex site! Almost a little too much at once but after the second readover it made more sense. Now once they started talking about Dreamweaver I'm lost again, but at least I know how to slice everything up in Photoshop.

Free CSS- Explains a little more about what the image heights and buffers should be