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