Design Studies: How to Prepare Your Photoshop Files for Development

So you’ve finished your design and it’s time to send that beauty downstream to the development (dev) department. In a few days/weeks/months you’ll see a coded version of your design. But before you let your files go, you’ll need to prepare them for hand off.

The basics on how to make sure your hard work doesn’t get lost in translation

There are a few things that should always be done:

  • Name your layers
  • Organize them into groups
  • Delete unnecessary layers
  • Have a kickoff with your dev team to walk them through your designs

Beyond these basics there are 3 levels of file preparation, ranging from easy to extreme!

Level 1: The “you’re on your own, dev”

Usage: for small projects like additional page designs that will use predefined styles.

Because our front-end devs are awesome, I can trust them to take my Photoshop file and code up the design into a pre-existing site without much assistance from me.

Just complete the general file cleanup as listed above, and your job is done!

If you are designing a brand new site with brand new styles, proceed to level 2.

Level 2: The stylish standard

Usage: For brand new sites or redesigns

When you design a beautiful new site, you can’t just pass off your PSD file like a hot potato. You’ve just spent many hours perfecting the visuals, the typography, the spacing. You know the exact size of your H2’s, the color of your buttons, the height of your form fields. That’s because you’ve spent weeks designing them, and changing them, and revising them, and finally (finally!) finding the perfect combination that works. Well guess what? Your devs can’t read your mind, they’re going into your files blind. You need to take the time to show them the system you’ve set up. Your design deserves that!

So, instead of sending the devs on a scavenger hunt through the many layers and art boards of your file, you’ll want to pull together all that style information into a nice little guide. The devs will thank you and you’ll get back a coded website that matches your design!

What I typically do is set up a new Photoshop file and name it Style Guide.

A basic file will include:

  • Colors
  • Typography – fonts and sizes
  • Buttons and links
  • Hover states
  • Lists
  • Forms
  • Other repetitive elements…

I will usually work on this guide throughout the project, not just at the end. For example, the colors might be predefined by the branding guidelines, so you’ll likely have some or most of those to start. On the other hand, I find that I adjust my H styles often during the design process, so I’ll leave those open to start. Once a design starts coming together, I’ll write up all the H sizes and use this list as a cheat sheet for myself to keep sizing consistent.

Check out the sample below:

Level 3: The crème de la crème

Usage: for the dev that wants it all, this top-tier level provides the most analysis, but also takes the most effort to prepare.

Ah redline specs. Spec-ing out your design files is a time consuming process, but it leaves no room for guessing. Thinks of this as the ultimate instruction guide to your design.

Spec-ing will be done as the absolute last step in the process, once everything is approved and no further changes will be made. (If you’ve ever had to make changes after completing red lines you know the pain!)

A redline document will include all spacing, dimensions, and annotations of your design. There are a couple Photoshop plugins out there that can help you spec, we like using SpecKing (paid) and Ink (free).

Setting up your file:

  • Save your approved design as a new file.
  • Widen your canvas or art board to create room for annotations.
  • If you’re using Ink to spec, your layers might get out of hand quick, so it’s important to stay organized. Ink will automatically create its own “__ink” folder where it will collect all the specs. Don’t move or rename this! If you do, the plugin will create a new “__ink” folder every time the original is modified (this includes renaming or grouping it. Moving it is ok).
    Below the __ink folder, I’ll create a “text” folder with a “numbers” subfolders. These two folders will hold my red numbers and annotation text.

What should you annotate?

In the annotation column, you’ll list CSS attributes of your text styles, buttons and links.

My most common attributes are:

  • Font-size
  • Font-weight
  • Color
  • Background-color
  • Border
  • Border-radius
  • Height
  • Opacity
  • Sometimes I’ll get fancy and write out the CSS for any gradients or shadows I use. I’ll recreate them and copy the code from this site: http://www.cssmatic.com/
  • You can also throw in some notes with your annotations, for example hovers or behavior animations

Once everything is outlined, just save off jpgs for the dev team.

Along with this instruction manual, I’ll also package together a style guide (from Level 2), and all icon and photo assets.

And that’s a wrap!

Of course no matter how well you prepare your files, you should always be communicating with your devs, making sure you’re answering their questions and providing them will all necessary assets during the building phase. They’re reward you with a accurately built site!

 

« Prev Article