cssboss

Go 0 to 100 REAL QUICK



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!!