From PSD to XHTML
videos

How to Convert a PSD to XHTML

on Nov 5th 2008 with 414 comments

I continue to be amazed by how well Collis’s “Build a Sleek Portfolio Site From Scratch” tutorial continues to perform. It’s been months, yet it still posts strong numbers every week. Considering that fact, I decided to create a screencast that shows you exactly how to convert a PSD into perfect XHTML/CSS.




Part 1: Slicing the PSD and Creating the XHTML

Part 2: CSS

I won’t lie to you. This video is a bit boring. It just isn’t fun to watch someone enter margin values for thirty minutes. :) But it’s essential.

Part 3: Implementing a Bit of Javascript

Part 4: Kicking IE6′s Butt

Could we really call ourselves web developers if we didn’t have to fight with IE6? And is it a coincidence that “6″ is also the number associated with the devil? Who knows.

Mostly, the site looks just fine in IE6, but we should change a few quirks. Create a new stylesheet and call it “ie6.css”. Place it in your CSS folder. Then paste in the following.

#container #mainContent #tier2 
{
	margin-bottom: 273px !important;
}

#tier3 #news
{
	position: relative;
	left: .56em;
}

#header 
{
height: 158px;	
}

#header #login 
{
	top: 1em;
	right: 1.5em;
}

There’s nothing that we really need to go over. Mostly, I’m adjusting the positioning of a few elements.

The last step is to reference our new stylesheet in the head tag of our document.

    <!--[if lt IE 7]>
        <link rel="stylesheet" type="text/css" href="css/ie6.css" />
    <![endif]-->

The PSD

The PSD

The Website: 100% XHTML and CSS

The PSD

I hope this helped you. Everyone has their own way of doing things; So I’d be interested to hear your thoughts. This tutorial was a huge undertaking. I’d appreciate a Digg if you found it to be beneficial.

  • Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.


 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
← Older Comments
Newer Comments →
  • Soeren

    Awesome tutorial! I’m a .NET guy myself, and I almost cried when you opened VS :-D It’s really a great tool, and as you said, the free VWD is very nice. It can be used by everyone, whether you use asp.net, PHP or create a web site with html pages, CSS, maybe some jQuery, and no server code.

    For a future screencast, maybe you could create a small asp.net app, kind’a like this one with the PSD to XHTML, but also with a little asp.net functionality. Maybe a blog, with a wordpress style theme, but with limited functionality ofcourse, since I know it takes time.

    My point is to show that .NET isn’t this anti-standards monster. You CAN create the same standards compliant apps, using semantic code, and asp.net let’s you do some awesome stuff.

    Note; I don’t want to start a technology geek fight :-D

    Happy thanksgiving :-)

  • http://www.mkjones.co.uk mkjones

    The slicing tutorial is a bit backwards.

    First of all, you should always name your slices. For example, give your header slice the name “header” and you will end up with “header.jpg” not “image001whatever.jpg”.

    Then you really should disable the unused slices by changing the property to “No Image” then you don’t have to worry about deleting unwanted images.

    This way you can make periodic changes to the design and output to a source folder without having to worry about doing any extra work.

  • hanzi

    Question, whats the name of the addon with which you edit the css within firefox?

  • ryan reese

    Hello. Where did you get the imagess? I never heard you say on the tutorial(s)

  • ryan reese

    firebug or web developer toolbar.

  • Isuranga

    I’m in a real problem with dreamweaver. That is I dont know how to configure remote server, Testing server and how they use. Pls help me with how to design a web site and publish…

    Thank you.

    These lessons are very helpful for me.

  • Pingback: COFFEE CUP||咖啡杯 » 13将Photoshop应用到极限的高级教程

  • Pingback: Pushing Photoshop to the Limit: 13 Most Advanced tutorials | SulVision

  • veeroo18

    hi
    nice tutorial, but it fails in IE 6.. :( .. my boss fire me if i don’t give him IE compliant design .. :P

  • http://www.rinsedevalk.nl Rinse

    I’ve read many tutorials and i saw a lot of video’s but this one has explained the slicing of a layout very clearly.
    Thank you very much for making this video.
    Excellent!

  • http://www.eldoren.com Gordon Currie

    Very cool. I learned alot and I was amazed at how quickly you were able to assemble this. I also liked your presentation style and the flow. Didn’t find the CSS boring at all. Would love to see some more JQuery stuff though…I am fairly New to that.

  • http://www.saroverhees.be Saro

    Lovely tut, really usefull!

  • jason

    this was great!! I picked up at least 4 tricks that will greatly simplify my life!! thanks

  • Pingback: 31 Incredible Resources And Inspirations For Designers Like You To Discover The Best Of The Web In November - Opensource, Free and Useful Online Resources for Designers and Developers

  • John Dangerous

    Wow, I hope I can learn to bang pages out that quick.

    It would be very interesting to see a Myspace div overlay
    tut on this site. Nobody has tackled that tut on any site that i
    have seen.

  • Pingback: 31 Incredible Resources And Inspirations For Designers Like You To Discover The Best Of The Web In November | virology.tv

  • http://blog.cnsqonline.com Cesar Noel

    Nice screencast on template designing

  • Pingback: Best of the web - November 2008 - Morning Break

  • Facundo

    Excelent tutorial, very helpfull!!

  • Mark

    what can I say…this is excellent!
    I consider it the designers Bible…well…just because it’s the best tut I’ve seen so far!

    Could you tell me where to find more information on the usage of .em?
    I’m a beginner and also dutch so simple and easy to understand language would be greatly appreciated!

  • Facundo

    Me agaen!
    Well, I never didnt know how to code in CSS. But now, with your help I made this site http://www.fakone.com/designs/sd/ from 0 !!

    Thx a lot!

  • Sebastian

    You are the Best!

    I have no idea about CSS or similar.

    During to show your work, I must write you – because I am happy to see so good explanatory stuff.

    I be overjoyed, really.

    For your work – Thanks a lot!

    From Germany

  • Jareer

    Excellent Tutorial,

    I learned lot from it.

    good explanations with clear picture

    Thanks and need many tutorials something like this

    From United Arab Emirates

  • Pingback: WebDesign und Programmierung aus Nordenham - bwiechering.com - Blog

  • Ryan

    Wow, what a great detailed tutorial! Really helpful in all ways! Thanks for taking the time to make this. Really appreciate it.

    Cheers

  • Pingback: Pushing Photoshop to the Limit: 13 Most Advanced tutorials | Link Archive

  • Pingback: Icons, Must-read books on Web Dev, Social Media…

  • Pingback: Looking for a blogger - BWHacks

  • Pingback: Best Resources Of The Web Christmas 2008 | Design Development Magazine

  • David

    the menu arrows don’t work in ie6?
    very helpful otherwise.

  • Pingback: janweber.info » PSD to XHTML

  • Pingback: Converting a Design From PSD to HTML - NETTUTS

  • M. E. Schultz

    Fantastic Tut. Just in time for my next homework assignment. Thank You!

  • http://www.presidiacreative.com/ Eric Shafer
  • sophia

    Thanks for taking the time to put this out. It was extremely useful

  • Brian

    Everything is starting to click. Awesome and thanks!

  • Pingback: 31 Incredible Resources And Inspirations For Designers Like You To Discover The Best Of The Web In November | SulVision

  • http://powertraceur.com Tom Taylor

    Thanks so much for this, followed with this and basically learned and taught myself css along with it.

    Was such a help.

  • Pingback: Webzappr - daily « My Random Web Snippets

  • http://www.Tech-Notes.nl Tech-Notes

    one word … SUPER …

    i sat down for this tutorial and the time was over in a blink !
    Saw some really cool new things here and i’m really gonna try it out on my website

    Keep these screencasts coming !

    Cheers

  • http://www.mikeb.info Michael Babao

    This tutorial is not only for the beginners but a refresher for who are already enlightened :-)

  • Pingback: Some helpful tutorial videos CSS & XHTML from beginning to advance | Lam Nguyen’s Blog

  • divin

    the video is straeming very slowly, if something can be done about it, it will be graet. The tutorial is great

  • Pingback: [Web] 連結分享 « 網站製作學習誌

  • Pingback: Video-lezioni per imparare il webdesign : cssblog.it

  • Alex

    Jeffrey you are good man! :)
    I know this tut was only about markup
    But if we see the whole of a situation IE and Opera users can’t see rounded edges
    I mean if you have explained about it you should show an alternative for others borwsers
    Cuz Cross-browser-compatibly is still paramount at this time

  • http://www.digitalspacetech.com Digital Space

    In the desgin slice the top and bottom of the rounded edges
    then create another css file for ie and call the background image for the h3 tags as your sliced images.

    It works for me.

    Best tuts again, maybe one more can be done but with a bit more complicated design like so much curves and background images and so on, as with this design it is easy to slice and use to convert to xhtml, but i think its time to rock and roll with a bit more complicated one, give it to us :) plz……. please base it on a black theme maybe jewelery, watch, clothing, photographers something like armanis tagheur website design, what do you say you up for it. More than happy to design and send in as a contribution.

  • http://www.nysteria.com seye kuyinu

    VERY HELPFUL!!!!!!!!!!!!!!!!!!!!!!!!!!!

  • Tran Le

    thanks Jeffrey for great tutorial. I used to do the same layout with very time-comsumed way. this tutorial will help me a lot.

    just one question. for the rounded background. I see you use -moz-border-radius css property that work only in firefox. is there any way to it work the same on internet explore? so far I just use the background for rounded conner.
    once again, thanks so much
    LMTran

  • Pingback: Pushing Photoshop to the Limit: 13 Most Advanced tutorials | Web Hosting and Domains

← Older Comments
Newer Comments →