Book Review: From Photoshop to HTML

Wdd Logo.
July 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...

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.

Read Next

3 Essential Design Trends, December 2023

While we love the holidays, too much of a seasonal theme can get overwhelming. Thankfully, these design trends strike a…

10 Easy Ways to Make Money as a Web Designer

When you’re a web designer, the logical way to make money is designing websites; you can apply for a job at an agency,…

The 10 Most Hated Fonts of All Time

Remember when Comic Sans wasn’t the butt of the jokes? Long for the days when we actually enjoyed using the Impact…

15 Best New Fonts, November 2023

2023 is almost over, and the new fonts are still coming thick and fast. This month, we’ve found some awesome variable…

Old School Web Techniques Best Forgotten

When the web first entered the public consciousness back in the 90s, it was primarily text-based with minimal design…

20 Best New Websites, November 2023

As the nights draw in for the Northern hemisphere, what better way to brighten your day than by soaking up some design…

30 Amazing Chrome Extensions for Designers and Developers

Searching for a tool to make cross-platform design a breeze? Desperate for an extension that helps you figure out the…

Exciting New Tools for Designers, November 2023

We’ve got a mix of handy image helpers, useful design assets, and clever productivity tools, amongst other treats. Some…

The Dangers of Doomscrolling for Designers and How to Break Free

As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…

From Image Adjustments to AI: Photoshop Through the Years

Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…

3 Essential Design Trends, November 2023

In the season of giving thanks, we often think of comfort and tradition. These are common themes with each of our three…

30 Obsolete Technologies that will Perplex Post-2000s Kids

Remember the screech of dial-up internet? Hold fond memories of arcade machines? In this list, we’re condensing down 30…