Time goes by and Adobe Photoshop remains one of the most important tools in the web design world. Some argue that Fireworks should take care of the job; others say it cannot be done without some pain. One way or another, as a front-end developer, chances are you spend some time dealing with PSD files, perhaps more time than you would like.
Although most developers have knowledge of navigating the PS interface and using its tools, there are several shortcuts to accomplish a good part of our daily work in less time and with better quality. Having that in mind, I handpicked some of my favorite and most used shortcut steps that I would like to share:
The right tools for the job:
Rulers and Guides (Shortcut: command+”R” and command+”;”): They are a huge help. However, what makes sense for design composition may not be the best approach for development. My suggestion is clear the unnecessary guides, stick to the ones that make sense for your development strategy.
Slice Tool (Shortcut: “C”): Using the slice tool set to “Slice from guides” is especially efficient for email templates, and it depends heavily on the proper position of the guides. Not all designs benefit from this approach, but it may be a great time saver.
Eyedropper and Ruler Tool (Shortcut: “I”): In combination with the info panel, they make all the difference in development accuracy. Set the Info panel to web color, RGB and or HSL (top right / panel options) to match your needs.
Quality insurance steps:
Use Save for web, always (Shortcut: Command+Shift+Alt+”S”):
Save for web allows significant reduction of image size by stripping all unnecessary data. By using the 4-Up view, optimizing image quality vs. file size is very easy.
Use Sharpening: There are several methods for sharpening images, my favorite being Unsharpen Mask (Filter/Sharpen/Unsharp Mask). Whatever your method of choice may be, two quick tips: always apply it at 100% image view and start by the applying low amount, radius and threshold settings – it is very easy to over do it , so use it sparingly. The combination of sharpening and save for web ensure the best possible view of images with the smallest file size.
Do it faster:
Shortcuts, shortcuts… Make use of the standard shortcuts, or improve your workflow even more by customizing the most used commands. They are a huge time saver, very intuitive and easy to memorize.
Action! (Action panel visibility Shortcut: Alt+”F9”): Actions are very powerful when dealing with a large number of images or several design elements that require the same treatment. Resizing, converting to black and white, whatever process necessary, you have to do it only once and record it, automatizing the process and potentially saving precious time. It becomes even more powerful when combined with Adobe Bridge, making it possible to batch process whole stacks of images and renaming files following a specific standard.
Have you got a good Photoshop tip? Share it with us in the comments!
