How to Create a Blog Layout Part 2 [PSD to HTML]

February 1, 2012 · 3 comments

by sanjay

psd to html

One of the most painful process (if you see it that way) of  web design, is the stage where you have to convert PSD to HTML. The whole quality of your project lies on this stage.

Although there are thousands of services available online that converts your  PSD to HTML, the fulfillment that you will get when you’re the one who worked on the entire project is priceless.


ElegantThemes
ThemeForest

Advertisement
For today, you will learn how to use:

  • @font-face
  • CSS3 animation
  • CSS3 gradient; and
  • how to validate the code

Today we will convert our Blog Layout from the last tutorial. If you haven’t seen it, you need to check that out (I’ll wait). One of the things that I will show you is the proper way to convert your PSD to HTML, considering that we will also convert this into a WordPress Theme.

You can download the HTML file here.

We will start by breaking our layout into sections where you can see the:

-header
-content
-post on content
-sidebar on content; and
-footer.

Now we have a clear view on where our div’s should be. We will start with the slicing the image, then HTML structure, and move on to CSS.

Slice the PSD

Now, we will slice the logo, sidebar ads, and background. Open your PSD file and let’s start!

Grab the Cropping Tool (C) and crop the logo, save it as logo.png then press CTRL + Z to revert back to the original layout.

Next one is the ads, just crop one image and then save it. (Was trying to screenshot the cropped image but PS won’t let me, so I ended up using Marquee Tool. But please use Crop Tool :) )

I also cropped the background, under random post there is some space so crop that and save. Or you can just save this image right click > save image as.

Now save those images on your image folder and let’s move on!

We will use @font-face, so go to Font Squirrell and download Bebas @font-face kit. Open the zip folder, copy these (BebasNeue-webfont.eot, BebasNeue-webfont, and BebasNeue-webfont) then paste these file on CSS folder.

PSD To HTML Conversion

First thing that we will do is create these files index.html, image folder, and CSS folder. Or we can use these handy tool Instant Blue Print, this tool will generate those files for you. We just saved 5 minutes of our time :)

Open you index.html on your editor in notepad++ or if you’re using Dreamweaver that’s fine. Put this at the very top of your editor.


Tripwire Magazine

Here is the HTML for header.

<header>
<div>
<!--head-->
<h1><a href="#"><img src="images/logo.png" alt="" /></a></h1>
<nav>
<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">Blog</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Contact</a></li>
</ul>
</nav></div>
<!--head--></header>

Here is the HTML for the whole content

<article>
<div id="content">
<!--content-->
<div class="content-left">
<!--content-left-->
<div class="content-left-main"><!--content-left-main-->
 <img src="images/panda.png" alt="" />
<h2><a href="#">Lorem ipsum dolor sit amet</a></h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
<div class="content-left-main-info"><!--content-left-main-info-->
 <img src="images/document-text.gif" alt="" /> Posted in <a href="#">Wordpress</a>
 <img src="images/person.gif" alt="" /> <a href="#">Sanjay</a>
 <img src="images/comment-right.gif" alt="" /> <a href="#"> 4 Comments</a>
 <img src="images/tag.gif" alt="" /> <a href="#">Wordpress, Tutorials</a></div>
<!--content-left-main-info--></div>
<!--content-left-main--></div>
<!--content-left-->
<div class="content-right">
<!--content-right-->
<h2>Sponsors</h2>
<div class="ads">
<!--ads-->
<ul>
	<li><img src="images/ads.png" alt="" /></li>
	<li><img src="images/ads.png" alt="" /></li>
	<li><img src="images/ads.png" alt="" /></li>
	<li><img src="images/ads.png" alt="" /></li>
</ul>
</div>
<!--ads-->
<h2>Random Post</h2>
<div class="post">
<!--post-->
<ul>
	<li>
<h3><a href="#">Lorem ipsum dolor sit amet</a></h3>
</li>
	<li>
<h3><a href="#">Lorem ipsum dolor sit amet</a></h3>
</li>
	<li>
<h3><a href="#">Lorem ipsum dolor sit amet</a></h3>
</li>
	<li>
<h3><a href="#">Lorem ipsum dolor sit amet</a></h3>
</li>
</ul>
</div>
<!--post--></div>
<!--content-right--></div>
<!--content--></article>

Here is the HTML for the footer

<footer>
<div class="foot">
<!--foot-->
<div class="foot-left"><!--left-->
 Powered by: <a href="http://wordpress.org/">Wordpress</a></div>
<!--left-->
<div class="foot-right"><!--foot-right-->
 <a href="http://tripwiremagazine.com/">Tripwire Magazine</a></div>
<!--foot-right--></div>
<!--foot--></footer>

As you can see all of our div’s are well commented. This might take some time getting used to, but trust me that commenting your div’s will save you a ton of time in the future.

Right now the page has no styling and if you checked it, it’s really messed up. We will use CSS to style our page, open style.css on your CSS folder and paste this code below.

The CSS below is for the head and navigation.


body {
 background: url(../images/bg.png);
 color:#000;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 14px;
}
header{
	background:#404040;
	width:100%;
}
.head{
	width:980px;
	margin:0 auto;
	overflow:hidden;
}
nav{
	float:right;
}
nav ul{
    list-style: none outside none;
    overflow: hidden;
}
nav li{
	display:inline;
}
nav li a{
    margin-left:2px;
    background:#404040;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    color:#fff;
    display: block;
    float: left;
    font-size: 14px;
    font-weight: bold;
    padding: 10px 0;
    text-align: center;
    text-decoration: none;
    width: 94px;
}
nav ul li.active a {
    background:#f9f6f5;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    color:#3a3a3a;
    display: block;
    float: left;
    font-size: 14px;
    font-weight: bold;
    padding: 10px 0;
    text-align: center;
    text-decoration: none;
    width: 94px;
}
nav li a:hover{
    -moz-transition: background 200ms ease-in-out 0s;
    -webkit-transition: background 200ms ease-in-out 0s;
    background:#f9f6f5;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    color:#3a3a3a;
    display: block;
    float: left;
    font-size: 14px;
    font-weight: bold;
    padding: 10px 0;
    text-align: center;
    text-decoration: none;
    width: 94px;
}

These line does some animation to our navigation, on hover the background animates by 200ms. Feel free to change the time to whatever you want. :)

-moz-transition: background 200ms ease-in-out 0s;
-webkit-transition: background 200ms ease-in-out 0s;

Now for our content.

#content{
width:980px;
margin:40px auto 20px auto;
padding:5px;
overflow:hidden;
min-height: 100%;
height: auto !important;
height: 100%;
}
.content-left{
float:left;
width:615px;
background:#fff;
border:1px solid #dddddd;
-moz-border-radius:6px;
-webkit-border-raduis:3px;
border-radius:3px;
padding:20px;
}
.content-left-main{
margin-bottom:20px;
}
.content-left img{
background:#fff;
padding:5px;
border:1px solid #d6d6d6;
}
.content-left-main-info{
font:normal 10px Arial, Helvetica, sans-serif;
color:#ccc;
float:right;
margin:20px 0;
}
.content-left-main-info a{
color:#ccc;
text-decoration:none;
}
.content-left-main-info a:hover{
color:#999;
text-decration:none;
}
.content-left-main-info img{
vertical-align:top;
border:0;
padding:0;
margin-left:5px;
}
.content-right{
float:right;
width:310px;
overflow:hidden;
}
.content-right h2{
background:#f6f4f4;
font-family: 'BebasNeueRegular';
font-size:22px;
text-align:center;
padding:10px;
margin-bottom:10px;
border:1px solid #bbbbbb;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* IE10+ */
background: linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
-moz-box-shadow:0 0 4px #c5c5c3;
-webkit-box-shadow:0 0 4px #8f8f8f;
color:#8f8f8f;
text-shadow:0 1px #fff;
}
.content-right ul{
list-style-type:none;
padding:0;
margin-left:20px;
}
.content-right li img{
display:block;
margin:5px;
float:left;
}
.post ul{
list-style-type:none;
}
.post ul li{

}
.post h3 {
margin-bottom:5px;
}
.ads{
overflow:hidden;
}

On .content-right h2, to achieve the gradient effect I use this Gradient Generator Tool by Colorzilla. Pretty nifty tool!

Our last part is the footer


footer{
background:#404040;
width:100%;
clear:both;
}
.foot{
padding:20px 0;
width:980px;
margin:0 auto;
overflow:hidden;
color:#8f8f8f;
text-shadow:0 1px 1px #000;
}
.foot a{
color:#8f8f8f;
text-decoration:none;
text-shadow:0 1px 1px #000;
}
.foot a:hover{
text-decoration:underline;
}
.foot-left{
float:left;
}
.foot-right{
float:right;
}

Now go and check the page in your browser, the CSS3 will work on Mozilla, Chrome and Safari latest version IE doesn’t
support it. After checking and everything works, it’s time to validate our code. Go to http://validator.w3.org/ and select validate by direct input.


It’s valid!

We are done! Feel free to use this on your projects, you can also use this to hone your HTML skills :) You can also visit different web gallery and try to code different lay out. The harder the layout, the more you’ll learn. Happy Coding!

You can download the HTML file here and see a working demo here.

{ 3 comments… read them below or add one }

xhtmltag March 25, 2013 at 5:45 pm

this one is good post with every good point which every web designer should follow to convert psd to html.

Reply

Web Dizajn March 8, 2012 at 11:27 am

Great tutorial, thanks for sharing

Reply

Convert PSD to HTML February 9, 2012 at 10:17 pm

Great DIY post. If you have time, this is very useful. Most recently I’ve been using psd2html.com. They have a quick turn around so I spend time doing other stuff.

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Previous post:

Next post:


Web Analytics