From beautiful free layouts to step-by-step tutorials that help you create stunning Photoshop website layouts, there is no lack in knowledge on how to create a website layout in Photoshop … what is lacking are really good tutorials that take you from Photoshop to Dreamweaver, or turning your PSD into HTML or CSS.
Converting your PSD layout to HTML or CSS isn’t a difficult process – it is, in fact, an easier process than the website design. It will take a little bit of time and some practice to get everything figured out (I highly recommend keeping a Design Diary where you can write down the answers to problems you have, tips you’ve uncovered, and code snippets you use a lot) but it’s not difficult.
Here, I have un-earthed (un-webbed?) 10 of the best tutorials currently available to lead you through everything from the design itself to making it ready for Internet display. Your PSD to HTML or CSS – the process is all here.
If you already have a design created, use one of these tutorials as a practice exercise before you perform the steps on your own layout so that you have the best experience possible. Each tutorial is rated “Easy”, “Medium”, or “Difficult” – Easy tutorials are perfect for the very beginning Photoshop user, while Difficult tutorials contain content that requires a good deal of Photoshop knowledge.
PSD Vibe: Corporate Layout PSD to HTML Tutorial
This tutorial, http://psdvibe.com/2009/04/09/coding-corporate-wordpress-style-layout/, is extremely in-depth and perfect for the beginner – an EASY tutorial.
Beginning with a really great tip on CSS stylesheets that even the most experienced developer might want to take a look at and ending with a site ready to upload to the Internet, this tutorial doesn’t focus on Photoshop at all. Instead of even touching Photoshop, you’re simply required to use one of PSD Vibe’s free layouts to convert your PSD into HTML and CSS using Dreamweaver.
The site created in this tutorial is really stunning, reminiscent of a WordPress site without the need of a WordPress installation, and even if you’re using this tutorial just to learn how to convert PSD into HTML or CSS you’ll find the tips and techniques used in this tutorial to be solid and will lessen the amount of time you spend in post-designing a quality product.
Six Revisions: Dark and Sleek PSD to HTML Tutorial
One of the most thorough tutorials I’ve ever seen on any topic, there are actually two sections to this tutorial. First, design the PSD in Photoshop here: http://sixrevisions.com/tutorials/photoshop-tutorials/create-a-dark-and-sleek-web-layout-using-photoshop/. Then, move on to Dreamweaver and turn your PSD into HTML here: http://sixrevisions.com/tutorials/web-development-tutorials/how-to-code-a-dark-and-sleek-web-design/.
Overall, this is one amazing tutorial. Not only is it PERFECT for the EASY user, but even DIFFICULT users will find a ton of useful hints, tips and tricks in both the Photoshop and the Dreamweaver sections of this two-part tutorial. The tutorial design is clean, sleek, utilizes gradients as well as transparencies and inner drop shadows – clear basics but presented in a perfect way.
If this is your very first website, I highly recommend this tutorial set. Learning your way through creating PSD layouts to the eventual conversion to HTML and CSS, you will gain a toolset to begin with that seriously set you apart from other ‘beginners’.
Line 25: How to Code up a Web Design from PSD to HTML
Very simply, this tutorial is what it says it is. However, I would rate this a MEDIUM or DIFFICULT tutorial for one reason alone: you must already have a good grasp on HTML coding before you use this tutorial.
Other than that, this tutorial will take you beyond the auto-code from slices feature packaged in Photoshop, which often results is ‘dirty’ code that is associated with tables instead of CSS. Coding by hand ensures better SEO, cleaner code, and quicker load times. This is often called ‘hand-coding’ because it relies on your knowledge and work rather than automated processes flipped out by software.
If you have a working (doesn’t have to be fantastic) knowledge of HTML coding and a website layout ready, this is definitely the tutorial for you. It is also a great ‘next step’ tutorial for those who have relied on methods other than hand-coding your site from the blank HTML screen up.
pv.mgarage WaterColored Portfolio
So let’s say you’re more like me, and regardless of difficulty level just want something that looks stunning … this is the tutorial for you. Done in two parts, beginning with the PSD creation of a truly stunning watercolor portfolio layout in Photoshop to the turning of that PSD into HTML or CSS, this tutorial stands out both for beauty and for quality.
I can’t really rate the difficulty of this tutorial. The concepts and techniques used in Photoshop are more complex than you’d expect for a beginner tutorial, but they’re explained clearly enough to be in one. The Dreamweaver section is just as clear with full codes and explanations of what each line of code does and why it’s important.
Truly, a stand-out tutorial that you shouldn’t miss regardless of your design experience level.
Net Tuts+: Slice and Dice that PSD
For those of us that really get the most out of being able to see, hear, and do in order to learn most successfully, this two-part series of video tutorials are what you need to see. Both are available on the same page at http://net.tutsplus.com/articles/news/slice-and-dice-that-psd/.
What really sets this set of tutorials apart from the rest is its visual nature – most of the same tips, tricks, and strategies are used as they are throughout different methods in the previous tutorials but actually being able to see the work as it’s happening is the kicker. It takes a difficult concept and makes this tutorial very, very EASY.
And hey, the finished product (whether you plan on using it or are creating it simply for use in the tutorial series) is pretty cool and definitely something you’ll be happy to show off.