Photoshop Actions & Workflows
Over the last few years I’ve built a 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.
Download: Bjango Actions 3.1.1
Pixel Snapping On and Pixel Snapping Off
These enable and disable Snap Vector Tools and Transforms to Pixel Grid. Please note that you need Photoshop CS6, CC or CC 2014 for these actions to function.
New iPhone and iPad icon Actions
These Actions create new documents at the correct size for iPhone and iPad icons, with iOS 7’s icon grid and lots of handy backgrounds.
New Apple Watch, iPhone and iPad document Actions
These Actions create new documents at Retina device sizes, at 72PPI with some handy elements, and no colour profile attached. Yes, 72PPI is probably the best pixel density of your documents — here’s why.
New iPhone Portrait (all models)
An action that creates a 414×736 document (the size of the iPhone 6 Plus, in iOS points), with guides for all iPhone models, including iPhone 6, iPhone 5 and the original iPhone. This action is for those who prefer to work at the 1× UI scale (this is how I work).
New 512×512 and 1024×1024 document Actions
As above, but for 512×512 and 1024×1024 pixel documents, mostly for icons.
Copy/Paste Attributes and Styles
Copy Attributes and Styles copies the currently selected shape layer’s shape attributes (fill, stroke etc) and layer styles. Only works when a single shape layer is selected.
Paste Attributes and Styles pastes the shape attributes and layer styles on the clipboard to the currently selected layers.
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, monochrome and a value check 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
Copies the current bitmap selection using Copy Merged, creates a new document to match the clipboard’s size, then pastes.
Copy Entire Canvas
Copies the entire canvas using Copy Merged.
Show Optimal Size
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
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
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
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.
Center on Canvas
Centers the currently selected layers on the canvas.
Dupe and Create Smart Object
Duplicates the currently selected layers, then turns the duplicate into a Smart Object, leaving the original untouched.
Scale by 33.3%, 50%, 66.6%, 150%, 200%, 300% and 400%
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, 40, 58 etc
Scales the document to the various icon sizes needed for iOS or Android, then (optionally) runs the Scale Patterns to 100% script.
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.
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.
Trims the document to the smallest possible size, removing transparent pixels.
OS Default Text Antialiasing
Select some text layers, run this to change the antialiasing the OS default. This action requires Photoshop CC.
Create Grey Block
Creates a solid fill layer, often suitable as a nice background.
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 and @3x to filenames, removing @2x and @3x from filenames, and generic file renames.
Download: Bjango Actions 3.1.1
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.
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 iOS and Android devices.