Slice and code a layout Tutorial



Info & Save:

Category:
CSS
Date added:
09-08-07
Level:
Intermediate/Advanced
Author:
Celox
Save to:
Delicious   Digg   Stumbleupon

Step 5:

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

Free Photoshop CS2 tutorial - Slice and code full gaming template

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 Wink .

My progress:

Free Photoshop CS2 tutorial - Slice and code full gaming template

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.

Free Photoshop CS2 tutorial - Slice and code full gaming template

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.

Free Photoshop CS2 tutorial - Slice and code full gaming template

Step 8:

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

Free Photoshop CS2 tutorial - Slice and code full gaming template

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 (Happy ) 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.

Free Photoshop CS2 tutorial - Slice and code full gaming template

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.

Shoutbox
Celox
The brand new site is up and running! There changed a lot around here, so many that I'll be posting a descriptive post on the blog tomorrow Happy I hope you all like the new version's redesign, the new features and what not. There are still some minor bugs those need fixing but I'll get on that in the very near future.
draw_dogs_101
Er... Wierd dogs msg me..
Celox
Hey Hey!
maycute_25
helow to celoxdesign
Celox
Added some new cool text effects, check 'em out! Especially check out the 3D Bulge text effect, it's again one of the best text effect tutorials on the web.
Celox
200 members \o/ let's get drunk! Happy
Celox
I've replied in the critique my graphics thread
Matt
Look at my spider man
Webpoll
Did the site improve with its new update?
Hell yeah!
Nah, I don't think so..
No idea, this is my first time here

Advertisements