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!
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.
How to Convert a PSD to HTML
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!