Learn CSS in style

How To: Slice A Website Layout Part 1

Today we’re going to be looking at slicing a PSD layout in Photoshop and getting everything ready to give to the coder to either code it up or for you to code.

Let’s go ahead and take a look at our design. it’s important to look for any gradients, and images and get a general idea of what you’re going to be slicing out.

I always start off at the top left of the layout, and work my way down to the bottom right. usually I start right with the logo.

It’s important to optimize your slices by making them the bare minimum of what they should be. The exact pixel where the image ends is right where you should be slicing. This reduces image size which reduces bandwidth. So there are benefits to taking on this tedious task.

If you can’t tell at first glance if there is a gradient on an element, using the color dropper to determine if there are changes in the shades of color is the fastest and most accurate way to tell. If everything is a solid color, it doesn’t need to be an image. We want to leave as much as the design as possible up to CSS.

When slicing images out, you want to leave the border out as well, this is so when you go to change an image later on, you don’t have to deal with adding the border onto the image. this will speed up future updates and also decrease future headaches for either you or who ever else is working on the website.

Check out How To: Slice A Website Layout Part 2