Design Web

Productive webdesign workflow with Photoshop

This post is a collection of documents and tools that can improve your Photoshop workflow. It’s probably not useful by itself, but is a good place to start when you want to work more efficiently.

Best practices

The first step to improve your workflow is to adopt some self discipline. A neatly organized PSD file will help you work more efficiently and save time to others.

If you only have the time to read one guide, Photoshop Etiquette is the one. It contains dozens of illustrated tips that will help you produce better deliverables. All best practices have been translated in many languages, including english, french, spanish and japanese.

Also worth mentioning, the Pixel Perfect Precision guide from ustwo (english) and Guidelines pour produire des PSD adaptés au web, by STPo (french).

Some of these best practices have been implemented in this online tool that will analyze your PSD:


Once you’ve learnt how to produce proper Photoshop files, you will be happy to find tools that can help you do it faster.

Layer names are essential for a productive workflow. But renaming layers can be tedious when you have a very large document with many layers. These tools give you the power to rename several layers at a time.

SpecKing is a tool that helps you annotate your mockups with measurements. These values will help developers implement your design with precision.

I think that layer comps are an underestimated feature of Photoshop, probably because it can be painful sometimes. Composer tries to improve layer comps by letting you apply layer changes to all comps easily.


Cut&Slide Me is a free panel that exports folder that follow a specific naming convention as PNGs.

Slicy exports layers to individual files, based on their name

Adobe is doing something similar with Photoshop Generator for assets. The cool thing is that Generator is open source and hosted on Github.

CSS Hat goes further by exporting CSS by examining your layer styles.

Enigma 64 also makes exporting single layer easy. One cool feature is the Base64 export. Great for embedding small assets and reducing HTTP requests.


If you want to develop your own tools, there are libraries that can read the PSD file format in Ruby and Javascript. PSD is notorious for being one of the worst formats, so you probably want not to reinvent the wheel:


When designing for mobile, it’s necessary to check on the actual device how your design will look like. You can send yourself a PNG to the device and display it fullscreen. Or you can use a tool that will make the process much faster (also note that there is a serious lack of love for Android in this list).


These tools can export interactive prototypes. Prototypes are great for communicating interactions that static mockups can not show.

FramerJS is an open source tool that can simulate many behaviors of native apps. You might need to write some simple javascript code, but it looks great.

Composite is similar and looks a bit more limited, but doesn’t need any line of code.

More tools

There are many more tools, and here are some that do not fall in any of the previous categories and are worth mentioning:

Feel free to share your favorite tools for Photoshop in the comments!

4 replies on “Productive webdesign workflow with Photoshop”

Comments are closed.