Convert Business PSD template to HTML/CSS tutorial (part 1)

  • Share
  • Share

Today I`m going to make alive another psd file. In this article you will learn how to convert a Corporate Business psd template from PSD to HTML in a step by step tutorial. This very useful psd file you can download from really great resource of free psd graphics called  Graphics Fuel. So, here’s what we’ll be creating now.

corporatix

downloadview demo

1. First of all, Getting Ready.  You`ll need all necessary images and background. You can get all graphic stuff  from your psd file, but if you don`t have time or desire to do it by yourself, you can download it here ->images.

Then, boot up your code editor, I actually use free text editor Notepad++.all necessary images

2. Secondly, Getting Your Files Ready. Now, we are going to create a directory structure. You should create  /images/, /styles/ and  /script/ directories. There, in a root directory, you need to create index.html file. In /images/ directory you upload all images that you download earlier.root directory

In /styles/ directory you create one empty file styles.css , and grab other 3 necessary style files here -> 3styles.(You download 960.css, reset.css and text.css files since we use 960gs grid system as a CSS framework, cause it makes layout and styles creation a lot easier). Now, your /styles/ directory have 4 css files.styles  folder3. Thirdly,Let`s create simple HTML layout. HTML layoutSo, we devided our layout into 4 main sections:  header, slider, content and footer. As we can see content section has 3 sub sections: slogan, first line of posts and second line of posts. Header section consists of menu and logo. And finally, footer section has 2 main parts: information and connections.

Header and slider sections have fixed height, content and footer vice versa.

As for styles, header has gradient background, slider has image background, and content and footer backgrounds repeat itself in both horizontal and vertical direction. We can also mention that slogan section background has piece of  highlight.

Based on these points we create the following HTML layout.

</p>
<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>Corporate Business Web Layout</title>
<link type="text/css" href="styles/reset.css" rel="stylesheet" media="all" />
<link type="text/css" href="styles/text.css" rel="stylesheet" media="all" />
<link type="text/css" href="styles/960.css" rel="stylesheet" media="all" />
<link type="text/css" href="styles/style.css" rel="stylesheet" media="all" />
 </head>
<body>
 <!--Header-->
<div class="header_cotainer">
<div class="container_12">
 Header Section
 </div>
</div>
<!--Slider-->
<div class="slider_container">
<div class="container_12">
 slider Section
 </div>
</div>
<!--Content-->
<div class="content_container">
<div class="container_12">
 Content Section
 </div>
</div>
<!--Footer-->
<div class="footer_container">
<div class="container_12">
 Footer Section
 </div>
</div>
 </body>
 </html>

All CSS should be added only in style.css file.

body {
 color: #000;
 background: #dadfeb;
 font-size: 12px;
 }
  a {
 color: #294f94;
}
  .header_cotainer {
 width: 100%;
 height: 70px;
 display: block;
 /*Gradient BG*/
 background: #dadfeb; /* for non-css3 browsers */
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c6cfe5', endColorstr='#ecf1fe'); /* for IE */
 background: -webkit-gradient(linear, left top, left bottom, from(#c6cfe5), to(#ecf1fe)); /* for webkit browsers */
 background: -moz-linear-gradient(top,  #c6cfe5,  #ecf1fe); /* for firefox 3.6+ */
 overflow: hidden;
 }
  .slider_container {
 width: 100%;
 height: 500px;
 display: block;
 background: url(../images/slider_bg.jpg) repeat-x;
 overflow: hidden;
}
  .content_container {
 width: 100%;
 height: 100%;
 display: block;
 background-color:#dadfeb;
 }
  .footer_container {
 width: 100%;
 display: block;
 background: #565f81;
 overflow: hidden;
 color: #bebebe;
 }

The result should be as the image below.first result

4. Code up header section.header section

You should edit header section in  index.html file. We add 2 new div classes into header container : grid_3 and grid_9. In grid_3 we placed logo image and grid_9 div is for menu items. And the markup looks like this:

sourcecode language=”html”]

Corporatix

 [/sourcecode]

This piece of code you should put instead of  “Header section” inscription. Now we  code menu. As for inactive menu items,it will be easy, since we only have to add some lines of style. But for active items we should code:

  1. Rounded Corners
  2. Gradient BG
  3. Shadow

And all this should work on major browsers. Let`s begin, step by step.

Rounded Corners:

-moz-border-radius: 10px;
border-radius: 10px;

Gradient Background:

</p>
background: #dadfeb; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#c8c8c8'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#c8c8c8)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ffffff,  #c8c8c8); /* for firefox 3.6+ */

Shadow:

-moz-box-shadow: 2px 2px 3px #000;
-webkit-box-shadow: 2px 2px 3px #000;
box-shadow: 2px 2px 3px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
 

Finally, your style.css file should be like this.

body {
 color: #000;
 background: #dadfeb;
 font-size: 12px;
 }
 a {
 color: #294f94;
}
 .header_cotainer {
 width: 100%;
 height: 70px;>
 display: block;
 /*Gradient BG*/
 background: #dadfeb; /* for non-css3 browsers */
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c6cfe5', endColorstr='#ecf1fe'); /* for IE */
 background: -webkit-gradient(linear, left top, left bottom, from(#c6cfe5), to(#ecf1fe)); /* for webkit browsers */
 background: -moz-linear-gradient(top,  #c6cfe5,  #ecf1fe); /* for firefox 3.6+ */
 overflow: hidden;
 }
 .slider_container {
 width: 100%;
 height: 500px;
 display: block;
 background: url(../images/slider_bg.jpg) repeat-x;
 overflow: hidden;
}
 .content_container {
 width: 100%;
 height: 100%;
 display: block;
 background-color:#dadfeb;
 }
 .footer_container {
 width: 100%;
 display: block;
 background: #565f81;
 overflow: hidden;
 color: #bebebe;
 }
 ul#menu {  
 margin-top:20px;
 margin-left:20px;
 padding:0px;  
 position:relative;  
 right:0px;  
 }  
 ul#menu li {  
 display:inline;  
 margin-left:10px;
 }  
 ul#menu li a {  
 text-decoration:none;  
 color:#294f94;  
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:10px;  
 font-weight:bold;
 text-transform:uppercase;
 padding:4px;
 }  
 ul#menu li a.active, ul#menu li a:hover {  
 color:#211e1e;
/*---Rounded Corners---*/
-moz-border-radius: 10px;
border-radius: 10px;
/*Gradient BG*/
background: #dadfeb; /* for non-css3 browsers */<
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#c8c8c8'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#c8c8c8)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ffffff,  #c8c8c8); /* for firefox 3.6+ */
/*==========Small Shadow===========*/
-moz-box-shadow: 2px 2px 3px #000;
-webkit-box-shadow: 2px 2px 3px #000;
box-shadow: 2px 2px 3px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";<
 }

You can see the layout on the screenshot below.second layout
5. Adding and Styling Slider Section. Let’s add the HTML for the slider content. Last month I made alive nice tabbed content slider, you don`t have to download this script since we should slightly modify it, and I`ll show you how to do it lately. But now, let`s add html code into index.html file. As we can see our slider consists of 4 items (4 images). Then we should have 4 list items. Every item should have an id. Every tab content is put in #tabcontent div and for each image we have personal link.

<div id="main">
<ul class="nav>
<li class="selected"><a href="#1">
</a></li>
<li><a href="#2">
</a></li>
</p>
<li><a href="#3">
</a></li>
<li><a href="#4">
</a></li>
</ul>
<div id="1">
<div id="tabcontent">
 <a href="http://land-of-web.com">
 <img src="images/imgSl1.png" width="930" height="430" alt="1st image" />
 </a>
 </div>
</div>
<div id="2">
<div id="tabcontent">
 <a href="http://land-of-web.com">
 <img src="images/imgSl2.png" width="930" height="430" alt="2d image" />
 </a>
 </div>
</div>
<div id="3">
<div id="tabcontent">
 <a href="http://land-of-web.com">
 <img src="images/imgSl3.png" width="930" height="430" alt="3d image" />
 </a>
 </div>
</div>
<div id="4">
<div id="tabcontent">
 <a href="http://land-of-web.com">
 <img src="images/imgSl1.png" width="930" height="430" alt="4th image" />
 </a>
 </div>
</div>
 

6.Styling Slider Content. We should consider following points:

  • Transparent background
  • Width= 980px and height=400px;
  • Slider content should be indented
  • Navigation circles can be done in 2 ways. First way, to draw it by means of css3  and second one is to use static png images for active and inactive states. I choose css3 since using css3 is to keep up to date, but unfortunately safari doesn`t support circles and we get squares, but it`s not a big deal. And google chrome have some problems with multiple shadows, but I suppose this bug will be fixed shortly.

Here’s the CSS for styling slider content.

/* hides the inactive content slide */
.ui-tabs-hide {
 display: none;
}
#main {
 width:980px;
 height:400px;
 position:absolute;
 top:60px;
}
#tabcontent {
 position: relative;
 z-index: 100;
 margin-left:10px;
}
ul.nav {
 width:130px;
 height:25px;
 position:relative;
 margin-left: auto;
 margin-right: auto;
 padding-right:50px;
 top:480px;
}
ul.nav li {
 width:0px;
 height:25px;
 float:left;
 padding:0px 3px 0 px 0px;
 list-style-type:none;
 text-decoration:none;
}
.nav li {
 list-style-type:none;
 text-decoration:none;
}
.nav li p {
/*===Draw circle===*/
display: block;
width: 14px;
height: 14px;
background: #fff;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:7;
/*Gradient BG*/
background: #ffffff; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#c4c5c6'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#c4c5c6)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ffffff,  #c4c5c6); /* for firefox 3.6+ */
/*==========Small Shadow===========*/
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#6b7693')";/* For IE 8 */
}
.nav li.selected
{
 list-style-type:none;
 text-decoration:none;
}
.nav li.selected p
{
/*Draw circle*/
display: block;
width: 15px;
height: 15px;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:8;/*Webkit doesn't handle percentages. for Safari & Chrome*/
/*Gradient BG*/
background: #ccc; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#405686', endColorstr='#9dace1'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#405686), to(#9dace1)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #405686,  #9dace1); /* for firefox 3.6+ */
/*==============Inner and Simple Shadow====================*/
box-shadow:0px 1px 1px #fff, inset 1px 1px 3px #111111;
-webkit-box-shadow:0px 1px 1px #fff,inset 1px 1px 3px #111111;
-moz-box-shadow: 0px 1px 1px #fff,inset 1px 1px 3px #111111;     </p>
 

Now we`ll  modify script code for our slider. But first of all, you should download these 2 scripts: jquery-1.2.6.min.js and jquery-ui-personalized-1.5.2.packed.js (or you can find them on your package). Also you should create code.js file and put it into /script/ directory. Your /script/ folder must have a look like screenshot below.code directory

Now we need to add a link for the JQuery into  index.html file.

<script type="text/javascript" src="slider/jquery-1.2.6.min.js"></script>
 <script type="text/javascript" src="slider/jquery-ui-personalized-1.5.2.packed.js"></script>
 <script type="text/javascript" src="slider/code.js"></script>

So our final HTML file should be like this now.

Then add the Javascript which will make the slider alive. So we must edit code.js file.

$(document).ready(function() {
 $('#main > ul').tabs({ fx: { height: 'fadeOut', opacity: 'toggle' } });
$('ul.nav li').mousedown(function() {
 $('ul.nav li').removeClass('selected');/*Remove all classes from all items*/
 $(this).addClass('selected');/*add class for selected item*/
currentSlide=$('li').index(this)+1; /*return index of selected item*/
 updateButtons();
});
});

If you followed this tutorial correctly then you should have a half working HTML/CSS layout from a PSD one that looks exactly like this.half  working HTML/CSS layout

About the author

Co-founder of land-of-web.

21 Comments

  1. Daina Hutt says:

    Loved the tutorial. You saved me a hell of a lot of agony. Honestly, thank you.

    Reply
  2. stooni says:

    Thanks for these Tutorrial ;)

    Reply
  3. Martin says:

    thank for your sharing.

    Reply

Trackbacks for this post

  1. Learn to Convert a Corporate Business PSD to HTML and CSS | PSD to HTML Tutorials
  2. Convert PSD Business Template to HTML/CSS | TutorialMatrix.com
  3. Convert Business PSD to HTML/CSS Tutorial | TutorialMatrix.com
  4. Triple Treat: 2011's Best PSD to HTML, CSS3 & HTML5 Tutorials | Dzineblog360
  5. 25 Great PSD To HTML Tutorials Conversion
  6. 35 Most Useful PSD to HTML/CSS Conversion Tutorials | PSDreview
  7. 45 Useful PSD to HtML/CSS Conversion Tutorials - PSD Pakistan
  8. 30 Elaborate Tutorials To Teach You PSD to HTML Conversion - noupe
  9. 21 Tutoriales que te enseñan a convertir de PSD a HTML tus diseños web
  10. Convertir un fichier PSD en HTML : 10 tutoriels pour apprendre | Arweb : Création de site internet Saint-Brieuc, Rennes, Dinan, Bretagne
  11. 30 Elaborate Tutorials To Teach You PSD to HTML Conversion : HueDesigner
  12. 30 Elaborate Tutorials To Teach You PSD to HTML Conversion | My Blog | My Wordpress Blog
  13. 35 Detailed PSD To HTML Tutorials -
  14. 30 Best Tutorials to Teach You PSD to HTML Conversion | Extraordinary stuff
  15. 20 Best Psd to html Conversion advanced tutorials - DJDESIGNERLAB
  16. 50 Best PSD To HTML Tutorials Of All Times - SloDive
  17. 85+ Best Free PSD To HTML Conversion Tutorials | Designyea
  18. 30 Helpful PSD to HTML and CSS Tutorials - Streetsmash

Leave a Comment