During the relatively short course of this subject, I have been asked several times about how you take your photoshop-design and actually implement it. Back when I started designing websites I remember this was one of the things that caused me the most trouble. This was probably due to the design-oriented approach I came with – I was more interested in creating the designs themselves than learning how to code proper html.

I tried lots of poor solutions such as photoshop’s “export as html”-function and Microsoft’s Frontpage. But first when I learned how to (more or less) properly code and structure through HTML I was able to integrate the photoshop layouts properly.

In the following article I will show you, how I undergo the process of taking my photoshop image and creating a functional website out of it.

When you have your photoshop layout completed the first thing you need to do is identify the general structure. Try to see how your design would fit into columns and rows.

As you can see above my layout could generally be divided into two major columns (for the coding itself we will of course use divs). The red div will hold my logo and my menu, and the blue div will hold my “header” / tagline and the content itself.

But obviously this division in itself is not quite fine enough, therefore we must dig a bit further into the structure and identify secondary and (in some cases) tertiary divs – however for the sake of simplicity I will stick to secondary.

As you can see I will divide the logo from my menu, and the header from my content. Now the last thing I need to identify is the background. If this had been a gradient or likewise I would need to import a picture which repeated along the x or y axis in order for the website to display properly on different screen sizes, however the monotone background color is not only easy on the eye – but also easy to code, as it merely needs to be specified in the CSS without any additional images or concern.

Now the last thing left to do is to identify which parts of the website you can merely construct as HTML, and which parts you may need to supplement with pictures. For instance in my menu I wanted to use a non-default font – therefore to ensure that the menu still was displayed in the same way on computers that don’t have the font I needed to export them from photoshop as pictures, these images could then be loaded into the html. You can read more about the process of creating the menu here.