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

  • Pingback: PSD to CSS/XHTML Öğretici Dökümanlar » Arslania

  • Pingback: 43個實例xHTML+CSS(DIV+CSS)網頁及導航佈局教程 « orangeflower1219

  • Pingback: PSD2XHTML教程 « 编码与设计艺术

  • 单身贵镞

    Part 1 ，Part 2 ，Part 3的图片都看不到，其他的可以看到，不应该是加载问题啊

  • http://nuaconcepts.com Chan

    I’m so appreciative of this!!! working on nuaconcepts.com and would like to personalize this basis the above.
    Have you any tutorials on creating the PSD template itself?

  • http://www.lankabusiness.com lanka business

    Very good tutorial…Thanks a lot.

  • Pingback: 70+ PSD to HTML Resources for Web Developers | ExceptionHandle.com

  • Pingback: dailyroundups.com » » 25+ Helpful Photoshop to HTML/CSS Tutorials

  • http://www.democratandchronicle.com/apps/pbcs.dll/section?category=PluckPersona&U=32d2127920244539b4efc45b7af6d242&plckPersonaPage=BlogViewPost&plckUserId=32d2127920244539b4efc45b7af6d242& Vivan Orozco

    I don’t even understand how I stopped up right here, however I assumed this put up used to be good. I don’t recognise who you’re but definitely you are going to a well-known blogger if you happen to are not already ;) Cheers!

  • Pingback: E-sitesweb » 43 PSD to XHTML, CSS Tutorials Creating Web Layouts And Navigation

  • http://www.afghanistanismyheart.blogfa.com jack mam

    thanks for your providing this passage
    i wanna say that that i didnt know how to convert psd to html thank you again

  • Andrew

    I was having issues with the warm & cheerfull web design tut as that had no link to the PSD file. I decided to try this one and the link to the PSD file is broken hmmm really confused on whats going on here.

  • Andrew

    Were is the PSD file to slice lol

  • Pingback: PSD转HTML / CSS的38大教程转换 - 网页设计-中国领先的网页设计综合门户-专注设计.分享设计-我是设计师

  • Pingback: 21个转换 PSD 为 HTML 的教程 - 六月的瞬间 - HTML - Photoshop - 这是六月

  • http://www.thepixelwizard.com Gary Harding

    still can’t download the source files. DNS error. thank you

  • Dayan

    Great tutorial, But I need the psd so I could practice your great tutorial according to psd. Please provide the psd, this is the missing of this tutorial. It could be useless without providing the psd. Thanks

  • eric

    Great tutorial! watching the process from beginning to end is exactly what i needed. After years of avoiding css because it just looked to complex, this very straight-forward step by step made me realize the only thing I’ve been missing is a little bit of patience!

    Thanks again.

  • http://www.vivitech.co.uk/ Martin

    That was alot easier than I expected it to be, great tutorial!

    I used Paint.NET to edit my PSD files, and then optimized them for the web. It looks great on the new CSS3 browsers.

  • http://selena-club.ir Siavash Shahlaei

    Thank you so much for this tut!

  • http://www.downwithdesign.com Gareth Hardy

    Great in depth screen cast, thanks for sharing!

  • Pingback: Sinan Demirel » PSD to CSS/XHTML Öğretici Dökümanlar

  • Pingback: Web Design 43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程

  • Pingback: 17 More PSD To HTML Tutorials | psd2xhtmlonline

  • http://www.nonstopcars.com nonStopCars

    Thanks for the tutorial, we applied design services at the company website. But the result was not as expected, I was wrong in a certain step.

  • http://www.xhtml-design.com xhtml-design

    Great tutorial! Works great!

    Thanks very much! :D

  • Pingback: not | Çağlar Karakoç

  • Pingback: int2techn.com » 30 Free Video Tutorials for Learning Web Design

  • http://www.todayscontroversy.tk/ Abdul

    its useless showing half a tutorial, i know everyone has their own way coding but for those of us who are just picking up, its not worth it.

  • http://bluenettechnologies.com BlueNet Technologies

    For me 2nd video is slightly difficult. I always face problems in css. I use dream viewer instead of visual studio. I have never tried visual studio. Please let me know which is easier to use.

  • http://gadgets.robertlaustin.me Robert

    I watched your videos and wanted you to know that I found it extremely helpful. I did not realize how easy it was to take a PSD file and make it into a functioning website – not that I had much experience with PSD or anything Adobe (creating flash, etc.) for that matter, but that was mainly because I never had the knowledge or the experience before.

    I also found your methodology very useful. What I’m referring to is how you wrote out the website in HTML not worrying about layout until you finished and went on to work on the CSS.

    I learned A LOT by watching your video(s) on this topic and look forward to finding others that I have interest in learning.

    I want to reassure you about the production of the video. You put in just enough of the details that needed to be there and I read one commenter that said you went to fast because of their not knowing English as a first language … well, that is what the video pause and rewind features are for, in fact, I’m a native English speaker but I had to go back a few times, but that was so I could refresh a point that you had covered then when it came up while you were on a different topic, I wanted to look at the first point again.

  • http://www.psdtohtmlteam.com PsdtoHtml

    ya awesome information this convert software give best easiest way to end users really such a nice information.

  • Chelsea

    I cannot even begin to stress how spectacular this tutorial is. I am spending so much time with self teaching and reading books … seeing someone just lay out the process in front of me and hearing them explain it is so refreshing. So many things that I have been confused about were explained. Thank you so much for creating these.

  • Claiton

    Really good. The way you are explained.. It’s really helpful..

  • Pingback: 43个PSD to XHTML，CSS教程 | 夜阑小雨,飘洒在岁月的流沙。80后，爱网络，爱小说，爱研究。产品设计，编程代码，网络营销，原创文学，系统研究。

  • Pingback: 43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程 « 衣铎W+

  • Pingback: SD to CSS/XHTML DÖKÜMANLARI | Yusuf Tunç | Web Tasarim, Web Yazılım,Grafik Animasyon, Php, Asp, Eğitim Vİdeoları, Wordpress, Joomla,Asp.net Eğitim Hizmetlerini Vermekteyiz.

  • cuong

    good

  • Pingback: 25 Great PSD To HTML Tutorials Conversion

  • samiulo

    thanks for great tutorial.

  • Nunoscobar

    Great, great, great tut. Amazing! Estou agradecido, muito obrigada!

  • Pingback: 分享21个转换 PSD 为 HTML 的教程 | 站长站

  • http://lwww.likecpa.com/ David Ranh

    Great !!. very useful. Thanks so much for this

  • kamran

    thanks for great tutorial.

  • wondermaster

    thanks

  • Sreenivas

    Thank a lot, i have got idea how to define div’s and style’s for each page.

    • Sreenivas

      Thanks a lot.

  • http://twitter.com/TheMetroArtist Mr. Knox

    Omg! Amazing. What a great tutorial!

  • John Clark

    inspire post and helpful. this tool has really helpful for learn easy. thanks for a sharing this info..

  • http://twitter.com/FurryFun1 Carol Phillips

    Than

  • http://twitter.com/FurryFun1 Carol Phillips

    Thank you so much for taking the time to explain your thought process as you build a website! Incredibly helpful!

← Older Comments