Blue Print Layout: Converting a PSD to HTML Tutorial

A while back I did a tutorial called Create a rocking blue print website layout in photoshop which basically explains how to create a website layout in photoshop. Today I am going to teach you all how to take a photoshop document and convert it to HTML or an actual website. enjoy!

The HTML Markup

Step 1

Download the blue print PSD then Open Photoshop. Usually people used the slice tool and slice the entire layout fast but I like to crop everything which is the slow way. So if you’re familiar with or feel better slicing your layout then you can look over over this step. As for the rest of you take a look at the crop diagram I’ve created and crop each of the items in the picture. I have included labels by each one.
Crop Diagram

Step 2

Now we’re going to begin coding our blue print layout. Open your HTML text editor or WYSIWYG editor and lets begin. The first thing we’re going to do is add in our doctype and setup our
main site structure. copy the code below inside your HTML document and I will explain after.

The code below is the main structure of our website. When first creating a website it is very important that you have the basis HTML tags included in the document such as the head, title, and body tags.

Step 3

Now we’re going to create our header. Below I have created a div with in #header and inside the header will be our logo.

Logo wrap

Step 4

Next we’re going to add the HTML for our container and top section menu and search bar. We will end the container tag at the end of our document.

Top Section header

Step 5

Right below the above code insert the code below. The code below is our wraps for the content.

After the content wrap let’s create our post area with the thumbnails. Copy and paste the code below after the content wraps.

Copy and paste the code above 4 more times. This will give us our blog section. After you have copied and pasted the code 4 times place this code after the last clear div.

Post Area

Step 6

Now we’re going to create our sidebar HTML code. Copy and paste the code below after the end of the content div(After the step above).

Since we have our sidebar ready it time to insert our widgets or shall I say sidebar content.

Step 7

Next we’re going to close the containers.

Step 8

Last step of Inserting our HTML markup is adding the footer.

Footer Unstyled

The Css a.k.a Styling of our webpage

So now that we have our HTML Markup language completed we will now begin styling our web page. I did not explain each markup code above but will do in the css below so have no worries.

Step 9

First we’re going to style our body, links and paragraphs.

Style Body

  • Import url – Use for css reset. Tells css to look for reset.css and the css folder
  • body – I’ve added a background color to the body then from the huge image I cropped I used css to call the image then told it
    to position the image in the top-center of the screen with no repeat.
  • Clear – This is used to clear all floats. so if you remember from the HTML document we’ve included a lot of clear divs.
  • Paragraph – For the paragraph tag I’ve gave it a line-height of 20px(spacing) and a font size of 12px which is what we need for this layout
  • a & a hover – The A tag is the href(links) tag used to link content. I gave it a decoration of none and applied a color to it. For the hover I just simply
    applied a color to it so people would know its a link.

Step 10

Next we’re going to style our logo and menu area. Copy & paste the code below into your css document and I will explain.

  • Logo – For our logo image since I’ve cropped it I called it using css in the image folder then applied the exact height and width to the css so it knows the exact size of the
    logo.
  • Header – For the header I gave it a width of 960px then centered it using the good ol margin 0 method.
  • Menu – For the menu I floated the menu to the left and gave it a width of 910px. Then I added a padding of 15px. For the menu li tags I just basically change the
    font size, color, and padding.
  • Searchform – For the search form I Used the “O DON’T I JUST LOVE TABLES” method. So the search form is created using tables but styled using css. I basically gave it a height
    added some padding and style the submit button
  • Container – The container is what holds the content so I’ve created a container 940px then centered it and gave it the grey background color.

Header Style

Step 11

Now we’re going to style our inside container, content and post area(Blog area). Copy and paste the code below into your css.

  • Inside Container – The inside container is what holds the content and sidebar area. For the inside container I did not need to specify a width considering I’ve already
    added a container with an width to our css. So I just applied a padding to it.
  • Content – For the content div I applied a width of 590px and added a padding of 15px(padding:Space inside. So 15px on every side) to the content div. Then I finally
    floated it to the left side of the container.
  • Post – The post area is the area with our thumbnail, author information, excerpt and read more link. For the post area I’ve floated everything to the left then styled each individual class that was included in the HTML such as Images, links, text and etc.

Step 12

Now we’re going to style our sidebar and widgets area. Copy and paste the code below into your css.

  • Sidebar – For the sidebar I gave it a width of 300px and floated it to the right side of the page.
  • Widget – For the widget area I gave it a margin bottom of 15px which gives each widget a space of 15px. Then I style the widgets list using css and
    the arrow image that we cropped earlier in this tutorial.
  • Social – For the social Icons I’ve floated each item to the left and gave them a margin-left of 10px.
  • Advertisements – For the advertisement I floated each item to the left and told the css to display them as inline block.

Content Styled

Step 13

For the last and final part of our css will be the footer. Copy and paste the code below into your css.

  • Footer – For the footer I gave it a width of 940px then added padding. I also told the footer that any paragraph text should be #6b6a6a(grey). I finally added a span to float to the right and take users back to the top page.

footer styled

CONGRATULATIONS You have finished the Blue Print PSD to HMTL tutorial. I know I did not get in depth with this tutorial but from what I have explain should give you all a hint of how to create your very own HTML website layout. I also think the best way to learn is to experience and play with the code. SO take a look at my code and relook at this tutorial and you should have no problem creating your very own website. If you guys would like to see this template converted to wordpress 3.0 just ask below and I may consider it.

Joe Granados the author

Joe Granados is the owner of WebDevTuts. He is also a web designer & developer who loves to design and develop websites. If you're looking for him you can find him via @webdevtuts
  1. Dan says:

    really nicely written walkthrough – not too advanced and something even a relative novice (pronounced “me”) can understand!

    fallen in love with this site 😀

  2. ATULPERX says:

    You have explained it very well but I am new to photoshop and it will take me to learn and remind it in few days til I get familiar with all options of cs5 . I have also featured your tutorial in my latest 30 PSD to HTML tutorials collection .

    Thanks

Leave a Reply