This is an update to the Photoshop action that I created in May 2010 to speed up my Photoshop to Web/Mobile workflow. It allows you to select any combination of layers (which may contain layer styles, vector shapes, text layers or smart objects), and automatically crops, merges and then passes them to the the Save for Web and Devices dialogue.
Since using it quite heavily on a recent iOS project, I have made a few tweaks to how it works (detailed below) and now can’t live without it! Go on, give it a whirl!
Unzip the package and double-click on the ‘superslicr.atn’ file. It should launch Photoshop and add itself to your Actions palette automatically. If this doesn’t work, install it manually by choosing ‘LOAD ACTIONS’ from the Actions palette’s contextual menu:
Then browse for and select the file.
1. Select the layers that you want to export as a single graphic. Note that they do not need to be adjacent to each other in the layers palette and can even exist in different groups.
2. Select which export format you require (JPEG, PNG-24 Standard or PNG-24 iOS Scaling) in the Actions palette.
3. Press the play button in the Actions palette or CMD-SHIFT-F8 for JPEG (High) / SHIFT-F8 for PNG-24 / F8 for iOS Scaling.
4. Your selected layers now appear merged, cropped and ready to export in the save for web dialogue window!
When you return to your document after saving, a new document containing your cropped and merged image will be active. Your original document will also be there, inactive, and in its original state.
- Crops selected layers to pixel bounds — no slice tool required!
- Can select any combination of layers (don’t need to be adjacent in layers palette).
- Works with any layer type, including layer groups, text layers, vector shape layers and smart objects.
- Non-destructive. Creates new document from selected layers and leaves original layers untouched.
- New document remains open at end of process so can be saved as additional format.
- iOS Scaling, PNG-24 (Alpha Transparency) and JPEG (60% compression) flavours.
- Can be activated using F8 function key (this can be altered if needed).
I haven’t fully tested this on different platforms, Photoshop versions, etc, and although it seems to work without a hitch for me, you may find it it does something strange when used in your particular setup.
UPDATE 24th Oct. 2011: After using SuperSlicr a bit more extensively I have ironed out a couple of bugs that existed and have also added an ‘iOS Scaling’ setting that produces both a Retina Display and Standard version of your selection.
Use the download link at the top of the article to get the latest version, and look at the readme file to see exactly what has changed.
If you experience any bugs, let me know in the comments, explaining what the bug was, what you were doing when it happened, and what OS and Photoshop version you used, so I can have a go at fixing it.
Essentially you can do whatever you want with this, but can’t redistribute the code without including the original licence (i.e. you can’t sell it or pretend it’s yours).