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 ToolsMr. StacksA 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.

Photoshop Tych PanelEvery 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.

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

Generating CSS positions for SpritesA 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.

Golden CropGolden 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.

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

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

foxGuide: Photoshop Guides Inside FirefoxA 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.

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

960gs ExtendScript for Photoshop CS5The 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.

Workspace import/export script for PhotoshopJohn 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.

Subpixel Hinted Font-RenderingThis 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.

GuideGuide 1.0What 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.

Photoshop Animation to Sprite SheetThis 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 CutterSome 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 ScriptThe 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 ResourcesAdobe Photoshop ScriptsTrevor 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.

The Photoshop Scripting Community ForumPS-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.

Russel Brown’s Scripts PageRussel 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.
ScriptopediaAnother 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 ArticlesThe Photoshop Etiquette Manifesto for Web DesignersThe 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.

Photoshop Secret ShortcutsThis 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 Tip: Organizing LayersDaniel 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.

Photoshoptimize: Optimize Photoshop PerformanceTo 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.

Super Crisp Font Anti-Aliasing With Sub-Pixel HintingDavid 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, Goodies100+ Free HTML Email PSD TemplatesCampaignMonitor 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.

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

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

Search and Email Input Text PSD TemplateA free template for search field and email input fields. You can find ne[…]

  Often, it’s the little details that turn a good layout into a great design; details such as subtle textures, shading and smooth shapes. Photoshop contains a vast array of tools for embellishing a design, but choosing the right one isn’t always easy. Being the obsessive-compulsives that we are, we’ve conducted a huge range of experiments to determine the benefits and disadvantages of each technique. Here, then, is an obsessive-compulsive’s guide to some frequently used tools and techniques for Web and UI design in Photoshop.
Noise and TexturesSubtle noise or texture on UI elements can look great, but what’s the best way to add it? Our goal is to find the best method that maintains quality when scaled but that is also easy to implement and edit. To find out which is best, we’ll judge each method using the following criteria:
Number of layers used: fewer is better.Ability to scale: if the document is resized, will the effect maintain its quality?Can the noise be on top of the Color and Gradient layer styles?Can the method be used with any texture, not just noise?
1. Bitmap Layer With Noise
Probably the most obvious method for adding texture to a shape is to create a normal bitmap layer, fill it with a color, select Filter → Noise → Add Noise, then apply a mask or Vector Mask to match the element you’re adding noise to.
Using a high amount of noise, setting the layer blending mode to Luminosity and reducing the opacity will yield the most control over the noise with the least disturbance to the underlying layers. A noise setting of 48% gives a high dynamic range without clipping the noise. (Clipping results in higher contrast, which might not be desirable.)
Layers: 2Scales: No, texture will have to be recreated if the document is scaledWorks with Color and Gradient layer styles: YesWorks with any texture: Yes2. Inner Glow Layer Style
Adding an Inner Glow layer style with the source set to center and the size to 0 will let you use the noise slider to add texture to any layer. It’s a good solution, provided you’re not already using the Glow layer style for something else. The noise is added above the Color, Gradient and Pattern layer styles, which is great.
Unfortunately, the noise can only lighten or darken the underlying elements. The previous bitmap layer method can add highlights and shade at once while maintaining the average luminosity, and it looks far better in my opinion.
Layers: 1Scales: Yes, texture will be remade automaticallyWorks with Color and Gradient layer styles: YesWorks with any texture: No3. Smart Object with Filter
Create a Solid Color layer, convert it to a Smart Object, select Filter → Noise → Add Noise, apply a Vector Mask to match your element, set the layer blending mode to Luminosity and reduce the layer’s opacity.
It’s a fairly involved process, but it can accommodate a combination of effects that can be remade if the document gets scaled.
Layers: 2Scales: Yes, texture will be remade automaticallyWorks with Color and Gradient layer styles: YesWorks with any texture: No4. Pattern Overlay Layer Style
Start by creating a noise or repeating pattern in a new document, then choose Edit → Define Pattern. Once you’ve defined the pattern, it will be available in the Pattern Overlay layer style options. As with previous methods, using Luminosity as a blending mode and reducing the opacity to suit it yield great results.
The Pattern layer style is composited below the Color and Gradient styles, ruining an otherwise perfect noise and texture method. However, you can create a second layer that just holds the texture if you need to, or start with a Gradient Fill layer, sidestepping the limitation.
Layers: 1Scales: Yes, but you’ll need to change the Layer style scale to 100% after scalingWorks with Color and Gradient layer styles: No, the pattern appears underneathWorks with any texture: YesWhich Method Is Best?Although a little cumbersome, creating a Gradient Fill layer, adding a Pattern layer style, then creating a Vector Mask seems to be the best method possible. This can be used to create flexible, scalable and editable single-layer UI elements with texture. As a bonus, Gradient Fill layers can be dithered and so also produces the highest quality results (Gradient layer styles cannot be dithered).
We’ve created some examples below and included the source document so that you can see how they were built.

Download the PSD (.zip)
Rounded RectanglesRounded rectangles, or “roundrects” as QuickDraw so fondly calls them, are standard fare on a Web and interface designer’s utility belt. They’re so common that it’s rare for Web pages or apps to not contain a roundrect or two. Unfortunately, pixel-locked rounded rectangles can actually be fairly difficult to draw in Photoshop. (By pixel-locked, I mean that every edge falls on an exact pixel boundary, creating the sharpest object possible.)
Experienced Photoshop users will probably already know one or two ways to draw a roundrect. Hopefully, after reading this article, they’ll also know a couple more, as well as which methods produce pixel-perfect results.
1. Rounded Rectangle Vector ToolPhotoshop’s Rounded Rectangle vector tool appears like the ideal candidate for the task, until you realize that the edges it creates are blurry and inconsistent.

Fortunately, there is a fairly well-hidden option that locks the Rounded Rectangle vector tool’s output to the pixel grid. Excellent.
To enable pixel-locked drawing for the Rounded Rectangle vector tool, check the “Snap to Pixels” option in the Options bar. If you have “Snap to Pixels” turned off, drawing at 100% zoom achieves the same result.

The result is perfect roundrects, every time. The only downside is that the corner radius can’t be altered during or after drawing the shape. If you need a different radius, you’re forced to draw it again. It’s a shame the roundrect tool isn’t like Illustrator in this regard, where the up and down arrow keys increase and decrease the corner radius while drawing.
On the positive side, keeping your objects as vectors means that you’ll be able to resize the document and the corners will take full advantage of any extra resolution. There is one small caveat though: if you resize, you’ll have to do it as an exact multiple, or risk fuzzy non-pixel–locked edges.
If you’re being pedantic about the results, you may notice that the antialiasing on the first half of each corner doesn’t match the second half — you’ll have to look carefully to notice, though. For example, looking at the zoomed corner below, the start of the corner to the apex isn’t identical to the apex to the end of the corner (starting from either side). In practice, that probably won’t create any issues.

2. BlurThe blur method is a bit of a hack that involves creating a selection, blurring it, then increasing the contrast so that you’re left with a sharp mask that’s antialiased nicely.
It’s seven steps in total and is prone to being inaccurate; plus, the radius of the corners can’t be changed on the fly. Applying levels can also be a bit fiddly. One advantage is that different levels settings can be used to obtain different degrees of antialiasing, from incredibly soft to completely aliased.
Create a new layer.Draw a rectangular selection.Enter quick mask (Q).Gaussian blur by half the radius that you’d like for the rounded corners. (For example, a 10-pixel radius would need a 5-pixel blur.)Apply Levels (Command + L), and use about 118 for the black point and 137 for the white point on the input levels.Exit quick mask (Q).Fill selection.
On the positive side, this blur method can be used to quickly create some interesting and organic shapes that would be difficult to draw by hand.

3. CirclesThe circles method is very accurate and easily reproducible, but has a whopping 13 steps. That’s a lot of clicking for just a single roundrect.
Create a new layer.Make a circular selection that is twice as large as the radius you would like (for example, a 10-pixel radius would require a 20×20-pixel circle).Fill the selection.Move the selection right. This can be done quickly by holding down Shift and pressing the right-arrow key a few times.Fill the selection.Move the selection down.Fill the selection.Move the selection left.Fill the selection.Make a rectangular selection that covers the entire vertical span of the roundrect but that starts and ends halfway through the circles at the ends.Fill the selection.Make a rectangular selection that covers the entire horizontal span of the roundrect but that starts and ends halfway through the circles at the ends.Fill the selection.
4. StrokeThe stroke method is very accurate, easily reproducible and has only about four steps, depending on the result you’re after. The corners are a bit sharper than those of the circle method, though. That may be a good thing or a bad thing, depending on your preference.
Create a new layer.Draw a rectangular selection that is smaller than the area you require (smaller by double the radius, if you want to be exact).Fill the selection.Add a stroke as a layer style that is as thick as the corner radius you would like.If you’d like to flatten the object to remove the stroke, keep following the steps below.
Create a new layer.In the Layers palette, select the new layer and the previous layer.Merge layers (Command + E).
It’s possible to automate the flattening with a Photoshop Action. This can also be set up as a function key to speed things up further.
A huge advantage of the stroke method is that it’s dynamic, so the radius can be edited in real time. It can also be used to easily create other rounded shapes, as seen below.

Which Method Is Best?In most cases, using the Rounded Rectangle tool with “Snap to Pixel” turned on will give great results and be the quickest method. If you’d like the ability to change the corner radius without redrawi[…]