Slice and code a layout Tutorial

Step 5:

Now make the top content bar slice to the hard edge of the top right bar like below.



Rename this slice to c_top, c stands for content.

And slice the right bar the same as the left bar, rename this slice to rm_top, rm stands for? That's right, right menu .

My progress:

Step 6:

One of the BIG advantages of coding your designs in xHTML and CSS, is that you can use the same top bars over and over again, because we're just going to use some text on these menu bars which I allways do. If you get the coloring right of the font it almost looks like it was designed that way. Ofcourse this way of coding cuts is way more efficient resulting in a much faster loadtime of your page.

Now the only images we need to start coding this puppy is the gradient image and the footer shadow.

Make a slice of one gradient line, preview below. And rename it to gradient.

Step 7:

We have to make a bg stretch image too, this image will repeat itself when the pages stretches it's legs. Make a slice like below, make sure it has a 1px height and doesn't go over the gray edges! Just like any other slice really. Rename the slice to main_stretch.

Step 8:

Finally let's make the footer slice, make sure it has a 81px height. And rename the slice to footer.



That's it for the slicing part of this tutorial! If you like you can download my PSD here with slices

Step 9:

Let's go to the actual coding of this tutorial. If you downloaded my PSD with slices open it up in photoshop.

Now everyone ( ) go to > File > Save for web. And use the settings below, These are the maximum JPEG default setting of photoshop and will have a super nice result when finished.



Click save and use Save as type: Images Only (*.jpg), make a new folder, like Full gaming template. Go into that folder if your not already, Then click the final save button. Photoshop will automaticly make a map images in the selected folder.