PSD to HTML Tutorial: Code a Photoshop File to a Working Website

Posted in WordPress2 years ago • Written by 33 Comments

Howdy, folks! In this PSD to HTML tutorial you will learn how to code the Quick and Easy Stylish Design Agency Landing Page In Adobe Photoshop. I’m not really into coding, more of a design person and this is my first coding tutorial. I will try my best to guide you through the whole thing. We will be coding this from scratch and by the end you will have an awesome and fully functional agency layout.

Are you ready? Let’s get started!

Host your HTML files on BlueHost to be more professional! We recommend them!

Resources for this tutorial

Step 1: Preparation for the PSD to HTML 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 open up the PSD file in Adobe Photoshop.

Of course you’ll need your favorite code editor and debugging tools. I used Intype as my text editor and for debugging tools I recommend 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 trust me, it still looks fine.

Step 2: Getting Files Ready

You will need to create a directory folder and inside of it you should have /images directory for images and /js directory for JavaScript. I placed the CSS file in the root folder including the HTML file.

Also we need to export the images to be used in the PSD file. For example the The Logo, you will need to select the layer from the layers panel, copy and paste it in a different document and CTRL + ALT + SHIFT + S in order to save for web and devices, the appropriate file type for the logo should be .png. But if you’re tired of doing this you can just download the files and use the images I already exported.

Step 3: Simple Starter Layout

To build our HTML layout we should first analyze our design by looking at the Photoshop layout and identify the sections that are unique.

  • Background: you notice that the background is white.
  • Header: Notice that in this section the header has a green line on the top which covers the whole screen, so in order to do this we need to wrap the header with another container. The header contains logo, call to action, navigation and search.

Pay attention to the naming of id or class in every screenshot I made, these will be the names we will use when we markup the HTML.

  • Slides: for the slider we will be using SlideJS.

  • Service: this section contains 2 columns for web design and vector design.

  • Media: this section is divided into 3 columns for video, Twitter, and Facebook.

  • Notice the above section slides, services, and media are positioned in the center, so we will wrap them with a div and name it container.

  • Widget: this section is divided into 3 columns for links, blog, and location. Also you will notice it is covered with a gray dotted pattern that covers the whole screen.

  • Client: In this section you will notice there is a solid gray border on the bottom that covers the entire screen and a list of clients logo.

  • Footer: Finally, the footer which contain 2 columns for copyright, footer links, and back to top arrow.

Here is the image of the overall markup that we have done.

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

<!doctype HTML>
	<html lang="en">
	<head>
	  <meta charset="utf-8">
	  <title>Burnstudio</title>
	  <link rel="stylesheet" href="style.css">
	</head>
<body>
	<div id="header-wrap">
		<header>
			header content goes here
		</header>
	</div><!-- end header wrap -->

	<div id="container">
		<div id="slides">
			slides content goes here
		</div><!-- end slides -->

		<div id="service">
			service content goes here
		</div><!-- end service-->

		<div id="media">
			media content goes here
		</div><!-- end media -->
	</div> <!--! end container -->

	<div id="widget-wrap">
		<div id="widget">
			widget content goes here
		</div><!-- end widget -->
	</div> <!--! end widget-wrap -->

	<div id="client-wrap">
		<div id="client">
			widget content goes here
		</div><!-- end client -->
	</div> <!--! end client-wrap -->

	<footer>
		footer content goes here
	</footer>
</body>
</html>

Notice that the naming of the divs in every section is based on the naming we did earlier when we analyzed the PSD layout. Note that this layout is a fixed width of 960px. I know it would be better if we used a CSS framework for this project. But like I have said, we will do it from scratch.

Step 4: Working on Header Section

Now lets focus more on the header section we will mark up the HTML elements that can be found in this section.

<h1><a href="index.html" title="burnstudio">Burnstudio</a></h1>
<div id="call">
	<h3>(012) 345 6789</h3>
	<h4 class="green">Call us <strong>now</strong></h4>
</div><!-- end call -->
<nav class="group">
	<ul>
		<li class="home"><a href="#" title="">Home</a></li>
		<li><a href="#" title="">Services</a></li>
		<li><a href="#" title="">About Us</a></li>
		<li><a href="#" title="">Testimonials</a></li>
		<li class="last">
			<div>
				<input type="text" name="search" placeholder="search" />
				<input type="submit" name="search" value="go" class="search"/>
			</div>
		</li>
	</ul>
</nav>

In the above HTML I just followed what I saw in Photoshop. First is the Logo, since the logo is clickable I added <a> tag inside the h2. Followed by the the call number which is wrapped in a div with an id of call. Lastly I created a <ul> list which contain links and the search.

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 style.css file.

body{
	background: #fff;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 13px;
}

/* FONT STYLES*/
h3{
	font-size: 24px;
	font-family: Helvetica, Arial, sans-serif;
	color: #333333;
	margin-bottom: 25px;
}
h4{
	margin-bottom: 25px;
	font-size: 18px;
	font-family: Helvetica, Arial, sans-serif;
}
h5{
	font-size: 14px;
	font-family: Helvetica, Arial, sans-serif;
}
p{
	font-size: 13px;
	color: #555555;
	line-height: 18px;
}
a, a:link, a:visited{
	text-decoration: none;
	outline: none;
}
.green{
	color: #509743;
}
.white{
	color: #fff;
}
strong{
	font-weight: bold;
}
/* END FONTS STYLES */

In the above CSS, since we have reset styles we need to style our text formats. I know that we used a different font for our headings and I don’t think Google fonts support Kozuka Gothic. But for now we will replace it with Helvetica. Notice also I added the classes green and white, this will be used when we style green or white text that can be seen in the design.

When you test it you will have something that looks like the screenshot below.

/* HEADER */
#header-wrap{
	border-top: 10px solid #4d9543;
	padding-top: 40px;
}
header{
	width: 960px;
	margin: 0 auto;
	padding: 0;
}
header h2 a{
	display: block;
	text-indent: -999999px;
	background: url(images/logo.png) no-repeat;
	width: 214px;
	height: 77px;
	float: left;
	margin-bottom: 40px;
}

#call{
	float: right;
	border-right: 1px solid #c8c8c8;
	padding-right: 25px;
	margin-top: 20px;
}
#call h3{
	margin: 0;
}
#call h4{
	text-align: right;
	margin: 0;
}

nav{
	clear: both;
	width: 960px;
	height: 50px;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	background-color: #3b7c33; /* Fallback */
	border-radius: 30px;
	/* Safari 4+, Chrome 1-9 */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5fae53), to(#3b7c33));
	/* Safari 5.1+, Mobile Safari, Chrome 10+ */
	background-image: -webkit-linear-gradient(top, #5fae53, #3b7c33);
	/* Firefox 3.6+ */
	background-image: -moz-linear-gradient(top, #5fae53, #3b7c33);
	/* IE 10+ */
	background-image: -ms-linear-gradient(top, #5fae53, #3b7c33);
	/* Opera 11.10+ */
	background-image: -o-linear-gradient(top, #5fae53, #3b7c33);
	border: 1px solid #336c2b;
}

nav ul li{
	float: left;
	border-right: 1px solid #336c2b;
	border-left: 1px solid #78c368;
}
nav ul li.home{
	border-left: none;
	text-indent: -9999px;
	background: url(images/home.png) no-repeat 50% 50%;
}

nav ul li.last{
	border-left: none;
	border-right: none;
	float: right;
	margin-right: 20px;
}
nav ul li a{
	display: block;
	padding: 0 30px;
	height: 50px;
	line-height: 50px;
	font-size: 15px;
	color: #fff;
	text-shadow: 0 1px 0 #387031;
}
nav ul li a:hover{
	background: #5fae53;
}

nav ul li.home a:hover{
	-webkit-border-top-left-radius: 30px;
	-webkit-border-bottom-left-radius: 30px;
	border-top-left-radius: 30px;
	border-bottom-left-radius: 30px;
	background: #5fae53 url(images/home.png) no-repeat 50% 50%;
}
nav ul li div input[type=text]{
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	background: #4b9241;
	border-left: none;
	border-right: none;
	border-bottom: 1px solid #5ead52;
	border-top: 1px solid #346d2c;
	color: #fff;
	text-shadow: 0 1px 0 #387031;
	padding: 5px 0 5px 20px;
	width: 200px;
}
nav ul li div input[type=text]:focus{
	outline: none;
}

/* TO STYLE PLACE HOLDER */
::-webkit-input-placeholder {
   color: #fff;
}
:-moz-placeholder {
   color: #fff;
}

nav ul li div input[type=submit]{
	background: url(images/search.png) no-repeat 50% 50%;
	border: none;
	text-indent: -999999px;
	margin-left: 15px;
	height: 50px;
	width: 16px;
}

/* END HEADER */

In the above CSS I styled header-wrap with a 10px green border, since a div by default is styled in a block display this will fill the whole width of the screen. Then I centered the header with margin: 0 auto. Next, I styled the Logo with a fixed width and height. I also floated it the left. For the Call I floated it right and apply a 1px gray border also a 25px padding from right. Note that to get this value you need to go back to Photoshop and use the Ruler Tool(I) to measure the distance. Since I styled the h3 and h4 with a 25px bottom margin in our base text format we need to reset it and change it to 0. This will make the h4 and h3 in the call section back to normal.

Next, I styled the navigation with a fixed width, height and a gradient, I applied a clear both to clear the above floating elements logo & call. All li are floated left except for the last li element, also it has a left and right border except for the the home there is no left border and for the last there is no right border. All a is styled 30px padding from left and right 0 for top and bottom, a height of 50, a text shadow, a line-height of 50 to make it center vertically. For the class home I pushed out the text and replace it with the home icon. Since the corner is rounded we need to specify another style hover for the home button that’s what I did below the a:hover.

Lastly, I styled the search input with a rounded radius, a green background, dark border on top and light border on bottom. Also to target placeholder attribute refer to the CSS which I comment to style place holder this is a part of css3 property.

Before previewing this to IE lower versions make sure to copy and paste the code below in the header section of our HTML file. This will enable HTML5 elements to work in older IE browsers.

<!--[if IE]>
	<script type="text/javascript">
	(function(){
	var html5elmeents = "address|article|aside|audio|canvas|command|datalist|details|dialog|figure|figcaption|footer|header|hgroup|keygen|mark|meter|menu|nav|progress|ruby|section|time|video".split('|');
	for(var i = 0; i < html5elmeents.length; i++){
	document.createElement(html5elmeents[i]);
	}
	}
	)();
	</script>
	<![endif]-->

Now our layout should look like this.

Step 5: Working on Slider Section

Now let’s add the content inside the slides element, here’s the HTML.

<div class="slides_container">
	<div>
		<img src="http://www.1stwebdesigner.com/wp-content/uploads/2012/09/slide1.png" alt="slide1" />
		<div class="slide-right">
			<h1 class="slide-heading">Artthatworks 1 dolor sit amet, consectetur adipiscing elit.</h1>
			<p class="info">Vestibulum a diam lorem. Fusce viverra commodo rhoncus. Nam ipsum magna, faucibus non semper et, vestibulum quis arcu. Nulla in tellus eu nunc cursus scelerisque ac nec nibh.</p>
			<p><a href="#" class="readmore">read more</a></p>
		</div>
	</div>

	<div>
		<img src="http://www.1stwebdesigner.com/wp-content/uploads/2012/09/slide1.png" alt="slide1" />
		<div class="slide-right">
			<h1 class="slide-heading">Artthatworks 2 dolor sit amet, consectetur adipiscing elit.</h1>
			<p class="info">Vestibulum a diam lorem. Fusce viverra commodo rhoncus. Nam ipsum magna, faucibus non semper et, vestibulum quis arcu. Nulla in tellus eu nunc cursus scelerisque ac nec nibh.</p>
			<p><a href="#" class="readmore">read more</a></p>
		</div>
	</div>

	<div>
		<img src="http://www.1stwebdesigner.com/wp-content/uploads/2012/09/slide1.png" alt="slide1" />
		<div class="slide-right">
			<h1 class="slide-heading">Artthatworks 3 dolor sit amet, consectetur adipiscing elit.</h1>
			<p class="info">Vestibulum a diam lorem. Fusce viverra commodo rhoncus. Nam ipsum magna, faucibus non semper et, vestibulum quis arcu. Nulla in tellus eu nunc cursus scelerisque ac nec nibh.</p>
			<p><a href="#" class="readmore">read more</a></p>
		</div>
	</div>
</div><!-- end slies container -->

In the above HTML markup I added a class slides_container this will hold our slides elements which is wrapped by a div that contains an image, a div class of slides-right that holds the slide title, info, and read more link. Also I added a class for the heading slide-heading, paragraph info and for the read more readmore. This will be helpful since we will repeat the HTML code 3 times and they will have the same styles if we add the CSS later.

Now let’s style all the element, here’s the CSS.

#container{
	width: 960px;
	margin: 0 auto;
}
/* SLIDES */
#slides{
	position: relative;
	margin-top: 40px;
}
.slides_container{
	height: 315px;
}
.slide-right{
	position: absolute;
	top: 0;
	left: 385px;
}

.slide-heading{
	background: url(images/slide-heading.png) no-repeat;
	width: 494px;
	height: 68px;
	color: #fff;
	font-size: 24px;
	padding-top: 20px;
	padding-left: 80px;
	margin-top: 35px;
	margin-bottom: 30px;
}
.slide-right .info{
	width: 395px;
	margin-bottom: 20px;
	margin-left: 155px;
}
.slide-right .readmore{
	margin-left: 155px;
}
.readmore{
	font-style: italic;
	text-decoration: none;
	color: #509743;
	padding-left: 15px;
	background: url(images/more.png) no-repeat 0 50%;
}
.readmore:hover{
	color: #c8c8c8;

}
.pagination{
	position: absolute;
	bottom: 25px;
	left: 25px;
	z-index: 99;
}

ul.pagination li{
	float: left;
	margin-right: 10px;
	background: url(images/pagination.png) no-repeat;
	background-position: top;
	width: 14px;
	height: 15px;
}
ul.pagination li.current{
	background-position: bottom;
}
ul.pagination li a{
	display: block;
	text-indent: -999999px;
}

a.next{
	position: absolute;
	right: 25px;
	bottom: 30px;
	display: block;
	width: 7px;
	height: 13px;
	background: transparent url(images/prev-next.png) no-repeat;
	background-position: top right;
	text-indent: -9999px;
}
a.prev{
	position: absolute;
	right: 50px;
	bottom: 30px;
	display: block;
	width: 7px;
	height: 13px;
	background: transparent url(images/prev-next.png) no-repeat;
	background-position: top left;
	text-indent: -9999px;
}
a.next:hover{
	background-position: bottom right;
}
a.prev:hover{
	background-position: bottom left;
}
/* END SLIDES*/

In the above CSS since slides, service and media are wrapped with the container div, we will style this first to make them centered. Next, slide’s position is set to relative to make it the parent element. This is helpful so that we can position the inside elements prev, next, and pagination absolutely which are auto-generated by the JavaScript. For the slides_container I gave it a fixed height of 315px which is equal to the height of the slider image. For the slide-right which contains the heading, info and read more, all positioned absolutely, 0 out top, and pushed it 385px from left.

For the slide-heading I gave it a fixed width and height equal to the background image, and gave it a padding to make the text align properly, also a margin to give a space and align it correctly. For .info I gave it a fixed width with margin to align it. For .readmore first I gave it a separate margin style since only the slider readmore has this and all of the readmore links in the layout has no margins from left. Then followed by the readmore styling which has a green color with background arrow and a gray hover.

For the pagination, prev, and next buttons this is auto-generated by the JavaScript in order to style this first we need to identify what is the tag or the applied html class attribute. To do this you need to used the Firebug tool if you’re using Firefox, if you’re using Chrome just right click to the element and click Inspect Element a dialog will appear and you can see there what element is being used.

Now that you know the element, we will target it in the CSS. For the Pagination I positioned it absolutely, placed it 25px from the bottom and left, also I applied z-index 99px – this will make the pagination right on the very top over the other elements. If werre not going to apply this notice that it is not clickable because the image is on top of the pagination itself. Then I floated the pagination li elements to left, gave it a right margin of 10px, added a background image with a fixed width and height. I positioned the background by default to top since the normal state image is on top, for the current or the active state we will going to reverse the positioning from top to bottom and lastly display it as a block level element and hide the text. For the .next and .prev pretty much the same we did in pagination but this time it is positioned to the right. Noticed the prev-next.png on the left side this contains the image of prev button and on the right side this contains the image of the next button. I positioned the .next image to top right, .prev positioned to top-left, and for the hover just change the top to bottom.

Now let’s add the required jQuery script in the header. Copy the slides.min.jquery.js file from the /source directory and paste it in our /js directory.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
 <script src="js/slides.min.jquery.js"></script>

Finally, we need to add the JavaScript code that will allow the slider to work on our layout. You should add this script just before the </body>. Here’s the JavaScript.

<script>
		$(function(){
			$('#slides').slides({
				preload: true,
				generateNextPrev: true,
			});
		});
</script>

Now our layout should look like this.

Step 6: Working on Service Section

Now let’s add the content inside the service element, here’s the HTML.

	<div id="web">
		<img src="images/web.png" />
		<h3>Web <strong><span class="green">Design</span></strong></h3>
		<p>Nunc viverttra erat et turpis viverra pellentesque. Maecenas ullamcorper, nibh tristique ullamcorper lacinia, tellus nisi blandit elit, id pulvinar tortor.</p>
		<p><a href="#" class="readmore">read more</a></p>
	</div><!-- end web -->

	<div id="vector">
		<img src="images/vector.png" />
		<h3>Vector <strong><span class="green">Design</span></strong></h3>
		<p>Nunc viverttra erat et turpis viverra pellentesque. Maecenas ullamcorper, nibh tristique ullamcorper lacinia, tellus nisi blandit elit, id pulvinar tortor.</p>
		<p><a href="#" class="readmore">read more</a></p>
	</div><!-- end vector -->

I created a unique div id web and vector which contains the same elements such as an image, headings, paragraphs and readmore link. In the heading you can see I added a span and applied a class of green since the heading is combined with different colour. For the read more link we apply the same class we did in the slider area.

Now let’s style all the element, here’s the CSS.

/* SERVICE */
#service{
	margin: 40px auto;
	height: 253px;
	padding-top: 30px;
	background: url(images/service-bg.jpg) no-repeat;
}

#web{
	float: left;
	width: 450px;
	padding-left: 30px;
}
#web p{
	width: 260px;
	margin-bottom: 20px;
}
#web img{
	float: right;
	margin-right: 50px;
}
#vector{
	float: right;
	padding-left: 30px;
	width: 450px;
}

#vector p{
	width: 260px;
	margin-bottom: 20px;
}
#vector img{
	float: right;
	margin-right: 50px;
}
/* END SERIVCE*/

I styled the service div 40px from above to bottom and added an auto left and right, I also added a height that is equal to the background image. For the web div I floated it to the left and gave it a 50% width of the parent div, the same with the vector div but floated to the right. For the paragraph I gave it a fixed width with a margin, for the image I floated it right and give it a right margin, pretty much the same on vector image and text.

Now our layout should look like this.

Step 7: Working on Media Section

Now let’s add the content inside the media element, here’s the HTML.

<div id="media" class="group">
	<div id="video">
		<h4>Quick <strong>Video Tour</strong></h4>
		<h5>How we Design our works!</h5>
		<a href="#" class="play"><img src="images/play.png" alt="play" /></a>
	</div>

	<div id="twitter">
		<h4>Twitter <strong><span class="green">Feed</span></strong></h4>
		<p class="tweet">Mashable Video: Principal Resigns After Allegedly Posing as a Student on Facebook -<a href="#" class="t-link">http://on.mash.to/IVYWYJ</a></p>
		<p class="time">9 hours ago</p>
	</div>

	<div id="facebook">
		<h4>Like Us On <strong><span class="green">Facebook</span></strong></h4>

	</div>
</div><!-- end media -->

I created 3 different sections: video div which contains text headings h4, h5 and a clickable image for play button, twitter div which contains a heading and a paragraph, lastly a facebook div which contains a heading and if you wish to add your widget you can add it by going to Facebook plugins. Also, I added a class group on the media div. I’ll show you what that does when we move on to the CSS.

Now let’s style all the elements, here’s the CSS.

/* MEDIA  */

#media{
	margin: 0 auto;
}
#video{
	width: 302px;
	padding-top: 20px;
	float: left;
	margin-right: 58px;
	background: transparent url(images/video-bg.png) no-repeat;
	height: 225px;
}
#video h4{
	margin: 0;
}
#video h4, #video h5{
	text-align: center;
	color: #fff;
	text-shadow: 0 1px 0 #387031;;
}

#video .play{
	float: right;
	margin-top: 5px;
}

#twitter{
	width: 285px;
	height: 180px;
	float: left;
	margin-right: 30px;
	background: transparent url(images/twitter-bg.png) no-repeat;
	background-position: bottom;
	padding: 0 0 20px 0;
}
#twitter p{
	padding: 0 20px;
}
#twitter .time{
	font-size: 11px;
	font-style: italic;
	color: #999999;
	margin-top: 15px;
}

a.t-link{ color: #6767c9; text-decoration: none; }
a.t-link:hover{ text-decoration: underline; }

#facebook{
width: 285px;
float: right;
}

/* END MEDIA*/

/* CLEAR FIX */
.group:after {
  content: "";
  display: table;
  clear: both;
}
/* END FIX */

I styled the video div with a fixed width and height of 302px x 225px, gave it padding, floated it to the left and lastly added a background image. I styled h4 and h5 centred and added a dropshadow, for the play button which has a class of .play I floated it to the right and added a margin to position it on the right. For twitter div I gave it a fixed width and height of 258px by 180px and added a background image positioned in bottom, also I gave the .time with a smaller font and lighter caller, also for the a.t-link which has a blue color. For facebook this is the same to twitter heading and floated to right.

The purpose of the group class is to force the element to self-clear its children a.k.a clearfix. What this means is the media is the parent element which holds child elements inside of it that are floating left this are video, twitter and facebook. The media element doesn’t determine it’s height when we apply that clearfix hack this will identify the automatically identify the maximum height of the child element.

Now our layout should look like this.

Step 8: Working on Widget Section

Now let’s add the content inside the widget element, here’s the HTML.

<div id="widget-wrap" class="group">
<div id="widget">
	<div id="links">
		<h4 class="white">Other <strong>Links</strong></h4>
		<ul>
			<li><a href="#">www.example.com</a></li>
			<li><a href="#">www.1stwebdesigner.com</a></li>
			<li><a href="#">www.labzip.com</a></li>
			<li><a href="#">www.samplelink.com</a></li>
			<li><a href="#">www.outgoinglink.com</a></li>
			<li><a href="#">www.link.com</a></li>
		</ul>
	</div>

	<div id="blog">
		<h4 class="footer-header white">Latest From The <strong>Blog</strong></h4>
		<img src="images/blog.png" alt="blog" />
		<p class="title">Maecenas iaculis lorem vel dui vulputate non consequat mi congue.</p>
		<p class="date">05.30.2012</p>
		<p><a href="#" class="readmore">read more</a></p>
	</div><!-- end blog -->

	<div id="location">
		<h4 class="footer-header white">Our <strong>Location</strong></h4>
		<img src="images/map.png" alt="map" />
		<p class="address">123 unknown street, address
		</br> 8600 Philippnes</p>
	</div><!-- end location -->
		</div><!-- end widget -->
</div> <!--! end widget-wrap -->

I added a class group to widget-wrap, you already know what this class does. Next I created 3 div links which contains an unordered list, blog which contains a heading, image, title, date and read more link. Lastly, location which contain an image, and the address.

Now let’s style all the element, here’s the CSS.

/* WIDGET */
#widget-wrap{
	padding: 50px 0;
	background: #333333 url(images/widget-bg.jpg);
}
#widget{
	width: 960px;
	margin: 0 auto;
}
h4.footer-header{
	background: transparent url(images/footer-header.png) no-repeat;
	line-height: 58px;
	text-indent: 30px;
}
#links{
	width: 225px;
	float: left;
	margin-right: 75px;
}
#links ul{
	list-style-image: url(images/links.png);
	margin-left: 15px;
}
#links ul li a{
	color: #cccccc;
	font-size: 13px;
	padding: 8px 0;
	display: block;
}
#links ul li a:hover{
	color: #fff;
}
#blog{
	position: relative;
	width: 290px;
	float: left;
	margin-right: 75px;
}
#blog img{
	position: absolute;
	top: 50px;
	left: -18px;
}
#blog p.title{
	color: #fff;
	margin-left: 110px;
	margin-bottom: 15px;
}
#blog p.date{
	margin-left: 110px;
	color: #cccccc;
	font-style: italic;
	font-size: 11px;
	margin-bottom: 15px;
}

#blog a.readmore{
	margin-left: 110px;
}
#location{
	position: relative;
	width: 290px;
	float: right;
}
#location img{
	position: absolute;
	top: 45px;
	left: 22px;
}
#location p.address{
	margin-top: 115px;
	border-right: 1px solid #484848;
	padding-right: 20px;
	text-align: right;
	color: #cccccc;
}
/* END WIDGET */

I styled widget-wrap div with a padding of 50px top and bottom and added a gray dotted pattern background. For the widget div I appled 960px width and position it centered. For the links div I gave it a width of 225px, floated it to left and give it a right margin 75px, for the ul list. I added a background image, also I styled the a with a lighter gray and hover of white (I didn’t follow the hover effect in the PSD design).

For the blog div I gave it a width of 290px, floated it to left, apply a 75px margin and position it relatively. For the heading I added a backround, indented the text, and added 58px line height to make the text centered vertically. For the blog img since we just positioned blog div to relative we can now position this absolutely to position the image the same to psd design which is left 18px. For the .title, .date and .readmore they have the same margins from left. For the location the same also in blog where it is positioned relatively and position the inside image absolutely, and for the address I added margin and paddings and give it a 1px border to the right.

Now our layout should look like this.

Step 9: Working on Client Section

Now let’s add the content inside the client element, here’s the HTML.

<div id="client-wrap" class="group">
	<div id="client">
		<ul>
			<li><img src="images/client-1.jpg" alt="" /></li>
			<li><img src="images/client-2.jpg" alt="" /></li>
			<li><img src="images/client-3.jpg" alt="" /></li>
			<li><img src="images/client-4.jpg" alt="" /></li>
			<li><img src="images/client-5.jpg" alt="" /></li>
		</ul>
	</div><!-- end client -->
</div><!-- end client-wrap -->

In above HTML I added again a group class on client-wrap div and added an unordered list element that contains an image.

Now let’s style all the element, here’s the CSS.

/* CLIENT */
#client-wrap{
	background: #fff url(images/client-bg.jpg) repeat-x;
	padding: 40px 0;
	border-bottom: 1px solid #c8c8c8;
}

#client{
	width: 960px;
	margin: 0 auto;
}

#client ul li{
	width: 20%;
	float: left;
	text-align: center;
}
/* END CLIENT */

In the above CSS I styled the client-wrap div by adding a little gray gradient background, padding top and bottom 40px and lastly added a solid gray bottom border. I positioned center the client div and lastly for the unordered list elements which contains the images I floated it left, since we have 5 images I divided it evenly by giving a 20% width of each element, lastly I applied text-align to make the images center.

Now our layout should look like this.

Step 10: Working on the Footer Section

Now let’s add the content inside the footer element, here’s the HTML.

<footer class="group">
	<div id="footer-left">
		<p>Copyright <a href="#" class="green">www.1stwebdesigner.com</a> </br>
		Designed by <a href="#" class="green">Michael Burns</a></p>
	</div>

	<div id="footer-right">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Services</a></li>
			<li><a href="#">About Us</a></li>
			<li><a href="#">Testimonials</a></li>
			<li><a href="#">Contact Us</a></li>
		</ul>
	</div>

	<a href="#header-wrap"><img src="images/back-top.png" alt="back-top" class="back-top" /></a>
</footer>

In above HTML I added a group class to footer, then created 2 section first is footer-left which contain the copyright text, next footer-right which contain an unordered list links. Lastly I added clickable back to top image.

Now let’s style all the element, here’s the CSS.

/* FOOTER */
footer{
	clear: both;
	width: 960px;
	margin: 0 auto;
	padding: 30px 0 60px 0;
	position: relative;
}

#footer-left{
	float: left;
	width: 50%;
}
#footer-left p{
	font-size: 12px;
	color: #666666;
}
#footer-left a:hover{
	color: #c8c8c8;
}
#footer-right{
	float: right;
	width: 50%;
}
#footer-right ul{
	float: right;
}
#footer-right ul li{
	float: left;
	margin-right: 30px;
}

#footer-right ul li:last-child{
	margin-right: 0;
}
#footer-right ul li a{
	color: #666666;
	display: block;
	padding-bottom: 10px;
	font-size: 12px;
}
#footer-right ul li a:hover{
	border-bottom: 2px solid #c8c8c8;
}

.back-top{
	position: absolute;
	bottom: 30px;
	right: 50%;

}
/* END FOOTER */

In above CSS I styled the footer by giving a width of 960px, centered it, applied a padding of 30px top and 60px bottom, lastly I positioned it relatively. For the footer-left and footer-right I gave it a width of 50%, floated it left and right. For the copyright text I made it smaller and changed the color to a lighter one. For the links I floated the ul to the right and floated li to left, gave a margin of 30px, for the last-child I removed the margin, for the links I styled it the same with the copyright text and added 2px border when its hovered. Lastly, since I positioned the footer relatively, I can position the back-top absolutely to the center which is right 50%.

Now our layout should look like this.

We’re done, Finally!

Wew! This took me so long to write. How was the tutorial? I hope you learned something from this tutorial. If you have some techniques, comments, suggestions please share and drop it below. Also, for the next tutorial I’m going teach you how to make this layout responsive. Yeah! You heard it right, let’s make it responsive!

If you liked this tutorial kindly share it with your friends. Thanks! :)

If you enjoyed this article, get email updates (it's free).

Join over 77,235 Subscribers Today.

37 Written ArticlesWebsiteGoogle+

Michael is a Web & Graphic designer based in Philippines. He started designing during his teenage years and most of his skills and knowledge are self taught. He's dating with Photoshop for about 4 years now and been flirting with HTML & CSS from 2011 to present. See his works at burnstudio. Other than that he loves Coffee and his Girl.

33 Comments Best Comments First
  • anghene

    Wednesday, December 12th, 2012 10:09

    32

    Hey, great tut.
    Just one thing: Section 4, line of code 1. it’s H1 and this means it won’t dispay logo until user switches it with h2.

    +7
  • lawrence77

    Sunday, September 30th, 2012 14:15

    13

    What about a Video Tutorial?? :)

    +5
  • Jefrey Landicho

    Tuesday, October 2nd, 2012 13:55

    14

    Nice design sample but why not use max-width: and width:100% to make it responsive at the same time

    +3
  • amit mojumder

    Monday, September 24th, 2012 14:28

    6

    Nice design and nice coding tutorial.
    I am confused with one point like, why u used H2 first? where is H1?
    Shouldn’t there be H1 instead of H2 ?
    Thanks.

    +2
    • Michael John Burns

      Tuesday, September 25th, 2012 11:10

      8

      Hello Amit, Thanks for pointing it out. For the logo it self it should be H1 I apologize for my mistake. Then followed by h2, h3 etc. But in the way I code I started h2 down to h5.

      -1
  • Mark Stephenburg

    Saturday, November 17th, 2012 03:53

    23

    too complicated
    there are lots of easier way

    +2
  • Azhar Khan

    Monday, September 24th, 2012 12:10

    3

    Amazing :)
    Very Simple :)

    +1
  • Sumit

    Monday, October 29th, 2012 06:19

    19

    Very good tutorial. Thanks.

    +1
  • Cirsten

    Thursday, October 11th, 2012 17:30

    18

    Tnx! I like it! Great tutorial!

    +1
  • Mephisto

    Wednesday, November 7th, 2012 14:55

    22

    Brilliant, absolutely brilliant guide! Thanx!

    +1
  • Guppu Boss

    Tuesday, September 25th, 2012 04:25

    7

    Nice tutorial. I am designing Photoshop but not expert while converting psd to code

    0
  • Fraakz

    Saturday, September 29th, 2012 16:23

    12

    Converting psd to html is tricky but I am glad that this tutorial is helpful for newbies. I guess attempting this tutorial requires knowledge of css and html.

    0
    • John

      Monday, November 5th, 2012 04:17

      21

      Yes you do need to have a background on html and a bit about Css as well so you can understand this tutorial thoroughly. =)

      0
  • zouhair

    Monday, September 24th, 2012 11:03

    2

    tnx man, great tutorial :)

    0
  • Rodrigo Santander

    Monday, September 24th, 2012 12:15

    4

    This is the most useful tutorial I’ve seen in the blog. Thanks for showing us how to do it.

    0
  • Mark Preston

    Wednesday, September 26th, 2012 20:01

    11

    I loved this tutorial and timely because I’m diving head first in learning how to do this. Between this and a class I’ve taken on Train Simple site (an Adobe Training site), I’m really beginning to think in the correct way. Thanks so much for writing this.

    0
  • Sergio

    Monday, September 24th, 2012 12:52

    5

    OMG!, This tutorial is pretty interesting, all you have to put much interest and desire.

    0
  • Bilal

    Wednesday, September 26th, 2012 10:43

    10

    Awesome tutorial. I am building a new theme from scratch and this tutorial will help me in building. thanks

    0
  • amit mojumder

    Saturday, October 6th, 2012 11:20

    17

    hello Michael
    thanks for the reply on my previous question.
    I have another question to ask. Since you are using HTML5 and its brand new tags directly on the markup, so shouldn’t we use any JavaScript libry like Mordenizr or other hack for the older browser so that our layout doesnt break down?
    can you plz let me know?

    thanks in advance?

    0
  • Dan

    Wednesday, October 3rd, 2012 08:29

    15

    Great tutorial = )

    0
  • Vishal Pangare

    Wednesday, November 21st, 2012 01:24

    26

    very use full thank you

    0
  • Pieter

    Tuesday, November 27th, 2012 04:55

    27

    Great tutorial!!!

    To make the back to top truely center you can also add ‘margin-right: -15px’ to ‘.back-top’ (I haven’t checked the psd yet, so I don’t know if it should be in the real center).

    One question(but I think I know the answer), ‘#web p’ and #web img’ is the same as ‘#vector p’ and #vector img’ so why are the styling applied twice?

    0
    • Michael John Burns

      Tuesday, November 27th, 2012 23:44

      28

      Hello Pieter,

      I think ‘back-top’ is on place. Since it is placed absolutely 50%.

      On #web p, #web img, #vector p, #vector img I can’t remember why I did this separately. But you can do it on one line by separating each with ‘,’.
      Btw, what’s your answer of that question?

      +3
      • Pieter

        Wednesday, November 28th, 2012 01:52

        29

        The right side of back-top is positioned 50% from right (making it ‘left: 50%’ will make the left side 50% from the left of its relative parent), you will see this if you increase its width to something big like 100px, or compare it to the patrone client above it once you zoom in a bit. That is why the padding-right (when it’s positioned from right) is minus half the element’s width. I learned this in one of those spinner tutorials a few months back.

        I thought the styles where maybe kept separate in-case only web or vector’s styles needed to change in the future.

        +1
  • Cletus

    Wednesday, November 28th, 2012 07:04

    30

    thanxs man Nice tutorial

    0
  • Tom

    Saturday, December 15th, 2012 12:15

    33

    Great tutorial but i have problem how can i make links from menu bar open in container div?

    0
  • Lalit Vijay

    Wednesday, December 5th, 2012 16:27

    31

    Nice tut, Works really well.
    I would like to see some tut using Grid960

    0
  • Imran

    Monday, November 19th, 2012 01:50

    25

    Searching for a nice tutorial. Got it here. Thanks.

    0
  • harry

    Sunday, November 4th, 2012 04:24

    20

    just enjoyed this tutorial… so superb……

    0
  • MR.Rad

    Monday, September 24th, 2012 09:30

    1

    very good tutorial

    0
  • Robert

    Saturday, October 6th, 2012 10:40

    16

    Great tutorial. I especially like how you did the structural containers first. I will pass this along to my web students as an additional resource.

    -1
  • Bulb

    Tuesday, September 25th, 2012 12:26

    9

    Nice tutorial!

    Just to note that the slider image urls do not exist now (25/9/12) so they don’t show up in the slideshow.

    -2
  • Tom

    Saturday, December 15th, 2012 12:15

    33

    Great tutorial but i have problem how can i make links from menu bar open in container div?

    0
  • anghene

    Wednesday, December 12th, 2012 10:09

    32

    Hey, great tut.
    Just one thing: Section 4, line of code 1. it’s H1 and this means it won’t dispay logo until user switches it with h2.

    +7
  • Lalit Vijay

    Wednesday, December 5th, 2012 16:27

    31

    Nice tut, Works really well.
    I would like to see some tut using Grid960

    0
  • Cletus

    Wednesday, November 28th, 2012 07:04

    30

    thanxs man Nice tutorial

    0
  • Pieter

    Tuesday, November 27th, 2012 04:55

    27

    Great tutorial!!!

    To make the back to top truely center you can also add ‘margin-right: -15px’ to ‘.back-top’ (I haven’t checked the psd yet, so I don’t know if it should be in the real center).

    One question(but I think I know the answer), ‘#web p’ and #web img’ is the same as ‘#vector p’ and #vector img’ so why are the styling applied twice?

    0
    • Michael John Burns

      Tuesday, November 27th, 2012 23:44

      28

      Hello Pieter,

      I think ‘back-top’ is on place. Since it is placed absolutely 50%.

      On #web p, #web img, #vector p, #vector img I can’t remember why I did this separately. But you can do it on one line by separating each with ‘,’.
      Btw, what’s your answer of that question?

      +3
      • Pieter

        Wednesday, November 28th, 2012 01:52

        29

        The right side of back-top is positioned 50% from right (making it ‘left: 50%’ will make the left side 50% from the left of its relative parent), you will see this if you increase its width to something big like 100px, or compare it to the patrone client above it once you zoom in a bit. That is why the padding-right (when it’s positioned from right) is minus half the element’s width. I learned this in one of those spinner tutorials a few months back.

        I thought the styles where maybe kept separate in-case only web or vector’s styles needed to change in the future.

        +1
  • Vishal Pangare

    Wednesday, November 21st, 2012 01:24

    26

    very use full thank you

    0
  • Imran

    Monday, November 19th, 2012 01:50

    25

    Searching for a nice tutorial. Got it here. Thanks.

    0
  • Mark Stephenburg

    Saturday, November 17th, 2012 03:53

    23

    too complicated
    there are lots of easier way

    +2
  • Mephisto

    Wednesday, November 7th, 2012 14:55

    22

    Brilliant, absolutely brilliant guide! Thanx!

    +1
  • harry

    Sunday, November 4th, 2012 04:24

    20

    just enjoyed this tutorial… so superb……

    0
  • Sumit

    Monday, October 29th, 2012 06:19

    19

    Very good tutorial. Thanks.

    +1
  • Cirsten

    Thursday, October 11th, 2012 17:30

    18

    Tnx! I like it! Great tutorial!

    +1
  • amit mojumder

    Saturday, October 6th, 2012 11:20

    17

    hello Michael
    thanks for the reply on my previous question.
    I have another question to ask. Since you are using HTML5 and its brand new tags directly on the markup, so shouldn’t we use any JavaScript libry like Mordenizr or other hack for the older browser so that our layout doesnt break down?
    can you plz let me know?

    thanks in advance?

    0
  • Robert

    Saturday, October 6th, 2012 10:40

    16

    Great tutorial. I especially like how you did the structural containers first. I will pass this along to my web students as an additional resource.

    -1
  • Dan

    Wednesday, October 3rd, 2012 08:29

    15

    Great tutorial = )

    0
  • Jefrey Landicho

    Tuesday, October 2nd, 2012 13:55

    14

    Nice design sample but why not use max-width: and width:100% to make it responsive at the same time

    +3
  • lawrence77

    Sunday, September 30th, 2012 14:15

    13

    What about a Video Tutorial?? :)

    +5
  • Fraakz

    Saturday, September 29th, 2012 16:23

    12

    Converting psd to html is tricky but I am glad that this tutorial is helpful for newbies. I guess attempting this tutorial requires knowledge of css and html.

    0
    • John

      Monday, November 5th, 2012 04:17

      21

      Yes you do need to have a background on html and a bit about Css as well so you can understand this tutorial thoroughly. =)

      0
  • Mark Preston

    Wednesday, September 26th, 2012 20:01

    11

    I loved this tutorial and timely because I’m diving head first in learning how to do this. Between this and a class I’ve taken on Train Simple site (an Adobe Training site), I’m really beginning to think in the correct way. Thanks so much for writing this.

    0
  • Bilal

    Wednesday, September 26th, 2012 10:43

    10

    Awesome tutorial. I am building a new theme from scratch and this tutorial will help me in building. thanks

    0
  • Bulb

    Tuesday, September 25th, 2012 12:26

    9

    Nice tutorial!

    Just to note that the slider image urls do not exist now (25/9/12) so they don’t show up in the slideshow.

    -2
  • Guppu Boss

    Tuesday, September 25th, 2012 04:25

    7

    Nice tutorial. I am designing Photoshop but not expert while converting psd to code

    0
  • amit mojumder

    Monday, September 24th, 2012 14:28

    6

    Nice design and nice coding tutorial.
    I am confused with one point like, why u used H2 first? where is H1?
    Shouldn’t there be H1 instead of H2 ?
    Thanks.

    +2
    • Michael John Burns

      Tuesday, September 25th, 2012 11:10

      8

      Hello Amit, Thanks for pointing it out. For the logo it self it should be H1 I apologize for my mistake. Then followed by h2, h3 etc. But in the way I code I started h2 down to h5.

      -1
  • Sergio

    Monday, September 24th, 2012 12:52

    5

    OMG!, This tutorial is pretty interesting, all you have to put much interest and desire.

    0
  • Rodrigo Santander

    Monday, September 24th, 2012 12:15

    4

    This is the most useful tutorial I’ve seen in the blog. Thanks for showing us how to do it.

    0
  • Azhar Khan

    Monday, September 24th, 2012 12:10

    3

    Amazing :)
    Very Simple :)

    +1
  • zouhair

    Monday, September 24th, 2012 11:03

    2

    tnx man, great tutorial :)

    0
  • MR.Rad

    Monday, September 24th, 2012 09:30

    1

    very good tutorial

    0

Comments are closed.

54.205.175.144 - unknown - unknown - US