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
Newer Comments →
  • http://www.christianmejia.com Christian Mejia

    This is exciting! I needed this memory refreshing!

  • http://www.pinceladasdaweb.com.br/blog/ Pedro Rogério

    This will certainly be the best tutorial and more expected of all.

  • Cameron Kollwitz

    Excellent.

  • Pingback: Videotutorial. Convertir PSD a XHTML. | webmasters, recursos webmasters, recursos gratuitos, scripts, web

  • http://www.weblimite.com/ Weblimite

    Nice! I comment in my blog. I’m sure this is very helpfull to newbies.

  • andrea

    nice tutorial!
    but what’s application luncher do you use at the beggining of the video?
    really cool, if you give me the name i’m happy becouse i looking for that applicaion for a long time…
    exscuse for my english, i’m italian.

  • http://themeforest.net/user/JeffreyWay Jeffrey Way
    Author

    @Andrea – The name of the IDE is “Visual Studio” from Microsoft. It’s a bit pricey, but you can download a free version that works fantastic. It’s called “Visual Web Developer” You can get it here:

    http://www.asp.net/downloads/essential/

    It’s designed to be an IDE for the ASP.NET framework, but you can create simple HTML websites and ignore the ASP functionality.

  • http://themeforest.net/user/JeffreyWay Jeffrey Way
    Author

    Guys, sorry for the delay with the second two videos going up. They were uploading when I went to bed last night, but my computer automatically restarted. So, I had to start over. They’re almost done and will be posted ASAP.

    I worked really hard on this tut, so the Diggs are appreciated!

  • http://www.siahdesign.com Josiah Jost | Siah Design

    Awesome video. Thanks for sharing. Its always neat to see how others do it.

    Just one note for slicing the images in photoshop:

    You have the option of just saving selected slices by changing the drop down box in the “Save As Optimized” box from “All Slices” to “Selected Slices”. Saves some time down the road…

  • http://URL(Optional) Yosi

    THANKS A LOT JEFFREY !!

  • http://themeforest.net/user/JeffreyWay Jeffrey Way
    Author

    @Josiah – Ahh…great tip. I knew there was a way to do it! Thank you.

  • Daniel

    In CS3 you can select User Slices before you click Save in the Save for Web & Devices dialog.

  • reddy

    Just viewed the demo in FF3 and its not very clean, there’s some sort of mismatch with the background in the header area.

  • http://www.thisisaaronslife.com Aaron Irizarry

    nice article thanks!

  • http://www.andre-neuborn.de ANeuby

    Hey, great video tutorial. I have a question about the ie 6 fixing stuff. Do you know a great site where I can see the different ie 6 fixes with examples and so on ? Sometimes I get crazy because of the rightright and !important stuff for ie 6.

    By the way:
    Visual Studio is very great and I saw that you are using jquery. on The jquery page there is great plugin for VS to implement IntelliSense for jQuery. There is also a PHP IntelliSense Plugin called VS.PHP. Its very great!

  • http://themeforest.net/user/JeffreyWay Jeffrey Way
    Author

    @ANeuby – Thanks! Yeah, I did know that. It’s going to be built into the future versions of Visual Studio. I wrote about it on the ThemeForest blog.

    VS.PHP is a great extension. I have that installed as well and use it on a lot of the screencasts on this site.

  • http://barttos.net/ Barttos

    Jeffrey Way, very good tutorial! Thx.

  • http://www.danharper.me Dan Harper

    Nice tutorial. I’m just wondering how many designers use EM’s for padding/margins? Personally I’ve always used pixels for that. I’ve only used EMs for text.

    Dugg :)

  • Jake

    This is awesome… Keep up the good work. Any chance you could do a complete div myspace overlay, from psd to xhtml, with some java etc… Or even a music myspace. That would be amazing and would love to see the envato network tackle this… I think this would be a very popular tut as well.

    Thanks in advance

  • http://www.ben-griffiths.com Ben Griffiths

    Great, thanks :D

  • http://mokshasolutions.com Moksha

    great one thanks for it.

  • highblood

    Thanks for this very essential tutorial, Jeff! This would be very helpful for newbies like me whose just starting to learn Photoshop. Looking forward to create my own website. Kudos to NETTUTS as well!

  • http://laminbarrow.com Lamin

    Very nice. Thanks

  • http://ndezigns.com Nate

    This is pretty fantastic stuff. Should be useful to a lot of people.

  • Pingback: More site build tutorials (updated) « AU Dynamic Websites Class Blog

  • Brian McCarrie

    Nice work, I’ll be going through this tonight.

  • http://www.proj-tr.com Matt

    I’m in the middle of the first video atm, but I wanted to chime in that when you are in the save for web workspace you can shift+select all of the slices that you want to save out then when the save dialog box comes up select “Selected Slices” from the slices pull down menu. This way you won’t get all the crap images that you have to hunt down and trash later on.

    Great tut so far, thanks!

  • Sebastian

    Awesome tut!

    Thanks!

  • http://www.bdesign-studio.org Brandon

    Great Tutorial Jeffrey! The screencasts are so much better than text tutorials for me because I learn better visually than I do with text. I learned some cool things in the XHTML while you were going through which is very cool. The rounded corners using moz made my night as i always used to make images to put the text over, to make it look like a rounded cornered border. Also the header icons was something that I also learned which was pretty cool.

    Great job again I cant tell you how much this has helped me on alot of things.

  • http://www.nettuts.com Jeffrey

    @Brandon – Thank you! I’m the same way. Videos help so much more – at least for me.

    Just remember with the “-moz” and “-webkit” styles…they only work on Firefox and Safari. They will still come out as square on IE7 and below. But it’s really not a big deal.

    I’m glad to hear it helped you…makes me feel good.

  • http://www.bdesign-studio.org Brandon

    Yeah it helped a lot. And I will remember that. I use Firefox anyways and so far all my clients that I have worked with use Firefox, and if they do not…I tell them why its better than IE lol. When I do that I rant on. Yeah you spent a lot of time on that video lol. It was worth it though and also worth my time as I learned some new things today. And I greatly appreciate it. The rounded corners now has inspired me to use them in my current client project for Home Depot.

  • http://Yizi.co.uk Yizi

    Amazing tutorial!

  • jfavreau

    @ Dan Harper:
    Ems are linked to the size of the default font character. This means that they will scale with your user’s font size (think zooming in etc.)
    When the scale changes the relative distances between em-spaced elements will remain the same. Pixels on the other hand are hard coded to the screen/render resolution.

  • http://hi.baidu.com/mcspring MC.Spring

    very useful,thanks for sharing

  • http://probablysucks.com Dwayne from Probably Sucks Blog

    I’m literally very impressed and very speechless. Awesome job and awesome tutorial. It’s good to see more of these tutorials coming out, when there was a time not long ago where tutorials like this were non-existent.

    Dwayne.
    http://probablysucks.com

  • mr. tunes

    i agree with everything above. this is very useful to me, especially the fact that it’s in video format.

    i second the request to tackle myspace theming cause that site is still very popular.

    thanks again jeff

  • Pingback: How to Convert a PSD to XHTML - Nettuts | WhiteSandsDigital

  • http://www.ariyoshahry.net Ariyo

    Great job Jeff. As always. I love your screen casts. keep em coming.

  • Ivor

    Amazing tutorial!! lots of techniques to remember! this is definetly a ‘must have’ guide…! Thanks Jeffrey.

    twitter: ipad

  • Rick

    In the second video at around 12 minutes when you find weird stuff with the list styles… it’s because when you cut part of the selector you still had the comma on the line above, causing the whole thing to be ignored since there was a comma but no second selector… that’s what happened.

  • http://www.allwebdesignresources.com/webdesignblogs/ Rachel

    You nailed this tutorial!

  • dronix

    keep them coming. I love psd to xhtml tuts, especially screencasts!!

  • http://kevinwang.org Kevin

    Thank you so much. I’ve learned something more from your videos.

  • http://shums.info/ M.A.Yoosuf

    great, and i was really needed this, coz i have done a layout in Adobe Fireworks and don’t know how to convert, but this lil bit help me, as a developer i was facing a conversion issue, now i dont think, coz TUTS+ Gave me a solution. i mean it u Jeff
    hope yo will make some nice articles like this….

    Cheers…………………….
    M.A.Yoosuf
    http://yoosuf.awardspace.com/

  • http://blog.insicdesigns.com insic

    nice tutorial again.

    • kocy

      just tutorial not nice,ur so nice…………mey be orginal gold

  • http://www.power.org.mx/blog/ power

    Awesome tutorial, very clean, and Usefull

    Tnx Again for Sharing ;) This ScreenCast is Value Added.

    Jeffrey, you Rockz

  • http://www.oskard.be jbcarey

    Good help for the “new guys”

  • PissedAtInsic

    @insic, STOP spamming EACH and EVERYONE of the TUTS!

  • Pingback: 2008 November 06 - Links for today « My (almost) Daily Links

  • Pingback: Anyone use Visual Studio? - Design Forum - Graphic Design & Web Design Forums

Newer Comments →