30+ Best PSD to HTML/CSS Conversion Tutorials
Ibrahim Cheurfa
If you’ve found some troubles on turning your PSD designs into HTML/CSS, or you would like to learn some new HTML and CSS tips, this roundup is for you.
In this collection, you’ll find 32 Very Detailed Tutorials on Converting High Quality PSD Designs to HTML and CSS. These tutorials would help you to improve your coding skills and techniques.
1. The Design Lab: PSD Conversion
In this tutorial you’ll be learning how to code design lab layout tutorial.
2. Coding Up a Web Design Concept into HTML & CSS
In this walkthrough you’ll go through the process of converting the design concept from PSD document right through to completed HTML and CSS mockup, complete with clean and valid code, a few touches of CSS3 and some quick fixes to help out old IE6.
3. Coding a Web Layout in XHTML and CSS
In this tutorial we’ll be learning how to code a web layout. Hopefully it’ll be good practice for anyone who doesn’t really know how to use XHTML and CSS. Moreover, this tutorial acts as a great introduction to CSS and XHTML.
4. How to Design a Blue Marketing Company Layout in Photoshop
In this web development tutorial, you will learn how to code a web page template from a Photoshop mock-up from a previous tutorial called “Create a Clean and Professional Web Design in Photoshop” using HTML/CSS.
5. Coding: Corporate WordPress Style Layout
In this tutorial you will learn how to code the Corporate WordPress Style Layout into xhtml and css.
6. Digital Curriculum Vitae: PSD Conversion
This tutorial you’ll be walking through the process of coding your “Digital Curriculum Vitae” into a working HTML/CSS Template.
7. Design & Code a Cool iPhone App Website in HTML5
HTML5 is definitely the flavor of the month, with everyone in the design community getting excited about its release. In this tutorial you’ll get a taste of what’s to come by building a cool iPhone app website using a HTML5 structure, and visual styling with some CSS3 effects.
8. Design and Code Your First Website in Easy to Understand Steps
In this tutorial, we’re going to design and code our first website in simple, easy steps. This tutorial was written for the beginner with the hope that it will give you the tools to write your own standards-compliant websites!
9. Coding a Band Website Created in Photoshop
In Part 1 of this tutorial, you learned step-by-step how to design an awesome band website in Photoshop. Now in Part 2, you’ll learn how to take that PSD and turn it into clean, working XHTML/CSS code.
10. Coding: Design Lab TV Styled Layout
In this tutorial you will learn how to code the Design Lab TV Styled layout into xhtml and css.
11. Personal VCard Pt.2
In this tutorial you’ll be converting the vCard into a 4 page template.
12. How to Code up a Web Design from PSD to HTML
The tutorial covered the process of designing our site concept from sketch to finished PSD design.
13. How to Design and Code a Flexible Website
In this tutorial, you’re going to be designing and coding a simple blog-style web-page. You’ll pay special attention to making your design flexible and accessible by using clean and simple XHTML and CSS. This tutorial is aimed at beginners, and anyone looking to improve the accessibility of their web designs.
14. Create an Animated “Call to Action” Button
In this web design and development tutorial, you’ll get a walkthrough for creating a “Call to Action” button sprite in Photoshop as well as how to use jQuery to animate it. This tutorial is broken up into three sections: Photoshop, HTML/CSS, and JavaScript.
15. Code a Corporate Website from a Photoshop Design: PSD to HTML Tutorial
In this tutorial you will walk through the process of coding Corporate Website design in HTML and CSS.
16. Hosting Layout #2: Sitebuild
Learn how to code a Hosting Layout using a free PSD file.
17. How to Create a Lifestream of Your Online Activities
A lifestream is a simple website that compiles your online activity in real time and displays it in chronological order. These days all the cool kids have personal lifestream sites, so let’s take a look at creating our own website that pulls in a range of RSS feeds through SimplePie and displays them together in a cool design.
18. Design and Code a Slick Website From Scratch
In this second part of the tutorial, you will code your design into a standards-compliant, cross-browser xHTML, CSS, and JavaScript/jQuery layout. Fire up Coda, or your editor of choice… it’s coding time!
19. Minimal and Modern Layout: PSD to XHTML/CSS Conversion
In this web design tutorial, you’ll see a process for converting a Photoshop mockup to working HTML/CSS template. This is Part 2 of a tutorial series that will show you how to create the design, and then convert it to an HTML/CSS template.
20. How to Code a Clean Portfolio Design
Coding a Clean Portfolio Design into HTML/CSS.
21. Web Design Layout #10: Sitebuild
Today you’ll be taking through the process of converting web design layout into a one page template.
22. How to Convert a Photoshop Mockup to XHTML/CSS
Follow this walkthrough of coding up a graphical website layout into valid, standards compliant XHTML and CSS. Starting with the initial process of exporting the individual images from the Photoshop document through to building the complete page.
23. How To Build Your Own Single Page Portfolio Website
Let’s take a look at producing a single page portfolio concept in Photoshop, constructing the page in XHTML/CSS and adding some fancy functionality with jQuery.
24. How to Code a Grunge Web Design from Scratch
In this step-by-step web development tutorial, you will learn how to convert a beautiful and eye-grabbing grunge theme web layout–created from Photoshop in a previous tutorial–into a working HTML and CSS template.
25. Dark Layout #2: Sitebuild
In this tutorial you’ll be showed how to slice and dice the dark layout #2 PSD into a working template.
26. From Photoshop to HTML
You will learn how to make a generic business template from the Photoshop file that is included with this tutorial.
27. Coding a Clean & Illustrative Web Design from Scratch
In this comprehensive and step-by-step web development tutorial, you will learn how to convert a Photoshop mockup of a professional web layout design that features an illustrative landscape header into a standards-compliant XHTML/CSS template.
28. My PROject Pt.2: PSD To HTML
Today you’ll be converting your PSD into a one page working CSS template through this tutorial.
29. Coding a Clean Web 2.0 Style Web Design from Photoshop
In this web development tutorial, you’ll learn how to build a web page template from a Photoshop mock-up from a previous tutorial called “How to Create a Clean Web 2.0 Style Web Design in Photoshop” using HTML/CSS and the jQuery library.
30. Web Design Layout #9 SiteBuild
In this tutorial you’ll learn how to code the web design layout #9 PSD.
31. Portfolio Layout #10: Learn To Code It
Coding tutorial of the portfolio #10 layout. In this tutorial you’ll read the steps to take in slicing and coding the layout. Before attempting this tutorial i highly suggest you create the layout before hand and have it ready
32. Building a Website (2 of 3): HTML/CSS Conversion
In part 2 of this series, you begin the HTML/CSS conversion of the Photoshop mockup you created in part one.
For Further Reading:
Did you enjoy this article and found it useful?
Get even more from us:
Jada Gibson
Posted 118 days ago 21It’s appropriate time to make some plans for the future and it is time to be happy. I have read this post and if I may I desire to recommend you some interesting things or suggestions. Perhaps you could write subsequent articles referring to this article. I desire to learn more things approximately it!
PixelCrayons
Posted 203 days ago 20Dear Admin,
I am looking a link on your blog. so if you are interested please reach me here : pixelcrayons319@gmail.com
My blog is here : http://xhtml-pixelcrayons.blogspot.com/
http://pixelcrayons.blogspot.com/
Regards,
PixelCrayons
Lisa Austin
Posted 206 days ago 19I went through a lot of posts and articles, finally settled on this one. You have different examples from other’s. I got bored of viewing the same samples everywhere. I wishes to see some different websites samples to get inspiration from. And your’s worked wonderfully for me. I am looking forward more such web designing tutorials. Keep up your hard work. We appreciate it !!
simon
Posted 231 days ago 18cool post, a lot of effort put into it
topnichekeyword
Posted 278 days ago 17Nice tutorial, and very easy and very useful for newbie. I learn from it thanks author.
Mat
Posted 294 days ago 16Thanks for the review! 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.
Sales
Posted 422 days ago 15I am working on a pet project which does it automatically, or the best it can. Just upload your psd and it is done in seconds. http://www.jadii.com and yes it is free
Steve Wauh
Posted 427 days ago 13yes, It is very nice collection of web sites to learn web design.thank you very much. for this publishing
http://www.psd2htmlslice.com
Steve Wauh
Posted 427 days ago 13yes, It is very nice collection of web sites to learn web design.thank you very much. for this publishing
http://www.psd2htmlslice.com
steven smith
Posted 524 days ago 12tanx 4 nice collection of tutorials
Cristian
Posted 601 days ago 11Súper buenos estos recursos… los tendré muy en cuenta para aprender mucho más sobre todo este tema!!
Cody Swann
Posted 620 days ago 10Thanks for putting these together. These are great tutorials.
.-= Cody Swann´s last blog ..HTML 5: It’s the little things =-.
Matthew Heidenreich
Posted 623 days ago 9great looking list. I actually started to add coding tutorials on my site as well.
.-= Matthew Heidenreich´s last blog ..PSD to XHTML: Create a Chalkboard Style WordPress Layout =-.
SocialMediaIcons
Posted 624 days ago 8Thank you!
Useful list :)
.-= SocialMediaIcons´s last blog ..RSS Cheese – A free icon set you can taste =-.
Auré
Posted 624 days ago 7Great list ! Thanks :)
David O'Trakoun
Posted 625 days ago 6Wanted to plug my link here, which is more about the actual PSD to HTML than these most of these articles (which are mostly just “slice, here’s the html, here’s the css”)
http://hokuten.net/2010/tips-faster-psd-html-conversions/
Web host coupons
Posted 625 days ago 5This is what I need :)) Omg, thanks for this post
Simon
Posted 625 days ago 4Thanks for your work, here is a tutorial about converting PSD to online template builder, which can output it as XHTML, WP, Joomla and Blogger, may be helpful too!
Alex
Posted 625 days ago 3Ai caramba,
This is beautiful !
:woohoo:
Thank you !
Matt
Posted 625 days ago 2Pretty cool group, thanks for compiling!
.-= Matt´s last blog ..7 Deadly Sins of Small Business Web Marketing =-.
Chinku
Posted 625 days ago 1Hey really a great list.. Hope it will make me an expert…
.-= Chinku´s last blog ..Free House Template =-.