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
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.
-
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.
-
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.
-
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!
kevinsturf
January 13th, 2009
wow amazing, a much need thread to understand better the different approaches to making your website come alive from psd.
thanks a lot
Ross
January 13th, 2009
Nice list. Typo - PSD->HMTL/CSS (HTML)…
Chris Spooner
January 13th, 2009
Excellent roundup, I always enjoy reading through the process of others when it comes to coding, you can always be sure to find some alternate techniques.
Oh, and a huge thanks for the inclusion, I hope the tutorial over B.SG helps a few people out.
Brenelz
January 13th, 2009
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.
-Brenelz
dcoder405
January 13th, 2009
Thanks a lot for this. I’ve looking for a long time that how can i convert a PSD to HTML and now here’s 12 tutorials on that
and your blog is really great. Keep up the good work
Saro
January 13th, 2009
Nice!
Slice and Dice That PSD! has a bad link!
M.A.Yoosuf
January 13th, 2009
nice, still its useful, thanks brother
Drew
January 13th, 2009
Thanks everyone for your nice comments!
@Chris-Not a problem, keep up the great tutorials.
@Saro-Thanks for the heads up, looks like Jeffrey fixed the link for me.
ivalki
January 13th, 2009
good roundup
thanks
Shaun
January 15th, 2009
What a fantastic list! Some very useful information even when using an automated service like psd2css Online. Organization techniques and making optimizing for SEO are so important. Thanks!
alex
January 15th, 2009
I just found this section while browsing on my phone (wish these pages where available for mobile phones) and I cannot wait to get home and study all these techniques. Looks like an All nighter.
Anyway, I recently decided to upgrade myself and learn how to use webstandards to design my sites, I was still using the old Tables technique. Been learning a lot just from studying the templates I’ve purchased here. The placement of content using css was/is a bit of a mystery so I am curious to see how it is done.
Thanks a million all you developers who take the time to write/record these tuts.
hvdesigns
January 16th, 2009
http://hv-designs.co.uk/2009/01/09/coding-the-creative-design-layout/
thats another one to add to your list, quite detailed
hvdesigns
January 16th, 2009
oh yea, and thanks for featuring some of my tutorials
much appreciated
AnDi
January 30th, 2009
Hi, i need some help with my css coding, i manage to do it right on firefox but on IE comes up all messed up. I wanted to know if some one could help me find the problem…
the site is -> http://www.eternalgraphs.com/up/index.htm
Harsha M V
February 7th, 2009
the best round up a beginner can get….
xea
February 14th, 2009
Thanks \o/ \o/\o/\o/\o/
BAE
March 13th, 2009
Nice information :-).
Aleksey
March 19th, 2009
Hello, thank’s for sharing)
And can somebody suggest me a resource where I can learn about how to create a PSD template of a layout, please? I mean how to do it in Photoshop, not to convert to XHTML/CSS. Video tutorial will be especially appreciated))
Thank’s in advance)
adrian clark
May 25th, 2009
Hi,
Probably the most reliable service to get your Design to HTML in 24 hours
You send a design in any of common formats (PSD, PNG, JPG, GIF etc) and you receive a high-quality XHTML-CSS page.
So far The Best Price in the market
http://www.mypsdtohtml.com