Try Tuts+ Premium, Get Cash Back!
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 →
  • Eman

    Great Tutorial, Thank you so much

  • Stan

    Hi, Jeffery!

    I was thinking that I am good with xHTML and Css but now I understand, There’s a lot to learn. Thanks and GOD BLESS YOU.

    I am looking for your future tutorial.

    I wish someday I become like you.

    Thanks for the tutorial.

  • http://www.easilycompare.co.uk faz

    Hi Jeffrey,

    Great screencast. Learning new things from you all the time.

    A quick question though… from a SEO perspective, pages are better ranked if the spiders see the main content first.

    In your example, when you strip out the CSS, there’s the header, then the left nav, folllowed by the events, followed by the feature and then the main content.

    Using such mark-up and not changing the layout of the page is it possible to make the main content appear nearer the top?

    I know this can be achieved by using a table layout where you specify emtpy cells to trick the spiders to view the main content first but I don’t think anybody wants to go back to table layouts.

    Any views and comments from anyone is appreciated.

    Faz

  • http://www.easilycompare.co.uk faz

    Hi,

    A css notation question. Are the following declaration the same thing?

    #tier1 #featured { …}

    #featured {…}

    As you should only use unique IDs in your mark-up I was confused with having the ID followed by an ID.

    Also, is there any reason why the “UL” item is referenced like:

    #sidebar ul#nav {..}

    why can’t the above be referenced as:

    #nav ul {…}

    Apologies if the above are novice questions.

    faz

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      #sidebar ul#nav and #nav ul are different selectors. The latter searches for an unordered list within a #nav element. The former searches for an unordered list with an id of #nav.

      • http://Www.easilycompare.co.uk Faz

        Ok starting to get the picture, is it about making sure the correct element is targetted?

        In the above example if you only had one UL in the NAV element anyway then both types of selectors would target the correct element, right?

  • Nikki C. Panie

    This is really helpful. Thank you

  • http://www.szul.eu Pozycjonowanie Olsztyn

    Great tut!

  • Pingback: 拓子的小屋 » psd to xhtml 教程

  • Pingback: Dal Template Photoshop al Codice HTML CSS: Ecco Come Fare | Fedeweb

  • sam

    nice tutorial…..

  • Pingback: PSD to XHTML CSS Design Service Providers and Tutorials - Wordpress Arena

  • Pingback: 75 PSD to HTML Resources for Web Designers | Vandelay Design Blog

  • Sagar

    Thats amezing! you have cleared my so many doubts,
    love you jeffrey!! keep it up

  • rrr

    That’s excelent. thx for great tutorial.

  • http://izzybox.com jual dvd

    this tutorial is rock…
    simply the best :)

  • Joy

    This is the best tutorial ever! I especially like how personal it is.

  • sby presidenku

    will you release a visual tutorial of this xhtml/css? with minimum coding of course?

  • Pingback: 75 PSD to HTML Resources for Web Designers | Webdesign Creative

  • Pingback: Videotutorial para pasar de PSD a HTML y CSS | Alojate.com Tu Proveedor de Web Hosting, Dominios, VPS, Servidores Dedicados, Factura Electrónica y Marketing para Buscadores en México

  • http://convertpsdtohtml.com ultra

    this is the best website for me to learn how to conver psd to html

    thanks

    convertpsdtohtml.com

  • GK

    OK….watched all of the videos. What I want to know is, How did you know it is Friday and I am going into the weekend?

    But really, I am new to css and I want to say thanks. I learned a lot!

  • jumper

    wooow! perfect tutorial…

  • Surender Thind

    I think the Jeffery way is the best way to get around any tuts. :)

  • http://www.neophytech.com Neophytech

    hello ur rounded corners not showing in opera and ur blue part of header also dont show full some of ur boxes are also getting distorted

  • kelvin

    hi, this really is a great video tutorial.
    but in the first video, the video timing is 07:01.
    inside the folder show two scrip file.
    just wondering how i get the script file.
    do i need to create the script by myself.

    thanks

  • CommonSense

    Just want to add my personal thanks and appreciation to someone who just might help me make it through my semester exams…

    Copenhagen

  • Pingback: Videotutorial para pasar de PSD a HTML y CSS » Blog de Diseño Web

  • Pingback: 9 Tutorials to convert psd to html | Web and designers | Complete resource platform for web designers and developers

  • Pingback: VECTOR Tutorial

  • Pingback: Top 10 Tutorials To Learn PSD To HTML Conversion | Web Design Tutorials | Creating a Website | Learn Adobe Flash, Photoshop and Dreamweaver

  • Pingback: Online Business Management Software and Services » Blog Archive » Top 10 Tutorials To Learn PSD To HTML Conversion

  • http://www.vietcoolstuff.com Johnny

    Thank you so much for taking your time to create these awesome video tutorials.
    I have learned a lot from you Jeff. Please create more video for the website.

    Anyway, very nice job! please keep up your good work and keep doing web tutorial for the web newbie community.

    I want to be your student very badly. lol :-) Seriously!

    Thank you,

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Thanks, Johnny! I surely will. ;)

  • Angie

    Just what I needed. (again.)

  • Pingback: web69.es "La actualidad del web 2.0" » Blog Archive » Como convertir tu diseño PSD a XHTML

  • Brian Jones

    Excellent Tut Jeff. Best PSD to XHTML I have watched – many Thanks!

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Thanks, Brian!

  • rey

    excellent!

  • http://www.seo-semantic-xhtml.com/ CSS Coder

    This blog has been my biggest help ever found on web.

  • http://www.qualityxhtml.com PSD to xHTML

    If you’re not up to coding yourself, you could just go with an xHTML/CSS coding service.

  • Bill Miller

    Great tutorial! Best I have viewed….

  • Pingback: 43 PSD to XHTML, CSS Tutorials Creating Web Layouts And Navigation | LBS007 Earn Money Online

  • Pingback: Good looking Designs ! | Tutspro.com

  • joe

    Incredible! Here we are in December 2009, and comments for this tutorial are still coming in. (more than a year now, since tutorial was posted in November 2008)

    Great work Jeffrey!

  • http://www.hetroweb.blogspot.com Faizi

    this is very very nice tutorial and it made easy for us to make a site in photoshop and then how to change it xhtml….. it is very great i cant explain that how u r ?……. Man just great job……..

  • http://divplayers.com divplayers

    Its really a good resource to learn xhtml techinques.well described. Thanks :)

  • http://www.le1webdesign.co.uk Yam

    Thanks for this tut, it is by far the best I have found so far.
    Any more like this?

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      We have a few around the site just like this. :)

  • Pingback: TESt test | Web Design Tutorials by Professionals | Creating a Website | Learn Adobe Photoshop | Make Money Online Blogging

  • Pingback: eggdfgdfgdg | Web Design Tutorials by Professionals | Creating a Website | Learn Adobe Photoshop | Make Money Online Blogging

  • http://meriweb.info Kamal Khan

    Great Tutorial.

    One thing to mention…

    While slicing the images, logo etc in the psd, right click the slice and choose option/properties. Then change the name of the slice to your desired name you want it to be, when it is saved as images (jpg’s). By doing this, you dont have to rename all the slices/images after ‘save for web’ is done. They will be automatically named.

    Good Tutorial though.

    Regards
    Kamal Khan (Pakistani developer)

  • http://www.hapatv.com Josay

    This tut is really good.
    You’ve managed to clear up a lot of gray areas. I’m more of a Photoshop guy and this has helped me move a big step ahead.

    Thanx Jeffery,
    This is really cool stuff!

  • vidhun

    this is a great and very usable vedio can any one tell me where to download this vedio so that i can use it for future reference

  • Nasir

    the tutorial is gr8, but where is the source psd so we can work on that while seeing the video

← Older Comments
Newer Comments →