From PSD to HTML, Building a Set of Website Designs Step by Step

Jun 19th in Site Builds by Collis Ta'eed

Today I'm going to take you through my entire process of getting from Photoshop to completed HTML. We're going to build out a set of 4 PSD mockups of a website that eventually will become a WordPress theme. It's a massive tutorial, so if you're going to follow through to the end, make sure you have a few hours to spare!

Author: Collis Ta'eed

Hello! I'm a web and graphic designer who loves blogging, startups and everything about the web. You can find me on Twitter and I blog at The Netsetter

Demos

If you're like me, you like to see the end before beginning. You can see the final four HTML files by following these links:

Download the Files

Additionally you can download the full HTML/CSS/Image source files here.

What We're Building

As you may or may not know, I've (very slowly) writing a book on WordPress theming. What we're building is actually the HTML that I'm using in the book to build the main example themes. The final set of themes is called Creatif. You can see the 4 mockups shown in screenshots below (click to get the larger versions).

You can get the full layered PSD files *and* a tutorial on designing them up from our PSDTUTS Plus membership - but it will cost you $9 a month to access. If you don't wish to join though, don't worry because you can follow today's tutorial completely just using the JPG screenshots below.

Part 1 - Building the Framework and First Page

Unlike previous Site Builds this tutorial is covering a decent sized template. So we're going to take this in stages. First we'll do the framework, then the first page, then alternate pages, then finally an alternate colour scheme.

Step 1 - Getting Ready

So first of all we boot up our code editor of choice. I actually use Dreamweaver most of the time (and Textmate sometimes). I find it has some pretty decent code tools and a few features that I'm really used to (in particular a powerful Find+Replace and a quick <img> hook up). If you do use Dreamweaver, I recommend setting up a "Site".

In any case the first things to do are create a directory structure and get ready to build. I usually have an /images/ directory and a /scripts/ directory, and then plonk all my CSS and HTML in the root.

Step 2 - Quick Early Layout

The first thing we'll do is a quick overall layout in HTML with some barebones CSS just to make sure we've got a solid foundation. We can also check it in the major browsers (IE7, IE6, Firefox, Safari) just to make sure we're on a solid footing. There is nothing worse than coming back all the way to the beginning to fix browser compatibility issues. It's much better to do it as you go.

So we're building the first mockup, we can see a few things:

The design is centred. That immediately tells us we have to wrap it in a container and then centre that container.
Essentially the design is a series of horizontal blocks. Sometimes the blocks have two columns, sometimes one. So we can do it as a series of <div>'s. This is good because we can then mix and match elements into different pages as you'll see later.
We have a footer which is a different colour. This means the background needs to be that colour, in case the users browser stretches. So the footer will need to sit in a different container to the main stuff.

So here's a HTML layout:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Creatif</title>
    <link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>
    <div id="main">
    
    	<div class="container">
        
        	<div id="header">
            
            	Logo / Menu
            
            </div>
            
            <div id="block_feature">
            
            	Featured Content
            
            </div>
            
            <div id="block_content">
            
            	Content
            
            </div>
        
        </div>
    
    </div>

    <div id="footer">

    	<div class="container">
        
        	Footer Stuff Goes in Here
        
        </div>
    
    </div>
</body>
</html>

As you can see there are two segments: the #main area and the #footer area. Inside each we have a <div class="container"> element which will be fixed width and centred. Then inside the main container we just have a sequence of <div>'s. Now let's add a little CSS as follows:


body {
	margin:0px; padding:0px;
	background-color:#131211;
}

#main {
	background-color:#c4c0be;
}
#footer {
	color:white;
}
.container {
	width:950px;
	margin:0 auto;
	border:1px solid red;
}

So we're setting the body's background colour to the dark brown of the footer. Then the #main area has the lighter background. Finally you can see the .container elements have a width of 950px and are centred using margin: auto. I've also added a red border just so you can see where the elements are on the page.

You can see the layout here, or view the screenshot below.

Step 3 - Add Some Background Images

So our layout is looking ship shape. With the main elements positioned, it's just a matter of going through and styling it all up, couldn't be easier :-)

The first thing we need are some images. You can make these yourself if you have the layered PSD's, or just grab the download ZIP and you'll find some I made earlier!

Here's a screenshot of me saving the first image - a large background JPG. I'm using this large background image to get that radial gradient highlight, then I'll use a thin 1px slice to fill out the left and right sides so it extends off.

Similarly we'll create a background image for the footer to tile along as a border between it and the main area (you can find that image in the ZIP file, it's called background_footer.jpg). Now we'll update the CSS file to remove that red border and add our new background images, as follows:

@charset "UTF-8";
/* Background-Styles */

body {
	margin:0px; padding:0px;
	background-color:#131211;
}
#main {
	background:#c4c0be url(images/background_light_slice.jpg) repeat-x;
}
#main .container {
	background-image:url(images/background_light.jpg);
	background-repeat:no-repeat;
	min-height:400px;
}
#footer {
	background-image:url(images/background_footer.jpg);
	background-repeat:repeat-x;
	color:white;
	padding:40px;
}
.container {
	width:950px;
	margin:0 auto;
  	position:relative;
}

Two things to note:

There are multiple ways to set a background. In #main I've used a single selector which sets three properties - colour, image, image repeat. But you can also set each property individually as I've done in #main .container and #footer.
Notice that because I want to apply the "background_light.jpg" image to the <div class='container'> which inside #main, but not to the one that is inside #footer, I've written #main .container. In other words, apply it only to elements with the class='container' that are inside elements with id='main'.

Step 4 - Testing in Browsers

So far so good. Don't forget to test in different browsers. Here you can see in IE7 it's looking fine and dandy!

Step 5 - Making a Transparent Logo

Next I've created the logo element. Because later on we'll be running an alternate colour scheme I'm going to use a transparent background PNG file. You can make these by switching off the background in Photoshop and then going to File > Save for Web and Devices and selecting PNG-24. You should be aware that PNG-24 produces pretty high file sizes. It's OK for a small image like this, but for larger ones it can be big.

(If anyone knows how to make compressed PNG files, leave a comment, because I'm pretty sure there is a way to do it, I just don't know how!)

Anyhow you can grab the transparent logo PNG here.

Now we'll add our logo and also a menu with this HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Creatif</title>
    <link href="step_2.css" rel="stylesheet" type="text/css" />
    <link rel="shortcut icon" href="images/favicon.ico" />
</head>

<body>
    <div id="main">
    	<div class="container">
        
        	<div id="header">
            
            	<ul id="menu">
                	<li><a href="">Portfolio</a></li>
                	<li><a href="">Services</a></li>
                	<li><a href="">About</a></li>
                	<li><a href="">Testimonials</a></li>
                	<li><a href="">Request a Quote</a></li>
                </ul>
                
            	<div id="logo">
                	<h1>Creatif</h1>
                    <small>A Family of Rockstar Wordpress Themes</small>
                </div>
                
                
            
            </div>
            
            <div id="block_feature">
            
            	Featured Content
            
            </div>
            
            <div id="block_content">
            
            	Content
            
            </div>
        
        </div>
    </div>

    <div id="footer">
    	<div class="container">
        
        	Footer Stuff Goes in Here
        
        </div>
    </div>
</body>
</html>

and this extra CSS:


#header {
	padding-top:20px;
}
#logo h1, #logo small {
	margin:0px;
	display:block;
	text-indent:-9999px;
}
#logo {
	background-image:url(images/logo.png);
	background-repeat:no-repeat;
	width:194px;
	height:83px;
}
ul#menu {
	margin:0px; padding:0px;
	position:absolute;
	right:0px;
}
ul#menu li {
	display:inline;
}

Some things to note:

Rather than just placing the logo image in the HTML, we've created a <div id="logo"> and inside that placed a <h1> with the title. Then using CSS we've made the text vanish and swapped it for the logo image. This has some SEO benefits.
I used to just set the text to display:hidden, but a kind commenter on a previous tutorial pointed out that this is a bad practice and it's better to use text-indent. So as you can see I *do* read my comments :-)
I've placed a very quick, unstyled menu using an unordered list. By setting the display property to inline for the <li> elements, the list changes to a horizontal set of elements ... yay!
Finally because our <div class="container"> element has position:relative, we can now use absolute positioning inside and set right:0px for the menu and it will be aligned to the right. This is great for a WordPress theme because as the person creates new pages the menu will extend, and this way it will stay right aligned.

Step 6 - Fixing Transparency in IE6

Now the one problem with transparent PNGs is that our friend Internet Explorer 6 doesn't support them! Fortunately that's relatively easily fixed thanks to this article I found - The Easiest Way to Fix PNG for IE6. We just download a script and add this line in our CSS:

/* Fix up IE6 PNG Support */
img, #logo { behavior: url(scripts/iepngfix.htc); }

Unfortunately for me though my testing copy of IE6 which because I'm on a Mac is through Darwine - doesn't recognize the fix ... So I have no idea if my hack is working :-)

So anyhow at this point I stopped paying attention to IE6 :-) I'm going to have to get me yet another way to view IE6, maybe through parallels.

In any case, here's a screenshot of what we get in IE6 when transparency is *not* working...

Step 7 - Fixing up the Menu

Now our menu is still looking pretty ugly, so let's add a few styles to finish it off, as follows:

ul#menu {
	margin:0px; padding:0px;
	position:absolute;
	right:0px;
}
ul#menu li {
	display:inline;
	margin-left:12px;
}
ul#menu li a {
	text-decoration:none;
	color:#716d6a;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	font-weight:bold;
	text-transform:uppercase;
}
ul#menu li a.active, ul#menu li a:hover {
	color:#211e1e;
}

Nothing very exciting here except that we've defined an "active" style which is the same as the :hover style (namely it's a darker shade). That means we can write <a href="" class="active"> and the link will darken. Later in WordPress we'll make it so that you can tell what page you are on at any given time.

Step 8 - Adding the Featured Portfolio Item Content

Now we have the base of our page laid out, it's time to start adding the content blocks. As I mentioned earlier we are going to make this site as a series of interchangeable content blocks. The first one is the "Featured Project" block. So let's add some HTML:

            <div id="block_featured" class="block">
            	<span class="block_inside">
                
                	<div class="image_block">
                    	<img src="images/sample_feature.jpg" />
                    </div>
                    <div class="text_block">
                        <h2>Eden Website Design</h2>
                        <small>in <a href="">web design</a> tagged <a href="">corporate</a>, <a href="">web2</a></small>
                        
                        <p>And then a short description of the website would go in here.  Something saying maybe what awesome skills I used on the project and how happy the client was. </p>
                        <br />
                        <a href="" class="button">View Project</a>
                	</div>
                    
                </span>
            </div>

So that code goes below the <div id="header"></div> code from the previous steps. And unstyled it looks like this:

There are two important things to note here:

You will see that we have a <div class="block"> followed immediately by a <span class="block_inside">. This is because the boxes we are drawing have a double border, first there is a 1px dark grey border, then inside that a 1px white border. So having two elements means we can have a border on each. I don't know why I used a <span> on the inside, and as you'll see later on we wind up changing it :-)
Where we have the View Project button, instead of using an image, we're going to create a 'button' class and then apply it to regular text links. This makes for a very simple, reusable button look and feel.

Step 9 - Adding some Basic Styles

Now we apply some basic styling like this:

/* 
	Block-Styles 
*/

.block {
	border:1px solid #a3a09e;
	background-color:#ffffff;
	margin-bottom:20px;
}
.block_inside { 
	display:block; 
	border:1px solid #ffffff;
	background: #ffffff url(images/background_block_slice.jpg) repeat-x;	
	padding:30px;
	overflow:auto;
}

.image_block {
	border:1px solid #b5b5b5;
	background-color:#d2d2d2;
	padding:5px;
	float:left;
}
.image_block img {
	border:1px solid #b5b5b5;
}
.text_block {
	float:left;
	width:430px;
	margin-left:30px;
}

So as I mentioned above we have the .block class which just sets a border and bottom margin. Then immediately inside we have the .block_inside element which has a white border, thin slice background (to give it that faint gradient), some padding and finally an overflow value.

We have overflow:auto because we are going to have two floated elements inside. I used to use a clearing <div> but someone in my previous comments pointed out that this works just as well and is a lot cleaner!

Then inside we have an .image_block class which gives our image a double border (one on the <div> and one on the <img> itself) and which is floated left with our main .text_block also floated left to form a mini columned layout.

So our layout now looks like this:

Step 10 - Adding Text Styles

Now the text styling is all over the place at the moment. It sort of looked OK in the previous screenshot because Firefox which I was using has defaulted to a Sans-Serif font. But if I'd screenshotted IE you would have seen a Serif'd typeface instead. So we should get the text sorted out now. We'll add these bits of CSS to our stylesheet:

body {
	margin:0px; padding:0px;
	background-color:#131211;
	font-family:Arial, Helvetica, sans-serif;
	color:#7f7d78;
	font-size:13px;
	line-height:19px;
}



/* 
	Text-Styles   
*/

h2 {
	margin:0px 0px 10px 0px;
	font-size:36px;
	font-family:Helvetica, Arial, Sans-serif;
	color:#000000;
}
small {
	color:#595856;
	font-weight:bold;
	font-size:11px;
	display:block;
	margin-bottom:15px;
}
a {
	color:#007de2;
	text-decoration:none;
}
a:hover { text-decoration:underline; }
p { margin: 0px 0px 15px 0px; }

a.button {
	background:#32312f url(images/button_bg.jpg) repeat-x;
	padding:5px 10px 5px 10px;
	color: #ffffff;
	text-decoration: none;
	border:1px solid #32312f;
	text-transform:uppercase;
	font-size:9px;
	line-height:25px;	
}
a.button:hover {
	background:#007de2 url(images/button_bg_o.jpg) repeat-x;
	border-color:#007de2;
}

So:

First I've updated the body tag to have a default font, colour, size and line-height.
Then we've created a <h2> style which fixes the margins and sets the font to Helvetica
We've also created a <small> style for subheadings (like what category a post is in etc)
We've created a link style and link:hover style
We've reset the <p> styling so that the margins are fixed from the stupid defaults
Finally we've created that button class. Note that I've defined it as "a.button", or in other words all <a> tags with the class = "button". Why didn't I just make it ".button" ? Well later on there is a good chance that I will make a second button class for <input>'s and it will be slightly different. So this way they won't accidentally interact.
In the button class you will see we've set some padding, a border, a background image, a hover style and a line-height attribute ... wait a line-height attribute? Yes unfortunately this is a fix for IE which otherwise cuts off the button.

Withour extra styling, the page is starting to take shape!

Step 11 - Adding the Ribbon

One of the neat things about this design is the little blue ribbon strips in the right corner. Thanks to a mix of CSS, transparent PNG files and absolute positioning, these are really easy to add. So first we need to make the image. Once again we create an image with a transparent background and save it as PNG-24, here's the image:

Next we need to place the image in our HTML, we can do it like this:

			<div class="block">
				<img src="images/ribbon_featured.png" class="ribbon"/>
            	<span class="block_inside">
                
                	<div class="image_block">
                    	<img src="images/sample_feature.jpg" />
                    </div>
                    <div class="text_block">
                        <h2>Eden Website Design</h2>
                        <small>in <a href="">web design</a> tagged <a href="">corporate</a>, <a href="">web2</a></small>
                        
                        <p>And then a short description of the website would go in here.  Something saying maybe what awesome skills I used on the project and how happy the client was. </p>
                        <br />
                        <a href="" class="button">View Project</a>
                	</div>
                    
                </span>
            </div>

So you can see the <img> tag there on the second line. Note I've given it a class="ribbon" and put it inside the .block element, but outside the .block_inside element. That's because if we do it inside .block_inside it messes up the overflow:auto property we set earlier. Anyhow right now this will just mess up our layout, so let's add some styling:

.block {
	border:1px solid #a3a09e;
	background-color:#ffffff;
	margin-bottom:20px;
	position:relative;
}
.ribbon {
	position:absolute;
	top:-3px;
	right:-3px;
}

You can see that we've:

Added a position:relative attribute to the .block element. This is so that we can use absolute positioning inside and have it relative to the .block element (and not the whole page)
Then we've set the image to appear 3px past the right edge and 3px past the top edge.

Easy! Back in the day, we would have had to use some super complicated <table> layout to achieve that same effect. Here's how it's looking now:

Step 12 - Creating the Second Block

With the ribbon added, our first block element is complete! Now it's time to start on the next <div> block. This one will have that text about the theme and the recent projects list. So first we add some HTML:

			<div id="block_portfolio">
            
            	<div id="portfolio_items">
                
                	<div class="mini_portfolio_item">
                    	<div class="block_inside">
                            <img src="images/sample_mini_portfolio.jpg" class="thumbnail" alt="PSDTUTS"  />
                            <h3>PSDTUTS Theme Design</h3>
                            <p>Website design for leading photoshop tutorial site and creation and maintenance of Wordpress theme. </p>
                            <a href="#" class="button">View Project</a>
                        </div>                    
                    </div>
                    
                	<div class="mini_portfolio_item">
                    	<div class="block_inside">
                            <img src="images/sample_mini_portfolio.jpg" class="thumbnail" alt="PSDTUTS"  />
                            <h3>PSDTUTS Theme Design</h3>
                            <p>Website design for leading photoshop tutorial site and creation and maintenance of Wordpress theme. </p>
                            <a href="#" class="button">View Project</a>
                        </div>                    
                    </div>
                    
                    <div class="mini_portfolio_item">
                    	<div class="block_inside">
                            <img src="images/sample_mini_portfolio.jpg" class="thumbnail" alt="PSDTUTS"  />
                            <h3>PSDTUTS Theme Design</h3>
                            <p>Website design for leading photoshop tutorial site and creation and maintenance of Wordpress theme. </p>
                            <a href="#" class="button">View Project</a>
                        </div>                    
                    </div>
                
                </div>
                
                <div id="text_column">
                    <h2 id="text_title">Creatif is a WordPress portfolio theme for designers and creatives</h2>
                    <p>You can use it to quickly turn WordPress into a portfolio website.  Not familiar with WordPress? Fear not, the theme accompanies a book called <a href="#">How to Be a Rockstar Wordpress Designer</a> by Rockstar Resources due for release in 2008.</p>
                    <p>The book teaches you to use WordPress theming to take advantage of this flexible CMS product to create dynamic sites.</p>
                  <p>And as if that’s not enough, you can see a photoshop to HTML tutorial on designing the theme over at <a href="http://psdtuts.com">PSDTUTS</a> and <a href="http://nettuts.com">NETTUTS</a>.</p>
			  </div>
	
            </div>

So that looks like lots of code, but it's not really. Let's go through it:

First we've created a container <div id="block_portfolio"> to wrap up the code segment
Next we've got a <div id="portfolio_items"> which contains three identical <div class="mini_portfolio_item">'s. We'll talk about these in a second.
Next we have a <div id="text_column"> which is filled with some text and a <h2> heading.
What we are going to do is float the text column and portfolio items side by side to form two columns of content.
We're going to replace that <h2> with a background image.
And we'll style up those mini_portfolio_item divs to look nice using a similar double border effect as we did earlier.

Here's the CSS:

/*
	Portfolio-Home-Styles
*/

#block_portfolio {
	overflow:auto;
	margin-bottom:20px;
}
#portfolio_items {
	width:615px;
	margin-right:25px;
	float:left;

}
#text_column {
	float:right;
	width:310px;
}
#text_column h2#text_title { 
	text-indent:-9999px;
	background-image:url(images/creatif.jpg);
	background-repeat:no-repeat;
	width:310px;
	height:129px;
}

.mini_portfolio_item {
	border:1px solid #a3a09e;
	margin-bottom:10px;

}
.mini_portfolio_item .block_inside { 
	background:none; background-color:#e2dddc; 
	padding:25px 30px 15px 30px; 
}
.mini_portfolio_item .thumbnail { float:left; margin-right:20px; border:1px solid #979390; }

OK again, looks like a lot, but it's not too bad. Let's go through it step by step:

First we've again used overflow:auto on the main #block_portfolio element. That's because we again have two floated columns and if we don't do this, they'll run over the footer.
Next we've set #portfolio_items to float to the left, have a margin to separate it from the text column and a width of 615px.
The #text_column is set to float to the right with a width of 310px.
Inside the text column we've again done that trickery with our <h2> tag where we use a massive text-indent to make the text disappear and then instead use a background image.

Next we have three style definitions for the mini_portfolio_item elements as follows:

First we set a 1px dark border and a margin between them
Next we redefine the .block_inside styles to suit these elements. Remember .block_inside was defined earlier when we did the Featured Project area. So here we are overriding the background image, changing the background colour and changing the padding.
Finally we make the thumbnail images float left and have a border.

So all in all it's looking like this:

Step 13 - Adding a Ribbon.

Now we want to add a "Recent Projects" ribbon to the top most item. To do this we simply slot it in, in the same position in the HTML as previously, like this:

					<div class="mini_portfolio_item">
                    	<img src="images/ribbon_recent.png" class="ribbon" alt="Recent Projects"/>
                    	<div class="block_inside">
                            <img src="images/sample_mini_portfolio3.jpg" class="thumbnail" alt="AudioJungle" />
                            <h3>AudioJungle Site Design</h3>
                            <p>Website design for leading photoshop tutorial site and creation and maintenance of Wordpress theme. </p>
                            <a href="#" class="button">View Project</a>
                        </div>                    
                    </div>

Then we add a position:relative attribute to the mini_portfolio_item element like this:

.mini_portfolio_item {
	border:1px solid #a3a09e;
	margin-bottom:10px;
	position:relative;
}

But something weird happens... While the right hand side looks correct, the top is getting cut off, as you can see in the screenshot:

The reason is that the element that our mini_portfolio_item is sitting inside is cutting it off. So we check up and see that the mini_portfolio_item's are all inside a <div id="portfolio_items">. So the solution is pretty easy, we add 3px of padding to the top which is just enough space for our ribbon to show through. Here's the adjusted CSS:

#portfolio_items {
	width:615px;
	margin-right:25px;
	float:left;
	padding-top:3px;
}

Step 14 - Finishing off the Portfolio Items

Finally I've swapped in a few images and titles so we can see how the page looks with 3 different items instead of the same one repeated. Then I also decided to get rid of the View Project button and just have a text link. This looked a bit cleaner and less busy. So here's the final portfolio items section (shown in Safari, don't forget to keep testing in different browsers!):

Step 15 - Adding Footer Content

Now there is just one more section to our page: the footer! Let's add some text content to it:

	<div id="footer">
    	<div class="container">
        
        	<div class="footer_column long">
                <h3>Designed by Collis Ta’eed, do with this as you please</h3>
                <p>You can read a photoshop tutorial for creating the design at <a href="http://psdtuts.com">PSDTUTS</a>, You can read a PS->HTML tutorial for creating the site at <a href="http://nettuts.com">NETTUTS</a> and you can learn how to turn the HTML into a Wordpress theme in the upcoming book <a href="http://freelanceswitch.com/book">How to be a Rockstar Wordpress Designer</a></p>
			</div>

	        <div class="footer_column">
                <h3>More Links</h3>
				<ul>
                    <li><a href="http://vectortuts.com">VECTORTUTS</a></li>
            		<li><a href="http://flashden.net">FlashDen</a></li>
            		<li><a href="http://audiojungle.net">AudioJungle</a></li>
            		<li><a href="http://freelanceswitch.com">FreelanceSwitch</a></li>
            		<li><a href="http://faveup.com">FaveUp</a></li>
                </ul>
            </div>
            
            <div class="footer_column">
                <h3>RSS</h3>
				<ul>
                    <li><a href="">RSS Feed</a></li>
            		<li><a href="">What is RSS?</a></li>
                </ul>
            </div>
        
        </div>
    </div>

A few things to note:

I've created three <div class="footer_column">'s to house the content of the footer, we'll float these into place in a second.
Since the first column is a different width I've given it a second class called "long". Note that you set two classes like this: class="class1 class2", not like this: class="class1" class="class2" which is invalid markup.
Inside the columns I've used <ul> lists and <h3> tags for the headings. It's always good to use nice semantic markup, both because it makes it more readable, and because search engines like to see those headings and lists all laid out properly.

Here's how it's looking!

Step 16 - Styling the Footer

Styling the footer is a pretty simple job, here's the code we need:

/*
	Footer-Styles
*/

#footer {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
}
.footer_column {
	float:left;
	width:120px;
	margin-right:30px;
}
#footer .long {
	width:610px;
}
#footer h3 {
	color:#e2dddc;
	text-transform:uppercase;
	font-size:10px;
}
.footer_column ul li, .footer_column ul {
	list-style:none;
	margin:0px;
	padding:0px;
}

Going through:

First we set the fonts for the #footer area
Then we set all the columns to float with a default width of 120px
We override this width for the .long column. Notice that I've set "#footer .long" instead of just ".long". The reason I did this is that "long" is the kind of generic name I might use again later on somewhere else, so it's a good idea to specify it more clearly.
Finally the <h3> and <ul> tags get some simple styles

Step 17 - Adding a Favicon!

We're almost finished our first page. It's time to add some niceties. First a Favicon. These are those little icons that appear in your browser bar. I don't need anything fancy, just a little black square with a C for Creatif will do nicely. So first we create a square image like this:

There are lots of sites to make Favicons (Visit SixRevisions for a list of them) but I always use html-kit's for no particular reason. You just upload the image and hit Generate Favicon.ico.

Then we hook it up with this line of HTML:

    <link rel="shortcut icon" href="images/favicon.ico" />

Step 18 - Validating!

Now it's time to check that our markup is w3c valid! So we go to the Validator put in our code and cross fingers ... and pah-bow :-( We are not valid. I don't think I've ever been valid on the first try actually, I must have some bad habits!

Looking down there are 14 errors. The number one problem is that there is no alt text on any of my images... whoops! So going back and adding them like so:

<img src="images/ribbon_featured.png" class="ribbon" alt="Featured Project"/>

should fix up lots of the errors. So now we run it again and ... drum roll ... D'oh! Still invalid. OK this one looks a bit trickier:

Fortunately the remaining 8 errors are actually the same problem. Basically I've used an inline element (specifically a <span class="block_inside">) and then tried to put block level elements like <div>'s inside. Apparently that's not allowed ... whoops!

Luckily that's easily fixed, we just change every instance of <span class="block_inside"> to a <div class="block_inside">. And ... YAY! We pass :-)

Finished Part 1!

OK we have successfully made our basic page! Here you can see me testing it in IE7 and thankfully there are no bugs.

Here's the completed page

Part 2 - Building the Variations

With our basic framework in place we are now ready to build the extra pages and the alternate colour scheme. Happily we've lain a good foundation and will be able to make use of a lot of the code we've already written. This is why it's really important to plan ahead.

If you don't plan you can easily wind up with a lot of duplication, extra code and other folly.

Step 19 - Building the Blog Homepage

The next page we're going to build is the blog homepage. This is similar to the portfolio homepage in that it will have a featured blog post and then a series of blog posts below. Eventually these will become two related WordPress themes - one for portfolios, one for blogs.

So first we duplicate our index.html - the file we've been working on up 'til now, and call the new file blog.html.

In our blog.html we first delete the whole <div id="block_portfolio">. We're going to replace that block with a different one shortly. Then we replace the <div id="block_featured"> with a new block for featured blog posts which is just slightly different and looks like this:

			<div id="block_featuredblog" class="block">
				<img src="images/ribbon_featuredblog.png" class="ribbon" alt="Featured Project"/>
            	<div class="block_inside">
                
                	<div class="image_block">
                    	<img src="images/sample_blog.jpg" alt="New Blog"/>
                    </div>
                    <div class="text_block">
                        <h2>New Blog Design Launched</h2>
                        <small>on <a href="">april 13</a> in <a href="">web design</a> tagged <a href="">blogging</a></small>                        
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales. </p>
						<p>Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan mi. Nunc at velit. Maecenas velit. </p>
                        <br />
                        <a href="" class="button">Read More</a>
                	</div>
                    
                </div>
            </div>

So really all I've done is change the id tag to be block_featuredblog, the ribbon image and the content. Essentially though it's the same layout. So let's take a look and see how it's looking:

Step 20 - Adjusting some CSS

So that pretty much works as is, we'll just make a couple of small adjustments to the CSS like this:


#block_featuredblog .text_block { padding-top:5px; width:490px;}

h2 {
	margin:0px 0px 10px 0px;
	font-size:36px;
	font-family:Helvetica, Arial, Sans-serif;
	color:#000000;
	line-height:39px;
	letter-spacing:-1px;
}

Here I've adjusted the "text_block" class but only when it's in the #block_featuredblog element. It now has a tiny bit of padding at the top and is wider.

Also I've added an appropriate line-height to the heading and on a whim adjusted the text kerning by -1px. And we're finished with this element! Easy peasy!

Step 21 - Making the Main Content Area

Making this content area is the last big thing we need to do really. It will form not only the bottom of this page, but also the whole basis of the generic page (with some adjustments of course!). So first let's put in some really basic HTML:

			<div id="block_content">
            
            	<div id="content_area" class="block">
                    <div class="block_inside">
                     
						Content
                        
                    </div>
                 </div>
                 <div id="sidebar">
                 	<div class="block_inside">
                    
                    	Sidebar Content
                 	
                    </div>
                 </div>
                 
                   
            </div>

So basically what we've created is a container element - <div id="block_content"> and then inside that we've got two blocks which we're going to float to either side. You'll see I'm making use of our good old <div class="block_inside"> elements to add the double border. Here's the CSS to make them sit correctly:

/*
	Block-Content-Styles
*/

#block_content {

}
#content_area {
	width:665px;
	float:left;
}
#sidebar {
	float:left;
	width:281px;
	position:relative;
	left:-1px;
	margin-top:15px;
	background-color:#e2dddc;
	border:1px solid #a3a09e;
}
#sidebar .block_inside {
	background:none;
	background-color:#e2dddc;
}

Going through the styles:

Then we've given the #content_area box and the #sidebar box each a width and a float.
Next I've moved the sidebar to the left by 1px using a position:relative. I did this so that the left border would overlap and it would look like it's jutting out.
Additionally I've added a 15px top margin so that the sidebar isn't top-aligned. Currently it looks a bit odd, but when we add some content it will look great.
Finally I've redefined the .block_inside in the #sidebar element to override the background image and instead give it that beigey colour for a background.

Step 22 - Adding Content

Now we add some content to our two elements to style:

<div id="block_content">
            
            	<div id="content_area" class="block">
                    <div class="block_inside">
                     
						<h2>Working on a New Project</h2>
                        <small>on <a href="">april 13</a> in <a href="">web design</a> tagged <a href="">blogging</a></small>                        
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales. </p>
						<p>Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan mi. Nunc at velit. Maecenas velit. <a href="#">Read More</a></p>
                        
                        <div class="separator"></div>
                        
                        <h2>Design Awards!</h2>
                        <small>on <a href="">april 13</a> in <a href="">web design</a> tagged <a href="">blogging</a></small>                        
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales. </p>
						<p>Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan mi. Nunc at velit. Maecenas velit. <a href="#">Read More</a></p>
                        
                        <div class="separator"></div>
                        
                        <h2>This Site is Almost Complete Finally...</h2>
                        <small>on <a href="">april 13</a> in <a href="">web design</a> tagged <a href="">blogging</a></small>                        
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales. </p>
						<p>Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan mi. Nunc at velit. Maecenas velit. <a href="#">Read More</a></p>
                        
                        
                    </div>
                 </div>
                 <div id="sidebar">
     				<img src="images/ribbon_browse.png" class="ribbon" alt="Featured Project"/>
                 	<div class="block_inside">
                    
                    	<h3>Subscribe</h3>
                        
                        <ul>
                        	<li><a href="">RSS Feed</a></li>
                        	<li><a href="">Email Updates</a></li>
						</ul>  
                        
                        <h3>Categories</h3>
                        
                        <ul>
                        	<li><a href="">News</a></li>
                        	<li><a href="">Marketing</a></li>
                        	<li><a href="">General</a></li>
                        	<li><a href="">Great Sites</a></li>                                                        
						</ul>  
                        
                        <h3>Archives</h3>
                        
                        <ul>
                        	<li><a href="">June 2008</a></li>
                        	<li><a href="">May 2008</a></li>
                        	<li><a href="">April 2008</a></li>
                        	<li><a href="">March 2008</a></li>                                                        
						</ul>                            
                 	
                    </div>
                 </div>
                 
                 <!-- a Clearing DIV to clear the DIV's because overflow:auto doesn't work here -->
                 <div style="clear:both"></div>
                   
            </div>

OK there are three important things to mention here:

First in the content area you'll see I've added three dummy blog posts and in between each is an empty <div class="separator"> that we'll style shortly into a thin line with some spacing.
Next we've added a ribbon image to the sidebar in much the same way as previously.
Finally I've used a clearing <div> at the bottom. Now previously in this tutorial I've been using overflow:auto; to deal with floated columns, but when we add the margin-top in the previous step to move the sidebar down it messes with the overflow and creates a scrollbar. So since there may be occasions when the sidebar will be longer than the content box we're going to use this method of clearing floating <div>'s instead.

Now we'll add some basic styling to fix it all up as follows:

#sidebar h3 {
	font-size:20px;
	line-height:23px;
}
#sidebar ul { margin:10px 0px 30px 0px; padding:0px; }
#sidebar ul li { list-style:none; margin:0px 0px 5px 0px; padding:0px; }
#sidebar ul li a { color:#7f7d78; }
#sidebar ul li a:hover { color:#0172dd; text-decoration:none; }


#content_area h2 { font-size:32px; line-height:31px; }

#content_area .separator {
	border-top:1px solid #e3e3e3;
	margin-top:40px;
	padding-top:40px;
}

Two things to note:

Formatted the <ul> lists in the sidebar to remove the bullet points and space them out nicely
Created a separator style using margin and padding along with 1px border

And that's it, our #block_content element is complete! You can see the working HTML here.

Step 23 - Making the Generic Page

Making our final page is a piece of cake now. We just duplicate our blog.html and call it page.html this time. Then remove the featured blog post and alter the HTML of the #block_content area as follows:

		<div id="block_content">
            
            	<div id="content_area" class="block">
                    <div class="block_inside">
                     
                        <h4>Services</h4>                        	
    					<h2>Branding</h2>
                        <br />
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales. </p>
						<p>Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan mi. Nunc at velit. Maecenas velit. <a href="#">Read More</a></p>
                        
                        
                    </div>
                 </div>
                 <div id="sidebar">
     				<img src="images/ribbon_navigation.png" class="ribbon" alt="Featured Project"/>
                 	<div class="block_inside">
                    
                    	<h3>Services</h3>
                        
                        <ul>
                        	<li><a href="">Branding</a></li>
                        	<li><a href="">Graphic Design</a></li>
                        	<li><a href="">Web Development</a></li>
                        	<li><a href="">Marketing</a></li>
						</ul>  
                        
                        <h3>Related Portfolio Items</h3>
                        
                        <ul>
                        	<li><a href="">Eden Branding</a></li>
                        	<li><a href="">FlashDen Logo Design</a></li>
                        	<li><a href="">PSDTUTS Website</a></li>                                                       
						</ul>  
                 	
                    </div>
                 </div>
                 
                 <!-- a Clearing DIV to clear the DIV's because overflow:auto doesn't work here -->
                 <div style="clear:both"></div>
                   
            </div>

Which is pretty much the same HTML as previously just with some different text and a new ribbon. The only real change is that now we have a title and above that a subtitle wrapped in an <h4> tag. So we can style that with a couple of lines of CSS as follows:

h4 {
	color:#007de2;
	margin:0px 0px 0px 0px;
}

And that is that! See the final generic page here.

Step 24 - It don't matter if it's Black or White!

Now we're going to do some very simple CSS to switch the site from light to dark. What's neat about this is the only HTML we need to alter is this one line:

<body id="dark">

That's it! With that one bit of extra HTML code we can make all the CSS adjustments necessary. This means if you wished you could very easily make a little Javascript button that switches the stylesheet. The way it's going to work is for any class which needs to change we just add an extra style beginning with body#dark. So first of all we say:

body#dark {
	background-color:#1e1d1b;
}
body#dark #main {
	background:#292826 url(images/background_dark_slice.jpg) repeat-x;
}
body#dark #main .container {
	background-image:url(images/background_dark.jpg);
}
body#dark #footer {
	background-image:url(images/background_dark_footer.jpg);
}
body#dark ul#menu li a.active, ul#menu li a:hover {
	color:#ffffff;
}

And that tells the browser that if <body id="dark"> then to override the styles for #main, #main .container, #footer, and the active and hover states of the menu, swapping in some new background images and changing the text colour to white! Easy as pie!

Step 25 - Borders and Fixing the Text

As you can see in the image below our footer is fixed thanks to the new background image and colour, there's just two more fixes: the "Creatif is a WordPress ..." text and the borders around the boxes which are quite light and should be dark now. So we do this:

body#dark .block, body#dark .mini_portfolio_item { 
	border-color:#1b1a19; 
}
body#dark #text_column h2#text_title { 
	background-image:url(images/creatif_dark.jpg);
}

Step 26 - Alternate Colour!

And that's it! We have an alternate colour scheme all controlled by a single id tag on the <body> element. That's the magic of transparent PNG files and CSS for ya!

Finito!

So that's it! The HTML is totally finished. Don't forget you can see the full pages by following these links:

Additionally you can download the full HTML/CSS/Image source files here and via PSDTUTS Plus you can get the full layered PSD files *and* a tutorial on designing them up.

Finally if you are interested in my upcoming ebook on WordPress theming - How to Be a Rockstar WordPress Designer - where I'll show you how to build these themes and lots of other neat stuff, then you can add your name to the mailing list below and we'll send you a $10 off discount code when it comes out:

Check out some more great tutorials and articles that you might like

How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery JavaScript & AJAX
Creating a “Filterable” Portfolio with jQuery JavaScript & AJAX
Don’t Ignore Your WordPress Footer Wordpress

Enjoy this Post?

Your vote will help us grow this site and provide even more awesomeness

Plus Members

Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.

Join Now

User Comments

( ADD YOURS )

Collis Ta'eed June 19th

Gosh that was an epicly long tutorial! Pity about IE6 One of these days I’ll put out a tutorial for something that works properly in that browser!
( Reply )
1. sohel May 4th
  
  its wonderfull to learn
  ( Reply )
2. shan June 8th
  
  great tut pal.
  ( Reply )
3. danny August 26th
  
  Simply – love it . Very Great Tutorial…
  ( Reply )
Ryan June 19th

This is great! I just saw this post. Haven’t had time to read, but will hunker down tonight. I’ve been looking forward to this one and can’t wait to dig in. Thanks!
( Reply )
Headshot June 19th

Great Tutorial!
( Reply )
CyberBite June 19th

Well, this gonna take me a while to read!! Bookmarked!!
Huge tutorial Thank you for your efforts!!
( Reply )
Collis Ta'eed June 19th

Thanks guys! Glad I finally sat down and wrote it all, though I must admit I’m exhausted! That took 10 hours

Anyhow I’m off for the day, hope there are no glaring errors in there
( Reply )
:: Mazzo :: June 19th

Nice!!! I was waiting for that for a long time!

Txs!

Valeu galera!!
E o Brasil hein?!
( Reply )
Liam June 19th

OMG!

I have been searching the net through endless weeks trying to find something like this.
Thankyou so much, appreciated!
( Reply )
godonholiday June 19th

looks great! a few of the images are missing? but can’t wait to get my teeth into it!
( Reply )
Matt Radel June 19th

Great tutorial! Using Dreamweaver though – ick. Also, I’ve recently ditched the IE6 png fix behavior scripts – I’ve found they kind of bog the page down. Instead, I feed IE 6 its own stylesheet with conditional comments (I’d hug whoever had the idea for those) and then use the Alpha Image Loader on the offending elements, or use gifs when possible.

Great stuff – keep it coming!
( Reply )
Marco June 19th

“So anyhow at this point I stopped paying attention to IE6 ”

Haha! Great one.

Awesome article Collis, keep up the suburb work!
( Reply )
Qbrushes June 19th

nice work Collis.

btw psdtuts.com/nettuts.com are messed up under IE6, i think it has to do with buysellads.com script.
( Reply )
VertigoSFX June 19th

Good tut, I haven’t read it but skimmed quite a bit. It’s definitely going to prove useful because i’m about to start up my portfolio website and will probably be using a few tuts here and there to improve upon it.

Great job, definitely love visiting this site
( Reply )
Demian June 19th

Unfortunately, does not work well on IE6 (PC). Great tut, but, is a detail that affects the final result.
We need to work on a way to fix the problem
( Reply )
Szynol June 19th

great tutorial… but how to make in wordpress some changes:

- first loaded page was portfolio (i add pages in wordpres)
- second page – services
- third page – blog

I want to default load portfolio page.

P.S. Sorry for my poor english;)
( Reply )
Ben Griffiths June 19th

This article looks great, gonna have a thorough read tonite
( Reply )
Lamin Barrow June 19th

I find this to be quite useful. Thanks A LOT for all of your time and effort.
( Reply )
Nate June 19th

Thanks Colllis, this is probably going to be the best PSD to HTML tutorial on the net for sometime to come. On top of that, it’s the best one I’ve seen in the many years of web development.

“Masterpiece”
( Reply )
Chris June 19th

First off – thanks for the hard work. Well done. I work on a mac too, and in a pinch I use browsershots (http://browsershots.org/), a free service to test the look of pages on a number of platforms and browsers. While it is very limited (it basically takes a screenshot of your page and creates a gallery of images, each from the respective browsers you specified) I still find it useful, especially when it comes to some of the more obscure browsers it allows you to test in.
( Reply )
robbie June 19th

This is the best web based tutorial I’ve ever read. Let’s see some more like this.
( Reply )
John June 19th

If you want to check your page out with ie6 go to http://browsershots.org/
( Reply )
Nate June 19th

Hey Collis, I know that you said you were taking a day off but I’ve found one error for when you get back.

Step 5: In the CSS you have “rightright:0px;” for the menu positioning.

Cheer’s
( Reply )
D. Carreira June 19th

This is a tutorial? OMG! This is awesome! Thank you Collis!

David Carreira
( Reply )
Jbcarey June 19th

I’ve read mountains of tutorials… but this one take the cake! EPIC!
( Reply )
Dan June 19th

Looks amazing! great tutorial. Although I have attached a screenshot of the bugs I see in IE6.

http://img170.imageshack.us/img170/3139/ie6vsfirefoxzv2.gif

Nice Tut though, can’t wait for the book.
( Reply )
pavs June 19th

Guys Don’t forget to digg this. If you are a power digg user make sure you tell your friends to do the same. I know I will. this a great tutorial.
( Reply )
Mac Tyler June 19th

Wow you have no idea how helpful this tutorial is. I know a bit about web design, mactyler.com zodiacresource.com iphonedevforums.com but I thik this tutorial will really help me apply some of these techniques on my own site. Cant believe this tutorial is free simply amazing!
( Reply )
Bjorgvin June 19th

Excellent tutorial. Will you be releasing this as a WordPress theme by any chance?
( Reply )
Gilbert June 19th

Once again great tutorial!
( Reply )
Andrei Constantin June 19th

Now that’s what i’m considering a well done tut!

I was expecting this one since i’ve seen the design process on PSDTUTS.

Good job Collis!
( Reply )
Diego June 19th

great work collis
( Reply )
Raj Dash June 19th

Ah, the master’s PSD2HTML design + coding secrets revealed!
( Reply )
Chris Cagle June 19th

Collis,

Great tutorial – you have a great design eye. I am truly impressed with this design – but I do have one beef here which you already touched on in your first comment.

IE6 should still be supported. What good is a site that isn’t cross-browser compliant? I hate IE6 as much as the next designer out there, but it comes with the territory – you HAVE to take care of those IE6 discrepancies before it can be considered a working website.

Anyway, great tut – and a great family of *TUT sites you are building here – I just felt strongly enough about this to actually speak up finally.
( Reply )
morley June 19th

GREAT!
( Reply )
Andrew June 19th

Wow Exhaustingly long, but I look forward to digging into this more later. Thanks Collis!
( Reply )
José Mario June 19th

Wow! I’ve been a loyal reader of the tuts sites (specially this one) for a couple months, and let me tell you boy this is great! (I kinda feel guilty for having blocked the ads on your sites, I’m allowing them back now ).

keep up the good work collis i hope you only get the best outta these sites…

I’m guessing in the future you’ll be putting this kind of tuts under a paid suscription, which i understand, but probably at $9 a month i wont pay it

annual discount suscription anyone?
( Reply )
iMike June 19th

very nice one, i was waiting for this one a long time.
( Reply )
Andrew Pryde June 19th

Finally net tuts lives up to PSD TUTS. Thanks allot great tut!

Andrew
( Reply )
Easton Ellsworth June 19th

This is gonna make someone out there poop their pants. Great stuff and amazingly thorough. Thank you Collis!
( Reply )
BogDinamita June 19th

man are you goood!!!!!!!!!!!!!!!!!!!!!!!!!
( Reply )
jtbandes June 19th

I’m curious… why did you use text-indent:-9999px instead of display:hidden or display:none? Doesn’t that mean that you can theoretically find the text with a 9999px+ wide window?
( Reply )
Furley June 19th

Excellent tutorial. Ever consider using Eric Meyer’s CSS Reset to reset browser defaults and most likely reduce variations in design from browser to browser?
( Reply )
joyoge June 19th

Psd’den Html’ye adım adım web tasarımı Nettuts.com Tutorial sitesi
http://www.joyoge.com/oku/508/Psd-den-Html-ye-adim-adim-web-tasarimi-Nettuts.com-Tutorial-sitesi.html

thanks a lot, great tutorial…
( Reply )
Ryan June 19th

Awesome tutorial! Ultimately, I say “DITCH THE IE6 FIXES AND MAKE USERS UPGRADE.” Seriously, why do people still live in 10 year old technology when amazing innovations like Safari and Firefox 3 are widely and easily available?
( Reply )
rad_thundercat June 19th

Excellent! The code snips along with the image screenshots are VERY helpful.
( Reply )
Shaun Bent June 19th

Another great tutorial!

Thanks

Shaun
( Reply )
Cory June 19th

Fantastic. I’ve always coded the CSS from scratch and inserted images as needed. I’ve never mocked up in Photoshop and then coded a site. I know this is how most pros do it, and I think the end product is higher quality as a result.
( Reply )
Invis June 19th

May god bless you!
( Reply )
HipHopMakers June 19th

I am amazed by the quality of work you continue to put out. please keep up the good work.
( Reply )
Nico June 19th

Sweeeeeeet.
( Reply )
w00p June 19th

I’m just blown away. This tutorial seriously raises the bar. I hope soon to have the time to go through it all!
( Reply )
Daniel June 19th

great job there ! thanks a lot for sharing these useful ressources.
( Reply )
Kip June 19th

You have never been valid on the first try… That’s because you skip the essential stuff. Alt tags etc……

But otherwise great tutorial.
( Reply )
Snorri3D June 19th

what a GREAT!! TUT! and it look good to

keep a great web tuts like this one coming and thanks for your hard work

( Reply )
Shane June 19th

Firstly, thank you so much Collis – your hard work is truly appreciated by all your readers!

1) Yeah – conditional comments are often the easiest way to fix things, and you’re not really hacking things with invalid CSS either, so it’ll still validate.
2) I agree about some of the PNG stuff, what’s a designer to do?! I recently came across a jQuery plugin for fixing png transparency in IE6. The sooner this browser dies, the better. Some designers who rely on PNG transparency for their designs even output a message using conditional comments to tell people to get a decent browser. (elliotjaystocks.com if I remember rightly does just this.)

Looking forward to the other posts!
( Reply )
Ewan June 19th

Love this tutorial. Forget about IE. Everyone should stop using IE and start using all of the other major browsers (ex. Firefox, Opera, etc.)
( Reply )
kantslowdown June 19th

Who needs design school when you have nettuts, psdtuts, and vectortuts? =) Great post…thank you so much for this!
( Reply )
Mindy June 19th

I’m surprised this isn’t a plus tutorial. Great stuff!
( Reply )
Evan Rogers June 19th

While Iam not a web developer I do know some css and this is exactly the resource I have been looking for. Thanks Collis! I love watching the Eden family grow into new horizons; with all the “tuts” sites and all stock resource sites continuing to develop. I would love to see a PHOTOtuts site. Since so much PSDtuts depends on strong photos, and much of the visual world. PHOTOtuts would be a neat resource for amateur photogs to learn about shooting low level lighting, long exposures, nature, macro, HDR, telephoto shooting, action shots, etc, etc. ad nauseam. What a neat resource that would be; and of course it would be quality as it would be a part of the eden family. I can even foresee how to become a “Rockstar Photographer” in the near future!
( Reply )
drumu June 19th

Very interesting, most usefull and cool tutorial!! thanks for help us

Your work is awesome
( Reply )
Christian Mejia June 19th

Holy cow that was long! But boy was it worth it. Thanks for this.
( Reply )
macias June 19th

ye ye ye from PSD to xHTML / CSS … want more and more ! i love this tuts ..
( Reply )
Bruno Ribeiro June 19th

… nothing to say!
Beatiful!
( Reply )
Randy June 19th

Great tutorial!

Anyone know a compliant way to do the logo like he did, but also make it a link? The only way I can get it to be a link is to wrap the href around the h1, which doesn’t validate due to the h1 being a block level element. Thoughts?
( Reply )
Danny June 19th

This is a great tutorial! Very extensive
( Reply )
flisterz June 19th

Great post with cool examples. However I still think we need to, at least, concern about IE6, since the end result is really messed up. PNG is one thing, but when the thumbnail images of your project didn’t appear, there’s something should be done, right?
Anyhow, love everything from you guys!
( Reply )
Fredro June 19th

This is GREAT! No other site has produced such a beautiful, clean css layout with such detailed instructions. I love the double block trick to add the borders, something I will try on my own personal projects soon. One typo in the instructions for the ribbon class, there are two right properties:

# .ribbon {
# position:absolute;
# top:-3px;
# rightright:-3px;
# }
( Reply )
Maksimilijan June 19th

AMAZING TUTORIAL!
THANK YOU A LOT MAN!
( Reply )
Lamin Barrow June 19th

@ Rayan
I strongly agree with you but thing is most of those people that still sue IE 6 aren’t that tech-savvy like the rest of us. You see why we can’t really blame them.
( Reply )
Duluoz June 19th

Not a bad little tut for beginners out there!

@ Lamin Barrow – should we stop supporting people with walkers and wheelchairs cause they’re not walk-savvy enough? Accessibility my friend is a lesson worth learning. Another thing to remember – If you work for a vendor of a product or service, for example, they’re going to want their site to perform/look in IE6 just as well as any and every browser out there. Food for thought.

@ PNG lovers – TwinHelix.com has a very nice script to give IE6 PNG support; not only for foreground but also works for CSS backgrounds.
Note: PNG is not equally supported between browsers. Even if you strip the PNGs of their headers, etc. such as with PNGOut or PNGGauntlet (shell for PNGOut) or other similar utilities you’ll still run into consistency issues.
( Reply )
Duluoz June 19th

Forgot to add link to TwinHelix.com’s PNG IE script – http://www.twinhelix.com/css/iepngfix/
( Reply )
Cesar June 19th

Oh, this tutorial is one of the best I have seen. PSD to html with css is great!
Please put another tutorial like this one with something complicated in css….for begginers like me.
Greetings.
( Reply )
Juan Carlos June 19th

Excelent tutorial!

In Step 5 the header css must be:

#header {
padding-top:20px;
padding-bottom:20px;
}
( Reply )
Sean C. June 19th

Thank you! Thank you from those of us like me who knew and used plain old html back in the day but never got out of using tags. I’ve recently began using CSS and LOVE IT! Thank you again Collis for your 10hour slave labor!
( Reply )
Sean C. June 19th

supposed to say “never got out of using [table] tags”
( Reply )
Joefrey Mahusay June 19th

Thanks a lot Collis for this very interesting tutorial. Great job!
( Reply )
Casey June 19th

Anyone know a good place to learn how to make this tutorial work in wordpress?
( Reply )
Jeff Finley June 19th

Fabulous tutorial Collis. Very inspiring, both from a design standpoint and coding standpoint. I’ve sent the link to my entire staff to make sure they read this article. Good work.
( Reply )
Donkey June 19th

We should really stop support IE6 by now! It’s crappy browser and makes too much work for developers.

Good tutorial, thanks!
( Reply )
Dani June 20th

epic!
( Reply )
SMS Portal June 20th

Superior to anyone else!
Like always, I am just taking it all in.

Thanks, what a beauty!
( Reply )
Stefan June 20th

If it’s just IE6 you’re trying to get things to work in, you can always use the “* html” selector hack.
I find it easier than adding a new stylesheet in conditional comments. For example

.ribbon {
position:absolute;
top:-3px;
rightright:-3px;
}

* html .ribbon {
display:none;
}

The second part of the CSS only takes effect for the .ribbon class in IE6. In the above example I just hid it from people with IE6, but any other styles could have been used there just for that rebel, IE6.
And IT’S VALID CSS.

And there was someone asking why the -9999 text indent. Well–to make it short–if he was to use display:none, that might have been unhealthy for both SEO and usability (ex: like people with screen readers).

And another note (as this comment wasn’t already long enough): one very cool thing doing a variation of the template by just using a specific id for the body, as Collis did with id=”dark”, is the ease it lets you switch between styles. For example, just open any of the final example pages and enter the next line in your browser’s address bar:

javascript: body=document.getElementsByTagName(’body’)[0]; body.id ==’dark’ ? body.id= ” : body.id=’dark’; void(0);

It would be that easy to add a “change color scheme” button to the page and allow users to toggle between styles using JavaScript.
( Reply )
Saswata Banerjee June 20th

Hi Collis, the IE6 support is not working
firstly u need to specify the height n width of the image
even then the alt text appears permanently on the image
givin a bad look…
need to work more on dis
( Reply )
Stefan June 20th

I see it replaced my single apostrophes with ’’’’’’es

If trying the above javascript injection, you should replace them back to regular single or double apostrophes.
( Reply )
Rijalul Fikri June 20th

Truly amazing, this is what I’m looking for. Thx’s for this great tutorial. Still considering how to convert it to a working wordpress theme
( Reply )
Mihai June 20th

Great tutorial, very useful for beginners like me, I was looking for a pdf download for each of the tutorials here, but Ill use dopdf. Thanks for sharing
( Reply )
Kenneth Moore June 20th

Awesome… been awaiting a while for this one to come along…

What can i say… Fantastic..Keep up the good work
( Reply )
Tuğrul June 20th

Super and gorgeous tutorial
( Reply )
mark June 20th

thank you
( Reply )
Marko June 20th

Fantastic tutorial. And very thorough, leaves no areas of confusion you sometimes get in other tutorials. Well Done
( Reply )
Ryan Person June 20th

Nicely done!
( Reply )
Ali June 20th

Probably the best tutorial on the web and probably the most “wanted” tutorial on the web.

Thank you so much!
( Reply )
James June 20th

Great tutorial Collis! And some very nice designs there!
I’ll have to give it a proper read-through when I get some time…
( Reply )
Shino June 20th

If the CSS property outline was well suported by all browsers, we wouldn’t have to create two divs to add a border outside and one inside. Oh God. xD
Anyway, great tut!
( Reply )
Jacob Gube June 20th

Crazy tutorial Collis, very thorough. Definitely something to bookmark as a reference for those starting out, to see an effective workflow from mockup to markup.
( Reply )
John Deszell June 20th

This is a great tut! Great work Collis. I’m a huge fan off all your guys sites, quality always!

I’ve just started to dabble with designing custom Wordpress driven sites, though I’ve pretty much stuck to the basics so far, as I don’t completely understand it all. Can’t wait for more tuts like this, especially Wordpress ones.

Keep it up!
( Reply )
Patrick Sweeney June 20th

This is quite possibly one of the best tutorials I have ever seen on the entire Web. Excellent job! I will be pointing a lot of beginners to this tutorial.
( Reply )
MastrKreuz June 20th

Under step 5 making the transparent logo and the initial formating of the menu, I think there is a problem with the css…

ul#menu {
margin:0px; padding:0px;
position:absolute;
rightright:0px;
}

On line 18 you have rightright:0px; just one right will do no ?
( Reply )
Brad June 20th

Seriously, finally someone took the time to do this right. I’m going to give my firstborn to Collis.
( Reply )
Braden Keith June 20th

Well I’m going to go through this…

….3 days later….

I’m done! Haha. AWESOME tutorial. I’ve been wondering this forever.
( Reply )
Jorge June 20th

AWESOME!!!

Great work Collis, clean, simple and effective.

About Step 5, I think you only have to copy the blank.gif file that comes in the iepngfix.zip to your folder, at this time I don’t know what is the folder (styles may be) you have to put it on, I’ll post again when find out.
( Reply )
Jorge June 20th

It was Step 6
( Reply )
Erik Reagan June 21st

Excellent walk-through!

I agree with many here that as bad as IE6 is – it still needs support. So much that I wouldn’t consider a site complete until it worked exactly the way that was intended in IE6 and up. Current W3Schools statistics show that nearly 30% of web surfers are still in IE6 land. I think that a third of the people using the web is worth the extra time.

On the flip side of that I also think that sites like this, aimed towards designers and developers, should NOT cater to IE. I think sites like this should crack down on the ‘target audience’ and put out a message saying “Download FireFox NOW!!!” (or a better browser in general). People in this industry should know better!

( Reply )
TomW June 21st

First, great tutorial. I appreciate the attention to detail.
Second, I live in the real world. This site doesn’t work in IE6. If I build a site that won’t display properly to 30% of my audience, that’s not acceptable. I can’t force people to download a “better” browser when my audience consists of folks who can get on the Web but aren’t savvy enough to download and set up a new browser. They just want it to work and it’s my job to do that.
( Reply )
Leland Clemmons June 21st

You are a very inspired person, Collis. Though this is not a complicated tutorial, the end result is extremely well-designed, even if it is a tad familiar.

Great tutorial.
( Reply )
Taylor Satula June 21st

Cool
( Reply )
Alex June 21st

Nice tutorial !

Definitely a good example of separating design & content.
Makes things like alternate colour schemes so much easier

Just curious as to why the ribbon image is in the markup ? This adds no meaning or importance to the document..
I would have thought the markup would contain something like Featured Project and then the image would come via CSS..
( Reply )
Alex June 21st

Heading 2 (h2) for Featured Project
( Reply )
Espenhh June 22nd

Great tutorial! I will definatly use this one in my process of learning CSS-designs
( Reply )
demadrugada June 22nd

Amazing…long but great
( Reply )
dario June 22nd

my best compliment!
http://www.dariobologna.com
( Reply )
WoNNi' June 22nd

Under Step 5 making was wrong.

line 18
rightright: 0px; -> right:0px;
( Reply )
Joel Falconer June 22nd

Thanks, Collis. Sometimes I make-believe that I’m more than just a writer by mocking up web designs in Photoshop, at which point I quit the program and move on to other things because I was never sure of the best way of going from PSD to HTML – do I use slices, do I use (fill in the blank), etc. Now I can unleash my designs on the world and watch everyone recoil in horror.
( Reply )
mcrury June 23rd

omg! great job Sir! totally awesome!!!
10 stars!
( Reply )
gen June 23rd

amazing tutorial! we need more like this!
( Reply )
weblizzer June 23rd

wow, such an amazing tutorial, i really adore you for this.. 100 stars :D:D:D
( Reply )
Nick June 23rd

Oh man this is totally kickass.
( Reply )
pud June 23rd

Excellent article and a great layout to boot.

My only bone to pick is the usage of those ribbons as inline images. If anything, those should have been H2 headings with an image replacement technique. Which could be reused globally as all instances of the ribbons are in the exact same spot relative to their container.

Good stuff otherwise!

(everyone’s a critic huh?)
( Reply )
Ruby On Rails Freelance June 24th

This is one of the most complete tutorials I have ever run across. Bonus points for adding “Step 18 – Validating!”.

I would highly recommend the new parallels for running anything Windows on a Mac.

I just recently “Stumbled Upon” the Eden family of sites I they all contain top content, congratulations to all of you I wish you all great success.

Cheers,
Mike D.
( Reply )
Quevin June 25th

Great tutorial, and I hope more will follow! It really helps to show Designers and Developers how the “PSD to XHTML” process really works.
( Reply )
Jeff R. June 25th

Is there a tutorial on creating the ribbons used anywhere?
( Reply )
Alex Fraiser June 25th

I’m glad I’m not the only one who doesn’t care about IE6.

Awesome tutorial, it helped me understand absolute positioning a lot better.
( Reply )
digitaljail June 25th

wow, this tutorial is what I whas lookin’4!!!
is cristallclear and easy to follow! youGr8!
( Reply )
roger June 25th

Hi Collis

Would like to join psdtuts to get the layered psd files but you have to have a cc attached to your paypal account which i dont…can you email me if there is a solution to this?

Thanks

Rog
( Reply )
shanmugam June 25th

Hello this is shanmugam from pondicherry (India), i see this tuts very useful. And also download the zip and see it, In the images folder see the one picture background_light.png i also try it my own. I create and save into png file formate that size very large (my background_light.png file size is 51.2kb). What is the reason?

And my setting is (using photoshop cs )
png-8
interlaced (ok)
selective
color – 256
diffusion
dither – 75%
matt3 -
web snap -0
image size (quality-bicubic)

What is the reason the file size high ? please send the tips how to reduce the size of figure. i waiting for your replay …….

this is my mail id shanit6@gmail.com

thank you for good work of your tuts…..
( Reply )
Rene June 25th

@ COLIS : Thanks, you are a great tutorial maker

But I f can suggest one thing, maybe for your next tutorial, it would be taking this exact tutorial, and going further with your file, so that you can create somekind of a “”"template file”"” that could be use for a complete website (Empty content, stable header-footer-style). And i do precise that i wrote the word website and not blog (because we all got the Worpress structure already). So maybe something similar to Dreamweaver template files… but with the file maded here.
thanks.
( Reply )
Grafiko June 26th

Great, I very good work guys. I always learned something in all of your tutorials..
( Reply )
soa_dias June 27th

This is nice indeed. I look forward to more tutorials

@jtbandes: Setting a negative text-indent to a text is a better image replacement technique than FIR( using display:none) because it doesn’t mess up screen readers.
( Reply )
Mel June 30th

I noticed that there is some code added to the CSS source that is not in this tutorial. Could this be the reason why when I reach step 12 there is a separation of the main block and footer? Also, when I get to step 16, the footer content is not in 3 columns.
( Reply )
GHud July 1st

That’s really great! Thank you and congratulations!
( Reply )
PSD to XHTML July 2nd

Sorry I just have to jump on the bandwagon and say that this is mastefully done. Amazing site!
( Reply )
Simon July 6th

Really nice, well thought out tutorial. The only minor critiscism I have is using empty divs to create the dividing lines in between the blog posts. Why don’t you just add a border to the titles or wrap the entire post in a div? it just seems to go against the whole semantic markup aim you have and seems like the equivalent of having a table cell with a non-breaking space in it or, even worse, a horizontal rule. Just interested as to why you chose to do it the way you did.
( Reply )
Stan July 8th

It’s a realy great! Big thanks for big job
( Reply )
Ard July 10th

Awesome tutorial!!
I certainly will use this in the future for making some new websites.
Since I’m a beginner I learned a lot of css tricks I never heard of.
Keep up the good work!!
( Reply )
Troy July 11th

Hey,
Great Tutorial, I Kept right up with it!

I’m Just wondering how to convert this to Wordpress?
( Reply )
Dean July 13th

Nice tut, but a little confusing in area’s .

I am confused as to where all these bits of code, fit into the bigger picture?

as everything is broken up throughout the tut.

I was extremly excited and encouraged by this tut initially, however now i am

finding many questions, none of which this tut anwswers, and to be frank it is

distressing me .
( Reply )
Dean July 13th

Why do we have to use divclass=container ?

can’t the background and all other elements be placed using relative and absolute pos ?

If not what is the differance ?. What is the purpose of these containers?

Can we have the .css in a single file ? .

I get so distressed as i am in a position where the only single way out, is for me to master this

i have no alternatives, i study night and day, i watch tutorial video, after video, i read book after book

for years on end………… and it all seems so straight foward, that is untill i step into dreamweaver

and BANG!……. BLANK! :(……… suddenly goes out the window….

It is causing me serious distress , i cannot handle this much longer.

*SIGH*
( Reply )
Nick July 16th

I can suggest a great tool for testing in IE6……IETester (http://www.my-debugbar.com/wiki/IETester/HomePage). Run it in your Parallels alongside IE7.

It also allows you to test IE4, IE5 and IE8beta. It’s a good solution for a necessary EVIL!
( Reply )
mal July 16th

Just read about OpenDrive on downloadsquad.com and directly recognized the design. It is a copy of this tut but uglier especially the logo.
http://www.opendrive.com/
( Reply )
kirby145 July 16th

I am kind of like Dean, I design many times but can’t really grasp a working layout, that is changing now.

About his comment why do we have container… This is just the way that is easiest to some people, especially for centering the content. But you can find your own way.

This tutorial was very helpful to me, not so much the code, which I skipped over because I know, but the design PROCESS which is my problem. I usually start with coding then mix with graphics, but the way I make the layout is screwed up.
( Reply )
fesh July 16th

This is what is really need! thanks a lots NETTUTS
( Reply )
David B July 18th

This is an epic tut! I’m doing it just to pay my respects. This must have taken you hours!!!
( Reply )
Matt B July 20th

Hi, I am still a beginner at this wordpress magic, but how much more needs to be followed on from this tutorial to acually get it working in wordpress? I can understand it all but feel its missing the gap between html > wordpress.. Can anyone point me in the right direction of a tutorial or just how complex it is to finish it off?

Thanks in advance.
( Reply )
Alican July 20th

Fantastic tutorial I ever seen before. Thanks for your effort.
( Reply )
Jimmy July 22nd

Awesome tutorial, this will really help me get started. One question though, what editor are you using to create the html and css entries?
( Reply )
Kud July 23rd

Wow ! Amazing tut !
Thanks a lot for all the effort you’ve put into this, it’s just amazing. I used to slice my Psd’s and code with DreamWeaver. The result was always nice, but it was sooooo long to code and it wasn’t flexible at all.
Now with your tips in CSS, I finally found a way to make my sites flexibles and easy to modify

Really appreciate your work.

Greets from France.
( Reply )
celsius July 24th

handy tutorial for those getting started. cheers!
( Reply )
Jochy July 25th

Hi…
I’m new to blogs, I wonder if you could do a tutorial about do a blog template,
or modify one of those templates that you can download from the internet or build one from zero.

Thanks
( Reply )
madhava duggirala July 29th

great job & good TUTS!

As a designer i want to suggest to all designers to Do MEDITATION (www.pss.org) just by closing eyes & observing normal breathing, get so much of creativity as we always dealing with creative work and also for new enhancements. Try with this once you will enjoy a lot. To know more go to website http://www.pss.org
( Reply )
Bravo July 29th

I like this tutorial because of the detail and how it can show Bravo Web’s potential customers the process it takes to complete a professional website.

-Dylan
( Reply )
Clay McIlrath July 30th

This is an awesome tutorial, I’ve been wanting a friend of mine to learn this process for some time but he’s been having a hard time finding a blog that puts it together start to finish for him! Now I don’t have to teach him! You rock!
( Reply )
Yeaahh!! July 31st

O

M

G

!!!
( Reply )
Ben Armstrong August 2nd

Hi there, I love this tutorial – it’s epically long but I don’t see anything to indicate how to then make this a wordpress theme?..

–
Ben
( Reply )
Q August 5th

BOW.

WOW.

*faint*
( Reply )
Paul August 6th

Great tut, I tried going through this last week and realized I needed to study some of the basic concepts more (only started 3 weeks ago at html and css) before I could understand this. Came back today and all seems a lot clearer.

To Dean, who is struggling, I know what you mean, heres a great tutorial to read over and over till it sinks in (Ive read loads the last 3 weeks), then this will seem a lot easier – CSS from the ground up –

http://www.wpdfd.com/issues/70/css_from_the_ground_up/

These two together should give you a really good helping hand.

Thanks Collis.
( Reply )
Paul August 6th

Another great little snippet from the above link -

http://www.wpdfd.com/editorial/basics/mypage9.html

Helps understand positioning very well, hope you dont mind Collis, I think that this tutorial and these links go very well together.

If its not allowed, please feel free to delete.
( Reply )
Recorded August 7th

wow .. this is awesome ..
I will be happy if in one day u will start to show us how to transform a picture ( a man) in to a cartoon !

Thank you again was awesome !
( Reply )
adrian c clark August 7th

Very Nice tutorial.

I found in internet very good PSD to HTML Slicing service, you send a design in any of common formats (PSD, PNG, JPG, GIF etc)  and you receive a high-quality XHTML-CSS page.

http://www.mydesign2html.co.uk
( Reply )
crazyart12 August 7th

can you feature an ImageReady Website tutorial?? thank you for this tutorial though…
( Reply )
Adam August 7th

I have a question! Please help me.

I’m new to dreamweaver. I have been creating graphics and vector art using photoshop and illustrator since 2000. I’ve always been terrified of dreamweaver but am now teaching myself.

Code scares the crap out of me. So when I’m working in the CS3 Mac Dreamweaver environment, I always work in design mode. Rarely do I even open the code window.

When I create my sites, I make them in photoshop, slice and save for web. I notice that many of the things you’ve done here with code are doable in design.

As an aspiring professional developer, is there any particular reason why you don’t work in just design mode? Can the same things be accomplished in design mode?
( Reply )
1. Daniel May 29th
  
  I think the main reason to code the html/css by hand is it gives you much more control, and a greater knowlege of what’s really going on.
  ( Reply )
Manchester Web Design August 12th

This is amazing ! Thank you very much!
( Reply )
psd to html August 18th

I think it’s one of the best tutorials of it’s kind around the web. Complete with code, examples and everything. I also can’t avoid saying that the design itself is lovely
( Reply )
Dorm Room Business Ideas August 18th

Absolutely awesome tutorial! I’ll probably subscribe to PSDTUTs just to download the code and psd files for this layout! Thanks for posting it!
( Reply )
Q August 19th

anyone know how to seperate the text of the “menu” a bit more apart?
( Reply )
Mysticone August 19th

Good Tut! This is my first time to this site and you better believe it wont be my last!!!!! Awesome Work!!
( Reply )
Satoshi August 20th

Thank you for a wonderful explanation.
Please let me refer.

Moreover, it is thought that it is an error in writing.
There were sentences.

When it is possible to confirm it, it is glad.

————-
Mistake Source code

Step 5 – Making a Transparent Logo

and this extra CSS:

–NG
ul#menu {
margin:0px; padding:0px;
position:absolute;
rightright:0px;
}

Erase : right

–OK
ul#menu {
margin:0px; padding:0px;
position:absolute;
right:0px;
}

Thank you.
( Reply )
Matt August 21st

This tutorial, and this site in general demonstrates what is amazing about the internet. Thanks guys!
( Reply )
Vitor Mello Vieira August 25th

whats the name of the FONT used in the logo “Creatif”?
( Reply )
jojo August 25th

why did you have to edit the padding on the element image_block from “5px” all the way around to “5px 5px 1px 5px” in order for it to work?

I also had an extra gap at the bottom when I used 5px all the way around.
( Reply )
Michael August 30th

Hi,

thanks for this great tutorial which i am currently following. I notice that when you are saving the images out of photoshop , in particualr the background image that its saved at the dimensions of 1000×426 … now i have attempted to do this and it is streteching the image and making it quite compact, also when saving for web device and change the size properties. obviously im doing something wrong … could you please tell me your method of saving the background image at those dimensions ? im auite a newbie

thanks

Michael
( Reply )
Krystian September 3rd

thanks a lot for sharing your hard work.

God bless…
Krystian
( Reply )
Zander September 4th

Same question as Vitor, whats the name of the font used in the logo “Creatif” at the top? I’ve scoured various font sites but have been unable to find the right one. Thanks!
( Reply )
Windows Themes September 5th

Just out of curiosity. How long does it takes to write an tutorial like this ? It`s a great one and very informative. Thank you@!
( Reply )
I want that book! September 7th

Collis, any news on your Wordpress book? I’ve been on the mailing list for ages and have not heard a peep about it. I’m ready to buy it on day-one. Any ETA?

Thanks for the tut.
( Reply )
michael September 7th

the font is for the logo is : NewsGoth Cn BT
( Reply )
Gabri September 16th

Great Tutorial

for the clearing Div u can use just a line break instead with the class of clear maybe it`s not that important but i like t make my code as clean as possible .
( Reply )
Ivor September 17th

CSS isn’t valid =S
( Reply )
Marko October 3rd

Very useful article. Thank you!
( Reply )
Alberto Villalobos October 8th

This is the best tutorial ever, there are some glitches with ie6 but it can be resolve, about the images doesnt showing in the main page, if you give to that div a relative position, they’ll be showed in ie6
( Reply )
praveen October 21st

This is a very good tutorial. Great effort! Keep it up….!!
( Reply )
bruno October 26th

The { overflow:auto; } trick for divs with floating divs inside won’t work on IE6 (at least). I can’t even understand how you included that trick without fully testing it.

Just check the demo page (http://nettuts.s3.amazonaws.com/017_Creatif/Site/index.html) in IE6 and you’ll see that trick won’t work at all.
( Reply )
E-Money Knowledge November 1st

Very informative tutorial. Thanks a lot.
( Reply )
gus cerutti November 6th

I feel really comfortable working with the my psd to html team, they are not just very reliable, they produce hand code CSS and XHTML. I sent a PSD and they finish that in 24 hours when I expected that in 48 hours.

http://www.mypsdtohtml.com
( Reply )
1. SmokingTequila July 9th
  
  http://www.seo-semantic-xhtml.com/
  
  thats another one to add to your psd to html vendor list.
  
  I’ve using them for last 6 – 8 months, SEO-Semantic-XHTML.com does a pretty darn good job.
  ( Reply )
Hotmodi November 12th

The greatest tuturial ever;)

What is the name of the font for the logo??

Hotmodi
( Reply )
Tom November 18th

Thanks for the wonderful tutorial. It really makes me think … isn’t it worth it more to use psd to html services like Psdslicing to do the html work. I believe it really saves a lot of time, energy and stress(I hate IE), and you can really concentrate on designing. We worked with Psdslicing on a couple of projects, and they really seem to talk the talk and also walk the walk. They never fail to amaze us.

Just my 2 cents …
( Reply )
Megastar Media November 18th

Megastarmedia.com says excellent information…will bookmark for junior designers.

sandy
megastarmedia.com
( Reply )
p Jackson November 30th

Thanks for this great article,

There is also an outstanding service bought you from xhtmweaver. (http://www.xhtmlweaver.com), which you can hire professionals to slice PSD design for you, trouble free.

Again, thanks for this great tutorial!
( Reply )
dariob December 5th

Grazie Collins
( Reply )
babavali December 6th

thank you
( Reply )
Eric Shafer December 11th

Tracked back to from here: http://www.presidiacreative.com/the-most-helpful-psd-to-xhtml-and-css-tutorials/
( Reply )
maniat1k December 19th

Great tutorial, I’m on it! =)
( Reply )
Reheen December 20th

Great article
( Reply )
Saro December 21st

I’m surely going to do this one trough. Thanks Collins <3
( Reply )
wmurillo71 December 29th

gracias un excelente tutorial
( Reply )
Matt January 3rd

Best way to compress a png file is Macromedia Fireworks oops I mean Adobe Fireworks . I actually got this information from the Adobe Max conference in Chicago last year. It was one of the reasons why Adobe continues to hold onto Fireworks. Also the ability to edit multiple pages without opening a new page each time. Fireworks was built for web design. Photoshop was built for god .

I hope this helps. I did not check all the comments, but from what I am aware of the compression in fireworks is remarkable.

Thank you for such a great tutorial. This is one of the best ones I have found to date.
( Reply )
tasarhane January 4th

This article looks great…
( Reply )
斌 January 5th

真是太仔细了
( Reply )
siku January 9th

thanks alot for the great tutorial
( Reply )
soufiane January 14th

Thank you man !! really big THANK YOU
( Reply )
Sanders January 14th

Excellent tutorial. Thanks !
( Reply )
SweetOpium January 20th

Best tutorial PSD to HTML thx!!
( Reply )
Jooma January 29th

Very nice tutorial. But how can you I modify the CSS file so that the web page adjust to the size of browser when the browser is Restore Down * ?

I have seen some web pages that their size are adjust automatically when the browser is restored down. Any suggestion to do with this tutorial to accomplish that.

Thank you.

* Note : There 3 main button on the top right of the browser Minimize, Restore Down (Restore), Close.
( Reply )
klaus February 2nd

So so so so so , Sweet …

Thanks Collis your tutorials are so easy to understand, you make css look good.

Thanks alot looking forward for more
( Reply )
Petar February 10th

Great TUT, i like when every line of code is explained hope for more
( Reply )
WILL February 10th

i’ve been looking for this tutorial everywhere.
thank GOD i found this site tonight.
thanks NETTUTS..

Great job, really appreciated.
( Reply )
Arvind February 12th

Thanks.NETTUTS..
I am not able to apply in blogspot..Can you help me?
( Reply )
The YPI February 13th

Awesome stuff
( Reply )
Rik February 14th

Incredible!!! the best tutorial ever! I’m gonna make it right now!

THANKS A LOT MAN!!

REALLY GREAT!
( Reply )
Tim February 21st

This has to be one of the most comprehensive and clear articles on this site. Super job.
( Reply )
kecap February 22nd

Dude you Rocks….
I readed some other tutorials but this is great
( Reply )
Lawrence February 23rd

Woah! Very long! Had a quick read through! Downloaded the source code looks great! You deserve a medal
( Reply )
lawrence77 February 24th

Oh 10 hours thanks collis!

it is most useful for me though!

thank you very much!

you rockzZZ!
( Reply )
lawrence77 February 24th

i always love your effects and layouts!
( Reply )
Jijan February 25th

wow.. amazing tutorial
( Reply )
Web Designer February 26th

Wow, great tutorial. It is really helpful for HTML/CSS begginers like me
( Reply )
Tom Howe March 3rd

Excellent! This has brought me 6 years up to date with web design! Thanks!
( Reply )
Tom Howe March 6th

tested your demo site in IE7 on an 800×600 display and had problems with the display – the grey bar which should run all the way from left to right terminates before the right hand side of the screen. This seems to be something about Ie7 not wanting to repeat-x the background beyond the visible area when the page loads, so when you scroll to the right to fit the site on, the newly revealed bit has no background.

Awesome design though.
( Reply )
1. Tom Howe March 6th
  
  Sorry for the triple post, but I think I’ve found a solution to the problem I mentioned: The problem occurs on all browsers i’ve tested – just load the page on a window 500px wide and scroll right to see the issue.
  
  For me, adding:
  min-width:1000px;
  to #main seemed to fix it. Try tinkering with this value.
  ( Reply )
  1. bruno March 12th
    
    I have the same problem in FF3.
    That trick works.
    
    Great tutorial.
jason March 21st

Great tutorial.but maybe wo should translate this for my friends
( Reply )
Mehdi March 26th

Great job Collis Ta’eed!! I clarify myself in doubted points but how about IE-6 It’s not working over there I mean it’s out of grace there.
( Reply )
Rakhas March 30th

Thank you!!! amazing job …
( Reply )
lh April 4th

Thanks very much for this great tutorial!
( Reply )
fathonix April 4th

This tutorial is good, but in the practice , creative themes is so bad in my ie6. png transparency is not work.
( Reply )
dev April 5th

@Collis, i have a question about design the PSD in photoshop, how do i know how many width and height need to set for image like background image, logo so it look perfect when convert to html coz everyboy has diffrent monitor like some got 1280X720, some got 1440X900 and some still use 800X600.
if i make look perfect in 1440X900, does it look weird in 800X600?
can teach or give a tips?

Thank.
From dev
( Reply )
Sebastian April 7th

This has really taught me a lot. I really appreciate that you took the time to explain why you did certain things. That’s one thing that quite a few tutorials don’t do.
Thanks for your effort.
( Reply )
CHRISTIAN April 10th

amazing!!!!
( Reply )
The Mighty Horst April 19th

Thank you my man – this is got to be up there for best crash course tut on the web
( Reply )
meysam April 20th

thank you collis, this tutorial really helps me.

I fix IE6 problems for myself with following changes:

1. add clear div at the end of div.block_inside:

….

2. change following styles:

.block {
border:1px solid #a3a09e;
margin-bottom:20px;
position:relative;
height:1%;
}
.block_inside {
display:block;
border:1px solid #ffffff;
background: url(images/background_block_slice.jpg) repeat-x;
background-color:#ffffff;
padding:30px;
}
.clear {
clear: both;
display: block;
overflow: hidden;
width: 0;
height: 0;
}

3. add width and height to ribbon image like but ie6 still shows blank.gif:
( Reply )
Snik April 22nd

Great tutorial collis, i am new in web developing/design and this really helped me a lot. Thank you my friend!
( Reply )
jen April 22nd

awesome tutorial! thank you!
( Reply )
Daniel Adams April 25th

That’s awesome tut! Thanks for sharing.

Recently we use http://www.xhtmlweaver.com to get our job done, since it is more cost effective.

So far, everything worked great!
( Reply )
Hiren Modi May 3rd

Thanks for this nice and useful tut.
( Reply )
Gamble May 7th

Really appreciate the time that was put into this tutorial. As a print designer moving over to the web side, it’s nice to have this as a clear resource.
( Reply )
yoetha May 9th

Have you check this page with w3 validator? well, I found 74 errors in this page
( Reply )
Gaurish Sharma May 12th

Awesome Tutorial!
Thanks a ton!

Was searching for something like this since ages!
( Reply )
Jloupf May 12th

Thanks for this tutorial. I’m novice in CSS…

But now, how we do to transform this in a wordpress template ? I’m trying with PHP and je m’arrache les cheveux (don’t know in english…sorry )

Thank you
( Reply )
Matthew Hogan May 19th

Seriously dude, great stuff. First time poster here, and I am very, very happy with what you’ve shown me! I actually have a page for a company due in a few days, and was having troubles with it (since I’m a novice coder), and this helped me quite a lot. Thanks again!
( Reply )
Olive May 26th

Du beau boulot mon garçon !
Thanks a lot for your job, making it clear and fun. Nice humor.
Same player shoot again!…
( Reply )
M.abdelkader May 27th

Better solution

i wanna talk here about Step 13 – Adding a Ribbon.
and that problem happed when you try to put Ribbon image and to solve that overlap you added 3px margin-top for portfolio_items ——you don’t have to that

just you can move Rippon inage and put it after
and don’t forget to update porfolio-items with position: relative
so you willl get same view you want
( Reply )
M.abdelkader May 27th

Sorry for missing

Better solution

i wanna talk here about Step 13 – Adding a Ribbon.
and that problem happed when you try to put Ribbon image and to solve that overlap you added 3px margin-top for portfolio_items ——you don’t have to do that

just you can move Rippon image and put it after portfolio_items div
and don’t forget to update porfolio-items with position: relative
so you willl get same view you want
( Reply )
zhangyang May 28th

好。不错的教程。
( Reply )
Rob Busby May 28th

I have been working in Web Design / Development for a few years, but this site (and PSD Tuts+) is probably the best I have seen for tutorials. Your team of Designers & Developers have not only impressed me, but have motivated me to “actually” put REAL hard work behind my designs, development and creativity!

In short, thanks a great deal for your inspiring work and devotion to helping others expand their knowledge and create visuals the world will very much appreciate! I will now create a brand new Web site based on the tutorials and information learned from your sites.
( Reply )
Rakesh May 31st

Thank you so much.. awesome tutorial.. you are great!!
( Reply )
Angel May 31st

Man.You are awesome
( Reply )
Mohammad June 2nd

PNG,JPEG,GIF,…. compressor:VSO Image Resizer
link:http://www.vso-software.fr/products/image_resizer/image_resizer.php
( Reply )
I Me Myself June 7th

ohh wow this is the complete guide for nerds like me. Thanks a ton, u rock!
( Reply )
Me June 10th

coool !
( Reply )
Nick June 17th

I read this ages ago but i just came on to it through a link on hv-designs. And you say you can’t compress your png-24 image, did you try the program “pngcrush” ? You can strip the header out of the image and get rid of the useless things out of it and it should reduce the filesize .
( Reply )
Haroldson Jacob June 22nd

I spent one whole day with another tuorial on here and the css was much different and cauing problems.. this tut must be CSS2?

If so must be the reason why, but Im glad to see this, thank you.
( Reply )
simon muia June 25th

I’m glad i bumped onto this site… just started going through the tutorial… it’s marvelous….
( Reply )
Gareth Davies June 27th

Thanks Collis – fantastic tut. I didn’t know you could redefine elements like that! I also love the additional little tip at the end about switching between different page styles. Nice one.
( Reply )
RL July 12th

Just what I was looking for~ Thank you so very much!
Best tutorial I have ever seen!

Good Luck to your book sales <3
I will grab one when it’s out for sure (:
( Reply )
Gourav July 13th

Thank you very much,

its very helpful information for me
( Reply )
jabga July 20th

I am still wondering how does span and padding works. I used them a lot but always box gets larger even if I set it to display:block.
( Reply )
SEO Company July 22nd

I used them a lot
( Reply )
lhoylhoy July 25th

i first read this one on how to be rockstar wordpress designer
( Reply )
kiranbloger July 27th

Excellent Tutorial…
( Reply )
azza August 3rd

Thanks a lot for this tutorial, it helped me ….:)
( Reply )
Mr Leng August 3rd

Thanks very much~~

is great!
( Reply )
Chirans August 3rd

Very useful tutorial. You guys are doing a great job! This will save lot of time for people like me.
( Reply )
Razor August 6th

Hey, how would I convert this design into Wordpress? I’ve made my own style using the code from this tutorial. Check out http://www.razorproductionz.co.nr/ Please write something for this. Thanks alot for the guide!
( Reply )
h2spot.net August 7th

very nice tutorial…
( Reply )
Peter K August 13th

Great Tutorial!
( Reply )
philipphuc August 16th

many thanks. book marked!
( Reply )
systic August 17th

Awesome Tutorial ! Thanks
( Reply )
MANNU August 19th

grt work ! its my first tut . i dont think i can get a better start then this .

really thanx a lot !

after being familier with all this , will try to fix it for IE6

cheers!
( Reply )
Shiv August 24th

Amazxing Buddy realy its very helpfull for new to web designing…..
( Reply )
Andrew Jhonson August 28th

Thanks for this great tutorial, this is really helpful. We have also collected a resource of 20 best PSD to XHTML/CSS tutorials. You can check the list at http://www.bestpsdtohtml.com/20-best-psd-to-xhtml-css-tutorials/
( Reply )
Ace August 31st

THATS AWESOME!!!!! i love it

you can learn so much from it thanks a lot, i first was overwhelmed by webdesigning when i saw all the CSS and PHP but now i know how to get started !
( Reply )
Adriano Celleantano September 1st

For PSD TO WORDPRESS, psdtowordpress.eu are not just very reliable, they produce hand coded CSS and XHTML and make the installation to WordPress.

http://www.psdtowordpress.eu
( Reply )
xhtml conversion September 10th

What i say? really it is good tutorial how to build a website, every step is very simple, i think everybody come to know very simple
( Reply )
umesh September 26th

great!
( Reply )
Rob September 30th

This is the best tutorial I have found on this topic. Yoiur book is going to be ace!!
( Reply )
studio-Cs October 5th

This is great tutorial.
I like the layout and color.
( Reply )
fmvilas October 8th

Really nice tut! BIG THANKS!!
( Reply )
Stoian Kirov October 8th

Thank you very much Collis! You helped me very much!
( Reply )
jmarreros October 11th

Thanks Collis for the good work, I learnt a lot from this tutorial
( Reply )
Joe October 11th

This is very nice!
( Reply )
srilaxmi October 14th

wow, what a explanation, i really enjoyed and got enough information. hope you continue to provide info in the same way
( Reply )
PSD to HTML October 25th

Extremely good tutorial. I recommend to everyone who wants to convert psds to HTML
( Reply )
clippingimages October 27th

Awesome tutorial. Thanks for sharing nice post.
( Reply )
BuyiMac27Inch October 31st

Awesome Tutorial

☆ ☆ ─┐　─┐☆☆
　│▒│ /▒/
　│▒│/▒/
　│▒ /▒/─┬─┐
　│▒│▒|▒│▒│ Thank You !
┌┴─┴─┐-┘─┘
│▒┌──┘▒▒▒│
└┐▒▒▒▒▒▒┌┘
　└┐▒▒▒▒┌┘
　＼____/

☆ ☆ ☆ ☆ ☆ ☆ ☆ ☆ ☆ ☆
( Reply )
wei liang November 6th

Very nice!
Thank you!
( Reply )
dnzs November 6th

great!! Learned a lot from this.
( Reply )
Deepak Bari November 9th

Hi, informational blog I like it and its useful for me thanks.
( Reply )
chris November 9th

Thank you so much, 10 stars for this tutorial, I’ll definitely subscribe. Thank you so much, it’s not just slicing but also creating theme from scratch…
( Reply )
hussain November 10th

thanksssssssssssssssssssssssssssssssssssssssssssssssss
it is very valuable document
( Reply )
Andrew goldie November 10th

This web design basically turned out to be the new market place design Haha
( Reply )
Avi November 16th

Hey great tutorial dude, it really helped me out. It’s really a solution for those who are beginner in HTML but know photoshop.
~Cheers~
( Reply )
dzibus November 20th

i didn’t read the whole tutorial, but i will forget if i don’t comment now… it’s about iepngfix… it sucks… sometimes it doesn’t work for no reason at all… i found that unitpngfix works a lot better, and it’s more easy to use /specially for beginners/… that’s all…

link: http://labs.unitinteractive.com/unitpngfix.php
( Reply )
Jason November 20th

I can’t wait to work through this and learn…you are a hero of today’s generation, you should have won the Nobel prize not Obama!
( Reply )
Thynn Thazin Soe November 20th

thank u for your tutorial !!! i like so much …. thank u ,again
( Reply )

Add Your Comment

( GET A GRAVATAR )

Your Name
November 20th

Cancel

Tuts+	Tutorials & Resources
Psdtuts+	Photoshop & Graphics
Nettuts+	Web Design & Development
Vectortuts+	Vectors & Illustration
Audiotuts+	Music & Sound
Aetuts+	AfterEffects & Motion
Activetuts+	Flash Tutorials
Cgtuts+	Computer Graphics
Phototuts+	Photography

ActiveDen	Flash Marketplace
ThemeForest	Web & CMS Themes
GraphicRiver	Graphics, Vectors & Icons
VideoHive	Motion Graphics & Projects
AudioJungle	Loops & Effects

FreelanceSw	Freelance Jobs & Community
Rockable	Books & How-To
Creattica	Design Community
Mac.AppStorm	Mac Apps
Web.AppStorm	Web Apps
WorkAwesome	Be Awesome At Work
Envato	About Us