Top 10 Tutorials for Converting PSDs to HTML/CSS

Many web designers start a new project by designing a mockup in Photoshop before actually coding the website. For a designer who is comfortable with Photoshop and with this process, less time can be used to create the end result.

For those designers who have not mastered the process of converting a design into a fully coded website, these 10 tutorials are excellent learning resources. (For tutorials on creating layouts in Photoshop, see 35 Tutorials for Creating Website Layouts in Photoshop).

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

PSD to HTML Tutorial

Collis Ta’eed published a post about five months ago at NETTUTS that takes a very detailed look at the process of coding a site with a PSD file as a starting point. This is a site that Collis designed in Photoshop and the post goes through every step of getting it to the point of being a working site, with all the CSS and HTML coding provided.

Build a Sleek Portfolio Site from Scratch

PSD to HTML Tutorial

A few months prior to the previous post, Collis also published this exceptional tutorial. This post was the 2nd part of a series that included a tutorial on PSDTUTS for creating the design in Photoshop. The two posts form one of the most useful sets of tutorials for any aspiring web designer, or other designers who could use some pointers for the process of starting with a design in Photoshop.

Encoding a Photoshop Mockup into XHTML and CSS

PSD to HTML Tutorial

Chris Spooner also did a similar two-part series of posts for creating a design in Photoshop and then coding the site with XHTML and CSS. While Collis showed us how to code a portfolio site, Chris focuses his tutorial on blog design.

How to Convert a Photoshop Mockup to XHTML/CSS

PSD to HTML Tutorial

This tutorial is written by Chris Spooner which goes into some detail about the conversion process. It focuses a lot on XHTML which is slightly different than HTML5. But it’s still a fantastic guide to get started and learn some pointers along the way.

Design and Code a Slick Website from Scratch

PSD to HTML Tutorial

This is a multi-part tutorial which was published on NetTuts+ a few years back. The code examples are fantastic and it’s one of the better solutions to help out web developers. Also the writing is fairly in-depth which means you have the chance to learn intricacies about coding website layouts in general.

How to Convert a PSD to XHTML (screencast)

PSD to HTML Tutorial

Following the positive response to Collis’ tutorials listed above, NETTUTS put together 3 screencasts to help make the process a bit easier to follow. For many people, the video tutorial can be more helpful. If this is the case for you, this post can be extremely valuable.

Converting a Photoshop Mockup (screencast)

PSD to HTML Tutorial

Chris Coyier of CSS-Tricks put together a three-part series for converting a mockup into a working site. The link goes to the CSS-Tricks video page, scroll down until you see video numbers 12, 13, and 14.

Code a Vibrant Professional Web Design with HTML5/CSS3

PSD to HTML Tutorial

Unlike many other tutorials, this one published on Design Instruct focuses specifically on HTML5. The standards have only been around a few years but they continue to evolve as web browsers are growing in support. Note this tutorial is a follow-up from an earlier article which explains how to create the PSD in Photoshop.

Creating a CSS Layout from Scratch

PSD to HTML Tutorial

This tutorial from Subcide starts with a basic design and takes us through the steps of coding the site. Along the way there are plenty of code samples and screenshots as the example site progresses.

From PSD to CSS/HTML in Easy Steps

PSD to HTML Tutorial

This is a four-part tutorial series from CSS How To (Part 1, Part 2, Part 3, Part 4). The multi-part series helps to break it up into chunks that are easier to handle one at a time.

For design and development tutorials please see:

1 shares
Stephen Snell is the owner and editor of Vandelay Design, a popular design blog.
  1. November 17, 2008

    I was thinking to create something just like this article – but again..You did it first..:) anyway – bookmarking, very useful.

  2. Pingback: PSD a HTML/CSS — Tablosign

  3. November 17, 2008

    I have been searching for all this exact information. Thanks for putting it all in one place.

  4. Pingback: Illuminations » Top 10 Tutorials for Converting PSDs to HTML/CSS

  5. EricB
    November 17, 2008

    thank you very much sir for patiently collecting these tutorials and sharing it. This would really help out beginners like me. keep up the good work!

  6. Pingback: Ethan’s Blog » Blog Archive » :)

  7. Pingback: AndySowards.com :: Web Development Nerdy Daily Links For 11/18/2008 | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?

  8. Pingback: Robin’s Blog» Blog Archive » Converting a Photoshop PSD File to an XHTML & CSS Web Site

  9. Pingback: TUTORIAIS CONVERTENDO PSD PARA HTML CSS | Portal Mie Magazine

  10. Pingback: TUTORIAIS CONVERTENDO PSD PARA HTML CSS

  11. bayyou
    December 4, 2008

    Very useful article, this is just like what i need. just couple of minute search and find this blog. thanks

  12. Pingback: Webzappr - daily « My Random Web Snippets

  13. Pingback: 50 Brilliant Design Post of 2008 in 23 Categories + 40 Reader Submitted Posts | The Design Cubicle

  14. Pingback: IT Magzine : Best resources for developers: 2008+ tips, tricks, scripts and sources

  15. Pingback: Bookmarks for Enero 4th from 10:44 to 12:00 | FACIL TUTORIALES

  16. January 5, 2009

    There are over 20 video tutorials at http://psd2cssonline.com all about converting PSD files to CSS/XHTML.

  17. January 13, 2009

    Thanks for the list. Again, really useful stuff. Never got that whole W3 verified thing till now :).

  18. Pingback: links for 2009-02-04 | .:The worst kind of thief:.

  19. February 19, 2009

    Always helpful to see how others do things. Funny how we each do things a little bit differently, and there’s always something somewhere we can tweak to make our own processes better. Keep ’em coming!

  20. Pingback: links for 2009-03-08 « Mandarine

  21. Paul Yve
    March 19, 2009

    In “Tutorial: Coding a Layout” my Avast make a virus detected

  22. Pingback: Best of 2008 for developers: 2008+ tips, tricks, scripts and sources! | 赫伯特.皮特

  23. Pingback: Top 10 Tutorials for Converting PSDs to HTML/CSS « Kannect’s Blog

  24. raheel
    April 18, 2009

    very well written and organized tutorials…its indeed a great help for beginners like me to keep up the interest and at the same time learn this important subject.

  25. Pingback: 50 Brilliant Design Articles of 2008 in 23 Categories + 40 Reader Submitted Posts -Reblog | Remarkable Things

  26. June 22, 2009

    Kudos, Kudos,, thank you, you just made my life a lot easier.

  27. AjnabiZ
    July 13, 2009

    Hello
    This is one of the best resources for a web designer

    Are there any such list(tutorials) for converting HTML to CSS ?

  28. August 28, 2009

    Thanks for these great tutorials, these are really helpful. We have also collected a resource of 20 best PSD to XHTML/CSS tutorials. You can check the list at http://www.bestpsdtohtml.com/20-best-psd-to-xhtml-css-tutorials/

  29. September 10, 2009

    It is helpful tutorials on converting pad to html/css conversion.. thanks for sharing

  30. Pingback: Best of 2008 for developers: 2008+ tips, tricks, scripts and sources!

  31. October 18, 2009

    very well prepared list… even we are the one who are providing online services for psd to xhtml.

    Thanks & Regards,
    Designing Studios.com

  32. October 23, 2009

    great tutorials . Thanks for sharing. Perfectslice provide most reliable psd to html services.

  33. October 26, 2009

    Good compilation of the best PSD to HTML/CSS tutorials. Thanks a lot for sharing.

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

  35. Pingback: CaoInteractive Blog | Graphic & Web Design » Blog Archive » 75 PSD to HTML Resources for Web Designers

  36. November 30, 2009

    “Great compilation! Thanks a lot for putting it all in one place, but there is another one to add to your list.

    http://www.xhtml-css-code.com/html/things-to-remember-while-coding-a-website-to-make-it-search-engine-friendly

    Though, not exactly a psd to html conversion article, but one must keep these tips in mind while coding a PSD into search engine as well as user friendly web layout.

  37. December 8, 2009

    Very helpfull PSD to HTML tutorial list for beginner like me. Thanks

  38. January 11, 2010

    I like video tutorials. Thanks for that!

  39. January 20, 2010

    Thanks for great tutorial. You done easy my job!

  40. mansour
    February 21, 2010

    this is realy great stuff …

  41. March 4, 2010

    Very nice work. This compilation would be very handy for a lot of new web designers out there. Great job. Keep it going….

    All the best,
    3TurtleStudios

  42. April 8, 2010

    Hello, very nice collection.I liked it, my favorit it is “Porsche Web” from HV Designs. thank you

  43. Mathew
    April 22, 2010

    Very nice tutorials. However, right now I prefer doing my html/css coding with http://idohtml.com html slice service.

  44. May 30, 2010

    I just did a PSD to xHTML on my site, gotta love these.

  45. May 31, 2010

    nice coleection

  46. July 8, 2010

    Thanks for great tutorial. You done easy my job!

  47. July 24, 2010

    Great Resource!

  48. July 27, 2010

    Great Resource! Anyone looking for Front-end web development help? We can help you any psd to html/css and psd to wordpress jobs 🙂

  49. August 14, 2010

    not ready to make nice

  50. August 19, 2010

    Nice tutorials, will help alot of newbies to learn the best and profesional stuff.

  51. August 21, 2010

    Great article, a bunch of great tutorials in one post, awesome thanks!

  52. September 3, 2010

    Making your XHTML/CSS from PSD is a great skill to have and these tutorials will help you get that skill to an advanced level.

  53. October 21, 2010

    This is a pretty decent website. I have been back repeatedly during the last seven days and want to join your feed by using Google but cannot understand the way to do it very well. Would you know of any guides?

  54. October 25, 2010

    This is a excellent website. I have already been back several times within the last seven days and want to join your rss feed making use of Google but can not figure out how to do it very well. Would you know of any sort of guides?

  55. October 26, 2010

    i am always looking for cheap car sales show in our area and i always find a bargain.'”

  56. November 16, 2010

    Convert PSD do HTML5, PSD to xHTML CSS3

  57. November 25, 2010

    Am really excited to start working the front end of the design process..ive been a dev for some time, and though I’m pretty well versed at HTML/CSS, however typically am the recipient of the design turned into HTML.

    Thank you so much

  58. We are a website designing company in India. We are using this technologies requirement of client.

  59. January 12, 2011

    “XHTML Champs” is a business unit of Acedezines, a well-established web designing company with clear business orientation and strong creatives. Ace Dezines has over fifty satisfied clients across the globe from different verticals such as animation, software, pharma, e-learning, construction and nutraceutical companies.

    For More Details Visits to our site: http://www.xhtmlchamps.com

  60. W. Luis
    February 3, 2011

    The best PSD to HTML service we worked is fresh4web.com.
    Best terms and prices.

  61. February 5, 2011

    These are all great psd to html conversion websites. The best kind of company is one that gets personal. So I would get in touch with them and see how to interact at a personal level.

  62. February 11, 2011

    kinda enjoyed the article you wrote actually. it just is not that simple to discover great text toactually read (you know.. READ and not just browsing through it like a zombie before going to yet another post to just ignore), so cheers man for not wasting any of my time! 🙂

  63. February 18, 2011

    keep up the nice work on the site. I like it. Could maybe use some more updates more often, but i am quite sure that you have got other things things to do like we all do. 😉

  64. March 3, 2011

    this page is interested. thanks for information.

  65. March 18, 2011

    this article is a very good one. I can ramp up my new comers using this set of articles …thanks

  66. April 13, 2011

    hmm nice 1ne …i too wnaa post some tutorial from psd to html …

  67. Matvey
    April 29, 2011

    For simple designs I would also recommend to try out a service of automatic psd to html layout conversion – http://psd2htmlconverter.com/en/ . I’m pleased with results I can get with it.

  68. May 4, 2011

    Needed to post you this little note in order to say thanks over again for those striking views you’ve documented on this page. This has been certainly incredibly generous with people like you to deliver without restraint all that many individuals could possibly have supplied as an e book to earn some bucks for themselves, most notably considering that you might have done it if you decided. These strategies in addition acted like a good way to fully grasp that some people have a similar keenness just like my own to learn a whole lot more concerning this condition. I think there are a lot more fun times in the future for many who look into your site.

  69. May 16, 2011

    I am curious to find out what blog platform you happen to be using? I’m experiencing some small security problems with my latest blog and I’d like to find something more risk-free. Do you have any recommendations?

  70. June 13, 2011

    This is really good information I have visited this blog to read something fresh and I really admire you efforts in doing so.

  71. July 2, 2011

    Thanks for useful info. Bookmarked.

  72. July 15, 2011

    Thanks for devoting your time and merging all the info at one place. This was really helpful. Building up website from scratch in Photoshop can be a real tough job, but the guideline you framed makes it much simpler. And the tutorials you lined up are really genuine and of great help. Will be a great resource for the beginners. keep up the good job.

  73. July 21, 2011

    Good information about the Web development wensites

  74. July 25, 2011

    Hi, great article / post, thank you! I’ve been searching for BOOKS (not ebooks or online tutorials) but actual paper-and-ink books on the topic of learning PSD to HTML conversion; but can’t seem to find any. I did find ONE, but it was from about 2001 when the web world was so very, very, very different. I find I am more patient (and my eyes don’t hurt so bad) when reading a regular book. If you can recommend any, please mention those too! THANKS! 🙂

  75. August 1, 2011

    There is a step by step procedure to convert PSD into perfect XHTML/CSS. THe first step is creating a design in Photoshop and then coding the site with XHTML and CSS.Great info!

  76. September 13, 2011

    These are all great tutorials. If you have the time to invest into your self to become self sufficient then I think you should use these!

Leave a Reply

Your email address will not be published. Required fields are marked *

Top 10 Tutorials for Working with WordPress Comments