Fork us on GitHub

Cutting PSD Files

This post is inspired by a great post written by Tope, coveri...
Post Image

Cutting PSD Files

This post is inspired by a great post written by Tope , covering the slicing of a PSD image to produce small PNG images which you can later on use as image borders, backgrounds, icons etc. Tope's technique is pretty simple and works rather well but I'd like to offer another technique as well as a better way to detect the proper layer you with to cut.

Picture
This post assumes you have a recent version of Photoshop installed and assumes you don't know anything about Photoshop. So we start by opening the PSD file in Photoshop, this file is composed of layers. A single "component" is usually composed of multiple layers which you can show/hide by pressing the "eye" button in the layer view.

You can see the layer view by selecting Windows->Layers from the photoshop menu, on the right you can see the layers of a simple iPhone design that I have here. You will notice that every entry is collapsible. A common paradigm designers use is to create multiple screens/forms in a singled PSD and thus represent a "screen" (Form) of its own within the design. So in order to see the other forms for those cases you can just hide/show each layer, in order to show individual components you can use the eye icon to get a specific component.

Now our goal is to find a specific set of layers relevant to us and "hide" everything else so we can get the particular component we need in isolation. This is pretty easy when the design is small, but just locating the right layer becomes a HUGE hassle as the design gets complicated and deeply nested.

Picture
To find the layer matching a specific component we select the "Move Tool" from the toolbar and check the auto select option in the toolbar above, we then pick the "Layer" entry instead of group.
Now when we click an area on the screen the layer corresponding to this specific entry will be selected in the layer view and we could manipulate it. Notice that a component is often composed of multiple layers... We usually would want to hide things such as the text layers etc. for cases such as buttons where we would want to get the button alone so we can cut it into a 9-piece border, but we would want other layers.

Picture
Now say I want to extract an image that is comprised of the following 3 layers, I can select all 3 layers then right click on them (important! Notice that you need to click on the area where the text appears NOT on the icon of the layer, you will get a different context menu otherwise!). You will get an option to convert the layers to a smart object.
After converting to a smart object double click the layer icon (you will get a dialog with a message that is relevant only if you are interested in really changing the file), the standalone image will open in a separate tab and you will be able to use the Save As option and select PNG as the format.

I hope this tutorial together with the very detailed tutorial from Tope will help you cut images from PSD's more effectively and help you create better looking apps.

Notice: This post was automatically converted using a script from an older blogging system. Some elements might not have come out as intended.... If that is the case please let us know via the comments section below.

Share this Post:

Posted by Shai Almog

Shai is the co-founder of Codename One. He's been a professional programmer for over 25 years. During that time he has worked with dozens of companies including Sun Microsystems.
For more follow Shai on Twitter & github.