Eight Ways to Turn Photoshop Designs Into Web Pages

Developer Newsletter

Webmaster Blog

Eight Ways to Turn Photoshop Designs Into Web Pages

In “Designing and Coding a Wordpress Theme From Scratch” I gave an overview, start-to-finish, on how to turn a Photoshop design into a fully functioning Wordpress theme. There are many methods for getting from Photoshop to XHTML, however. Here are some of the ones I used in that tutorial and a few new ones that you may not be aware of.

Slice to XHTML/CSS
In that same tutorial we took advantage of the most common way to turn PSDs into XHTML. The method, built in to the CS series of Photoshop, is called slicing and it takes all the work out of coding for you! The major complaint is that the code exported doesn’t exactly fit conventional standards (no separate stylesheets and html documents, for instance).

Adobe InDesign
Two items in this list are in the Adobe Family for good reason, Adobe wants you to use them all together so they’ve make it easy to go from one application to another and back. In this case you would design a page in Photosohp then enhance it after exporting to Indesign. Then you would export it as XHTML from InDesign. Of course since InDesign doesn’t like importing vectors, it will try to rasterize your text and images, so you should recreate text within the InDesign environment before exporting. Here, blogger, Nick Hodge talks a bit about Photoshop and InDesign workflow.

Adobe Fireworks
Originally a Macromedia product, Fireworks has now been fully integrated into the adobe family and offers some unique alternatives for web development like animations and web graphics. Although vectors have been integrated into Photoshop somewhat, Fireworks still handles them better although translating from Photoshop to Fireworks can cause certain issues

Media Lab SiteGrinder
SiteGrinder2 and SiteGrinder2 Pro are extensions for ProTools that allow for the exporting of WC3 Compliant XHTML/CSS. Unlike the “Save for Web” option built into the CS Suites, SiteGrinder does an excellent job of outputting code that doesn’t need to be ‘cleaned up’ after the fact. It conveniently names the Stylesheet block ID’s after your layers for easy deciphering of the architecture. Another neat function is that as it builds, SiteGrinder eliminates redundant graphics and merges layers when possible to minimize download size. Many designers swear by it. Here’s a blurb from the creators, MediaLab:

SiteGrinder 2 successfully turns Adobe Photoshop into an easy-to-use and powerful website design and production tool.

While SiteGrinder is not aimed solely at the web neophyte, a SiteGrinder-equipped designer with no previous web experience can use only their Photoshop skills to go from concept to deployment of a professional, standards-compliant site in mere hours with no slicing or programming.

The difficulty of this task is invisible to the user as SiteGrinder builds graphics, text, and interactivity using modern web standard technologies and takes into account tricky requirements like cross-platform browser compatibility.

Site Grinder 2 Pro is $349, the Basic version is $129

Media Lab PSD2FLA
Media Lab’s other claim to fame is PSD2FLA, a program that (like it says in the title) converts Photoshop Documents (PSD) into Flash Documents (FLA). If your weapon of choice is Flash websites that are well designed, this will help you get your design ideas out quickly so that you can spend the majority of your time programming Actionscript.

Image Mapping
One somewhat forgotten method for turning PSD documents into web pages is with image maps. Actually, it wasn’t so much forgotten as it was banned from the internet like tables were in 1998. An image map is essentially a layer of transparent html on top of an embedded image that uses anchor tags to turn areas of images into hyper text links. While this means any image can theoretically be turned into a website, the method is considered somewhat amateurish as it doesn’t allow for things like machine readable text, stylesheets or many of the other things extensible HTML allows.

If you’d like to read more about this dinosaur of a technique try this page.

The fact of the matter is that better technologies have simply replaced image maps. With Javascript and Ajax we can now embed dynamic images that are tied to databases to produce far more impressive things than Image Maps ever could (think GoogleMaps). To put it another way, using Image Maps in 2008 is like trying to churn your own butter (from the cow and mining your own salt) when there’s a Trader Joe’s right across the street from your house.

Outsource It
What could be your easiest option is to simply outsource the coding to firms that specialize in PSD to XHTML slicing and coding. Most of them simply do what I described in #1 so it’ll save you money if you learn to do it yourself.

Bellow you’ll find a list of ten places that offer this service. (In full disclosure, GosDot, is my own service.)

Aloe Studios
Chop and Code

Hand Coding
For developers, hand coding (also known as hard coding) is by far the most preferred method. While some will still use photoshop to create and slice images, they’ll do all the styling and coding themselves. People do this for a variety of reasons but the main reason is for control. If you write your own code, you’ll find bugs quicker and know more about the inner workings of your own site. It an take longer, but I guarantee you that quick and prolific hand coder will out pace anyone in workflow, simply because they don’t have to reference as much to be standards compliant.

Bookmark It