12 Fantastic PSD to HTML Tutorials

As people become more interested in web development, the demand for quality tutorials arises. One of the most frequently requested tutorials is on the topic of slicing your PSD into quality HTML and CSS code. This is quite an intensive process and it can be hard to learn on your own. Today, we’ll have a look at 12 excellent tutorials for converting a PSD to HTML/CSS.

• 

  Converting From PSD to HTML Screencast

  First up on our list is an excellent tutorial by the boss man himself, that is, Jeffrey way of NETTUTS. Jeffrey takes you through the steps of converting an excellent psd designed by Collis Ta’eed to valid code. The design alone is worth a look!

  Visit Tutorial

• 

  From PSD to HTML

  Next up, we have a exemplary tutorial via PartDigital. The tutorial focuses on every every aspect of coding a pre designed mock up, and also has an emphasis on commenting your code. Furthermore, the CSS markup used is especially aimed for those new to CSS and is very easy to read.

  Visit Tutorial

• 

  How to Convert a PSD to HTML

  This tutorial will take you one step further by showing you some of the common issues with Internet Explorer 6. In addition, he takes you through a few javascript effects to enhance the overall aesthetics.

  Visit Tutorial

• 

  Turn a PSD into CSS Series

  In a very in-depth 4 part series, CssHowTo shows you how to go through every step individually and combine them to achieve the final goal. A nice touch to this tutorial is that it covers how to decide what areas to slice before you begin, something beginners and pros alike can sometimes struggle with. The link below will get you started with the first part of the four part series.

  Visit Tutorial

• 

  PSD->HMTL/CSS

  On one of my favorite design related websites, you’ll find this tutorial showing you how to take the ‘HawkStudios’ theme and turn it into html/css. The article will even show you how to create the design you will be coding.

  Visit Tutorial

• 

  Converting a PSD to HTML

  While searching DeviantArt, I came across this popular gem on converting your photoshop mockup into code you can use for your website. Since the file is on DeviantArt, you’ll need to download the screencast, which is great as it allows you to view the tutorial whenever you wish, with or without a connection.

  Visit Tutorial

• 

  Encoding a PhotoShop Mockup into XHTML

  Blog.SpoonGraphics, run by Chris Spooner, is known for its quality tutorials and designs. This tutorial is no exception. Firstly, the tutorial contains a link showing you how to create the design you will be working with. If you need to brush up on your design skills, this is a great opportunity. Second, Chris goes over every step of slicing and coding very slowly and using plenty of images; it is one of the most organized tutorials on the list.

  Visit Tutorial

• 

  Converting a PhotoShop Mockup

  From CSS-Tricks.com, this tutorial is Chris Coyier’s first video podcast and it’s safe to say it’s quality. There are a total of 3 separate podcasts covering every element of converting your photoshop design into a usable web page. Almost as enjoyable is Chris’ sense of humour, especially the Arby’s shot at the beginning.

  Visit Tutorial

• 

  Coding Your First PSD Tutorial

  Cars, Code, and CSS. It’s all here in another wonderful tutorial by the guys at HV-Designs. The design is super simple and aimed at beginners, making it easy to understand exactly why every step and element is needed. Plus, the cars look nice.

  Visit Tutorial

• 

  Coding a PhotoShop Layout

  A fantastic tutorial, especially for those new to coding. ErraticWisdom puts an emphasis on analyzing your template before you begin to slice, so you can better understand where elements will be placed and if it is even possible to do so.

  Visit Tutorial

• 

  Slice and Dice That PSD!

  Recently posted on NETTUTS, this tutorial goes all out with a screencast and written code. The tutorial also utilizes a wonderfully simple design by Joefrey of ThemeForest.

  Visit Tutorial

Bonus Tutorial for GIMP Users

I know there are still a few of you that prefer to use GIMP while designing, and since it can export files as both .xcf and .psd (with some work) we will include a quick bonus tutorial series for the GIMP.

• 

  Design and Code a Site with GIMP, a 4-Part Series

  Simon North, a fellow ThemeForest author and owner of Help-Developer, wrote an excellent four part series of how to design a website with GIMP and turn it into a valid HTML/CSS website. Part one starts with the design while part 2-4 focus on coding the HTML and CSS. The link below will get you started with part one.

  Visit Tutorial

Remember that one of the most helpful things you can do while trying to learn how to code a website is to reverse engineer other websites. Find a site you like and study the source code, play with it in firebug, and find out how and why it does what it does. Let us know if you have any links or tutorials you have used before in the comments section below. Adiós!