From PSD to HTML

What we will make

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 below
• A pure text editor. I like Notepad++.

The Source

Download the PSD and HTML files

A Note about WYSIWYG Editors

I don’t use WYSIWG editors like Adobe Dreamweaver. Therefore don’t be surprised if you find yourself doing a bit of coding. Don’t worry though, it won’t hurt too much

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 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.

Make sure that the image type is set to GIF

Click Save and make sure your settings match these.

Click Save

OK, we haven’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.

Now let’s start to build the interface in HTMl. . .