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. I'm incredibly passionate about modern software development, and am the author of Laravel Testing Decoded! 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 →
  • macias

    very useful 4 me ..thx a lot !

  • Vishal

    very nice article, I was looking for something like this since ages, thanks man :)

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

  • Jefferson Cavalcantye

    Esse tipo de tuturial já está “manjado” na web!

  • Kim Dolleris

    Very good job! I’ll forward this the apprentices at the firm. This will definitely make my life a little easier :D

    Thanx!

  • Shunsuke Doi@Kyoto Japan

    great tutorial!
    thanks!!

  • azerty

    Interesting but I wonder when people are going to start using Fireworks because apps like Illustrator or Photoshop are not webdesigner apps.
    Once you get used to it Fireworks is a really nice piece of software !

  • Pingback: Convertir un fichier PSD en XHTML | Rootsarts V7.5

  • http://URL(Optional) Eduardo

    pretty amazing!

  • http://www.urielkatz.com Uriel Katz

    is a input inside a h5 ok?

  • Pingback: Useful Links (06/11/2008) | Apramana

  • TommyP

    Props

  • http://www.khwaja.info Khwaja

    The tutorials are really Nice…
    Thanks a lot..

    Job well done…

  • http://www.bengood.org Ben G

    Nice, very helpful. Keep up the great posts!

  • Ilyae

    What a bogus slogan! haha

  • http://michaelkowens.com MK Owens

    While it wasn’t really something I needed, this is the perfect example of how to do a screencast.

    Anyone who does a screencast should pay attention to this tutorial to see how it is done. It was very well done.

  • nick

    Very Awesome! Keep this stuff coming!

  • Pingback: Como convertir PSD a XHTML (Videotutoriales)

  • http://www.rhynodesign.com Ryan

    Thanks for the tutorial. I agree with everyone else that the screencasts are a great addition! I have used Lynda.com for a while because I, like others have mentioned, am much more of a visual learner and really appreciate video tutorials.

  • http://danbowles.com/blog Dan

    Many thanks for this. This is a great starter tutorial and a great refresher as well. Looking forward to the CSS portion!

  • Scott

    very interesting to watch. I think you should have used label tags instead of small tags on the contact form.

  • http://www.eternalgraphs.com AnDi

    Very interesting tutorial, i finally understood where i was getting stuck. Thanks again…. :)

  • http://monkeylaser.com John T.

    Very, very good but…

    You changed the image formats (png and gif into jpgs) when renaming them… I am pretty sure this was a mistake and is not good practice to change the format of an image by simple changing the extension.

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

    @John – Yeah, I noticed that afterwards. It’s easy to forget things when doing the screencasts. I fixed the error.

  • http://URL(Optional) Eduardo

    very cool tutorial! think this is the most important part of webdesign.

  • http://www.thoughtpalette.com Chris

    Awesome job, well worth the sit =}

  • Pingback: » feed expo 2008. november 6.{Y-m-d} // 702

  • Pingback: Come convertire da psd a xhtml : sastgroup.com

  • sad dude

    how can i slice single layer without other in the back

    any one help?

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

    @sad dude – Look for an option called “layer-based slice”.

  • netoxico

    very good screencast!!! thanks its a lot of help,Regards from Mexico City

  • Fitz

    Hey, Pretty good tutorial.

    I have some comments. How come none of the form elements are in Form tags with fieldset, legend and labels for the inputs?

    The form could then be used instead of the div for “Have a Question” and the “Login”

    Also on the navigation you could have made the a block element and this could have had the arrow on the :hover state rather than the li. This would make the whole area clickable and IE6 would then get the arrow on hover.

  • David D.

    GREAT tutorial. I really enjoyed the 2nd one. Seeing the CSS slowly take shape was very educational.

    Question: I can understand the use of EMS for padding, but why the EMS for the featured image? don’t images scale anyway when you use the browser’s zoom? wouldn’t a width in pixels be easier?

    somebody else also mentioned that the use of moz-border and webkit-border for rounded corners will not work with IE. as much as I dislike IE, this rounded corners solution seems…um…not very worthwhile.

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

    @David – I disagree. It’s not imperative that those boxes are slightly rounded. In such instances, there is absolutely nothing wrong with adding a bit of flare for Firefox and Safari users.

  • konsehal_14

    Please give us some more information about fixing ie bugs and showing more tehcniques in making a good site.

    Thanks a lot. It is very useful for me

  • Vinay Vidyasagar

    ah… one nice comprehensive guide.. good for a learner like me.. thanks u have no idea how long ive been waiting for this.. :D

  • T Pham

    thank, great tut :)

  • Vinay Vidyasagar

    brilliant stuff.. im always waiting for psd2html tutorials.. for a learner like me.. this is like gold.. thanks again :)

  • http://www.danhbaweb20.com/?p=347 Danh ba web 2.0

    Thanks you very much. It’s great for me
    I saved my bookmark. Keep up !

  • http://tendou86.blogspot.com/ Takumi86

    Nice tutorial video and an interesting news, thanks, keep up the good work!

  • Yui

    really helpful
    thanks a lot

  • Pingback: Robin’s Blog» Blog Archive » Converting a Photoshop PSD File to and XHTML & CSS Web Site

  • http://www.webexpedition18.com Nikola

    great tut thanx! is there any way that i could download videos to my computer?

  • http://www.athanne.com Busby

    Very helpful!

  • Furqan

    Very Very helpful. good stuff

  • Andrew

    Very nice tutorial, but am I the only one wondering where the PSD file is? I would have thought that a tutorial about converting a PSD file would include one in the source. Maybe I’m missing something here.

  • http://www.webdevelopment2.com/ Baz L

    Just one SEO note…
    I saw this mentioned somewhere else (maybe here, who knows). It’s about hiding the h1 in the header in favor of the background for the main logo.

    It’s been my understanding that display:none; *could* get you punished by search engines and that text-indent: -99999px; is the preferred alternative?

    Anyone mind clarifying?

  • http://www.williambiwer.com Bill Biwer

    Great to see how others style their sites and pick up on a few tricks.

    Thanks!

  • http://www.seanbuckley.ca Sean

    Thanks

  • Samuel Yu

    Very useful tutorial, thanks so much!

← Older Comments
Newer Comments →