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.

Congratulations!

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.

9 comments

  1. Pashik

    It doesn’t describe slicing in case elements have shadows.
    Sometimes shadow is hardly visible and it may have “cut” edge when placed in application.

    • tope

      Hi Pashik, You could also crop the element and shadows before you make the background transparent.. This way you avoid cutting out the shadows because you can still see it…

      But Shai’s answer below seems like a better solution

  2. Brian

    I’d love to see Pashik’s question answered (I’ve searched all over for an explanation on how to get PS to include shadows in a selection or something). But I’d also love to see some more information on cutting up something a little more complex like the components of a slider or progress bar.

  3. Shai

    There is a trim menu option in Photoshop that is superior to crop. It removes all transparent pixels and leaves the shadow pixels. To find the right layer you have an option in photoshops select tool to select the layer. Just click the section you want to cut and it will select that layer.
    There is another simple technique rather than cropping you can select layer (or layers) of interest and convert them to a smart object. Double clicking the smart object opens it as as separate already cropped file that you can save as a PNG.

    • tope

      Thanks for that Shai… Sounds like a better solution.. The smart object one, I mean. But can be tedious with many objects to export.

      If you have only one or two, I would go for that option though…

  4. Hafeez Ansari

    Its a very simple and i think many designers already know “how to crop and save images?”. Suppose i am slicing images for iPhone app. For me, i’ll create a seperate canvas file and will place each element on the canvas and then use slice tool to define slice area and set the file name for each slice and then save as web to export all slices at once. This is easy than your described method but i am looking a solution if i want to export all the slices for different resolutions like mdpi, hdpi and xhdpi then how can i resize the file to use the same slices for each resolutions? is there any formula?

  5. kennedy

    That was really helpful. May be if you have time you could have a series of screencast where you teach how to transform a app psd mockup into xcode project. That will be really nice. Am a beginner to ios development and I find it hard to connect ios components to come up with professional design like the ones you guys have.