Navigation

Book Review: From Photoshop to HTML

Resources, Web Development | Jul 23, 2010

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…

Share this post
Comments (no login required)
  • arnold

    yeah! I had this book also , lots of cool stuff here , and really helpful book for web designers.

  • http://twoseventydesign.com twoseventy

    This is definitely going on my shelf. Thanks for sharing!

  • http://www.sleepyhero.com eli

    I was all set to buy it but then I found out that it’s only available as an ebook.

    • http://www.webdesignerdepot.com Walter

      I checked on this and unfortunately there are no immediate plans to release the book in a different format for now. It may be available in the future as a regular book.

  • http://www.michaelsaathoff.com Michael Saathoff

    thanks for the review – i have seen this book and always wondered if there was anything useful in it, i think i will pick it up and give it a read!

  • fedeeerer!

    nice post =)

  • http://grafisia.com Habieb

    Great book

  • Joshua Briley

    I bought this eBook a few months ago, with high expectations. It was good, but not revolutionary. Also, eBook format is not good for me. It gets lost in the plethora of files on my computer. Oddly enough, I like books in “book” format.

  • http://www.aledesign.it aledesign.it

    Great idea..a good information! thankyou!!!

  • http://stylishwebdesigner.com/ Tanya

    Looks like a must read book. Thnx for sharing I will definitely buy it :)

  • pesho

    thanks 4 sharing just i am so tired from searching 4 resource

  • http://www.hybridixstudio.com Hybridixstudio

    very nice :)

  • http://www.vivoocreative.co.uk Luke

    Sounds like a great book! I’m going to have to hunt this one down :-)

  • James

    When I first started building websites a few years ago, I was so concentrated on how the site looked rather than the markup. It is true that you must start with good markup and THEN work on the design.

  • http://bubblefish.com.au Andrew Brown

    Nice Blog Written…Overhere….I found BubbleFish Australia for Website Design Sydney.
    Bubblefish have been involved in website design, web development and graphic design work. Their extensive website design, web development and various print and online media advertising portfolio shows are Great.