Converting PSD to HTML5 is one of the things a web designer and/or developer should be good at, since this is what considered by clients as a basic skill. These are the key points that will get you more work, and more money.

Today we will convert our portfolio layout from the previous tutorial entitled “How to Create an Awesome Web Portfolio Layout in Photoshop“. We will use HTML5 and a couple of images from the mock up.

You might want to take a look at the following related articles:

Dont forget to subscribe to our RSS-feed and follow us on Twitter – for recent updates.

Final Product What You’ll Be Creating (Click to view full-size image)

Let’s dive in!

First grab your PSD from here, and open it in Photoshop. Next is to download the images from that tutorial so it will be easier to use on our conversion.

Open the .PSD file and we will start to grab the images.
How to Create an Awesome Portfolio Layout in HTML5 & CSS3
Grab Crop Tool (C) and select the logo, on the layers pallete we have a folder named bg’s. Just disable that and all of the background images will be disable, save the file as logo.png.
How to Create an Awesome Portfolio Layout in HTML5 & CSS3
Next is the post footer, make sure you selected a margin on both sides. Disable bg folder and saved as png.

Done with PSD!

Now we will use a web project framework called instantblueprint, put the title of the project and set it to HTML5. The rest are defaults, and hit all done then download. Basically what it does is it will create a folder and file structure for you, helping us focus on the task at hand.
How to Create an Awesome Portfolio Layout in HTML5 & CSS3
We will then set up the HTML of the index.html before diving to CSS. This way we already structured the skeleton of the site before designing it.

Grab all the images and put it in images folder, make sure all of the images that we needed are there. Also grab the font that we used from fontsquirrel, download the file here and put it in a folder named fonts inside of css folder.

<header>
<div id="head"><!-- head -->
<div class="container"><!-- container -->
<div id="logo"><img src="images/logo.png"></div>

<nav>
<ul>
<li><span class="home"><a href="">Home</a></span></li>
<li><span class="portfolio"><a href="">Portfolio</a></span></li>
<li><span class="blog"><a href="">Blog</a></span></li>
<li><span class="about"><a href="">About</a></span></li>
<li><span class="contact"><a href="">Contact</a></span></li>
</ul>
</nav>

</div><!-- container -->
</div><!-- head -->
</header>

Content HTML Code

<article>
<div><!-- article-wrapper -->

<div class="container"><!-- container -->

<div class="content-post-wrap"><!-- content-post-wrap -->

<div class="content-post"><!-- content-post -->
<img src="images/image-1.png">

<div class="content-post-text"><!-- content-post-text -->
<h2><a href="#">Lorem Ipsum</a></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div><!-- content-post-text -->

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

<div>&nbsp;</div>

</div><!-- content-post-wrap -->

<div><!-- content-post-wrap -->

<div class="content-post"><!-- content-post -->
<img src="images/image-2.png">

<div class="content-post-text"><!-- content-post-text -->
<h2><a href="#">Lorem Ipsum</a></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div><!-- content-post-text -->

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

<div>&nbsp;</div>

</div><!-- content-post-wrap -->

<div><!-- content-post-wrap -->

<div class="content-post"><!-- content-post -->
<img src="images/image-3.png">

<div class="content-post-text"><!-- content-post-text -->
<h2><a href="#">Lorem Ipsum</a></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div><!-- content-post-text -->

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

<div>&nbsp;</div>

</div><!-- content-post-wrap -->

<div><!-- content-post-wrap -->

<div class="content-post"><!-- content-post -->
<img src="images/image-4.png">

<div class="content-post-text"><!-- content-post-text -->
<h2><a href="#">Lorem Ipsum</a></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div><!-- content-post-text -->

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

<div>&nbsp;</div>

</div><!-- content-post-wrap -->

<div><!-- content-post-wrap -->

<div class="content-post"><!-- content-post -->
<img src="images/image-5.png">

<div class="content-post-text"><!-- content-post-text -->
<h2><a href="#">Lorem Ipsum</a></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div><!-- content-post-text -->

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

<div>&nbsp;</div>

</div><!-- content-post-wrap -->

<div><!-- content-post-wrap -->

<div class="content-post"><!-- content-post -->
<img src="images/image-6.png">

<div><!-- content-post-text -->
<h2><a href="#">Lorem Ipsum</a></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div><!-- content-post-text -->

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

<div>&nbsp;</div>

</div><!-- content-post-wrap -->

</div><!-- container -->

</div><!-- article-wrapper -->
</article>

Footer HTML Code

<footer>

<div class="container"><!-- container -->

<div class="foot"><!-- foot -->
<h3>Terms & Conditions</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div><!-- foot -->

<div class="foot tweet"><!-- foot -->
<h3>Tweets</h3>
<ul>
<li>Lorem ipsum dolor sit amet consectetuer adipiscing elit, <a href="">#consectetuer</a></li>
<li>Lorem ipsum dolor sit amet, <a href="">consectetuer</a></li>
<li>Lorem ipsum dolor sit <a href="">#amet</a>, consectetuer adipiscing elit consectetuer</li>
</ul>
</div>

<div class="foot social"><!-- foot -->
<ul>
<li><a href=""><img src="images/facebook.png"></a></li>
<li><a href=""><img src="images/twitter.png"></a></li>
<li><a href=""><img src="images/linkedin.png"></a></li>
<li><a href=""><img src="images/flickr.png"></a></li>
<li><a href=""><img src="images/rss.png"></a></li>
</ul>
</div><!-- foot -->

</div><!-- container -->
</footer>

CSS Code

/*

CSS file created with:Instantblueprint - Create a web project framework in seconds.
http://instantblueprint.com
Project: Designrshub.com
File: css/style.css
Last edited: January 20, 2013, 12:17 am

*/

header, nav, article, aside, footer{display:inline;}

@font-face {
font-family: 'LeagueGothicRegular';
src: url('fonts/League_Gothic-webfont.eot');
src: url('fonts/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/League_Gothic-webfont.woff') format('woff'),
url('fonts/League_Gothic-webfont.ttf') format('truetype'),
url('fonts/League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');
font-weight: normal;
font-style: normal;
}

h1, h2, h3, h4, h5{
font-family: 'LeagueGothicRegular';
color:#333;
}

h1{font-size:30px;}
h2{font-size:24px;}
h3{font-size:18px;}
h4{font-size:16px;}
h5{font-size:14px;}
p{line-height:1.2em;margin-bottom:5px;}

/*  Main  */

body {
background: url(../images/Wood_floor_by_gnrbishop.jpg) repeat;
color:#333;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

.container{
margin:0 auto;
width:960px;
overflow:hidden;
}

header{
}

#head{
width:100%;
border-bottom:1px solid #AD8151;
padding:10px;
}

#logo{
float:left;
width:300px;
}

nav{
float:right;
width:400px;
margin-top:90px;
}

nav li{
display:inline;
font-family: Arial, Helvetica, sans-serif;
font-size:16px;
text-transform:uppercase;
font-weight:bold;
margin-right:10px;
text-shadow:0 1px 1px #fff;
}

nav li a{
color:#333;
text-decoration:none;
}

nav li a:hover{
color:#494949;
text-decoration:none;
}

/*nav icons*/

.home{
background: url(../images/home32.png) top center no-repeat;
padding-top:33px;
}

.portfolio{
background: url(../images/gear32.png) top center no-repeat;
padding-top:33px;
}

.blog{
background: url(../images/commentblack32.png) top center no-repeat;
padding-top:33px;
}

.about{
background: url(../images/user32.png) top center no-repeat;
padding-top:33px;
}

.contact{
background: url(../images/mail32.png) top center no-repeat;
padding-top:33px;
}

/*article*/

article{
}

.article-wrapper{
width:100%;
background:url(../images/content-bg.png) repeat;
border-top:1px solid #E3CEB9;
border-bottom:1px solid #E3CEB9;
padding:10px;
}

.content-post-wrap{
overflow:hidden;
width:320px;
float:left;
margin-top:20px;
}

.content-post{
background:#fff;
overflow:hidden;
width:309px;
border-top:1px solid #9B9B9B;
border-left:1px solid #9B9B9B;
border-right:1px solid #9B9B9B;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-top-left-radius:5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}

.content-post img{
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-top-left-radius:5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
z-index: 1;
}

.content-post-text{
padding:10px;
}

.content-post-text h2{
font-family: 'LeagueGothicRegular';
font-size:24px;
margin-bottom:10px;
text-align:center;
}

.content-post-text h2 a{
color:#BF3D2B;
text-decoration:none;
}

.content-post-text h2 a:hover{
color:#333;
text-decoration:none;
-moz-transition: color 200ms ease-in-out 0s;
}

.content-bottom{
background:url(../images/content-bottom.png) no-repeat;
width:313px;
height:35px;
}

footer{
}

.foot{
float:left;
width:280px;
padding:20px 0;
text-shadow:0 1px 1px #fff;
margin-right:35px;
}

.tweet ul{
margin-top:10px;
}

.tweet li{
display:block;
margin-bottom:15px;
background:url(../images/twitter-bird-flying-icon.png) no-repeat;
padding-left:30px;
height:24px;
}

.tweet li a{
color:#333;
text-decoration:underline;
}

.tweet li a:hover{
text-decoration:none;
}
.social{
}

.social li{
list-style-type:none;
display:inline;
}

Now, we need to verify our HTML in W3C Validator.
How to Create an Awesome Portfolio Layout in HTML5 & CSS3
And were good!

I hope you learned a lot from this conversion, and make sure you follow those tips that I give and use instantblueprint for faster workflow.

If you get stuck or lost, feel free to give me a shout out in the comments and I’ll help you out. Make sure you share and subscribe for more web layout tutorial, and tips.

Microsoft PowerPoint Presentation Templates