10 awesome PSD to XHTML tutorials

26 Comments

By Jean-Baptiste Jung

Many PsdVibe readers often ask me how to transform a psd file into a website. The whole process is generally called XHTML slicing and it’s a very important step in webdesign. In this article, I have compiled 10 PSD to XHTML tutorials for you.

Author:

Jean-Baptiste Jung

Category:

Resources

How to Convert a PSD to XHTML


Source

Creating a CSS layout from scratch


Source

From PSD to CSS/HTML in Easy Steps – Part 1


Source

From PSD to HTML, Building a Set of Website Designs Step by Step


Source

How To Create a Horizontally Scrolling Site


Source

Converting a Design From PSD to HTML


Source

The Design Lab: PSD Conversion


Source

Web Design Layout #9 SiteBuild


Source

Convert a Photoshop Mockup to XHTML/CSS


Source

Coding a Clean Web 2.0 Style Web Design from Photoshop


Source

26 Responses

  • Darren

    Do any of them deal with cross browser compatibility with the CSS and quickly making the site work with all browsers?

    July 21st, 2009

  • Jean-Baptiste Jung

    @Darren: Honestly, I don’t know. I think they deal with all recent browsers. Who cares about IE6 anyways? ;)

    July 21st, 2009

  • Honour Chick

    very useful tutorial. this will help me alot with slicing.

    July 22nd, 2009

  • TheFamilyMan

    I know horizontally scrolling sites are all the rage these days but they still annoy me. That said, there are some great designs in this article.

    July 22nd, 2009

  • AB Web Design, LLC

    This compilation of tutorials is just fantastic. Every time I visit your site I find myself spending at least an extra hour browsing the web. Keep it up and I will never get anything done…lol.

    Cheers,

    Chris

    July 22nd, 2009

  • Mandy

    There is something very satisfying about turning a flat psd and turning it into a fully coded web page. Getting your code to fully emulate the psd can be tricky but when you achieve it – it can be very rewarding!

    July 23rd, 2009

  • Frank Lynch

    A very smart approach to explain the things,I like your step by step tutorial,although it has given me some major insight in my own work,till now i use to think i know it all but nopes..i ain’t know it all yet…:)

    July 23rd, 2009

  • Vinoth

    @Jean Still people are using IE6 lol

    I’m working in a big IT Company here they are still using IE6

    July 25th, 2009

  • Mirko

    Just thumbed-up this article on StumbleUpon for not caring about IE6.

    July 30th, 2009

  • psd me

    I have been outsourcing all my design work(psd and psd2html), for $280 a page. I should really learn the psd 2 html thing myself and save me some money

    July 31st, 2009

  • SJL Web Design

    Great collection, this will be perfect for one of my friends who is trying to learn how to code a site.

    July 31st, 2009

  • Web Design Warwick

    Thank you for putting this together, some of the tutorial look really detailed, especially the 2nd net tut’s one.

    August 5th, 2009

  • Joanie

    I’ve been wanting to design a custom site for a while, and these tutorials are fantastic. I’ll be avoiding the horizontal scrolling though — I hate sites like that.

    August 7th, 2009

  • Diane

    Amazing! but some tutorials don´t give the psd files for free.

    August 17th, 2009

  • Web Design Beach

    I am little bit late for this post, but i am sure it’s never late to be grateful for such a great list. Thanks a lot for the share.

    August 17th, 2009

  • discount web design

    thanks for sharing. love it.

    August 28th, 2009

  • Cezar

    1st time visiting this website and guess what.. it’s my #1 fav. Bookmarked and to be recommended!. Keep up.

    August 28th, 2009

  • Fuad Ahasan Chowdhury

    thats amazing to get all of these tutz under a roof. :) Thanks a lot

    September 1st, 2009

  • Calucha

    Great Job!
    Where can i get the HelveticaNeue Font?
    Searched everywhere and dont found it :S

    If possible send it to calucha[at]arhey.net

    September 2nd, 2009

  • kamal chaneman

    Great tutorial, it’s very usefull…keep up the good work man :]

    October 1st, 2009

  • bob

    I have photoshop but never have gone all the way through and cut up a graphic design to html. Now with these resources I think it is time to go for it.

    October 8th, 2009

  • designfollow

    thanks.

    Great tutorial.

    October 11th, 2009

  • Sumeet Chawla

    Nice resource collection.. But it was surprising you didn’t include the video screen cast by Chris Coyier from CSS-Tricks.com

    October 25th, 2009

  • Ruddy

    I am searching for some perfect PSD to XHTML tutorials in the internet and I found this site. This has helped a lot and I thank you for posting them all. I really need it because I am about to take a modular course on programming like PSD to XHTML.

    Thanks a million buddy!

    January 14th, 2010

  • jeprie

    wow. nice tuts, i gotta try one of this stuff.

    February 5th, 2010

  • jessica

    gret info! thanks for sharing this!

    February 26th, 2010

Leave a Comment

Name (required)

Mail (required)

Website

Message

 

Sponsors