PSD to HTML conversion has always been a nerve-racking experience even for the most seasoned developer. The meticulous coding and the amount of precision it demands can further sidetrack a person very easily. Nothing can be more annoying for a webmaster than seeing the work he has desperately worked for hours is ruined because of some minor mistakes during the conversion process.
If you are the one who is facing challenges while converting a PSD design to HTML, then this article is just for you. Here, I have compiled a list of some basic steps involved in PSD to HTML conversion process. The process mentioned below is easy to understand and will surely help you to come up with an appealing and functional website in the quickest possible manner.
So, let's start!
Note:Before we begin, let me tell you that you need a text editor and Photoshop. However, for those who don't have Photoshop, they can use any tool which lets you select different colors and crop images.
Step 1
First of all we will create a folder and assign a relevant name to it. We will create two more folders within the same folder to store images and CSS. We will also make a file with the name index.html and another file known as main.css. Keep both files blank.
Then, we will create a doctype and put some meta tags in it for the purpose of SEO.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html xmlns="http://www.w3.org/2000/xhtml">
<head>
<title>PSD to HTML conversion</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content="My first ever template developedfrom PSD">
<meta name="description" content="My first evertemplate created by direct from PSD to HTML">
</head>
<body>
<p>add some designing elements here</p>
</body>
</html>
Step 2
A typical website template contains some elements that together make it complete and fully-functional. These basic elements are: header, footer, and content. This is the example showcasing the body tag of index file after defining the three elements.
<div id="header"></div>
<div id="contents"></div>
<div id="footer"></div>
This is the code which needs to be added in the body tag to define the overall structure of our template. At this time, your web page displays nothing because you haven't placed any content inside the containers. So, lets resolve this issue with the help of CSS in the next step.
Step 3
So, we will insert some content inside the container (div) which helps us to display the content on your web page. A content div wrapper will be used to complete this process. This is how our code looks like.
<div id="header"></div>
<div id="wrapper">
<div id="contents"></div>
</div>
<div id="footer"></div>
Next, we will color every pixel of our screen, for this consider the full screen as body. Set the width as 100% and margin 0. Up to this point we have a wrapper that will consume the entire screen, whereas content will only consume space up to 960px in the middle. You need to set margin to 0 to make sure your content remains located at the center of the web page.
This is what we need to add to your main.css file.
body {
width: 100%;
margin: 0;
}
#contents {
width: 950px;
margin: 0 auto;
}
#wrapper {
width: 100%;
margin: 0;
background-color: #39302b;
}
#header {
width: 100%;
background-color: #2c2520;
min-height: 200px;
}
Step 4
In this part, we will create a header for our page. A separate div will be created for locating the header. Also, we will use h3 tag to define the heading of our panel. You can customize this tag to make it look as per your website design. Look at the code below to know about the styling rules:
#header h3 {
color: #cbc3ae;
font-family: georgia;
font-size: 15px;
}
The HTML portion of the table will look something like this. Here, you can see two input fields and a header tag, which is placed inside header div.
<div id="log">
<h3>CLIENT LOGIN</h3>
Username
<input type="text" name="username" id="username">
<input type="button" name="login" value="Login" id="login">
<br>
Password:
<input type="password" name="password" id="password">
<input type="button" name="register" value="Register" id="Register">
</div>
At this point, our input fields don't look as clean as we have expected. So fix it using some CSS.
#log {
min-height: 200px;
float: right;
color: white;
font-family: Tahoma;
font-size: 70%;
}
#header input {
background-color: #392f2b;
padding: 2px;
}
#login , #Register {
background-color: #483f3c;
min-width: 80px;
max-height: 25px;
color: white;
background-color: #392f2b;
}
Now, you can see that we have fixed the height and font of our header log. We have also modified our background color of the input field along with the height and register buttons.
Step 5
In this section, we will create footer section of our web page. Our footer mainly consists a horizontal navigation and a line to display copyright.
id="footer_nav">
<center>
<ul>
<li><a href="#">Home </a></li> <font color="white">|</font>
<li><a href="#">Product </a></li> <font color="white">|</font>
<li><a href="#">Services </a></li> <font color="white">|</font>
<li><a href="#">News </a></li> <font color="white">|</font>
<li><a href="#">Contacts</a></li>
</ul>
</center>
<div class="separator2">
</div>
<p>Copyright 2010 name of your website, All rights reserved. Design by XYZ</p>
</div>
The final result when combined everything with index.html will be something like this:
<center>
<div id="container">
<div id="header">
<div id="logo">
</div>
<div id="log">
<h3>CLIENT LOGIN</h3>
Username
<input type="text" name="username" id="username">
<input type="button" name="login" value="Login" id="login">
<br>
Password:
<input type="password" name="password" id="password">
<input type="button" name="register" value="Register" id="Register">
</div>
<div id="navigation">
<ul>
<li class="active"><a href="#">Home</a></li>
<li class="inactive"><a href="#">Product</a></li>
<li class="inactive"><a href="#">Services</a></li>
<li class="inactive"><a href="#">News</a></li>
<li class="inactive"><a href="#">Contacts</a></li>
</ul>
</div>
</div>
<div id="wrapper">
<div id="contents">
<div id="intro1">
<div id="welcome">
<h3>Welcome to Somara</h3>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<p>There are many variations of passages of Lorem Ipsum available.</p>
</div>
</div>
<div id="portfolio">
</div>
<br><br>
<div id="box1">
<div class="pic3">
</div>
<h4>WHY CHOOSE US ?</h4>
<div class="tagline">Opening doors to future and more.
</div>
<div class="separator">
</div>
<div class="text">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. There are many variations of passages of Lorem Ipsum available, but the majority have suffered look even slightly believable. erator on the Internet.
</div>
<div class="read_more">
Read More !
</div>
</div>
<div id="box2">
<div class="pic2">
</div>
<h4>WHY CHOOSE US ?</h4>
<div class="tagline">Opening doors to future and more.
</div>
<div class="separator">
</div>
<div class="text">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. There are many variations of passages of Lorem Ipsum available, but the majority have suffered look even slightly believable. erator on the Internet.
</div>
<div class="read_more">
Read More !
</div>
</div>
<div id="box3">
<div class="pic1">
</div>
<h4>WHY CHOOSE US ?</h4>
<div class="tagline">Opening doors to future and more.
</div>
<div class="separator">
</div>
<div class="text">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. There are many variations of passages of Lorem Ipsum available, but the majority have suffered look even slightly believable. erator on the Internet.
</div>
<div class="read_more">
Read More !
</div>
</div>
<br><br>
</div>
</div>
<div id="footer">
<div id="footer_nav">
<center>
<ul>
<li><a href="#">Home </a></li> <font color="white">|</font>
<li><a href="#">Product </a></li> <font color="white">|</font>
<li><a href="#">Services </a></li> <font color="white">|</font>
<li><a href="#">News </a></li> <font color="white">|</font>
<li><a href="#">Contacts</a></li>
</ul>
</center>
<div class="separator2">
</div>
<p>Copyright 2010 name of your website , All rights reserved. Design by XYZ</p>
</div>
</div>
</div>
</center>
So, this is all we need to do to convert a PSD file into HTML. Be sure to bookmark this page for any future reference.