Slice and code a layout Tutorial
As a registered user you can publish your own tutorials on this site, these tutorials will be published as so called Guest tutorials. You will remain the author of a guest tutorial, to show this your firstname/nickname and a back-link to your own site will be posted on the specific tutorial page. Your site-name will be used for the link text. Register an account and start publishing your tutorials!
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.