Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Useful Photoshop Tools and Techniques For Your Workflow

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 Link

Mr. Stacks1
A small Photoshop script that can quickly generate storyboards, stacks and PDFs for project CDs, client presentations or anything else — right from the Layers Comps in your Photoshop file. The script would be useful for a series of animations, storytelling elements in a design and advertising.

Mr. Stacks. On the fly layercomp storyboarding.2

Photoshop Tych Panel3
Every photographer and Web designer who has spent time arranging images and photographs knows that scaling and resizing takes time. But even existing templates are unnecessary when you try out Reimund Trost’s latest little Tych Panel for Photoshop. It completely automates the n-Tych creation process, and it has a lot of layouts to choose from. The tool has been open sourced by Reimund Trost and can be freely used, modified and redistributed in any way.

Tych Panel by Reimund Trost4

Pixel Proliferation: A Toolset For Managing Screen Resolutions5
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: A Toolset For Managing Screen Resolutions6

Generating CSS positions for Sprites7
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 Hover8 as well: the article presents a simple JSX Photoshop script for creating image sprites, and you can also assign a keyboard shortcut to it.

A M9

Golden Crop10
Golden Crop is a Photoshop Script making cropping with respect to division rules (golden rule, 1/3 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 Crop11

Browser UI12
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 UI13

Open With Photoshop 0.614
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.

Open With Photoshop :: Add-ons for Firefox15

foxGuide: Photoshop Guides Inside Firefox
A Firefox extension that displays horizontal and vertical guides. You can move or remove the floating guides on a webpage just the way you do it Photoshop with the help of foxGuide. Guides are useful for laying out elements symmetrically, structure a design and improving the overall layout.

foxGuide - Photoshop Guides Inside FireFox - A Firefox Extension For Web Designers and Developers

Modular Grid Pattern: create a modular grid in Photoshop, Fireworks and GIMP16
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 Grid17

960gs ExtendScript for Photoshop CS5
The script is very raw and crashes easily with the wrong input or settings. However, it has some nice features such as disabling gutters by putting 0 for gutter width and optionally adding evenly-spaced horizontal guides.

960gs ExtendScript for Photoshop CS5

Workspace import/export script for Photoshop18
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: Workspace import/export script for Photoshop19

Subpixel Hinted Font-Rendering
This technique is great for your concepts when you want to simulate actual text in your Photoshop file. Thomas Maier has saved his workflow as an action. You can download the subpixel-rendering technique and use it for free.

Add Subpixel-Rendering to your Photoshop Text Layers

GuideGuide 1.020
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 McEfee21

Photoshop Animation to Sprite Sheet22
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.

Automatic Tile Cutter
Some images are made of dozens to thousands of tile images, depending on the zoom level. At the distant zoom levels you only need a few images to cover a large area. Creating and then uniquely naming each of these images would be a daunting task if you had to do it by hand. Will James has solved this problem and released a batch processing script to use with Photoshop 7 or CS that will carve all the titles you need and name them exactly as you need them named.

The Image Processor Script23
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 Link

Adobe Photoshop Scripts24
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 Scripts25

The Photoshop Scripting Community Forum26
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 files27 (alternative28), Distribute Layers29. Unfortunately, the forum’s activity is quite low, although the scripts are being released quite often.


Russel Brown’s Scripts Page30
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.

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 Link

The Photoshop Etiquette Manifesto for Web Designers32
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 Designers33

Photoshop Secret Shortcuts34
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 Shortcuts35

Photoshop Tip: Organizing Layers
Daniel Mall has thought of a super handy Photoshop file organization trick that separates layer groups for different stages of a page within the same PSD. You can prefix your layer groups with a bullet to organize your PSDs but also using a hyphen will enable you to create a horizontal divider in the context menu.

Photoshop Tip: Organizing Layers

Photoshoptimize: Optimize Photoshop Performance36
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 - Optimize Photoshop Performance37

Super Crisp Font Anti-Aliasing With Sub-Pixel Hinting38
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 Link

100+ Free HTML Email PSD Templates39
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.

100+ free HTML email templates40

Bottles and Cans Photoshop CS4 Actions41
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: Bottles and Cans42

Pricing Table PSD Template43
A free pricing table template with various button states.

Friday’s Freebie: Pricing Table Template44

Search and Email Input Text PSD Template45
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 PSD46

Free PSD: Seven Tickets47
Seven Tickets inspired by Seven Dribbble Shots.


Free PSD: Simple Download Buttons49
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 buttons50.

Free PSD: Simple Download Buttons51

Free PSD: Simple Download Buttons52

Album Cover Art Carousel (PSD)53
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.

Free PSD: Simple Download Buttons54

Flip-Clock Countdown (PSD)55
A groovy little countdown flip-clock design: the perfect event/product launch companion.

Free PSD: Simple Download Buttons56

Big Green Button (PSD)57
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.

Free PSD: Simple Download Buttons58

Free PSD: Tagtastic Tag Cloud59
The topic of this article is a nice and simple little tag cloud – tagtastic!

Free PSD: Tagtastic Tag Cloud60

The Ultimate Free Master PSD File
The download features one master .PSD file with folders, assets, grid folders and layer comps ready to be used. The master file is using the best practice featured in Dan Rose’s Photoshop Etiquette61.

Free Master PSD File

OS X Leopard GUI Freebie
A freebie including a GUI set for Mac’s OS X Leopard operative system for all Web developers who want to integrate great designs into their applications. This package includes fully editable vector Photoshop sources and a customizable Fireworks PNG file; the original fonts that were utilized for the making of the GUI are also included.

OSX Leopard GUI set, Vector Photoshop and Fireworks files included, great Freebie « Design and Development tuts – TutorialShock

Tabs Icons: Interface Icons for iOS & Designers62
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 - Interface Icons for iOS & Designers63

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

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

Last Click Link

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. - Organize your PSDs!67

Method & Craft68
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.

Method & Craft69

Mastering Photoshop: Unknown Tricks and Time-Savers70
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: Unknown Tricks and Time-Savers - Smashing Magazine71

Pixel Perfection When Rotating, Pasting And Nudging In Photoshop72
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 - Smashing Magazine73

Compositing in Adobe Photoshop: Time-Saving Tips74
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: Time-Saving Tips - Smashing Magazine75

Useful Photoshop Tips And Tricks For Photo Retouching76
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 more77 tips and tricks to improve your workflow.

Useful Photoshop Tips And Tricks For Photo Retouching78

Useful Adobe Photoshop Techniques, Tutorials and Tools79
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 - Smashing Magazine80

(vf) (ilj)

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80

↑ Back to top Tweet itShare on Facebook

The Smashing team loves high-quality content and cares about the little details. Through our online articles, Smashing Books, eBooks as well as Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

  1. 1


    May 4, 2011 7:05 am

    Very nice techniques and the free icons n_n

  2. 2

    Andrew Lucas

    May 4, 2011 7:10 am

    Great round up, can’t believe there is a PSD cleaning service who ever uses that should learn some manors!

  3. 3

    Jamie Solorio

    May 4, 2011 8:55 am

    Thank you so much! This was AWESOME!

  4. 4

    Petri Chung

    May 4, 2011 7:04 am

    Need some fresh Fireworks Resources here on SmashingMag!

    • 5


    • 6

      i am waiting for it.. and this article has some really good stuff..:)

    • 7


      May 5, 2011 12:34 am

      YEP! Interesting to hear that tools are beign created to improve web related workflow in a program that really isn’t made for UI design… I’ve taken the leap and started using Fireworks and despite the learning curve I’m already seeing improvements in my own workflow, but would equally like to discover a similar resource for it.

    • 8

      Need some fresh Fireworks resources everywhere that involves web design and development. I am very glad that when I started designing websites, (then) Macromedia Fireworks came bundled with Dreamweaver. I started using Fireworks and never understood why people used Photoshop. Of course now I no longer use Dreamweaver but I am now 8 years using Fireworks with no desire to change that. I love that product.

      There are things Photoshop is great at that Fireworks simply cannot do, but workflow doesn’t seem to be one of them.

  5. 9

    Liam McCabe

    May 4, 2011 7:13 am

    Nice roundup Vitaly and co :)

    Another great site for freebies is PixelsDaily :)

  6. 10

    jp tutorialshock

    May 4, 2011 8:24 am

    Hello friends, thanks for featuring our OSX GUI :) I also love and (I recommend you: and in case u don’t know about them)…

    Thanks again friends for the inclusion :)

  7. 11

    Alex Patin

    May 4, 2011 8:59 am

    What an awesome list of resources to help increase our workflow as designers. Some of these will drastically increase the amount of time I have to focus on the actual design aspect of a job.

    Thanks SmashingMag!

  8. 12

    Yvonne Tang

    May 4, 2011 9:16 am

    Very nice round-up! Thank you!

    The super crisp font anti-aliasing action for Photoshop is going to be very useful. I’ve always wanted my mock-ups to look more realistic.

  9. 13

    Kanchan Rai

    May 4, 2011 9:23 am

    Thanks a lot once again for such a wonderful collection!!! Man, they seem awesome!! I’m sure I might not use them all but oh yeah, what a wonderful collection do I have in my hand now!! Great Post!!

  10. 14

    Thanks, nice stuff!

    P.S. The Big Green Button, Flip Clock and Album Cover Art link to Simple download buttons…

  11. 16

    hahaha nice one:
    Browser UI
    The free version includes only Internet Explorer 6 UI

  12. 17

    Bookmarked!! :)

  13. 18


    May 5, 2011 5:48 am

    Great article, but I’ll never understand why using this application for web design.

    Photoshop = photo
    Illustrator = illustration

    Fireworks for web/interfaces !

  14. 19

    Thank you for usefull stuff! But what about autosave plugins? Am I the only one who forgets to press ctrl+s? :)

  15. 21

    Nice stuff…thanks

  16. 22

    Luis Escala

    May 5, 2011 2:22 am

    I read the post and seems very interesting. Thanks for sharing. Waiting for more post from you.

  17. 23

    A lot of stuff, thank’s a lot S.M team !

  18. 24

    Kevin Andersson

    May 5, 2011 4:56 am

    Thanks for posting a link to Tabs Icons!

  19. 25

    Brayden Styles

    May 5, 2011 5:00 am

    Great and very useful post ! Thanks :)

  20. 26

    Michal Balazi

    May 5, 2011 5:41 am

    Thank you. Nice article.

  21. 27

    Love these! I actually use a few of them.

    On another note, I have been looking high and low for a way to manage my PS presets more effectively. This includes brushes, textures, patterns, shapes, layer styles, fonts, etc.

    Basically, I want to be able to see everything I have and then decide what I want to use.

    Does anyone know if something like this exists?

  22. 28

    Awesome article, thanks!

  23. 29

    Very useful round-up! I am already using lot of stuff!
    Great collection!

    Waiting for JS collection.

  24. 30

    Nice roundup, thanks!

  25. 31

    Strangely they forgot to mention Photoshop panels – MagicPicker color wheel panel for artists and DiskFonts font manager

    BTW, the latter works in Fireworks and any other Creative Suite prog

  26. 32

    Just amazing selection! Thanks! :)

  27. 33

    Just amazing selection! Thanks! :)

  28. 34

    Nice article on photoshop techniques. You can find more design resources and free psds on

  29. 35

    Jason Reese

    May 12, 2011 10:35 am

    wow,, just hit the motherload … Great post!

  30. 36

    Thanks for this great collection of photoshop improvement tools and scripts. A lot of them i didn’t know yet.

  31. 37

    Petr Chutny

    May 14, 2011 2:13 pm

    Awesome article, thank you. Truckloads of time savers and things that solve stuff I’ve-been-thinking about lately.

  32. 38

    Thanks u for this great collection of photoshop improve tools and scripts. And a lot of them I didn’t know yet so place u tell about tools i don’t know ?

  33. 39

    Really Nice and useful information

  34. 40
  35. 41

    really helping especially the ones you listed in the beginning

  36. 42

    Hiram Velásquez

    June 14, 2013 12:25 pm

    Awesome article, thanks for sharing.


↑ Back to top