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 →
  • gendale

    I can’t find a site design PSD file anywhere.

  • http://www.kapucino.org leksa

    Nice!

    Maybe the next slicing tutorial, could use some CSS framework. Like Blueprint, 960 or 37signal :)

  • The Grooby

    Excellent tut! I’m breaking into the world of CSS and Web design and this has helped part the fog in my brain on some aspects. Thank you very much.

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

    That’s because I didn’t include it. You can get it off ThemeForest in a week or so.

  • Skyfred

    This tutorial is juste P-E-R-F-E-C-T !

    Thx for your help !

  • http://www.awmcreative.com Aaron

    I can tell you how to convert a PSD into XHTML … simply write the code yourself from scratch while using your mockup from Photoshop as a reference. Simply the best way to do it.

    I was disappointed to see that the DEMO doesn’t look properly in IE 6. I also noticed that the rounded corner effect must have been achieved my using CSS 3…which isn’t supported in many browsers yet, so I wouldn’t recommend using some of those attributes at this time.

  • http://www.propertyloans.co.za/ Gino

    This tut is just superb. Bookmarked!

  • gendale

    when u select several elements of code and u move them let and right. how do you do that?

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

    @gendale – I adjust the positioning of the parent element – meaning the wrapping “div” tag. Think of divs like a bucket. Anything between the div tags are placed in our “bucket”. So, to move everything, we only need to adjust the positioning of the div. Then, everything inside of it will adjust accordingly.

    Hope this helps!

  • Pingback: Javascrips for Gallery « Websitetutorials’s Blog

  • Pingback: Enlaces rápidos (12-11-08) : Notitodo

  • http://joomlapanel.com Joomlapanel

    Excellent.. already bookmarked!

  • http://www.honourchick.com honour chick

    easy to understand tutorial. :)

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

  • Pingback: Links of Note - In the Woods

  • Pingback: How to Convert a PSD to XHTML | d0x | web development repository in richmond, virginia

  • Pingback: psd to xhtml | Thendenze

  • http://www.nindee.com Nindia

    thanks a TON!

  • Kaloyan Yankulov

    Great screencast, Jeffrey! I’m already working like a XHTML slicer but I’m sure this tutorial is very helpful for everyone new in making the .psd into living file for the browser. Thumbs up for the good work! ;)

  • Pingback: gearhed.com » Blog Archive » Links of Note

  • Jose Fares

    I’m very thankful! is very easy for each way

  • Pingback: Top 10 Tutorials for Converting PSDs to HTML/CSS

  • Pingback: 顶尖10个把psd转换成html/css的教程 | Soberly Dream

  • http://seye.blogspot.com Seye

    This is really nice! Is it possible to have this tutorial in the written form?

  • BobSox

    I can’t seem to view the CSS video over 36 minutes :-(

  • http://coderelax.com Filipe Moreira

    Thanks a lot Jeffrey! Very good tutorial. It really helped me.

  • http://www.xhtmlweaver.com Nelson

    Very good article, also, if you dont want to mess your hand you can hire professional PSD slicing service to get job done.

  • http://billyt3.com Billy T

    Great tutorial.
    I don’t know if someone said this already, but when exporting the images in photoshop for web, you can select “user slices” instead of “all slices” in the save to dialog box dropdown menu, to export only the slices you did manually…if you wanna save 10seconds. ;)

  • Pingback: ART178: Intro. to Web Design » Blog Archive » CSS Positioning

  • http://leventhan.wordpress.com Leventhan

    Incredible videos. Great job, Jeffrey.
    Hope there’ll be some more videos coming along in the future. :D

  • http://online-diccionario.com Ionel Florin Patrichi

    Hi all,
    I wanted to THANK you for this great tutorial.
    I definetely learned more then i’ve expected.
    Keep it Up.
    Cheers from Spain.

  • Pingback: Enlaces rápidos (12-11-08) | Tecnolink Informática Castellón

  • Pingback: 30+ Eye-Opening Web Development Screencasts - NETTUTS

  • http://www.popitin.com Pete Dooley

    I couldn’t stop watching and loved that you left in the little mistakes and hunted them down… That is a bonus. Sometimes it is a bit intimidating watching tutorials when the tutor is a to ready to impress.. You impressed with your thoroughness. Thanks

  • Kris

    Best tutorial on this topic i’ve ever seen! Thanks a lot!

  • http://www.flickr.com/photos/enamonio Manuel Minino

    Just watch the first half of the first video,and i have to say congratulations!!! I’m kind of a newbie on this whole html css thing, and never before watched someone actually working it out… and never watched a video tutorial without FALLING ASLEEP after the first 45 secs!! And i don’t have any coffee near…(just fruit smoothie lol) again, CONGRATULATIONS, so far… i’ll post a final comment when i finish the whole stuff. THNX!

  • http://www.davidpcrawford.com David P Crawford

    Good Stuff. Watched all of them. I appreciate the help!

  • http://www.flickr.com/photos/enamonio Manuel Minino

    well.. well… i have to say… i switched from my mac to my pc (just to check if the thing works on IE) and the DEMO doesn’t look good at all in IE6

    I’ll post a screencap later.

  • http://www.swayhost.com MixOughT

    the video does not loading ….

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

    @Manuel- That’s weird. I fixed that issue already. The demo must not be picking up my IE6 stylesheet – maybe a typo in the reference. I’ll get that taken care of today.

  • http://deebong.wordpress.com Raj

    Excellent tutorial m8. Thanx a lot!

  • Charles

    Wow Good job !

    I needed this refresh :P

    One things : Where did you took your icons images ?

  • Pingback: links for 2008-11-24 « sySolution

  • Pingback: What Designers must know and learn – PSD into XHTML & CSS | CSS | Lirent.net Hacks | News, Reviews, Resouces and Hacks!

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

  • Brian

    Does anybody tell you you sound like Steve Carell? Helluva tutorial, man! Kudos to you!

  • Serge

    Great stuff.
    Thank You! :)

  • Pingback: Pushing Photoshop to the Limit: 13 Most Advanced tutorials | virology.tv

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

    @Brian – No, never. :-) He’s twice my age.

    But he is the star of my favorite show on television. So maybe it rubbed off.

  • asdf

    THX

← Older Comments
Newer Comments →