PSD/HTML Conversion: Code a Clean Business Website Design

Jun 30 2010 by Chris Creed | 65 Comments

PSD/HTML Conversion: Code a Clean Business Website Design

In this PSD/HTML conversion tutorial, we will take a PSD web design template that I showed you how to construct in a previous tutorial and turn it into a functional HTML/CSS template.

This is the second part of a tutorial on building a clean business website. This second part will focus on converting and coding the PSD mock-up we created in the first part.

"Clean Business Website" Series

Final Result: Live Demo

Here’s the template that we’re looking to create. Click on the screenshot below to see the live working demonstration of the HTML template.

Final Result: Live DemoLive Demonstration of the Final HTML/CSS template

Before Starting

Make sure that you have the Photoshop file (PSD) that we produced in the first tutorial — you’ll need this to extract the images that we’ll be including in the template.

If you haven’t completed the Part 1 tutorial yet, then I’d advise you to go through that first tutorial before starting this one (or at least download the PSD file from that first tutorial).

In this tutorial (Part 2), I’ll be assuming that you have some basic HTML and CSS knowledge — however, if anything is unclear, please leave a comment below and I’ll do my best to help out.

Creating the File Structure

1 Create a new empty folder on your desktop called "template" (or whatever you prefer).

2 Inside of that empty folder, create another folder called "images" — this folder will contain all of the images that we need to display in the template.

3 Then create three new files and name them index.html, style.css, and reset.css.

Creating the File Structure

The index.html file is where we will write all of the HTML for our template, while the style.css file will include all the CSS styling code that will make everything look nice and pretty.

Setting Up reset.css

In the reset.css file, we want to use a reset stylesheet. The primary reason for this is that different browsers tend to have inconsistencies in the way that they display different HTML elements (e.g. font sizes of headings, the size of margins and padding, etc.). Using a reset stylesheet enables us to reduce the impact of these inconsistencies.

4 I’ll be using Eric Meyer’s Reset CSS. Copy the Reset CSS code into your own reset.css file.

Add the Basic HTML Markup

5 Now open up your index.html file using a code editor. I’ll be using Coda (a popular web development IDE for the Mac OS) for this tutorial, but you can use whichever application you prefer. Add a basic structure for a new HTML page — most source code editing applications (like Coda and Adobe Dreamweaver) provide a function for this (or do it automatically for you). Here’s the code block for your basic HTML markup.

	<!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>My HTML  Website Template</title> 
	    </head> 
	    <body> 
	    </body> 
	</html> 

Reference Your Stylesheets

6 Inside the <head> tags of index.html, you need to add the following line of code to reference our main stylesheet.

	<link rel="stylesheet"  type="text/css" href="style.css" media="screen"  />

This tells index.html page where to find your main stylesheet.

7 Now open your style.css file and add the following line of code at the top of the document to also reference our reset.css file.

	@import "reset.css";

This ensures that the reset styling included in the reset.css file is called before any of our other CSS stylesheet (which is important because of the CSS inheritance model).

Excellent! All three files are now connected and talking to each other, so we can start coding up the theme.

The Template Structure

Below, you can see the basic layout structure and main sections of the HTML/CSS template. Study it for a bit to familiarize yourself with the different sections of our web page layout.

Creating the File Structure

Code the Basic Page Section

8 We’ll start by creating the basic structure in our index.html. Add the following code block for the layout sections.

	<div id="wrap">    
	    <div id="header">
	    </div><!--end header-->
	    <div  id="featured-content">
	    </div><!--end  featured-content--> 
	    <div id="services">
	    </div><!--end services--> 
	    <div  id="additional-info">
	        <div  id="client-testimonials"> 
	          </div><!--end client-testimonials--> 
	        <div  id="featured-project"> 
	        </div><!--end  featured-project--> 
	    </div><!--end additional-info--> 
	    <div id="footer"> 
	    </div><!--end footer--> 
	</div><!--end wrap--> 

As you can see, we’re holding all of the main sections of the template within the #wrap container to make it easier for us to center our web page.

The main sections of our web layout include #header, #featured-content, #services, #additional-information (which contains #client-testimonials and #featured-project), and the #footer.

Create the Background

9 To create the background of our HTML/CSS template, we initially need to slice out the background image from the PSD file. We will be using the same method for slicing out the different CSS background elements throughout this tutorial, and I’ll just give you a brief summary of the procedure here. First step: in Photoshop, choose the Rectangular Marquee Tool (M) and make a narrow selection that includes the header and white background.

Create the Background

10 Once you’ve made the selection, go to Edit > Copy Merged, create a new Photoshop document (Ctrl/Cmd + N), and then paste the selection in the new document (Photoshop should automatically determine the size dimensions of the new document based on the image you have in the clipboard).

11 You then need to go to File > Save for Web & Devices to save the file. Choose the GIF file format and then save it as main-bg.jpg inside your images folder.

12 Now add the following code to your style.css file to set the background.

	/*-----------------GENERAL STYLES-----------------*/ 
	body { background: url(images/main-bg.jpg) repeat-x;  font-family: arial; } 
	#wrap { width: 960px; margin: 0 auto; }

Here we’re attaching the background image to the <body> of the HTML document and then repeating it across the page along the x-axis.

We’re also setting the width of page layout and ensuring that it’s centered on the screen (margin: 0 auto; centers the layout).

Adding the Logo

13 We now want to add the logo to the header. To do this, we initially need to extract it from the PSD. Select the layer that the logo is stored on and then right-click the thumbnail next to layer name (circled below).

Add the Logo

This will select the logo text for you.

Add the Logo

14 Copy this text again, create a new document, and then paste it into the new document.

15 Choose Save for Web & Devices again, choose PNG-24 as the file format and save the file as logo.png in the images folder.

We use the PNG file format here because we want the image to have a transparent background so that it can be easily displayed on any background color.

16 Now add the following HTML to your index.html file to set the markup for our site name/logo.

	<div id="header"> 
	    <h1>Design Studio</h1> 
	</div>

17 Then we need to style our markup to set logo.png as the CSS background image of #header h1. Add this code block to the style.css file.

	/*---------------------HEADER---------------------*/ 
	#header { height: 130px; } 
	#header h1 { float: left; background: url(images/logo.png)  no-repeat; width: 347px; height: 66px; text-indent: -9999px; margin: 38px 0 0  0; }

We’re initially setting the height of the header container and then attaching the logo image to the h1 element.

We utilize a technique called CSS background image replacement which attaches a background image to an element and then moves the content associated with the element off the screen via the use of text-indent: -9999px attribute/value pair.

The CSS background image replacement approach provides some SEO benefits and also makes it easier for users who are using screen readers to understand the content of your page.

Make the Navigation

18 To create the navigation area, add the following HTML to your index.html file.

	<div id="header"> 
	    <h1>Design Studio</h1> 
	    <ul id="nav"> 
	        <li><a  href="#">Home</a><span  class="nav-divider">--</span></li> 
	        <li><a  href="#">About Us</a><span  class="nav-divider">--</span></li> 
	        <li><a  href="#">Services</a><span  class="nav-divider">--</span></li> 
	        <li><a  href="#">Portfolio</a><span  class="nav-divider">--</span></li> 
	        <li><a  href="#">Contact Us</a></li>  
	    </ul> 
	</div><!--end header-->

19 Now add the following CSS to your style.css file.

	#header #nav { float: right; margin: 72px 0 0 0; } 
	#header #nav li { float: left; font-size: 16px; } 
	#header #nav a { color: #eee; text-decoration: none; } 
	#header #nav a:hover { color: #00aeef; } 
	#header #nav .nav-divider { color: #eee; padding: 0 10px; }

This again is quite simple: We’re initially floating the #nav container to the right of the page and also moving it 72px from the top using the margin attribute. The <li> elements are then floated to the left to ensure that all page names are displayed next to each other and not on separate rows.

The rest of the code simply styles the links and the "–" characters that is used as a divider between the different page names.

Code the Featured Content Section

20 To create this section, we need to slice several images from our PSD. The first is the title. We want to follow the same process we used previously when slicing out the logo. So, select the layer that the title is stored on in the Layers Panel, right-click the thumbnail on that layer to select the text, copy the text, and then create a new Photoshop document.

21 Paste the text into the new document and then save the title into your images folder via the Save for Web & Devices command (call it featured-content-title.png).

Code the Featured Content Section

22 Then do exactly the same for the subtitle (name this file featured-content-subtitle.png), the dotted line (name this horizontal-line.png), and the text (featured-content-text.png).

23 Now that we have extracted all the images required, we need to write our HTML. Add the following code block inside the #featured-content container in your index.html file.

	<div id="featured-content"> 
	    <h2>Clean and Professional Web  Design</h2> 
	    <h3>Providing High Quality Web  Solutions</h3> 
	    <div  class="horizontal-line"></div> 
	    <p>We provide first class web  solutions for organizations and small businesses looking to make a big impact  online. Our services include web design, online marketing campaigns, and search  engine optimization.</p> 
	    <div  class="horizontal-line"></div> 
	</div><!--end featured-content-->

24 Then add the following code to your style.css file to style our elements.

	/*-----------------Tools-----------------*/ 
	.horizontal-line { background:  url(images/horizontal-line.png) no-repeat; width: 950px; height: 10px; } 
	/*------------FEATURED CONTENT SECTION------------*/ 
	#featured-content { margin: 65px 0 0 0; } 
	#featured-content h2 { background:  url(images/featured-section-title.png) no-repeat; width: 811px; height: 66px;  text-indent: -9999px; } 
	#featured-content h3 { background: url(images/featured-section-subtitle.png)  no-repeat; width: 720px; height: 57px; margin: -8px 0 30px 1px; text-indent:  -9999px; } 
	#featured-content p { background:  url(images/featured-section-text.png) no-repeat; width: 957px; height: 126px;  margin: 30px 0 25px 0; text-indent: -9999px; }

In these code blocks, we start by moving the #featured-content section down by 65px using the margin attribute.

We then utilize the CSS image replacement technique again for the h2, h3, and p elements to display the images that we extracted.

The styling for the horizontal line (.horzontal-line) has been written in a separate section (using CSS comments to label the sections), as we’ll be using this in other containers as well. This helps to keep our code clean and organized.

Create the Services Section

25 Let’s first extract the images we require from our PSD. We need the blue Services box background (save it as services-box-bg.png), the large headings in each of the boxes (save it as web-design-title.png, marketing-title.png, and optimization-title.png respectively), the horizontal dotted line (service-dotted-line.png), and the buttons at the bottom of each of the boxes (get-more-details-button.jpg, view-case-studies-button.jpg, and learn-more-button.jpg). Follow the same process for extracting and saving the images as used in previous steps.

Create the Services Section

26 Now add the following code inside the #services container in your index.html file.

	<div id="services"> 
	    <div class="service-box first"> 
	        <h2  class="web-design-title"></h2> 
	        <div  class="service-dotted-line"></div> 
	             <p>We provide web design solutions of the very highest order. We’ll  work with you from the start to understand your exact requirements and will continuously  work with you to ensure that you’re happy with the final site that you  purchase.</p>  
	             <a href="#"  class="more-details"></a>  
	    </div><!--end service-box--> 
	    <div class="service-box"> 
	        <h2  class="marketing-title"></h2> 
	        <div  class="service-dotted-line"></div> 
	        <p>We can help  you promote your business in both the online and offline worlds. We specialize  in a range of fields from viral marketing campaigns to managing paid  advertising accounts for you. Your brand will be in safe hands with  us.</p> 
	        <a  href="#" class="view-case-studies-button"></a>  </div> 
	    <!--end service-box--> 
	    <div class="service-box"> 
	        <h2  class="optimization-title"></h2> 
	        <div  class="service-dotted-line"></div> 
	             <p>Want to drive more traffic to your site? You’ve come the right  place! We can increase traffic to your site in an organic and effective manner  that will ensure more people are aware of your business and the  products/services you offer. </p> 
	             <a href="#"  class="learn-more-button"></a> </div><!--end  service-box--> 
	    </div><!--end services--> 
	    <div class="horizontal-line"></div>

In this code block, we’re adding three new containers which are all assigned a class of .service-box. Inside each of these service boxes is a title, a dotted line, the text content for that box, and a button.

The first service box is also assigned a class of .first (class="service-box first") because we need to slightly change the styling of this container from the others.

27 Now add the following CSS to your main stylesheet for styling our Services section.

	/*--------------------SERVICES--------------------*/ 
	#services { padding: 40px 0; height: 355px;  } 
	#services .service-box { float: left; background:  url(images/service-box-bg.png) no-repeat; width: 233px; height: 301px; margin: 0 0 0 46px; padding: 22px 28px 30px 26px; } 
	#services .first { margin-left: 0; } 
	#services .service-box h2 { margin: 0 auto; } 
	.web-design-title { background:  url(images/web-design-title.png) no-repeat; width: 186px; height: 48px; } 
	.marketing-title { background:  url(images/marketing-title.png) no-repeat; width: 186px; height: 48px;  } 
	.optimization-title {  background: url(images/optimization-title.png)  no-repeat; width: 200px; height: 48px;} 
	.service-dotted-line { background:  url(images/service-dotted-line.png) no-repeat; width: 237px; height: 3px;  margin: 10px 0 24px 0;  } 
	#services p { font-size: 14px; color: #fff; line-height:  21px; text-align: center; margin: 0 0 24px 0; } 
	#services .more-details { display: block; background:  url(images/get-more-details-button.jpg) no-repeat; width: 232px; height: 41px;  } 
	#services .view-case-studies-button { display: block;  background: url(images/view-case-studies-button.jpg) no-repeat; width: 232px;  height: 41px; } 
	#services .learn-more-button { display: block; background:  url(images/learn-more-button.jpg) no-repeat; width: 232px; height: 41px; }

The above code is again making use of the CSS background image replacement technique where necessary to display the appropriate images.

The rest is generally just setting the padding and margins on the different elements for positioning and spacing of the various elements.

One thing to note is that the left margin on the .service-box class is set to 46px. This is to provide consistent spacing between the different service boxes. However, if the first box has a left margin set to 46px, it will not be on the left side of the template and will look a little odd.

To fix this oddity, we therefore set the left margin for the .first class to 0 to override the original margin attribute value from the .service-box styling, ensuring that the first service box is correctly aligned on the left side of the template.

Make the Client Testimonials Section

28 We need to slice out the title for this section. Use the same process as before and save the file as client-testimonials-title.png.

Make the Client Testimonials Section

29 Add the following code inside the #client-testimonials container in index.html.

	<div id="client-testimonials"> 
	    <h3>Client Testimonials</h3> 
	     
	    <div class="testimonial"> 
	        <div  class="author-img">  
	             <img src="images/author-img-1.jpg" alt="Sarah  Johnson" /> 
	        </div><!--end  author-img--> 
	        <p>"Design  studios created a beautiful website and were an absolute pleasure to work  with..."</p> 
	        <p  class="author-name">Sarah Johnson</p> 
	        <a  href="#">Web Design Media</a>  
	    </div><!--end testimonial--> 
	    <div class="testimonial"> 
	        <div  class="author-img">  
	             <img src="images/author-img-2.jpg" alt="Kate  Saunders" /> 
	        </div><!--end  author-img--> 
	        <p>"I only  have great things to say - I would highly recommend DS for online promotional  work..."</p> 
	        <p  class="author-name">Kate Saunders</p> 
	        <a  href="#">Software Solutions</a>  
	    </div><!--end testimonial--> 
	         
	    <div class="testimonial"> 
	        <div  class="author-img">  
	             <img src="images/author-img-3.jpg" alt="Dave Cole"  /> 
	        </div><!--end  author-img--> 
	        <p>"Design  Studios have increased traffic to my site by over 200% in three months - great  work guys!"</p> 
	        <p  class="author-name">Dave Cole</p> 
	        <a  href="#">Global Web Services</a>  
	    </div><!--end testimonial--> 
	</div><!--end client-testimonials--> 

This is fairly straightforward: We’ve got three new .testimonial containers that each contain an image of the testimonial author, the testimonial text, and the name of the author along with their company/organisation’s name.

30 Now add the following CSS to your style.css file.

	/*----------------ADDITIONAL INFO-----------------*/ 
	#additional-info { margin: 38px 0 0 0; height: 420px;   } 
	#additional-info #client-testimonials { float: left; width:  425px; padding: 0 45px 0 0; } 
	#additional-info #client-testimonials h3 { background: url(images/client-testimonials-title.png)  no-repeat; width: 180px; height: 28px; margin: 0 0 24px -5px; text-indent:  -9999px; } 
	.testimonial {  margin: 0 0 32px -5px;  } 
	.testimonial .author-img { float: left; background-color:  #ccc; width: 84px; height: 84px; margin: 4px 28px 0 5px; } 
	.testimonial img { margin: 3px 0 0 3px;  } 
	.testimonial p { color: #555; font-size: 14px; line-height:  21px; margin: 0 0 12px 0; } 
	.testimonial p.author-name { font-weight: bold; margin: 0;   } 
	.testimonial a { color: #00aeef; font-size: 14px;  text-decoration: none; } 
	.testimonial a:hover { color: #555; }

The first three lines in the above code block all deal with the parent container #additional-info — the height of the container is set along with the margins.

One of the key points here is that the width of the #client-testimonials container is set to 425px with 45px of padding on the right. This needs to be the same for both this section and the "Featured Project" section (we’ll talk about this section later down the tutorial) as they both use half of the screen.

31 Between these two containers, we need to add the vertical line and use it as a divider. Slice this image out of the PSD file and save it as vertical-line.png.

Make the Client Testimonials Section

32 Now add the following line of code between the #client-testimonials and #featured-project containers in your index.html file.

	<div class="vertical-line"></div>

33 Then include this CSS code block under the .horizontal-line class that we defined earlier.

	.vertical-line { float: left; background:  url(images/vertical-line.png) no-repeat; width: 4px; height: 385px; }

The CSS above ensures that the vertical line is displayed between the two different sections.

Make the "Featured Project" Section

34 As with the client testimonials section, we need to slice out the "Featured Project" heading from our PSD template. Save the file as featured-project-title.png.

Make the "Featured Project" Section

35 Now add the following HTML markup code block to your index.html file.

	<div id="featured-project"> 
	    <h3>Featured Project</h3> 
	    <h4>Yoshi Online Marketing  Campaign</h4> 
	    <img src="images/featured-project-image.png"  alt="Yoshi Screenshot" /> 
	    <p>This project involved organizing  an online marketing campaign to help promote the Yoshi brand. This resulted in  a 200% increase in Yoshi’s sales over a six month period of time. </p> 
	    <a href="#">Click Here  For More Details >></a> 
	</div><!--end featured-project-->

36 Then add this CSS code block to your style.css file to style the "Featured Project" section.

	/*----------------FEATURED PROJECT----------------*/ 
	#featured-project { float: left; margin: 0 0 0 45px; width: 425px; } 
	#featured-project h3 { background:  url(images/featured-project-title.png) no-repeat; width: 160px; height: 32px;  margin: 0 0 16px -5px; text-indent: -9999px; } 
	#featured-project h4 { font-size: 20px; color: #888;  font-weight: normal; margin: 0 0 8px 0; } 
	#featured-project img { margin: 0 0 7px 0; } 
	#featured-project p { font-size: 14px; color: #555;  line-height: 21px; margin-bottom: 7px; } 
	#featured-project a { color: #00aeef; font-size: 14px;  text-decoration: none; }

Again, the width of this container is 425px with 45px of left padding. The CSS image replacement technique is used to display the "Featured Project" title with the rest is simply setting the margins, colors, and font sizes of the various elements.

Coding the Last Section: The Footer

37 The footer is very simple to code. Add the following HTML to your index.html file.

	<div id="footer"> 
	    <div class="horizontal-line"  style="clear: both"></div> 
	    <p>Copyright &copy; 2010 ~  Design Studios ~ All Rights Reserved</p> 
	</div><!--end footer-->

In the footer, we’re just displaying another horizontal line to act as a divider between the #additional-info container and the #footer. Some standard copyright text is then included underneath this.

38 Now add this CSS code block to your style.css file for styling our footer section.

	/*--------------------FOOTER----------------------*/ 
	#footer { height: 70px; padding: 0 0 30px 0; } 
	#footer p { font-size: 16px; color: #888; padding: 14px 0 0  0; }

The styling here is quite straightforward: We’re defining the height of the #footer container and then setting the bottom padding to 30px to provide some breathing room at the bottom of the web layout template.

We also set the font size and color of the copyright text and give them some padding at the top to move the text away from the horizontal line.

Finished!

That’s everything done. If everything has gone according to plan, hopefully you have some that looks like the following screenshot.

Final Result: Live Demo

I hope you found this tutorial useful. Please leave some comments below if you have any questions, suggestions, or feedback.

"Clean Business Website" Series

Download Source Files

Related Content

About the Author

Chris Creed is the founder of Voosh Themes, which provides a wide range of Premium and Free WordPress themes. He’s been designing and developing websites for over 10 years and is interested in most things related to design. You can follow him on Twitter at @cpcreed.

65 Comments

Azim Norazmi

June 30th, 2010

another world-class tutorial from sixrevisions, tq

saifu

June 30th, 2010

great tutorial….nice one chris creed..

Daniel Pavey

June 30th, 2010

Nice clear article

Really helpful for someone just starting out!

Doulgas Wollison

June 30th, 2010

It’s a nice tutorial, but I disagree with some of the practices.

For one, if images are turned off, you can barely read anything, as most of the important text is background images. If you changed it to inline images, then there would be some alt text that could be displayed. Even better would be just using normal text (maybe find a font-face equivalent to myriad).

If you have to use the css background image, you could wrap the paragraph in a div, apply the background to the div, and z-index the paragraph so it’s behind the background image, rather than indented off into the abyss. This way, should images be turned off, you can still see the text.

While on the images topic, a lot of these background images can easily be done with background colours; just sample it from photoshop and paste the code right in. Same goes for most of those borders, you could use a 3 or 4 px dotted border.

But that’s just me.

Lopes

June 30th, 2010

more one good tutorial, thanks

Allan

June 30th, 2010

Clear and detail tutorial. Just great! Thanks Chris.

K Louise B R

June 30th, 2010

Exactly what I need. Amazing and detailed, thanks!

Stephen

June 30th, 2010

Now I know why when you buy a theme they provide you a psd file of the whole website. Thanks for the walk-through now I just got to see if I can actually do it myself.

John

June 30th, 2010

Very nice. One question. I follow a few veteran web designers that talk about modern web design and best practises. One point they raise is that all sites should be built using strict doctype and that transitional (or lazy coding in their words)should never be used in modern wed design. Strict forces the seperation of content and presentation and gives the most up to date standards compliant site. So I’m interested in your view, as they say any pro should no better. You have over 10 yrs experience but code in transitional.

What is your view point?

Kenneth Nordahl

June 30th, 2010

Why dont you use text instead of images for all the headers? Or at least use spirits for the images?

John

June 30th, 2010

Because it looks a hell of alot crisper and cleaner that way. sprites are only really for links and hover effect buttons. You wouldnt really have a sprite for a heading.

Amber Weinberg

June 30th, 2010

Funny, I just wrote a post today on why you should NOT comment your closed divs: http://www.amberweinberg.com/should-you-document-your-html/

Also, why do you use the Transitional for the doctype?

Matt

June 30th, 2010

Douglas is right. Some of your most important content is dependent upon imagery. Should those fail to load, the site’s primary message gets lost without that alt text (or some other method). I should note, though, that it is a very attractive and clean layout. Kudos on that end.

Young

June 30th, 2010

Nice tutorial. I also agree with Douglas on the CSS – it seems to be a pretty widespread practice to do indent -9999px but it just never appealed to me. Sure your text is not on the screen and with CSS turned off it’ll show where it should, but my OCD doesn’t like knowing there’s text floating somewhere near my ceiling…

I would probably do z-index as well, and if you don’t mind the extra markup, you could span it and set display to none until hover. I’ve used the latter for when the text was not exactly on the image (kinda like tooltips).

And now I feel like someone would crucify me on how that’s not good practice. Feel free! We’re all still learning…

ddeja

June 30th, 2010

Clean and useful tutorial. Although i would prefer to see the usage of @font-face parametr instead of images.

@Doulgas – (For one, if images are turned off,…) – how many people even know how to turn off images in the browser?:) Try to use youtube without images…

@Kenneth – i think there is no need to use sprite for images becouse of their lightness. The font images weight almost nothing so there is no need.

Chis Creed

June 30th, 2010

Thanks everyone for the comments and feedback.

@Kenneth – I used images here to demonstrate one approach in using fonts other than the standard “web-safe” ones that we’re normally stuck with. There are, of course, a number of other (and potentially better) methods for displaying different fonts/text (e.g. font-face as @Doulgas Wollison highlights).

Nikola Dadić

June 30th, 2010

Nice tuts for begginers.

Jenn

June 30th, 2010

Nice tutorial, but I don’t understand the reasoning behind using an image slice for that header background. It’s just a solid color, couldn’t you just use background color on the header div?

qnq

June 30th, 2010

I agree with other commenters here – great tutorial (i wish I had this 4 years ago), but there are a few areas that could be updated:
1. H1 for site logo – this would mean the same H1 across the site – the H1 should be reserved for the page heading – not the site name.
2. Negative text indent – really no longer a good practice with search engines (Google in particular) frowning on this method (http://maileohye.com/html-text-indent-not-messing-up-your-rankings/)
3. Remember to smush your images – this can save a huge amount of bandwidth on high-traffic sites – every ‘bit’ counts :)

Matthieu

June 30th, 2010

Great tutorial again. I think I’ll be able improve a lot the markup on my website.

Peter

June 30th, 2010

At last a tutorial, that is easy to follow, you have done an excellent job here. I’m a professional print designers and now moving into web, this tutorial really explains the process.

Nick

June 30th, 2010

Running hidden text like that can be a bit of a no-no for SEO and its related punishments from the Search Engines. Better to have the images inline and alt tagged for viewers with images turned off. Just my 2 cents.

Minto

July 1st, 2010

Excellent tips thanks: Do we need to use @import “reset.css”; or link href=”reset.css”

Which is the best way?

George Lucas

July 1st, 2010

Nice Tutorial, Clean is the way I like it!

Joelji

July 1st, 2010

@ddeja – Yes when i browse websites in my mobile browser, i do disable images, coz that cost my for the bandwidth, right! Hope most of you do that!!! In that case (mobile browsing) i think douglas’ comment seems appropriate.

Mike

July 1st, 2010

I haven’t gone through the whole article yet but I want to say thank you for making this tutorial rock :)

Red

July 1st, 2010

Same question here…. why transitional and not strict DOCTYPE? Otherwise it’s a good tutorial…

Tutorial Lounge

July 1st, 2010

really helping code for psd to html conversion, this will help to those who want to know about html standards.

Kaushik

July 1st, 2010

Great tutorial Chris.

I usually have a “base” template from where I begin. It makes designing easier.

Austin Pickett

July 1st, 2010

I’m still so surprised how many people are not getting their websites ready for HTML5. use a simple and prepare for the future.

Jae Xavier

July 1st, 2010

well written!

Rob

July 2nd, 2010

Very nice, fills in a few blanks as for me as well. great tut!

subzero525

July 2nd, 2010

nice information Chris helped me alot
thanks for sharing

Dave

July 3rd, 2010

Great tutorial, thanks for sharing, really helped me actually :)

reez

July 4th, 2010

I hope I will successfully doing it for my first ever coded by me..my web..:D

david

July 6th, 2010

Nice tutorial, very usefull. Just one question. What should I do to get it working on Ie6? The png images don’t work propierly, and there are some problems with margins.

Thanx again.

Jacob Gube

July 6th, 2010

@david: IE6 doesn’t support alpha transparency. There are a bunch of ways to “fix” this, but the one I’ve used in the past is IE PNG Fix, which is a JavaScript library.

As for margins/paddings: The issue is the difference in box models. Two ways to go about this: serve a special stylesheet for IE6 or avoid using padding in div elements, especially left/right padding.

ogito

July 6th, 2010

the best tutorial so far.

david

July 12th, 2010

Thank you Jacob.

You say you have used IE PNG Fix in the past. What do you do now?

Jacob Gube

July 12th, 2010

@david: What I do now: Not support IE6 or not make designs that rely on alpha transparencies or do slices that include the background of the element (which is bad practice since it increases the page weight).

I just don’t think it’s right to include a JavaScript file to fix a browser rendering issue – so to sidestep that – I just try not to rely on PNG transparencies.

Henry

July 12th, 2010

Nice Tutorial. Regarding IE6, I would suggest ignoring IE6 until the very end. Design for the majority of your audience (FF, IE7+) first then apply hacks/fixes only for IE6. I have personally decided its not worth my time trying to fix for ie6 users unless its a quick fix, or unless a client absolutely requires it.

Ben Rowe

July 13th, 2010

I found this really useful. As someone who has flirted with, and only become frustrated with CSS in the past, I feel as though I have a better understanding of the process to go through now.

Thanks for this – Now onto your new blog CSS tutorial.

Mr.Shafique

July 31st, 2010

Yes i agree Chris it’s nice a approach to use images other than the standard “web-safe” font, But don’t you think it’s too much images that take time for HTTP load request for each image to load, that make our page heavy. In modern approach u know people like to use css sprite techniques!.

any how it’s nice tutorial.

FJ. Gorrin Garcia

August 12th, 2010

Hi Chis,

Very nice tutorial but I have a question for you, so maybe if u like u can answer me pls?

I want to do my other pages (about, portfolio, etc) based on the style.css but if I change something on the style.css then also the Welcome page change. What I mean is that if I want to insert an image ABOUT.PNG into the tile of the About page, then also the WELCOME.PNG into the Home page changes.

How do I go arround this? How can I make my other pages without changing the rest?

Bram

August 16th, 2010

Hi, nice tut but something bugs me a bit. The way you safe off your images and headers is not exactly best practice. If you write a web tutorial you should show how to slice up a psd instead of selecting logos and headers with you magic wand tool. Further why would you degrade text by electing this way while you have the original text? Also, selecting and pasting in a new document is just not the way to do it.

Bram

August 16th, 2010

Hi, sorry. Please ignore my previous comment about magic wand tool. Selecting text the way you show is a good way to select text. My other comment still stand. Thanks.

Ernesto

August 27th, 2010

Great Tutorial!

Alvin

September 12th, 2010

Im following your specific instructions on how too slice the header as far as the coding is concerned. But keep getting stripes instead of one whole solid header. Any suggestions? Help a newbie.

shiham

October 29th, 2010

great i just bookmarked this site.. thumbs up!

what

December 1st, 2010

Choose the GIF file format and then save it as main-bg.jpg inside your images folder.

Jay Wolters

December 3rd, 2010

I was confused by step 11 in this tutorial:
“choose GIF and then save it as main-bg.jpg…”

Of course I thought to myself “this guy messed up – I would have used a Hex color instead of slice anyway, and how do you get a jpg from selecting the GIF format?”. Turns out I learned something new with that trick and want to clarify for other readers if I may.

By selecting GIF it allows you to modify the color table index down to an appropriately low number like 4 in this case, making the image as small as possible like a proper GIF should, but by adding .jpg to the name forces it to be a JPG while preserving the color table and small size of a GIF without the Dithering of a JPG. Nice.

I still would have used a Hex color for the header – but this gave me some insight on saving JPG’s using the GIF features. As a seasoned web-designer I still find useful tips everyday. Thanks for this one!

Zachery

December 8th, 2010

Thanks for the great tut.

But how can I further develop this with the about us page and so on? By looking at the live demonstration, I’ve noticed the # sign at the back when I click on one of the navigations menu such as about us. Has this got something to do with masterpage or something?

For example, for this website http://www.google.com/nexus , there is a /#!/features in addition to the http://www.google.com/nexus whenever I click on the features navigation. It will become http://www.google.com/nexus/#!/features . I would like to create my website like this as my header and footer doesn’t change when I press on the navigations. I only want to change the content that is different in each of the pages.

So do I create more html like aboutus.html and stuffs? How can I get the same result as the google.com/nexus?

Leon

January 2nd, 2011

Why do you use transitional html when the markup is done via CSS?

Brad

January 21st, 2011

Great start to finish tut that is easy to follow. well done!

Ash

February 3rd, 2011

Good tutorial, but as I was going through I could not help realizing that certain sections of the site is not very much extensible.

For example, in the #services section, say if some other developer wants to change the headings web design, marketing and optimization to say, Illustration, web hosting and Domain registration respectively, he might have to redesign those headings again in photoshop.However, if the headings were in text, its just a matter of a small editing in the html page.

what do you think ?

Simon Mckeon

February 14th, 2011

This is a good article for some general practice, however, i disagree with how you did some things. For example, the testimonials section could have been easily created with nothing but html and CSS. Using an image wouldn’t be a good choice because you may want to quickly change them, which would mean creating a whole new image..

Robbie Douglas

February 16th, 2011

Not a bad tutorial, although a there’s few areas I would go about differently to this

Nenad

February 18th, 2011

Thanks,
Good tutorial Chris

gbsquared

February 27th, 2011

Wow! Really great tutorial!

Lots of great things to implement in my designs.

Matt

March 10th, 2011

Hi there. Excellent article, thanks. One question. Can anyone advise on how you might make the logo a link? I can’t seem to find a way of making the logo link to another page.

Juan

April 28th, 2011

been meaning to follow this tut for a while. should have done it long time ago. excellent!

Adrian

May 26th, 2011

Hi.Great tutorial, thanks for sharing.

James

August 2nd, 2011

this is great. I wonder how the WP Theme were created.. you still need to now coding, not basic but really advanced.

WordPress Theme 2011

imron

August 23rd, 2011

will it work with SEO?

jonny

October 31st, 2011

cheers for the tutorial. ive used it for my workspace :P

Leave a Comment

Subscribe to the comments on this article.