Basic Web Design Part III – Coding PSD to HTML

In this PSD to HTML  tutorial, we will take a PSD web design template and turn it into a functional HTML5/CSS template.

To develop your first template , you must have a basic knowledge of CSS / HTML. Please also go through first and second part of this tutorial before starting this third final part, so that you can understand everything in a better way.

1st part: Basic Web Design Part 1- Sitemaps and Wireframing.

2nd Part: Web Design Part II- Photoshop Basic Tools and Panels.

To start with, you will need a text editor and photoshop. In this tutorial, we will be helping you to convert a PSD into a website template using the concepts discussed in our earlier tutorials.

Before starting our tutorial, we would like to show where we will reach at the end starting from scratch. Check it out

Please download the following files here, which will be required during the project. This is obtained at the end of this tutorial. So, lets start developing our first ever webpage…

In this PSD to HTML  tutorial, we will take a PSD web design template and turn it into a functional HTML5/CSS template.

To develop your first template , you must have a basic knowledge of CSS / HTML. Please also go through first and second part of this tutorial before starting this third final part, so that you can understand everything in a better way.

1st part: Basic Web Design Part 1- Sitemaps and Wireframing.

2nd Part: Web Design Part II- Photoshop Basic Tools and Panels.

To start with, you will need a text editor and photoshop. In this tutorial, we will be helping you to convert a PSD into a website template using the concepts discussed in our earlier tutorials.

Before starting our tutorial, we would like to show where we will reach at the end starting from scratch. Check it out

Please download the following files here, which will be required during the project. This is obtained at the end of this tutorial. So, lets start developing our first ever webpage.

wireframe-img

[ Note: This wireframe of the page is created using  MockNow, an online wireframing sharing tool created by Ayush. ]

Step 1: Preparation for the Tutorial

We all know that in converting PSD to HTML/CSS we will need to go back and forth in Photoshop (or other image editing tool) to measure the sizes, distance, and colours. So make sure you Download! and open up the PSD file in Adobe Photoshop.

Download!  Note that this layout is a fixed width of 960px.

Of course you’ll need your favorite code editor and debugging tools. I used Dreamweaver as my text editor and for debugging tools you can use  Web Developer Toolbar and Firebug.

It is important to test our code using different browsers every step of the way so that we can keep on track of our code. I used CSS3 styles in this tutorial, which should work in Chrome and Firefox. For IE6, it still looks fine.

To start with we will make a folder name ‘project’ which will further contain two folders for ‘images’ and ‘css’. We will make a file called index.html(blank for now) and a file called stylesheet.css (blank) in ‘css’ folder.

Step 2:  Add the Basic HTML Markup

So, this is how our index file will appear for now. Putting meta tags in files help in SEO to some extent and is considered a good practice.

Now open up your index.html file using a code editor. Add a basic structure for a new HTML page. Here’s the code block for your basic HTML markup.

</pre>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>PSD to HTML</title>
</head>
 <body>

contents goes here

</body>
 </html>
<pre>

Step 3: Simple Starter Layout

Before putting some designing stuffs there, lets decide how to implement the template. Looking at the picture shown above which is a simple template, you can say that it consists of three different containers. The first one contains links and logo of the company, second contains the main matter plus sidebar of the website , while the last one contains the footer.
That containers in webpages are divs. These divs are customizable in all ways are very friendly. You will come to know about that till the end of the tutorial. So, we will start with making three basics for header, contents and footer. This is how the body tag of index file looks

  • Header: includes logo or heading of the page and main links to the other pages.
  • Main Contents: this section contains main contents or articles of the page.
  • Sidebar links and Widget: this section is divided into 2 columns for links: Sidebar links and other widgets.
  • Footer: Finally, the footer which contain simple copyright.

Now, Based on these notes we create the following HTML layout.

</pre>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>PSD to HTML</title>
</head>
 <body>
<div id="main-wrapper">
 <header>
 Logo / Menu

 </header><!-- end header -->

 <div>
 <section id="main-content">
 Featured Content

 </section><!-- end main-content -->

 <aside>
 Sidebar Content

 </aside> <!-- end sidebar -->

 </div> <!-- end content-wrap -->
 <div id="footer">
 Footer Stuff Goes in Here
 </div>

</div>

 </body>
 </html>
<pre>

Step 4: Working with Header section

Most important part of the header is logo and set of links. Lets insert the logo of the company now. We will put it in a class called logo and set the logo as its background-image. We need to fix its min-height because there will be no contents in the the div. Please note that we need to put this div inside the header div at the left most corner. The div can be positioned to the leftmost point by setting the float attribute to left. So, make these changes in index file.

It is advisable to place the set of links in list tag. Here is the HTML part you need to put inside the header div. Here we have placed the links as unordered list.

</pre>
<h1><a title="HTML5" href="index.html">Heading- Logo Here</a></h1>
<nav>
<ul>
	<li><a href="#">Link 1</a></li>
	<li><a href="#">Link 2</a></li>
	<li><a href="#">Link 3</a></li>
	<li><a href="#">Link 4</a></li>
	<li><a href="#">Link 5</a></li>
</ul>
</nav>
<pre>

Step 5: Adding css to the page

Now let’s add the CSS as follows. All CSS should be added in the style.css file. Also, make sure you just copy the CSS reset which I provided in the resources and place it in recet.css file in css folder.

<span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px;">*{</span></pre>
-webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

.group:after {
 content: "";
 display: table;
 clear: both;
}

body{
 background: #ffffff;
 font-family: Helvetica, Arial, Sans-serif;
 line-height: 1.5em;
 font-size: 14px;
 color: #333333;
}

a{
 color: #1EB4F1;
 text-decoration: none;
}
a:hover, a:focus{
 color: #2BC5F8;
 text-decoration: underline;
}
#main-wrapper{
 width: 960px;
 margin: 0 auto;
}
header{
 background: #ffffff;
 padding: 30px 0 0 0;
}

.logo a{
 display: block;
 width: 133px;
 height: 46px;
 background: url(images/logo.png);
 background-repeat: no-repeat;
 text-indent: -9999px;
 margin: 0 0 25px 20px;
}
.primary ul{
 background: #C2DC17;
}
.primary ul li{
 float: left;
 border-right: 1px solid #333333;
}

.primary ul li a{
 display: block;
 padding: 15px 20px;
 color: #fff;
 text-decoration: none;
}
.primary ul li a:hover{
 background: #AEDC17;
}

.content-wrap{
 background: #e5e5e5;
}

#main-content{
 background: #ffffff;
 float: left;
 width: 660px;
 padding: 40px 20px;
}
.thumbnail{
 float: left;
 margin-right: 20px;
}

.posts{
 clear: both;
 padding-bottom: 40px;
 margin-bottom: 40px;
 border-bottom: 1px solid #bbbbbb;
}

.posts div{
 overflow: hidden;
}

.posts h1 a{
 font-size: 24px;
 color: #333333;
 font-weight: bold;
 text-decoration: none;
}
.posts h1 a:hover{
 color: #11AAEE;
}
.posts p{
 padding: 10px 0 20px 0;
}
.posts .more{
 text-decoration: none;
 font-weight: bold;
}
aside{
 width: 300px;
 background: #e5e5e5;
 float: right;
 padding: 40px 20px;
}

.side-box{
 margin-bottom: 40px;
}
.side-box ul{
 margin-left: 10px;
}
.side-box ul li{
 margin-bottom: 10px;
}
.sidebar-heading{
 font-size: 18px;
 font-weight: bold;
 color: #333333;
 padding-bottom: 20px;
 margin-bottom: 20px;
 border-bottom: 1px solid #bbbbbb;
}
footer{
 clear: both;
 background: #333333;
 padding: 20px 0;
 text-align: center;
}

footer small{
 color: #cccccc;
 font-size: 12px;
}
<pre>

Add following code (link stylesheet.css) in between <head>.. </head> section of your file.


	<link href="style.css" rel="stylesheet" type="text/css" />

Step 6: Adding more css to the page

Create ‘css’ folder and add following css code to reset.css. Or instead of creating two css files, you can also add following codes to ‘stylesheet.css’.


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}

/* remember to define visible focus styles!
:focus {
 outline: ?????;
} */

/* remember to highlight inserts somehow! */
ins {
 text-decoration: none;
}
del {
 text-decoration: line-through;
}

table {
 border-collapse: collapse;
 border-spacing: 0;
}

Add following code (link stylesheet.css) in between <head>.. </head> section of your file.

<link href="css/reset.css" rel="stylesheet" type="text/css" />

Now view your site in browser  Click view . It should look something like image below.

Step 7: Working with main content

Add following contents to body… between <section>… </section> main-content, of the code.

</pre>
<article>
 <img src="images/thumbnail.png" alt="thumnbnail" />
 <div>
 <h1><a href="#" title="">This is a Lorem Ipsum Heading</a></h1>
 <p>Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo. </p>
 <a href="#" title="readmore">Read More</a>
 </div>
 </article>
<pre>

Likewise add two more articles to the page.

</pre>
<article><img alt="thumnbnail" src="images/thumbnail.png" />
<div>
<h1><a title="" href="#">This is a Lorem Ipsum Heading</a></h1>
Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo.

<a title="readmore" href="#">Read More</a></div>
</article><article><img alt="thumnbnail" src="images/thumbnail.png" />
<div>
<h1><a title="" href="#">This is a Lorem Ipsum Heading</a></h1>
Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo.

 <a title="readmore" href="#">Read More</a></div>
</article><article><img alt="thumnbnail" src="images/thumbnail.png" />
<div>
<h1><a title="" href="#">This is a Lorem Ipsum Heading</a></h1>
Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo.

 <a title="readmore" href="#">Read More</a></div>
</article>
<pre>

Step 8: Working with sidebar

To add Sidebar Links and Text Widget to your sidebar add following code between <aside>.. </aside> tag of the page.

</pre>
<div>
<h2>Sidbar Links</h2>
<ul>
	<li><a title="" href="#">Link 1</a></li>
	<li><a title="" href="#">Link 2</a></li>
	<li><a title="" href="#">Link 3</a></li>
	<li><a title="" href="#">Link 4</a></li>
</ul>
</div>
<pre>
<!-- end side-box --></pre>
<div>
<h2>Text Widget</h2>
This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.

 Duis sed odio sit amet nibh vulputate cursus a sit amet mauris.</div>
<pre>
<!-- end side-box -->

Step 9: Working on the Footer Section

Only thing left in the template is the footer now.It contains simple copyright line. Now let’s add the content inside the footer element, here’s the HTML.


<small>Copyright <a title="HTML5" href="#">HTML 5</a>. All rights reserved.</small>

Step 10: We’re done, Finally!

Now , we will be combining them all, so the body of our index.html will look like this:

</pre>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>PSD to HTML</title>
 <link rel="stylesheet" href="css/reset.css" type="text/css" />
 <link rel="stylesheet" href="style.css" type="text/css" />
 </head>
<body>
 <div id="main-wrapper">
 <header>
 <h1><a href="index.html" title="HTML5">HTML 5</a></h1>

 <nav>
 <ul>
 <li><a href="#">Link 1</a></li>
 <li><a href="#">Link 2</a></li>
 <li><a href="#">Link 3</a></li>
 <li><a href="#">Link 4</a></li>
 <li><a href="#">Link 5</a></li>
 </ul>
 </nav>

 </header><!-- end header -->

 <div>
 <section id="main-content">
 <article>
 <img src="images/thumbnail.png" alt="thumnbnail" />
 <div>
 <h1><a href="#" title="">This is a Lorem Ipsum Heading</a></h1>
 <p>Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo. </p>
 <a href="#" title="readmore">Read More</a>
 </div>
 </article>

 <article>
 <img src="images/thumbnail.png" alt="thumnbnail" />
 <div>
 <h1><a href="#" title="">This is a Lorem Ipsum Heading</a></h1>
 <p>Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo. </p>
 <a href="#" title="readmore">Read More</a>
 </div>
 </article>

 <article>
 <img src="images/thumbnail.png" alt="thumnbnail" />
 <div>
 <h1><a href="#" title="">This is a Lorem Ipsum Heading</a></h1>
 <p>Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo. </p>
 <a href="#" title="readmore">Read More</a>
 </div>
 </article>

 </section><!-- end main-content -->

 <aside>
 <div>
 <h2>Sidbar Links</h2>
 <ul>
 <li><a href="#" title="">Link 1</a></li>
 <li><a href="#" title="">Link 2</a></li>
 <li><a href="#" title="">Link 3</a></li>
 <li><a href="#" title="">Link 4</a></li>
 </ul>
 </div><!-- end side-box -->

 <div>
 <h2>Text Widget</h2>
 <p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.
 <br /><br />
 Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. </p>
 </div><!-- end side-box -->
 </aside><!-- end sidebar -->
 </div><!-- end wrap content -->

 <footer>
 <small>Copyright <a href="#" title="HTML5">HTML 5</a>. All rights reserved.</small>
 </footer>
 </div>
</body>
</html>
<pre>

That’s all for now. In this tutorial you learned how to convert a layout from PSD to a fully working HTML/CSS website, don’t forget to validate and check for browser compatibility. If there is a part of this tutorial you didn’t understand, or you have a better technique, feel free to share with everyone by commenting below.

You can now convert any design to working website. In our next tutorial, we will be talking about making this website dynamic by adding a working log-in, register, slideshow and navigation’s.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s