Categories
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.
➜ photoshopetiquette.com

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:
➜ psdvalidator.com

Organize

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.
➜ renamy.com
➜ blog.kam88.com/en/group-layer-renaming-script.html

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

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.
➜ www.jasonforal.com/composer/

Exporting

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

Slicy exports layers to individual files, based on their name
➜ macrabbit.com/slicy/

Adobe is doing something similar with Photoshop Generator for assets. The cool thing is that Generator is open source and hosted on Github.
➜ github.com/adobe-photoshop/generator-assets

CSS Hat goes further by exporting CSS by examining your layer styles.
➜ csshat.com

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

Libraries

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:

Previewing

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).

Prototyping

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.
➜ framerjs.com

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

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.