Hi, I'm Pete Lada

I have had a few people ask me for more information on my process for saving 2x and 1x versions of the same art for mobile, so I decided to write down the steps I use.

In this example I will be saving a "reload" icon from a mockup of Guidebook. I will also assume that your art is made up of Photoshop shapes.

Silo art from your mockup

The first step is to pull your art out of your mockup (assuming you first create mockups like I do). You could easily do this by converting your layer or series of layers into a smart object and copy/pasting it into a new document, but I find this makes things more difficult for downsizing (for one, it rasterizes your layer styles & shapes). I should note that I almost always design at 2x and downsize my images for 1x when saving.

So, instead of flattening your art and copying into a new doc, I simply select the layer, group, or series of layers and duplicate them into a new document.

Make sure you select "new" for the document destination in the prompt to actually duplicate into a new doc, rather than your current one.

You now have a new document containing only the art you wish to save. It will most likely be way too big! But that's okay (it will size your new doc based on your existing doc's canvas size), we'll deal with it later.

Make sure your styles copied correctly

This is something that often catches me up. Occasionally, most often with document lighting, your layer styles may not copy to the new document correctly. Almost always this is due to document lighting resetting to your default angle, which can screw up your art's shadows. Make sure to reset these to what they were initially (or alternatively uncheck "use global light" when setting your shadows).

Additionally, for ease of resizing your art, you should enable the "align edges" option. This will attempt to force the edges of your art to the pixel grid, which creates much sharper image quality. This won't really be noticeable in 2x/retina, but when you size down to 1x you'll be glad you checked this box.

Trim!

I wrote a post on this earlier. Its now time to use Photoshop's trim! Hooray. This will remove all the transparent pixels from your document, leaving you with a canvas perfectly sized to your art.

Trim is located under the "Image" menu.

Set up your canvas for resizing & saving

The next thing you should do is make sure that your canvas (and art, if you'd like) are ready for resizing. By this I mean, making sure that (if you are downsizing like I am) your art is for the most part even pixels in width and height, as is your document size. This is importnat. If you are downsizing with odd pixel sizes, it can cause your art to become distorted at 1x, and worse can cause display issues in xcode if the pixels sizes are not exactly double.

In this case, I increased the size of my canvas by a pixel so that it ended up being 40x40 pixels.

Save your 2x version

You are now ready to save your 2x/retina version of your art.

Size down your image

Once your 2x version is saved, you're free to size down your art by 50%. Assuming you had "align edges" checked and your art was not overly complex, you should be left with a very nice 1x size version of your image. Go ahead and save that now.

That's it!

Hopefully this gave you an idea of my process for saving retina and 1x artwork for mobile design. Let me know if you have any thoughts, questions, or if you have a better process on twitter. I'd love to hear from you.

Perhaps due to the fact that I near completely self-taught myself how to use Photoshop, the "trim" function was something that I was unaware of until recently. (As an aside, this will probably be a common theme -- "Things in Photoshop which are exceedingly obvious of which I was unaware.)

While trim presents you with a few options, the one which has become invaluable to me is the "based on transparent pixels" option. In layman's terms, what this does is strip away all the transparent pixels from your image, leaving you with only those which have some degree of content. This includes -- does not strip away -- shadows or other layer styles.

Why is this useful?

This technique is a godsend when it comes to saving images for app development. I have gotten into the habit of duplicating a layer to a new document when saving. This preserves the layer styles (rather than converting to a smart object and copy/pasting into a new document) and allows for easy downsizing and scaling of layer effects when saving 1x/2x versions, which is something all mobile designers deal with at this point.

However, when you duplicate a layer into a new document, it reuses the origin document's artboard size, which will almost always be too large. This is where trim comes into play -- simply trim away the excess transparent pixels and bam, perfectly sized artboard for your art, with layer styles intact.

I post this because I absolutely adored Phoenix's previous album, and am waiting with bated breath for their new release. Taste of what's to come?