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.
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.
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.
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.
Composite is similar and looks a bit more limited, but doesn’t need any line of code.
There are many more tools, and here are some that do not fall in any of the previous categories and are worth mentioning:
- Page Layers: capture a webpage as PSD with layers
- LayerVault: Simple version control for your PSD
- DevRocket: set of automation tools
- Bjango Actions & Workflows: set of Photoshop actions
- IconViewer: preview your app icon on iOS
- Ikonica: also preview your app icon on iOS
Feel free to share your favorite tools for Photoshop in the comments!
4 replies on “Productive webdesign workflow with Photoshop”
[…] Pour ceux qui n'étaient pas debouts à 8h : des outils pour Photoshop utiles aux designers et aux frontend dev http://t.co/pCMpRjvURY […]
glad to see here http://www.renamy.com
also you can add http://www.css3ps.com
and look at this collaboration renamy and adobe image asset generator