DIY Guides to ‘PSD to HTML / CSS’ for Beginners

We receive a lot of requests from people looking to learn how to code their own designs into HTML / CSS. Typically we point them to one of the following tutorials to get started. We also recommend a number of other sites for refining those techniques, however these PSD to HTML / CSS tutorials are a good place to start.

CSS-Tricks

In this first-ever video podcast, I start the conversion process of an Adobe Photoshop mockup of a website, into a real live CSS based website. This is pretty rough here folks, I’m sure these will get more focused with time. Please let me have it with criticisms at my contact page.

Chris Coyier, CSS-Tricks.com

Converting a Photoshop Mockup (part 1 of 3)

Welcome, in this tutorial il teach you how to convert my “creative design layout” into a working CSS/HTML valid website. Firstly id do the tutorial on creating the layout or skip it and download the PSD file from the hv-designs shop, if you do my tutorial try and get it as close to my design as possilable, changes you wish to make can be done easily once coded. Right lets begin…

Richard Carpenter, HV-Designs.com

From Photoshop to HTML

Learn how the professionals convert their designs from Photoshop [PSD] to CSS and HTML. I will show you how to make a generic business template from the Photoshop file that is included with this tutorial.

Joshua Bolduc, BolducPress.com

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!

Collis Ta’eed, NetTuts

Slice and Dice that PSD

In today’s video tutorial, we’ll be slicing up a PSD, dicing it for the web, and serving it on a warm hot plate. Our design sports a neat “Web 2.0″ feel and comes courtesy of Joefrey from ThemeForest.net. Be sure to visit his profile if you have the chance.

Jeffrey Way, NetTuts

Posted February 4, 2010 by Topher - Learning, PSD to HTML - No Comments

Leave a Comment

you could be first

Leave a Reply