Photoshop Actions & Workflows

Enable Pixel Snapping (F15) and Disable Pixel Snapping (shift-F15)

These enable and disable Snap Vector Tools and Transforms to Pixel Grid in Photoshop CS6. Please note that you need Photoshop CS6 for these actions to function. I probably use these 50 times a day.

New iPhone and iPad document Actions

These Actions create new documents at non-Retina or Retina device sizes, at 72PPI with a solid fill background, a black rectangle to show where the status bar goes, and no colour profile attached. Yes, 72PPI is probably the best pixel density of your documents — here’s why.

New 114×114, 512×512 and 1024×1024 document Actions

As above, but for 114×114, 512×512 and 1024×1024 pixel documents, mostly for icons.

Don’t Colour Manage

Assigns the colour profile of “Don’t Color Manage This Document”, which is how all your UI documents should be, if you don’t like your colours being butchered. The new document Actions also assign “Don’t Color Manage This Document” as the colour profile, so you shouldn’t need this one too often.

Set Global Light to 90°

Sets the light source used for Layer Styles to directly above, which matches Apple’s HIG and the native iOS and Mac UI (as well as most other platforms). To accomplish this, the Action creates a bitmap layer, sets the light, then deletes the layer. This was done so the Action works, no matter what you have selected.

View Shadow Detail

Inserting a Levels Adjustment layer can help you see and edit details hidden deep in the darker portions of your image. This is a trick I started using years ago, when retouching photos, but it works just as well for UI design. It’s far easier and better than cranking up the brightness on your display, which only goes so far. Just run this Action and move the adjustment layer to the very top layer. Turn it on when you need to see shadow details. Turn it off the rest of the time.

Add Colour Blindness Testing

This action adds a group with the three main colour blindness types and monochrome as adjustment layers. Place the group at the top of your layers and toggled the adjustment layers on and off to view your entire document with the colour blindness type applied.

Copy Merged to New (F14)

Copies the current bitmap selection using Copy Merged, creates a new document to match the clipboard’s size, then pastes.

Copy Entire Canvas (shift-F14)

Copies the entire canvas using Copy Merged.

Show Optimal Size (F13)

Shows the smallest size the currently selected region can be cropped without clipping the image data. Show Optimal Size requires a marquee selection and works best when the layer or layers and marquee selection is sitting on a transparent area.

Normally, this action would be used on non-rectangular icons or shapes where you’re trying to find the optimal size when cutting up an image for exporting. Note that the result may be offset (I haven’t found a solution for this). This action is great in conjunction with Make Slice From Layer, allowing you to find the size needed for a slice. I prefer it to layer based slices, because this method works when you have slices based on many layers or an entire group.

Make Slice From Layer (shift-F13)

I use slices, but don’t like creating them with the Slice tool — I prefer using the marquee selection tool to create the region, then create a bitmap layer and fill. This has two advantages: I find it far easier to see what’s going on accurately (the slice creation tool uses a thin, light, dotted line to show the slice you’re making), and if you need to create loads of slices at the same size, you can move the bitmap layer around and keep creating slices from it. This is ideal when building slice sheets of same-sized elements. This action can advances to the layer below. You can disable that ability by unchecking the Select Backward Layer item in the Actions panel (when it’s not in Button mode).

Make Slice From Selection (command-F13)

As above, but the slice is created from the current selection. Works well in conjunction with the marquee selection tool.

Make 9-Patch From Selection (shift-command-F13)

Select an area with the marquee selection tool and this action will create a bitmap layer and add the appropriate Android 9-patch black 1 pixel lines around it. From there you can trim the lines to provide the correct stretch and padding areas.

Scale by 50%, 66.6%, 150% and 200%

Scales the document by exactly 50%, 66.6%, 150% or 200%, then (optionally) runs the Scale Patterns to 100% script and appropriate Mask Feather scaling script. Astute readers will also note that these actions take a history snapshot before scaling, so even if things go horribly wrong, you should be able to recover. Things won’t go horribly wrong if your document is built for scaling though — the snapshot is just an extra precaution.

Scale to 29, 36, 48, 57, 58, 72, 96, 114, 144, 512 and 1024

Scales the document to the various icon sizes needed for iOS, then (optionally) runs the Scale Patterns to 100% script.

Dribbble Selection

Creates a 300×400 pixel marquee selection. Move the selection as desired, and run the action again to have the selection copied to a new document, ready to be saved as a PNG and uploaded to Dribbble for the world to see.

Dribbble @2x Selection

Creates a 600×800 pixel marquee selection. Use as above, but for Retina-sized Dribbble shots.

Enlarge Canvas (command-F15)

Adds 100 pixels to the width and height of the document. Want even more workspace? Run the Action a few times. Yep, this one is me being very lazy. It reduces some of the thinking when you’re running out of canvas space though.

Trim Transparent (shift-command-F15)

Trims the document to the smallest possible size, removing transparent pixels.

Add 88px to Bottom

Adds 88px to the bottom of your document. Perfect for adding height to portrait documents for the taller iPhone 5, if you’re working at the non-Retina resolution.

Add 176px to Bottom

Adds 176px to the bottom of your document. Perfect for adding height to portrait documents for the taller iPhone 5, if you’re working at the native resolution.

Create Grey Block

Creates a solid fill layer, often suitable as a nice background.

Bjango Tools panel

A Photoshop panel that includes the most frequently used tools for interface and icon designers, spread out for quick access, plus buttons for turning pixel snapping on and off. Please note that you’ll need to have Bjango Actions 1.5 installed for the buttons to work. To install the Bjango Tools panel, copy the entire Bjango Tools folder to your Plug-ins/Panels/ folder and restart Photoshop. The panel can be opened by choosing Window → Extensions → Bjango Tools.

Download Bjango Actions, Tools & Workflows

Due to the likelihood that I’ll update these Actions, they’re versioned. They’re just standard Photoshop Actions and Automator workflows, so there’s no way to be notified of updates, except by following @bjango on Twitter or checking back here.

The archive also includes Automator Workflows for adding @2x to filenames, removing @2x from filenames and generic file renames.

Download: Bjango Actions 1.74

To add the Actions, just double click the .atn file. To run the Actions with one click, ensure Button Mode is ticked (in the dropdown menu to the top right of the Actions panel). To use the workflows, drag files to their Finder icon. They work really well in the Finder toolbar. The Bjango Actions, Tools & Workflows are now hosted on GitHub, if you want to fork them.

Skala Preview

If you like these actions, you’ll love Skala Preview, the fastest way to send pixel perfect, colour perfect design previews from your Mac to your iPhone or iPad.