Useful Photoshop Tools and Techniques For Your Workflow

About The Author

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. When he is not writing, he’s most probably running front-end & UX … More about Vitaly ↬

Email Newsletter

Weekly tips on front-end & UX.
Trusted by 200,000+ folks.

A list of useful and time-saving Photoshop resources to improve your design skills as well as your professional workflow. From Smashing Magazine to our readers, to make the search of these ever-growing techniques easier.

Productivity is a crucial asset of professional designers. Photoshop is an extremely powerful application for photo processing and image manipulation, and we can make it even more powerful by using handy tools, actions, plugins and templates to save time for solving mundane regular tasks. The better our professional tool set is, the more time we can spend to focus on the actual design process rather than the tool we are using to implement it on screen.

Here at Smashing Magazine, we’re continuously searching for recent time-saving, useful Photoshop resources for our readers, to make the search of these ever-growing techniques easier. We hope that these techniques will help you improve your design skills as well as your professional workflow when using Adobe Photoshop. A sincere thanks to all designers and developers whose articles are featured in this roundup. We respect and appreciate your contributions to the design community.

Useful Photoshop Tools

Pixel Proliferation: A Toolset For Managing Screen Resolutions

This tool will help you to manage screens resolutions more easily. The toolset contains a collection of PS5 marquee-tool presets for common screen resolutions, covering fixed-screen resolution sizes, ratios for less common resolutions and standard ratios. Also, a collection of layered CS5 PSDs provides common devices for computing and design presentations. Finally, there is a reference chart for resolutions and design landscape. Useful.

Pixel Proliferation
Pixel Proliferation: A toolset for managing screen resolutions.

Generating CSS positions for Sprites

A Photoshop plug-in by Arnau March that generates sprites with your given CSS file. You can then add the sprite locations and also create hover and click effects with the help of jQuery. You might want to check out CSS Sprite: Photoshop Script Combines Two Images for CSS Hover as well: the article presents a simple JSX Photoshop script for creating image sprites, and you can also assign a keyboard shortcut to it.

Arnau March
A Photoshop plug-in by Arnau March.

Golden Crop

Golden Crop is a Photoshop Script making cropping with respect to division rules (golden rule, 13 rule) very easy with visual guides. Requires installed Photoshop CS2, CS3, CS4 or CS5 (either x86 or amd64 version). Works on Windows and Mac.

Golden Crop
Golden Crop.

Browser UI

The Browser UI is an action that creates a browser window around any size Photoshop document you can throw at it. The free version includes only Internet Explorer 6 UI. The deluxe edition with current versions of Chrome, Safari and Firefox is not free ($3).

Browser UI
Browser UI.

Open With Photoshop

An add-on for Firefox that is a new companion for Web and graphic designers to open up any Web image with Adobe Photoshop via a single and quick mouse click. A useful time saver.

usefulphotoshoptools1
Open With Photoshop.

Modular Grid Pattern: create a modular grid in Photoshop, Fireworks and GIMP

Modular Grid Pattern is application for web designers, which helps you quickly and easily to create a modular grid in Adobe Photoshop, Adobe Fireworks, GIMP, Microsoft Expression Design and other applications. The extension requires Adobe Photoshop CS5

Modular Grid
Modular Grid Pattern.

Workspace import/export script for Photoshop

John Nack has written a script to enable simple importing and exporting of Photoshop workspaces. It should work in both CS4 and CS5 (although it is a little more robust in CS5), so you can use it to migrate workspaces from CS4 to CS5 in addition to using it to enable easier sharing of CS5 workspaces between machines or people.

John Nack on Adobe
John Nack on Adobe.

GuideGuide 1.0

What actually started out as a script that drew guidelines at the middle of the document, turned out to become a quite helpful extension for Photoshop when working with columns, rows and midpoints in CS4 & CS5. You can download Cameron McEfee’s GuideGuide to help you find midpoints, make margins and create rows and columns much easier while working in Photoshop.

Cameron McEfee
Cameron McEfee.

Photoshop Animation to Sprite Sheet

This tool enables you to easily export a framed animation in Adobe Photoshop to a packed sprite sheet. The tool is available for Photoshop CS3 or higher. Developed by Peter Jones.

The Image Processor Script

The Image Processor in Photoshop CS4 is a simple way to quickly resize and convert a bunch of images to JPEG, PSD or TIFF format. The modified script allows exporting CMYK JPEGs as CMYK, as well as support for exporting PNG images.

Further Resources

Adobe Photoshop Scripts

Trevor Morris provides more than a dozen of free scripts for Adobe Photoshop. All scripts are commented, making them easy to modify and/or learn from. Among other scripts, you’ll find Layers to Comps, Rename Layers, Sort Layers and Distribute Layers Vertically scripts.

Adobe Photoshop Scripts
Adobe Photoshop Scripts.

The Photoshop Scripting Community Forum

PS-Scripts is a community for Photoshop scripting and automation. The site contains articles Members of the community release their script on the site’s forum; for instance, you can find the Smart Object links panel, Listing fonts used in PSD files (alternative), Distribute Layers. Unfortunately, the forum’s activity is quite low, although the scripts are being released quite often.

PS-Scripts
PS-Scripts.

Russel Brown’s Scripts Page

Russel Brown provides a number of free useful Adobe Photoshop Scripts and Panels for CS4 and CS5. Among other things, Adobe Emailer Panel, Image Processor Pro and Edit Layers in ACR scripts are available.

Scriptopedia

Another community that helps to find scripts and scripters for Photoshop and other Adobe applications. The site is frequently updated; you’ll find various scripts as well as tutorials on the site.

Useful References and Articles

The Photoshop Etiquette Manifesto for Web Designers

The recently updated Photoshop Etiquette can be quite useful when wanting to improve the clarity of a PSD when transferred. This site provides you with rules that will show you examples and bonus points ranging from external as well as internal file organization to exporting and design practices.

The Photoshop Etiquette Manifesto for Web Designers
The Photoshop Etiquette Manifesto for Web Designers.

Photoshop Secret Shortcuts

This old, yet still very useful article by Nick La provides an overview of secret (i.e. not documented) Photoshop shortcuts that the author has learned from years of experience.

Photoshop Secret Shortcuts
Photoshop Secret Shortcuts.

Photoshoptimize: Optimize Photoshop Performance

To improve the performance of Photoshop, this list of best tips will help any designer to optimize Adobe Photoshop for Mac as well as PC; from reducing cache levels to disabling export clipboard in Photoshop, and much more.

Photoshoptimize
Photoshoptimize.

Super Crisp Font Anti-Aliasing With Sub-Pixel Hinting

David Leggett shares with us the most useful technique in creating concepts in Photoshop, especially when you’re working on a website layout in Photoshop, and want an accurate representation of what a font is going to look like in your content body. This surely helps bring the frustrating times when working with small font using anti-aliasing in Adobe Photoshop to an end.

Freebies, Goodies

100+ Free HTML Email PSD Templates

CampaignMonitor has released a large collection of freely available high quality email templates which have been thoroughly tested in more than 20 of the most popular email clients like Outlook 2010, Gmail, Lotus Notes, Apple Mail and the iPhone. They are completely free. Every template contains a Photoshop document, HTML template and a Campaign Monitor Template. The complete packages with all templates is 320 Mb.

Free HTML Email PSD Templates
Free HTML Email PSD Templates.

Bottles and Cans Photoshop CS4 Actions

3 exclusive Photoshop CS4 Actions that might save you some time when you are working on the next soda, wine or bottle label design.

New Photoshop CS4 Actions
New Photoshop CS4 Actions: Bottles and Cans.

Pricing Table PSD Template

A free pricing table template with various button states.

Pricing Table Template
Friday’s Freebie: Pricing Table Template.

Search and Email Input Text PSD Template

A free template for search field and email input fields. You can find new freebies released every Friday on the site.

Search and Email Input Text PSD
Search and Email Input Text PSD.

Free PSD: Seven Tickets

Seven Tickets inspired by Seven Dribbble Shots.

seven tickets
Seven Tickets.

Free PSD: Simple Download Buttons

Orman Clark has released a set of simple download buttons in three different states: nroaml,normal, hover and active. These download buttons use a subtle icon to suggest the action of downloading. The download includes the editable PSD. You can download even more PSD buttons.

simple-download-buttons-psd
Simple Download Buttons.
simple-download-buttons-psd
Simple Download Buttons.

Album Cover Art Carousel (PSD)

The download (PSD) includes styles for the covert art, the hover and/or active state, and the next/previous arrows. Try experimenting with the colour of the album cover hover state, a vivid orange looks great.

album-cover-art-carousel-psd
Album cover art.

Flip-Clock Countdown (PSD)

A groovy little countdown flip-clock design: the perfect event/product launch companion.

flip-clock design
Flip-clock design.

Big Green Button (PSD)

This template is perfect for when a regular sized button just isn’t cutting it; this big fat round button should grab a visitors’ attention with ease. The download (PSD) displays a pricing plan as an example.

big-green-button
Big green button.

Free PSD: Tagtastic Tag Cloud

The topic of this article is a nice and simple little tag cloud – tagtastic!

Tagtastic Tag Cloud
Tagtastic Tag Cloud.

Tabs Icons: Interface Icons for iOS & Designers

You can find free iPhone tab bar icons for Mac OSX Lion and iOS here which are specially designed and optimized for toolbars and tab bars. All these icons have been created for iPhone, iPhone 4 and iPad and are provided as fully editable and scalable Photoshop PSD files.

Tabs Icons
Tabs Icons.

Designmoo

Designmoo is a community for discovering and sharing free PSDs, vectors, textures, patterns and fonts.

Premum Pixels

Premium Pixels is Orman Clark’s remarkable resource with free design resources and tutorials.

Last Click

PSDcleanup

It’s very difficult for coders to work with someone else’s PSD files if they’re not organized correctly. This online service helps fixes that problem by organizing PSDs and polishing them for you. We aren’t advertising here, but it’s quite sad that services like this one exist at all.

PSDcleanup
PSDcleanup.

Method & Craft

Method & Craft features the stories behind the work and the techniques professionals have developed throughout their professional career. A very useful resource for designers permanently looking to improve their skills.

methodandcraft
Method & Craft.

Mastering Photoshop: Unknown Tricks and Time-Savers

Keyboard shortcuts can be very useful and are truly essential to our busy, daily workflow. Occasionally, we stumble upon a shortcut we wish we’d learned years ago. Please note that the shortcuts listed in this article are for Photoshop CS4 on OS X and can also be converted apposite to Windows.

Mastering Photoshop
Mastering Photoshop: Unknown tricks and time-savers.

Pixel Perfection When Rotating, Pasting And Nudging In Photoshop

When creating Web and app interfaces, most designers slave over every single pixel, making sure it’s got exactly the right color, texture and position. If you’re not careful, though, some common functions like moving, rotating and pasting can undo your hard work, resulting in a blurry mess. But with some small changes to your workflow, you should be able to maintain the highest-quality artwork from the start to the end of the project.

Pixel Perfection When Rotating, Pasting And Nudging In Photoshop
Pixel Perfection When Rotating, Pasting And Nudging In Photoshop.

Compositing in Adobe Photoshop: Time-Saving Tips

Daniel Durrans shares his own time-saving tips for compositing in Photoshop with us and emphasizes on adapting a certain technique for each one of us to make our work more efficient and improve our workflow.

Compositing in Adobe Photoshop
Compositing in Adobe Photoshop.

Useful Photoshop Tips And Tricks For Photo Retouching

In case you’ve been searching for some insight on the most useful techniques tips and tricks when working in Photoshop, then this is the article you shouldn’t miss out on. Dirk Metzmacher shares with us even more tips and tricks to improve your workflow.

Useful Photoshop Tips And Tricks For Photo Retouching
Useful Photoshop tips And tricks for photo retouching.

Useful Adobe Photoshop Techniques, Tutorials and Tools

Our recent overview of useful Adobe Photoshop techniques and tutorials that we have found and collected over the last months.

Useful Adobe Photoshop Techniques, Tutorials and Tools
Useful Adobe Photoshop Techniques, Tutorials and Tools.

Photoshop Techniques And Professional Tutorials

This overview features a hand-picked and organized selection of the most useful and popular Photoshop techniques, articles and tutorials published on Smashing Magazine over the past few years.

Photoshop Techniques And Professional Tutorials.

35 Beautiful Retro And Vintage Photoshop Tutorials
We’ve scoured the Web to find some impressive vintage Photoshop tutorials that can help you achieve an “old-fashioned” look-and-feel in your designs. In this post, we go back to the 1900’s all theway to the 1980’s to showcase a variety of vintage- and retro-inspired designs that involve poster art, collages and graphical elements. Whether you’re into print design or web design, you’ll find something you can use or build upon.

retro1
Retro And Vintage Photoshop Tutorials.

Further Reading

Smashing Editorial (mrn)