PSD to HTML Design Process

Building the Framework and First Page : First we'll do the framework, then the first page, then alternate pages, then finally an alternate colour scheme.

Quick Early Layout : The first thing we'll do is a quick overall layout in HTML with some barebones CSS just to make sure we've got a solid foundation. We can also check it in the major browsers (IE7, IE6, Firefox, Safari) just to make sure we're on a solid footing.

Making a Transparent Logo : Next We've created the logo element. Because later on we'll be running an alternate colour scheme We are going to use a transparent logo PNG file.

Adding the Featured Portfolio Item Content : Now we have the base of our page laid out, it's time to start adding the content blocks. As I mentioned earlier we are going to make this site as a series of interchangeable content blocks.

Making the Main Content Area : Making this content area is the last big thing we need to do really. It will form not only the bottom of this page, but also the whole basis of the generic page.

Adding Footer Content : Now there is just one more section to our page: the footer! here we add some text content