How To Extract PNG Images From Photoshop PSDs

Well, there is no avoiding it. If you’re a developer, at some point you will need to know at least some Photoshop. Clients and designers will send you PSDs (photoshop files) of how the site should look, and your job is to make that happen. To do that, you will need to extract individual PNG images from the photoshop files to include in the website.

Here is how to do this seemingly “easy” task:

Select The Image

Step 1 is to select the image you want to extract by using the dotted rectangle icon. You want to leave very little space around your image, so I recommend zooming in to 700% to get just the pixels you need.

Copy The Image

Copying sounds easy, but depending on how many layers your Photoshop file has, the standard Command + C shortcut might not work. Instead use SHIFT + Command + C. Make sure you only have the layer you want in the selection.

Create A New File

To make sure your canvas size is the same as the one you selected around the image, just create a New File => Command + N or go to the File menu item and click New. Once you click on New, enter the name of the image, and you’ll see a blank canvas that is the same size as your selected image.

Paste The Image

Command + V will paste the image right into your new canvas.

Remove The Background

You likely want a transparent background. That is easily done by unchecking the Background layer:

Save As PNG

Again, this sounds easy, but if you want a high-quality PNG, make sure to use the Shift + Option + Command + S shortcut or select the “Save for Web and Devices” options from the File menu. You can now choose which file you want to save it as. I like to use PNG-24. Once you select the image, and click Done, you will finally be able to save the image to your project.

So there you have it. Photoshop has managed to turn a seemingly simple task into an intense and complicated experience.

Enjoy the article? Join over 17,500+ Swift developers and enthusiasts who get my weekly updates.

  • So annoying…
    I usually right click on a layer and duplicate it to a new name and leave the canvas the same size. Then I save as a png, then just open up the png in fireworks, click the background and hit the ‘fit to canvas’ button and save again.
    And then usually save again to a jpeg.
    Things that should be oh so easy…..

  • I’m not getting png as a save type – presumably because of the color settings – I’ve worked this out before but can’t remember how.
    Save to web works (thanks!) but is such a PITA.

  • deovrat247

    will this work with png too. I need to extract images form the website psd template