30 PSD to HTML Tutorials

There are many tutorials available on the Internet explaining how to convert PSD to HTML, ready for a completed web design. This post brings together 30 PSD to HTML tutorials, some tutorials explain the details of the conversion process, while others are aimed at specific website themes. But all of the articles are useful and require knowledge of Photoshop, XHTML, CSS. 

1. Convert 1stDelicious Portfolio Layout From PSD to HTML [Very Detailed]

In this article you will learn how to convert 1stDelicious: A Simple Clean Portfolio Layout from PSD to HTML in a detailed step by step tutorial. You will learn how to create this layout by using a CSS framework, CSS Sprites and CSS3 into a valid HTML/CSS and cross browser compatible layout. I hope that you can go through this tutorial and learn a few techniques that will help you in future projects.

2. Converting a clean magazine-style PSD template to HTML/CSS

This tutorial will be an overview, with some tips and advices, on how to convert a psd to HTML; it won’t be a complete and specific explanation on HTML tags, CSS properties and techniques but a look to my entire process of getting from Photoshop the HTML layout.

3. Code a Modern Design Studio from PSD to HTML

Today we’re going to convert the Modern Design Studio PSD Template created by Tomas Laurinavičius a few days ago to a clean and working XHTML/CSS code. You can download free PSD from The Modern Design Studio PSD Template.

4. PSD to XHTML: Simple & Cloudy Portfolio Layout

In this tutorial you will learn how to convert the Simple & Cloudy Portfolio Layout PSD to XHTML. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the source files are available for download.

5. From PSD to HTML the easy way – Using Ultimate CSS Framework

This tutorial will teach you how to transform your PSD files to HTML with a very easy method using Ultimate CSS Framework.

6. From PSD to HTML: Building a Set of Website Designs Step by Step

Today I’m going to take you through my entire process of getting from Photoshop to completed HTML. We’re going to build out a set of 4 PSD mockups of a website that eventually will become a WordPress theme. It’s a massive tutorial, so if you’re going to follow through to the end, make sure you have a few hours to spare!

7. Creating a Simple Photo Site — From PSD to HTML/CSS (Part 2)

Hello, welcome to the second part of tutorial creating simple photo site. Before following this tutorial, make sure to read the first part, designing process in Photoshop. In this tutorial we will take the design form Photoshop and code into a working webpage.

8. Code a Vibrant Professional Web Design with HTML5/CSS3

In this second part of this web design tutorial series, we will convert the vibrant and professional design we designed in Part 1. We will use HTML5 and CSS3, as a proof of concept and as a way for you to learn these upcoming W3C standards through practice. We will also use the 960 Grid System to speed up development time.

9. Create a Minimal Resume Website Design in Photoshop

In this tutorial you will learn how to create a minimal resume website design in Photoshop. We will be using simple techniques to achieve clean and professional final result. You will discover how to create simple detailed background, trendy 3D elements also you will see how to effectively stylize web typography.

10. PSD/HTML Conversion: Elegant and Simple CSS3 Web Layout

This is Part 2 of tutorial series. The first part dealt with creating a web design mockup of an elegant and simple blog web design. You should do Part 1 before attempting this tutorial so that you to gain the most benefit.

11. How to Code a Clean Minimalist HTML CSS Website Layout

This tutorial doesn’t require slicing in Photoshop, because it will cover only the most basic topics and is for beginners.

12. Slice and Code Your PSD to HTML and CSS using Dreamweaver

Here I’m going to tell you some secrets. I hope these would be very rare and by using these technique anybody can become Web Designer. I’m going to tell you how you can convert your Template into Website by using Slice and Dice technique in CSS. It will be very long tutorial, because I’m going to convert a whole project into Website. So get ready for that.

13. PSD to HTML/CSS: Design, Slice & Code!

Learn how to design, slice and code your own Photoshop layout in Photoshop and Dreamweaver.

14. Freelance CV: PSD/HTML Conversion

Good evening everybody, today I’ll be walking you through the process of coding your “Freelance CV / Resume” into a working HTML/CSS Template. Lets get started.

15. Convert a 3D Portfolio Dark Layout From PSD to HTML [Very Detailed]

In this article you will learn how to convert a 3D Portfolio Dark Layout from PSD to HTML in a detailed step by step tutorial. You will learn how to create this layout by using a CSS framework, some CSS styles and Javascript into a valid HTML/CSS, cross browser compatible and dynamic layout. I hope that you can go through this tutorial and learn a few techniques that will help you in future projects.

16. Brilliante Blog Layout – Coding The PSD File Into CSS and HTML

In this tutorial, we’ll be revisiting the Brillante blog design, covering the PSD slicing, HTML/CSS coding, custom fonts embedding and some handy cool tips to improve your website performance.

17. Code a Textured Outdoors Website in HTML & CSS

Last week we went through the process of designing a detailed website design for Pinewood Forest. This week we’ll code up the Photoshop concept into a working web page. See how the design is exported into individual images, how the HTML skeleton is put together and how the CSS coding replicates the styling from the concept.

18. PSD/HTML Conversion: Code a Clean Business Website Design

In this PSD/HTML conversion tutorial, we will take a PSD web design template that I showed you how to construct in a previous tutorial and turn it into a functional HTML/CSS template.

19. Touch The Future: Create An Elegant Website With HTML 5 And CSS3

In his article on Design Informer titled “Web Design Iterations And Algorithm,” Adit Gupta explains how we can approach a web design work and how a website project can be processed in a number of iterations following a main algorithm. Well, generally it’s just how Adit has described.

20. How to Code up a Web Design from PSD to HTML

A couple of weeks back we went through the process of creating a gnarly snowboarding themed website design concept in Photoshop. The tutorial covered the process of designing our site concept from sketch to finished PSD design. Now, let’s take the design to the next step and code up a complete mockup in HTML and CSS, ensuring our code is semantic and standards compliant. We’ll then add some finishing touches with a spot of jQuery.

21. Code an Email Newsletter from PSD to HTML

Last week we learned how to go about designing HTML emails. This week we’re going to turn the PSD into a functional HTML email. To code a HTML newsletter you can either code it from scratch, or use an already existing template. I personally like to use an existing template, especially the ones supplied by Mailchimp simply because they have been tried and tested and they don’t ‘break’. Whichever way you decide to go about coding HTML emails you need to remember the following:

22. How to create a professional and clean web layout (with PSD-to-HTML conversion)

Our passion for web stuff grow day by day, so today we’ll learn how to create a highly-professional and clean web layout. We will see that using gradients, the noise filter and some subtle 1px lines to achieve depth, we can easily create a great web design for a wide range of uses.

23. Designing a highly-professional website, from the sketch to the code

Making great websites is like designing excellent buildings. A good web designer approaches the planning of a website like a worthy architect starts a new projects for a physical structure. The art and science of designing ‘something’, a website or a building, includes technical, aesthetic and functional criteria and all structures created through a balanced mix of usability and creativity will be a little piece of art.

24. WaterColored Portfolio Coded, Free CSS Template With PSD to HTML Tutorial

This is the second part of WaterColored Web Portfolio tutorial. In case you missed the first part of this tutorial, read Create a Nice Web Portfolio Design with a Watercolored Background in Photoshop to learn how to make a web layout in PhotoShop. With this post we’ll learn how to realize a valid, standards compliant XHTML and CSS home-page from PSD template. So, now it’s time to write code!

25. Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3

HTML5 is the future of web development but believe it or not you can start using it today. HTML5 is much more considerate to semantics and accessibility as we don’t have to throw meaningless div’s everywhere. It introduces meaningful tags for common elements such as navigations and footers which makes much more sense and are more natural.

26. Create a lovely textured web design from Photoshop to HTML/CSS

In this tutorial we are going to learn how to realize a nice web site layout using a nice texture. The post is divided in two parts: first we create the web page in photoshop and then we convert the PSD in a working HTML/CSS page ready for the web. Following this step by step walkthrough of design you’ll learn, touching with your hands the entire process to make a web page, how to design and code a modern site.

27. 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.

28. Coding: Corporate WordPress Style Layout

Welcome to the first PSD to XHTML/CSS tutorial here at psdvibe. We will be converting our most popular layout, Corporate Wordpress Style layout into valid xhtml/css which will be cross browser compatible. Create a html file through Dreamweaver and choose XHTML 1.0 Strict.dtd from the doc type option – save it as index.html.

29. Coding a Clean and Professional Web Design

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.

30. Design and Code a Slick Website From Scratch

With the Internet becoming more and more popular every minute, a great-looking website is somewhat of a must-have. You could obviously pay a web designer to design one for you, but wouldn’t it be really cool to design and code it yourself? “Difficult”, you may say; but it’s actually not too hard once you’ve learned how to do it!