Image Slicing for fluid CSS designs

Overview

Our aim is to take a pixel based design made using image editing software such as Photoshop, Paint Shop Pro or the Gimp and turn it into a fluid (also known as liquid) CSS layout that works in all browsers and allows the user to change the text size without breaking the design.

The pixel based design I will be using as an example is shown here, scaled to 50%. Click it to see the full size version (PNG, 56KB). Although this tutorial uses this specific design, the general techniques used to build the site apply to most pixel based designs.

I will show you how to build this in a number of steps:

1. Basic layout. This will introduce you to the concepts involved in the simplest way possible.
2. Content. We will add some dummy content to the page and style it using CSS.
3. Optimised layout. This will show you how to improve the layout you built during the basic steps.

   Some of the things we need to do are:

   • Make the content better fit the layout.
   • Optimise and combine our images so that there are less images and their individual sizes are smaller.
   • Clean up the HTML and CSS, organise our files.
4. Alpha Transparency. This will show you the alternate technique required for layouts that take advantage of alpha transparent PNG images.