PSD to Code

Hi Guys

Just to get my web design skills stronger, I have decided to tackle a PSD web layout and turn it into a perfectly valid HTML5 / CSS Layout.

I would greatly appreciate any help. Here is the layout:

As you can see, I have divided the layout in Photoshop. The coloured boxes are my proposed divs. Before I go and create the Divs in Coda, I want to know … Is my division of the layout OK ? Can I make it better, easier to work with ?

I would greatly appreciate some help.

Thank You.



If you want the blue circle background to match the Premium | Graphics | Tutorials … menu bar then you will need to do that section in two stages.

The full width background will have to be a 100% wide element to hold that image with the background aligned to the bottom. The background image should be much bigger than you need so that it can expand if text is resized and still look good. By anchoring the image to the bottom your menu bar will always look ok if the layout grows or shrinks.

The middle element in that section would be a fixed width inner div inside that 100% element and would hold the content only.

The footer would probably be a similar construction but you can probably get away with the black at the top of the page being applied to the body element as it is unlikely to expand.

That’s Good.

Thanks GrannyGotGoat >> No the text { SiteMap } will be inline with the rest :slight_smile:

The division looks great but I am worried about the SiteMap font up top. Is it supposed to be hanging out like that?!?!