In this post, I am going to show you how to slice images from Photoshop for your apps.
I get this question a lot so it would be nice to somewhere to point people to when the email comes in :-).
You can either watch the video (4.45 mins) below or if you want a quick fix, scroll down to get it
Step 1: Find the Layer for your desired graphic
Photoshop graphics are organised in layers so you can isolate each element from each other.
Open up the Photoshop file (well this should be Step 1 but I won’t go into that depth of detail) and then locate the layer where the graphic you want to export resides.
The easiest way to do this is to turn on/off the visibility icon (Eye icon) for each layer to see what disappears.
Sometimes, the design effect for the graphic you want resides on more than one layer, make sure to note all these layers down.
Step 2: Turn Off the Visibility of all other layers.
Let’s focus on the layer/s we have identified by turning off the visibility of the other layers.
To do this, hold town the Alt button and click on the eye icon. This will turn off all other layers except the one you clicked.
If you have multiple layers for your graphic, you can now go and turn on the visibility for those.
Step 3: Crop the Image
You can now select the crop tool and drag around the design element you want to extract. Zoom into the image to make it more precise. Use the View->Zoom In menu item or Cmd+ (Ctrl+).
When you are happy with the crop, click in the tick to accept it.
Step 4: Extract Your Images As PNG files
Now you are almost done. Choose the File-Save As menu item to save your image. Don’t forget to set the File type as PNG.
Step 5: Resize for non-retina version
The Photoshop files you get from App Design Vault are in the retina resolution. You will need to scale down by half to extract for non-retina images.
To do this, select the Edit->Image Size menu item and then type in new dimensions by dividing the current values by 2. Save the image as a PNG without the @2x suffix.
Now you are done, you can now import your freshly squeezed.. sorry sliced images into Xcode and you are ready to roll.
If there are other things you would like to learn about Photoshop, please leave comment to let me know and I may just shoot a video and answer your question as my next quick tip.