Slice and code a layout

About Celoxdesign

Celoxdesign is a webdesign community offering free high quality tutorials in several categories such as Adobe Photoshop, Maxon Cinema 4D, Cascading stylesheets and xHTML.
I drive myself to give all my knowledge back to the design community for free and will continue doing this for a long time.

Guest tutorials

A new added feature on Celoxdesign is the guest tutorials section, this section will house tutorials written by my guests/members, some of them are even better tutorials that I've written over the past years. Register yourself and submit your own guest tutorials to give something back to the design community.

Intro:

In this css / xhtml tutorial I'll show you how to slice a design in Photoshop, and how to code it from scratch in CSS and xHTML.

Step 1:

For this tutorial I advice you to use my original PSD, from the full gaming template, your could be a few pixels off somewhere which will leave you with another result.

Download Full gaming template PSD

Step 2:

Now we got the template opened up it's time to take the slice-tool



Start by making a slice on the left, from the left to the gray side part of the template. Preview of my slice is below, slice goes all the way to the bottom of the template (NOTE: I marked my slice-lines red so you can see the lines better).



Basicly what we have to do with slicing is chop the template in little pieces, some pieces you won't use for the coding and to get the template to work, so we don't rename these pieces to a proper name like we didn't with the first slice. For ex. The slice of the header we'll rename to header and other images we have to use for the design, you'll get this in a second, it's a bit tricky at first but with some practise you'll master this slicing business!

Step 3:

Now make the slice for the header, start from the right top edge of the first slice and make the slice to the edge of the gray part of the design, same point as where it started but then reversed. Preview below of the bottom-right edge of this slice.

Right-click the slice and choose "Edit slice options", and rename it to header, press OK.



Now make the same slice as the first slice but then on the right side, preview of the part between the header and the right side below.



My full progress so far:

Step 4:

For the top 3 bars of this design we need to chop these in 3 parts, the top left bar, top content bar, and the top right bar. Start by slicing from the bottom-left corner of the header slice, to the hard edge of the menu bar. Previews below.



This is a more zoomed in preview of the right-side of the left menu bar slice.



Rename this slice to lm_top, lm stands for left menu.

1234Next >Last >>