From PSD to HTML

In this tutorial I'm going to show you how to take the design created for my Fundamentals of Interface Design tutorial and turn that into a usable web interface.

What you will need

Adobe Photoshop.
The PSD File which can be downloaded here
A pure text editor. I like Notepad++.

You can also download the html source code here

Note: I don't use dreamweaver. Though it is an excellent application, I prefer coding everything from scratch.

Part One: Visualizing the CSS and HTML.

Before I begin anything I take an objective look at my interface. What can I create using CSS/HTML? What do I need to slice? This saves me time and often gets me the cleanest results.

What sections do you see?

This is what I'm thinking to myself as I do this.

The following can be achieved with CSS

The interface size and placement.
The text and link colors, size, etc.
The panel placement, size, border and background color.
The borders on the icons.
The Horizontel line between sections in the body.

The following will need to be sliced up.

The header icons (including the active page icon).
The header graphics, including logo and "Part Digital Designs" text.
the header background color.
The Background gradient.
The gradient color of the panel headers.
The footer.
One of the navigation triangles.

Part Two: Slicing the interface.

I work simultaneously between slicing and CSS/HTML. This is fastest method I've found when working on a personal project. However if you are working in a group it's best to keep each step separate.

Note: For the sake of this tutorial I'm going to stick with Photoshop. However, if you have it, I highly recommend Adobe Image Ready or Adobe Fireworks for slicing up your images.

Ok let's get started.

Open up the file that I've included for this tutorial.

Your First Slice

Press K to select the slice tool and draw a box around the logo and title as shown.

Right click this slice and click Edit Slice Options. Name it header_title and click OK.

Remember these two steps as we slice up the interface because from now on I'm not going to be as detailed in my explanations.

Create another slice near the one you just made that is 1 pixel wide and name it header_bg. It should look like the image below.

Create a slice around the home icon (including the selcted graphic) and name it icon_home. Make sure it has a width of 60 pixels and a height of 54 pixels.

Repeat the process for the remaining icons.

Create a slice at the home panel header that is 1 pixel wide and 19 pixels high. Name it panel_bg

Create a slice around one of the triangles and name it triangle-idle. Give it a width and height of 13 pixels.

Quick Tip: Hold down Shift as you draw the slice and it will make a perfect square.

Create a slice around the entire footer and name it footer

Go to File > Save for web or devices.

(Click for a larger view)

Make sure that the image type is set to GIF

Click Save and make sure your settings match these.

Click Save

Ok we havn't sliced up everything yet, but we have enough to get started. So minimize photoshop for now and open up your favorite pure text editor.

Part Three: Setting the foundation.

Create two new files and name them interface.htm and stylesheet.css respectively.

Your project folder should look like this.

Note: Given the nature of operating systems, your icon graphics may not resemble mine.

Note: Creating web interfaces is a rather complicated process, therefore I'm not going to go into every little detail but rather highlight the most important aspects of html and css.

Copy the following code and paste it into your interface.htm document.

<!-- this sets the doc type -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
	<title>My Interface</title>
 
	<!-- linking your stylesheet document -->
	<link rel="stylesheet" type="text/css" href = "stylesheet.css"  media="screen"  />
 
</head>
<body>
 
</body>
</html>

Now with this html code in, it's time to think about how the layout is going to work.

Before you do any real CSS, think about the logic that you're going to use. It's best to have a picture in your mind before you start rather than begin with little thought as it's easy to work yourself into a corner.

helpful tip: When writing CSS, it's best to start broad and then become more specific as you go along. (Just like painting a picture).

Copy and paste this code into your html document between the body tags.

<!-- 
    Start by blocking out the major sections of the website.  
    Create the site wrapper, header, body etc. 
-->
<!--
Site Wrapper 
Always create a site wrapper, this helps with the overall size and position of your website. 
-->
<div class = "site-wrapper">
 
	<!--
	Header Wrapper
	This is where the logo, site title and top navigation will go
	-->
	<div class = "header-wrapper">
 
	</div>
	<!-- 
	Body Wrapper 
	this section is what holds the left navigation, center content and right panels
	-->
	<div class = "body-wrapper">
 
	</div>
 
	<!-- 
	Footer 
	as you might expect, this is the footer
	-->
	<div class = "footer">
 
	</div>	
</div>

I can't stress enough how important this first step is. It provides the structure that the rest of your components will build on. You wouldn't trust a house with a shaky foundation would you? The same applies here.

Copy and paste the following code into stylesheet.css

 
/*==============================
	GLOBALS
Sets the default document font size, family
and color
===============================*/
body
{
	font-family:Arial;
	font-size:12px; 
	color:#3f4a4e;
}
/*==============================
	SITE WRAPPER
===============================*/
.site-wrapper
{
	width:800px; 
 
	/* min-height lets your site grow vertically 
	(like in tables). */
	min-height:600px; 
 
	/* By setting these to auto you are centering the 
	site */
	margin-left:auto;  
	margin-right:auto; 
 
	border:solid 1px black; 
}
/*==============================
	HEADER WRAPPER
===============================*/
.header-wrapper
{
	width:800px; 
	height:54px; 
 
 
	background:url('images/header_bg.gif'); 
 
	/* css lets you designate how you want an image to 
	repeat. Along the x-axis, y-axis or not at all. */
	background-repeat:repeat-x; 
}
/*==============================
		BODY WRAPPER
===============================*/
.body-wrapper
{
	margin-top:3px; 
 
 
	/* floats are crucial to the creation of any
	web interface. Every web developer must master
	this concept. Don't worry I'll be writing a
	tutorial about this a little later.	:)	*/
	float:left; 
 
 
	width:800px; 
	min-height:530px; 
}
/*==============================
		FOOTER
===============================*/
.footer
{
	/* clears are the sisters to float, it's 
	time to meet the whole family :) */
	clear:left; 
	height:16px; 
	background:url(images/footer.gif); 
}

Note: In the early stages of production like this, I highly recommend that you put a border on every block element (div, table, h1, h2 etc. . ) that you create. It is much easier to visualize.

Open up interface.htm in your browser, it should look something like this.

Now that we have a good base, let's build the header.

Part Four: Building the Header

Paste the following code into interface.htm inside the header-wrapper tags.

<div class = "header-title">
	<img src = "images/header_title.gif" />
</div>
 
<div class = "header-menu">
 
<!-- making an HTML list -->
<ul>
	<li><img src = "images/icon_home.gif"      alt = "home"/></li>
	<li><img src = "images/icon_tutorials.gif" alt = "tutorials"/></li>
	<li><img src = "images/icon_downloads.gif" alt = "downloads"/></li>
	<li><img src = "images/icon_resume.gif"    alt = "resume"/></li>
	<li><img src = "images/icon_links.gif"     alt = "links"/></li>
	<li><img src = "images/icon_contact.gif"   alt = "contact"/></li>
</ul>
</div>
 
</div>

Above I created a list of images. Normally lists are displayed as vertical, bulleted entries but with a little CSS magic we can turn it into a nice horizontel menu. Take a look at it now in the browser before you go to the next step.

In stylesheet.css, under header-wrapper, copy and paste the following code.

/* this sets the position of the title. 
header.gif goes here here */
.header-title
{
	float:left; 
}
/* This sets the position of the menu */
.header-menu
{
	float:right; 
	width:370px; 
	height:54px; 
}
 
/*  The Menu  */
/*Whey you follow a class definition with an html element (such 
as ul) all styles that you apply will only affect that element. 
So for instance, in this case you read it as "apply these 
settings to every ul html element inside every div tag named 
<b>header-menu</b>, but no other."
*/
.header-menu ul
{
	padding:0; 
 
	/* the removes the left margin */
	margin:0;
 
	/* this removes the bullet */
	list-style:none; 
}
.header-menu li
{
	float:left; 
}

The header menu should look like this.

Now let's move on to the portfolio navigation.

Part Five: Building the portfolio menu.

Copy and paste the following HTML into interface.htm between the body-wrapper div tags.

<div class = "portfolio-menu">
	<h2>portfolio</h2>
	<ul>
		<li><a href = "">In Progress</a></li>
		<li><a href = "">Design</a></li>
		<li><a href = "">3D</a></li>
		<li><a href = "">Traditional</a></li>
	</ul>
</div>

Believe it or not that's all the html code you need to make the menu! Now let's do some CSS.

Copy and paste this into stylesheet.css

/*==============================
	PORTFOLIO MENU 
===============================*/
.portfolio-menu
{
	float:left; 
	/*The width of the menu */
	width:140px; 
	min-height:530px;
 
	/*The font of all the text in the menu */
	font-family:Arial; 
}
 
/*The Portfolio Title */
.portfolio-menu h1
{
	margin:2px; 
	color:#3f4a4e; 
	font-size:18px; 
}
/* Like before we just apply some styles to the list */
.portfolio-menu ul
{
	margin:0;
	padding-left:15px; 
	list-style:none; 
}
/* We have to apply a style to the links in the list, otherwise
they will default to the browser standard. (which is normally
blue with an underline.) */
.portfolio-menu a
{
	font-size:12px;
 
	/* text-decoration removes the underline */
	text-decoration:none; 
 
	color:#3f4a4e; 
}
.portfolio-menu li
{
	background:url(images/triangle-idle.gif); 
	background-repeat:no-repeat; 
	background-position:center left; 
	margin-bottom:5px; 
	padding-left:15px; 
	border:solid thin black; 
 
}
/* hover is a pseudo class, you can set styles for when
the user puts their mouse over an element. No Javascript
needed! */
.portfolio-menu li:hover
{
	background:url(images/triangle-active.gif); 
	background-repeat:no-repeat;
	background-position:center left; 
}

Save the document and view it in the browser, the menu should look like this.

Ok now let's build the center content area.

Part Six: Building the content area

Note: I'm not going to completely recreate the content inside the panels because these sections are dynamic and they would be populated at run time. Instead I'll show you have to create the panel make them ready to handle content.

Copy and paste the following into interface.htm under portfolio-menu make sure that it's still between the body-wrapper tags.

<!-- Holds the panel -->
<div class = "content-wrapper">
 
	<!-- The panel -->
	<div class = "panel">
		<div class = "panel_title">home</div>
 
		<div class = "panel_content" style = "height:450px">
 
		</div>
	</div>
</div>

Copy and paste the following into stylesheet.css under portfolio-menu

/*==============================
	CONTENT-WRAPPER
===============================*/
.content-wrapper
{  
	float:left; 
	width:470px;
	margin-right:5px; 
}
/*==============================
		PANEL CONTENT
===============================*/
.panel
{ 
	margin-bottom:5px;
	border:solid 1px #869ca4;
}
/*The panel content */
.panel_content
{
	padding:2px; 
	background:#effaff; 
}
/* The panel title */
.panel_title
{	  
	height:16px; 
	font-size:14px; 
	color:#effaff; 
	padding:2px; 
	padding-left:4px; 
	background:url(images/panel_bg.gif); 
	background-repeat:repeat-x; 
	background-position:center center; 
}

Ok now let's create the two right panels, you'll find that this step is very easy.

Part Seven: Creating the right panels.

Copy and paste the following into interface.htm right after the content-wrapper div tag.

<div class = "right-wrapper">
	<div class = "panel">
		<div class = "panel_title">news</div>
		<div class = "panel_content" style = "height:210px">
			Your content for news goes here.
		</div>
	</div>
 
	</div>
 
	<div class = "panel">
		<div class = "panel_title">tutorials</div>
		<div class = "panel_content" style = "min-height:210px">
			Your content for tutorials goes here.
		</div>
	</div>
</div>

Copy this into stylesheet.css after panel_title

/*==============================
		RIGHT WRAPPER 
===============================*/
.right-wrapper
{
	float:left; 
	width:180px; 
	min-height:530px; 
}

Take a look at the interface in the browser. Congratulations! You have all your menus and content areas ready for the world wide web!

(click for a larger view)

Conclusion

In this tutorial I've introduced you to some very useful and important concepts.

Separating your layout from your styles.
Using div tags to block out your layout.
Using wrappers to hold your sections.
Using lists to create menus

These are constantly recurring techniques, use them, become comfortable with them.

I hope this was helpful, if you have any questions or suggestions feel free to contact me.

I'm accepting requests. If any of you have a question about Photoshop or PHP and would like to see a tutorial, send me an email here. Make sure that you put "request" in the subject.

	PHP Templates and why they will change your life.
	How to make custom avatars with php
	How to create a grid quickly and easily with Photoshop
	How to draw a digital portrait
	How to use images created with gdLibrary
	Fundamentals of Interface Design
	Line Chart class with gdLibrary
	Professional technique for creating icons
	Principles of Glossy Interface Design
	Create cropped thumbnails with GD Library
	GD Library Bar Chart
	Drop Shadows with GD Library