Creative Ring Business Cards

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

Total
0
Shares

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.

[sourcecode language=”html”]</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 ENGINE=”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>
[/sourcecode]

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

[sourcecode language=”css”] 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;
}
[/sourcecode]

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”]

[/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:

[sourcecode language=”css”] -moz-border-radius: 10px;
border-radius: 10px;
[/sourcecode]

Gradient Background:

[sourcecode language=”css”]</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+ */
[/sourcecode]

Shadow:

[sourcecode language=”html”] -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′)”;
[/sourcecode]

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

[sourcecode language=”html”] 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′)”;<
}
[/sourcecode]

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.

[sourcecode language=”html”] <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=”https://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=”https://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=”https://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=”https://land-of-web.com”>
<img src=”images/imgSl1.png” width=”930″ height=”430″ alt=”4th image” />
</a>
</div>
</div>
[/sourcecode]

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.

[sourcecode language=”css”] /* 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>
[/sourcecode]

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.

[sourcecode language=”html”] <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>
[/sourcecode]

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.

[sourcecode language=”js”] $(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();
});
});[/sourcecode]

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

3 comments
Leave a Reply

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

You May Also Like

Inspirational Messy and Busy Website Designs

Combination of massive strongly marked textures, full screen replete photo backgrounds, use of collage or scrapbooking style, bold and relatively huge typography and a great deal of superimposed layers with…

30+ useful sites for web developers

Both web development and web designing is challenging. The main goal is to produce the best work possible for the short period of time. But without specific tools web development…