Learn CSS in style

How To: Slice A Website Layout Part 2

Check out How To: Slice A Website Layout Part 1

It’s always a good idea to stay zoomed out while slicing, and only zoom in when you’re fixing the exact position of the slice. This will save time and make you more productive.

The next part of the process is to rename your images while you’re sitll inside of photoshop. This reduces confusion and allows you to refrence other content on the site for better naming techniques.

It’s always a good idea to prefix your slice names and be as descriptive as possible with the names. This is the best habit I have ever developed. It’s not always fun typing out a long image name, but it’s a one time thing and everytime you read the code you know exactly what the image is supposed to be.

After all your slices are made, and they are named accordingly, you want to save for web and devices under the file menue.

You will want to go through and make sure that certain images are saved in certain formats. Generally, all photographs should be saved as a .jpg and other graphics can be saved as a .png or .gif, I’ll get more into this in another tutorial.

After saving, you’ll want to clean up the images since photoshop saves all of the other slices that you didn’t rename. They are usually prefixed with the name of your PSD, and have an incrementing number after words. Delete all of these to reduce clutter and keep a clean environment.

Going back into photoshop we want to grab some images that require a transparent background. First we want to kill the background, and any other layers that are behind the layers that we are going to slice out.

Slice the images again the same way you did the first time, and don’t be afraid of using a background layer temperarily to make sure you capture entire drop shadow or other effects. Simply make sure it isn’t visible by the time you go to save for web and devices again.

Make sure not to overwrite any images that you don’t want to. In this example I chose to overwrite my logo.png simply becuase I saved it in teh first run. This could have been avoided by simply waiting untill the second set of slices were being made but really wasn’t a problem.

Your layout is now all sliced up, and exported. We are ready to code!!

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