iOS Photoshop Actions & Workflows

Over the last few years I’ve built a small set of Actions that I use daily. They save a bit of time, but more importantly, they remove the need to remember best practices for each step.

New iPhone and iPad document Actions

These four Actions create new documents at non-Retina device sizes, at 72PPI with a grey solid fill background, a black rectangle to show where the status bar goes, and no colour profile attached. If you prefer starting from a Retina sized canvas, then run the Scale by 200% Action afterwards. Yes, 72PPI is probably the best value for the pixel density of your documents — here’s why.

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.

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 blindess 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 blindess 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.

Scale by 200% and Scale by 50%

Scales the document by exactly 200% or 50% using the nearest neighbour method. If you’ve built your document well, these Actions will let you switch between Retina and non-Retina versions as desired, in a non-destructive fashion.

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.

Rotate 90°, 180° and 270°

Actions to rotate the current layer without shifting vector shapes by 0.5 pixels or mangling bitmap layers.

Flip Horizontally and Flip Vertically

Flips the current selection, layer or layers on the horizontal or vertical axis.

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 conjuction 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 sprite sheets of same-sized elements.

Dribbble Selection

Creates a 300 × 400 pixel marquee selection. Move the selection as desired, run Copy Merged to New or crop, then save your PNG and Dribbble it for the world to see.

Enlarge Canvas

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.

Bjango Actions & Workflows 1.2

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, but at least you’ll know if you have the latest version.

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

Download: Bjango Actions and Workflows 1.2.zip

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 Action panel). To use the workflows, drag files to their Finder icon.

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.