MightyMeta

SuperSlicr

SuperSlicr: Ditch the Slice Tool!

| 16 Comments

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!

Download ‘SuperSlicr’ Action (Photoshop CS2 +)

Installation

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:

'Load Action' in Actions Palette Contextual Menu

Then browse for and select the file.

Instructions

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.

Select Layers

2. Select which export format you require (JPEG, PNG-24 Standard or PNG-24 iOS Scaling) in the Actions palette.

Select Your Setting

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.

Play Action

4. Your selected layers now appear merged, cropped and ready to export in the save for web dialogue window!

Save for Web and Devices

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.

Features

  • 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).

1.0 Release

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.

Licence

BSD 3-Clause Licence

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

If you enjoyed this post, please consider sharing it using the above buttons, leaving a comment or subscribing to the RSS feed.

16 Comments

  1. I think I love you. Much gracias señor.

  2. Whoa this is amazing. I’m sure I’ll be getting a lot of use out of it.

    Thank you so much for such a useful tool!

  3. This is save my tears! Thank you soooooooooooo much!!

  4. Seriously useful little tool. Thanks!

  5. This is great!!!! Thank you so much :)

  6. I love you, James, and I want to have your babies… thanks for a most useful share! :)

  7. Absolutely great!
    Thank you so much James.
    My coding psd to html is now a bit faster ;).

  8. Thanks! This save me lot of time.

  9. Just thought “I wonder if…” and found your site for this very thing. Very nice work!

  10. Thank you for potentially making my life a lot easier and saving me time. I’ve just downloaded this and I will try it very shortly.

  11. Great action! Just installed and it works great!

    Now I´m creating previews the right way and FAST.

    Cheers!

  12. Dude, seriously, this action is great. Where is the donate button???

  13. Just what I wanted while converting PSD to HTML. This is such a time saving weapon you’ve invented. Thanks for sharing!

  14. i think my next child will be called ‘james’ ! love it, thanks x

Leave a Reply

Required fields are marked *.


MightyMeta, 8 St Lawrence Lane, Ashburton, Devon, UK, TQ13 7DD

Powered by WordPress | Theme Derived From "Yoko" by by Elmastudio

Scroll To Top