Latest Articles & Tutorials

Don't be stingy, Share this post with others!

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!

Download Demo

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Blue Print Website</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
</body>

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.

<div id="header">
<div id="logo"><a href="#">Blue Print</a></div><!--end logo-->
</div><!--end header-->

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.

<div id="container">

<div id="menu">
<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">Blog</a></li>
	<li><a href="#">Design</a></li>
	<li><a href="#">Tutorials</a></li>
	<li><a href="#">Freebies</a></li>
	<li><a href="#">Submit</a></li>
</ul>

<span>
<form name="search-form" id="searchform" method="get" action="">
  <table width="300" border="1" cellpadding="5">
    <tr>
      <td>
        <input type="hidden" name="dff_view" value="grid">
        <input type="text" name="dff_keyword" size="30" maxlength="50"><input id="submit-btn" type="submit" value="Submit" style="padding:8px 10px 10px 10px; height:35px; margin-left:5px;">
      </td>
    </tr>
  </table>
</form>
</span>
</div><!--end menu-->

<div class="clear"></div>

Top Section header

Step 5

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

<div id="inside-container">
<div id="content">

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

<div class="post">
	<img src="images/thumb.jpg" alt="thumbnail"/>

	<h2><a href="">5 Astonshing lighting effects made using Photoshop</a></h2>

		<div class="post-info"><p>Posted in <a href="">Design</a>, <a href="">Tutorials</a>, on 12.01.2009 by <a href="">Marcell</a></p></a></div>

		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et d
	olore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation .</p>

	<div class="more"><a href="">Read More</a></div><!--end more-->

</div><!--end post-->

<div class="divide"></div>
<div class="clear"></div>

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.

</div><!--content-->

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).

<div id="sidebar">
</div><!--end sidebar-->

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

<div class="widget">
<h2>Subscribe</h2>
	<ul id="social">
		<li class="rss"><a href="#"><img src="images/rss.png" alt="rss"/></a></li>
		<li class="twitter"><a href="#"><img src="images/twitter.png" alt="Twitter"/></a></li>
		<li class="facebook"><a href="#"><img src="images/facebook.png" alt="facebook"/></a></li>
		<li class="flickr"><a href="#"><img src="images/flickr.png" alt="flickr"/></a></li>
	</ul>
</div><!--end widget-->

<div class="widget">
<h2>Sponsors</h2>
	<ul id="adverts">
		<li><a href="#"><img src="images/advert.jpg" alt="advert"/></a></li>
		<li><a href="#"><img src="images/advert.jpg" alt="advert"/></a></li>
		<li><a href="#"><img src="images/advert.jpg" alt="advert"/></a></li>
		<li><a href="#"><img src="images/advert.jpg" alt="advert"/></a></li>
	</ul>
</div><!--end widget-->

<div class="widget">
<h2>Popular Posts</h2>
	<ul>
		<li><a href="#">10 WordPress tutorials that will help you better understand wordpress </a></li>
		<li><a href="#">Create an amazing typography poster using adobe photoshop </a></li>
		<li><a href="#">15 Articles best showing you how to create your very own wordpress theme option </a></li>
		<li><a href="#">Freelancing vs The 9-5: Should you quit your day job to freelance</a></li>
		<li><a href="#">PSD to wordpress Series: Part 2 Converting the wordpress theme</a></li>
	</ul>
</div><!--end widget-->

Step 7

Next we’re going to close the containers.

<div class="clear"></div>
</div><!--end inside-container-->
</div><!--end container-->

Step 8

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

<div id="footer">
<p>Copyright 2010 to Webdevtuts. All Rights Reserved.<span><a href="#header">Top</a></span></p>
</div><!--end 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.

/*
Blue-Print Theme by Marcell Purham
Webdevtuts.net
*/

@import url("css/reset.css");

body {
	background: #152a5b url(images/bg.jpg) top center no-repeat;
	font-family: 'arial';
}

.clear {
	clear:both;
}

p {
	line-height:20px;
	font-size:12px;
}

a {
	text-decoration:none;
	color:#383838;
}

a:hover {
	color:#6a6a6a;
}

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.


#header {
	width:960px;
	margin:0 auto;
}

#logo a {
	background: url(images/logo.png);
	width:384px;
	height:94px;
	display:block;
	text-indent:-9999px;
	margin:30px 10px 10px 0;
}

#menu {
	width:910px;
	float:left;
	background: url(images/grid-pattern.jpg);
	padding:15px;
	margin:10px 0 15px 0;
}

#menu li {
	float:left;
}

#menu li a {
	padding:5px 15px 5px 15px;
	float:left;
	text-decoration:none;
	font-size:16px;
	font-weight:bold;
	color:#383838;
	border-right:2px solid #383838;
	text-transform:uppercase;
	margin-top:5px;
}

#menu span {
	float:right;
}

#searchform input {
	height:25px;
	background:#383838;
	border:none;
	color:#fff;
	padding:5px;
}

#submit-btn  label{
	width:50px;
	display:block;
}

#container {
	width:940px;
	margin:0 auto;
	background:#6b6a6a;
	padding:10px;
}
  • 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 {
	background:url(images/grid-pattern.jpg.);
	padding:10px;
}

#content {
	width:590px;
	float:left;
	background:#6b6a6a;
	padding:10px;
}

.post {
	float:left;
	margin-bottom:15px;
	border-bottom:1px solid #7d7b7b;
	padding-bottom:10px;
}

.post img {
	float:left;
	padding:5px 10px 5px 0;
}

.post h2 a {
	font-size:20px;
	font-weight:bold;
	color:#383838;
}

.post-info {
	background:url(images/post-info-pattern.jpg);
	padding:5px;
	margin: 5px 0 5px 215px;
}

.more a{
	float:right;
	text-decoration:none;
	background:#7d7b7b;
	padding:10px;
	font-size:12px;
	color:#383838;
}

.more a:hover {
	background:#989797;
}
  • 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 {
	width:300px;
	float:right;
}
.widget {
	margin-bottom:15px;
	clear:both;
	list-style-image:url("images/arrow.png");
}
.widget h2 {
	background:#383838;
	color:#fff;
	font-weight:bold;
	font-size:20px;
	padding:10px;
	margin-bottom:10px;
}

.widget ul li a {
	background: url(images/arrow.png) left top no-repeat;
	padding-left: 20px;
	margin-bottom: 10px;
	font-size:12px;
	line-height:20px;
	display:inline-block;
}

#social li {
	float:left;
}

#social li a{
	display:inline;
	float:left;
	background:none;
	padding-left:0;
	margin-left:10px;
}

#adverts li {
	float:left;
	margin-bottom:10px;
}

#adverts li a{
	display:inline-block;
	float:left;
	margin-bottom:10px;
	background:none;
}
  • 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 {
	width:940px;
	margin:0 auto;
	padding:10px 10px 10px 0;
	color:#6b6a6a;
}

#footer span {
	float:right;
}
  • 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.

Don't be stingy, Share this post with others!

Marcell Purham

Marcell is the founder 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


More posts by Marcell Purham →
, , , , , , , , .

8 Responses to Blue Print Layout: Converting a PSD to HTML Tutorial

Close