Book Review: From Photoshop to HTML

If you’re new to creating website designs using Photoshop, learning to transform those .PSD files into semantic, standards-compliant CSS and HTML files can be a bit intimidating.

After all, there are plenty of great services out there that can slice up and code your files for you. But there are those cases when you may prefer to slice those designs by yourself.

That’s where From Photoshop to HTML: How to Slice Your Designs Like a Pro by Jeffrey Way, editor of Nettuts+, comes in.

In this 145-page book, the entire process of converting a .PSD file into a working website design is covered, in detail, with code examples.

A model site is used to walk readers through the entire process, step-by-step, with a single example. Everything from the basic coding to making your designs cross-browser compatible is covered.

On a daily basis—if you listen closely—screams can be heard around the world from coders unsuccessfully attempting to force a design into position. It’s not just a matter of learning the language; memorization is an easy task. The scream inducing points occur when you view your site in ten different browsers, all of which render your site at different levels of consistency.

The book assumes you have a basic working knowledge of CSS and HTML, as well as a design already created in Photoshop. The design used in the book is simple, but the concepts used to create the design can easily be applied to more complex designs.

The book starts out with a section on how to look at a design before you dive into the process of creating the HTML code.

While it might seem natural to immediately begin working on the visuals of our website, this actually couldn’t be further from the truth. Instead, we must first build our base, or the mark-up, and only once it’s been completed can we move on to the visuals.

Picking out the three basic sections most websites contain: a header, the main content area, and a footer, are covered, and then the book jumps right into the process of setting up your basic HTML file. Again, anyone with a basic knowledge of HTML will have no trouble with this part.

Once your basic HTML code is complete, From Photoshop to HTML covers how to slice up your .PSD files.

Take a moment to look over the design in Photoshop. Try to pinpoint each image that will be needed. Remember, may features can be recreated with CSS; so be creative.

While both methods for slicing up your files are mentioned, the book uses a combination of cropping, and cutting and pasting to grab the images you’ll need, rather than using the slice tool.

Both methods are perfectly valid. I recommend that you try both, and choose which ever proves to be fastest…for you.

Keyboard shortcuts for speeding up this process are covered in-depth. Saving these images for the web, including all the settings you should be using and which image file type to use for which types of images, is also discussed extensively, as are CSS sprites. Last but not least in this section, are some notes on adjustments that will then need to be made to the HTML file based on the background images being used.

Once your HTML and images are ready, it’s time to dive into the CSS for your site. Browser resets are stressed and covered in-depth, as well as how to rebuild a standardized, default CSS file.

Each browser utilizes a bit of “default CSS” to automatically style your markup. At first glance, you might think that this is extremely helpful…If every browser implemented them identically, this wouldn’t be a problem. Sadly, this is not the case.

A number of tips and tricks are covered for setting up your CSS files beyond that, including referring to your Photoshop file for text formatting values and using Fahrner’s Image Replacement Technique for part of the header. There’s also a large section on creating columns within your design, covering the concepts used extensively.

There are a number of CSS principles, including relative vs. absolute positioning and CSS shapes, covered in a practical and usable manner. For those who aren’t experts at CSS, these sections will be particularly informative, while those who are may want to skip over these parts. Another great bit of CSS code covered is how to create sticky footers, something that can be frustrating for new CSS designers.

The coding of additional pages beyond our home page is covered, including how to make slight adjustments to the layout and content, and what you’ll need to add to your CSS files. By the time you’re done with this section, you’ll have all the page templates necessary for a fully-functional portfolio website.

The final regular chapter in the book covers how to make your design cross-browser compatible, specifically when it comes to older browsers like Internet Explorer 6 and 7. One of the biggest issues covered at length is the lack of transparency handling in images in IE6, with a variety of solutions for overcoming it.

Viewing your website in Internet Explorer 7 and below for the first time will make you cringe. You might get lucky, but most of the time, you’ll find numerous issues that need to be fixed.

A bonus chapter at the end shows you how to create jQuery transitional effects, which are incorporated into the site design. For anyone new to JavaScript and jQuery, it’s an interesting project that teaches some basic techniques.

Overall, if you’ve been outsourcing the conversion of your .PSD files to HTML, or if you’ve been wanting to try out designing websites in Photoshop, this book is definitely worth a read.

With complete, step-by-step instructions that can easily be applied to many projects and tons of example code, From Photoshop to HTML is sure to get you started in converting your own designs. With a bit of practice, the concepts covered could be used on virtually any design!

The book also comes with the source files for the site created, which you can use in your own projects however you like.

Download Sample Chapter

Written exclusively for WDD by Cameron Chapman.

What do you think of this book? Please let us know in the comments area…

WDD Staff

WDD staff are proud to be able to bring you this daily blog about web design and development. If there's something you think we should be talking about let us know @DesignerDepot.