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.
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 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. . .
Comments
Post by Kabonfootprint on August 7, 2008
I'm trying to redesign my kabonfootprint wordpress themes following your tutorial. However, I always stuck with cross browser compatibility. Each time I've satisfied with the appearance on Firefox, it still broken on IE. Not to mention about the older version of IE
Post by JCalculator on August 21, 2008
Excellent, I made an slight variant to the process since i wanted to adapt the psd to an interstitial, and it worked great!!!
Post by adreamer on August 22, 2008
the BEST ever!!!
Post by Ramanujam on August 25, 2008
actually i am looking for creating a html code automatically from the slicing options throught photoshop as we work on design view its nice but we have very difficult to write that code for different designs Thank u
Post by deen2sha on September 3, 2008
welldone.... reallay a fantastic piece of work.....
Post by Munish Gupta on September 5, 2008
Very Good Tutorial..Very Helpfull..Thanx Dude
Post by Hannibal on September 9, 2008
Really that s amazing .... thank you .
Post by Ramandeep on October 12, 2008
Wonderful expalnation....
Post by kamalhassan on October 23, 2008
can anybody tell me how to convert a psd file into html file with out slicing
Post by biscxuit on November 2, 2008
wow thx alot for this tuto
Post by YUSRIE on November 2, 2008
AWESOME....I have been looking this kind of tutorial for a long time and through all the tutorials, this is the great explanation !! THANKS FOR SHARING
Post by Rajib on November 2, 2008
This is by fur the greatest and easiest PSD to HTML tutorial I have found on internet. Thanks man.
Post by sage on November 6, 2008
i rely liked..
Post by ghostray on November 7, 2008
nice tut wonderful explanation
Post by Shankar on November 12, 2008
Excellent, This is exactly what I was looking for. A step by step tutorial that shows you how to convert a PSD into HTML. I M FRESHER IN HTML CAN YOU GIVE ME SOME MORE TUTORIAL ..............
Post by obscure on November 15, 2008
Great !!! Thank you
Post by Ritz Ent on November 16, 2008
TTHANNKZZ !! VERY HELPFULL!!!!!!
Post by Andy on November 18, 2008
Excellent tutorial. For not so savy website coders, there are always many psd to html services to choose from. They convert your designs into a webpage. Right now we are using Psdslicing for psd to html conversion. I warmly recommend them to everyone.
Post by Smartguy on November 19, 2008
Nice job and nice tutorial... at Andy this tutorial is for sumone who want to know by himself not to know sumone can do it for other and PSDSLICING SUCKZ....... GTFO of here
Post by Andy on November 25, 2008
@Smartguy Not all designs can be done as it's in this tutorial. I wanted to offer my experience. If my comment bothered anyone, then, I apologize. BTW, did you work with psdslicing, if not, then why do you say that psdslicing sucks? ...
Post by Meghna on November 25, 2008
I am so glad i found this website, thanks a lot...this is the best tutorial.....Too good man
Post by piosenka on December 5, 2008
Is it just me, or does the footer in the final result repeat itself and not centered? (even in the source code download) I had to add a no-repeat and a background-position to make it match the site. If I was doing something wrong, let me know. Otherwise, great tutorial!
Post by Razor Productionz on December 9, 2008
Can you give a more detailed tutorial on (x)HTML coding? I'm beginning to like your hard-coded HTML layout. However, I'm not so good with div ids etc so more explanation on them would do. Thanks!
Post by hla85 on December 20, 2008
For people with the footer problem, if you look into the interface.htm file there is an extra < /div> you have to get rid of within the "right-wrapper"
Post by Javed on January 18, 2009
Yes it is beautiful for new people who want to learn conversion quickly but those who have knowledge of css/html
Post by Javed on January 18, 2009
remove extra div from line 54 or 55 and also enter following code clear:left; in .panel_title class also change background:url(images/footer.gif) center no-repeat; in .footer. Then it will work fine with ie 7 and mozilla. for any help plz me javed@softinnovators.com
Post by halder on January 22, 2009
that was pretty decent man nice one
Post by Eka Putra - BALI on January 28, 2009
This is what i looking for... Thanks.
Post by Rodrigo on February 4, 2009
Man, this is real a nice tutorial, congratulations. I have just one problem, the code "il:hover" doesn't work, when the mouse is over the link, the il content, the image of the triangle remains the same. Can some one help me please?
Post by andres on February 13, 2009
thanks man, usually we have to pay for a tutorial like this. it really help me . thanks
Post by aecsant on March 3, 2009
cool man. thanks a lot .
Post by mike on March 11, 2009
this is was really helpful, thank you :-)
Post by Marc on March 16, 2009
it all seems a lot more clear now...thank you very much.
Post by Ellisa on March 18, 2009
I wasn't really sure if there was any good tutorial about converting psd to html. I like the way you write. Thanks mate.
Post by Mohammad on March 24, 2009
You Are So Simple To So Great wow wonderful tutorial thanks we hope another great tutorial soon !!
Post by Moushumi on March 28, 2009
This is really an easy and effective tutorial I have found so far.
Post by Divya Sanu on April 8, 2009
Hi, plz tell me more detail bcoz coding i am unable to understand plz plz forward me the same weblayout PSD to Dreamweaver. Plz thanku
Post by ozavimal on April 8, 2009
Your design is VERY GOOD, BEAUTIFUL, And I have PSD to CSS convert tutorials. pls sent me some link
Post by Bandana Biswal on April 13, 2009
Can you give a more detailed tutorial on HTML coding? I'm beginning to like your hard-coded HTML layout. However, I'm not so good with div ids etc so more explanation on them would do. plz tell me more detail bcoz coding i am unable to understand plz plz forward me the same weblayout PSD to Dreamweaver. Can u plz tell me in design view step by step plz, Thanks.
Post by Rolly on May 7, 2009
A very good tutorial... :-) keep it up.
Post by Johan on June 27, 2009
very good tutorial. For thise of you talking about browser problems in between, you can just use IE hack, and have a stylesheet for IE. For those of you wanting to know more about HTML and DIV's, please serach google for this
Post by Joshua Bolduc on June 29, 2009
Good advice from Johan, If you can however, try to avoid using IE Hacks. Typically I've been able to do all my designs without resorting to IE Hacks. Of course I only support IE 6+.