Join Now Sign In
Get full access to articles, free contest entries and more!
Advertisement

Save An Image With A Transparent Background

How to use Photoshop to save a photo with a transparent background for use online

There are lots of reasons to save an image with a transparent background. You may want to create a collage, for instance, layering one image atop another. Or, more likely, you might need to use the image online, with a background generated by the website. This is a common approach for everything from portraits and product photos to logos and graphics that need transparent backgrounds to display correctly. Here’s how to save an image with a transparent background in Photoshop.

The first step is to isolate the image you want on its own layer. You can accomplish this by duplicating the background image onto a new layer, filling the background with a solid contrasting color while you work, then erasing or—better still—masking away the part of the image you want to be transparent. I like using a layer mask because it offers more control than simply erasing image-forming information.

Once the layer shows only the portion of the image you’d like to keep, it’s time to make the background disappear. It’s not good enough to make the background white or black or any other color—it actually needs to be transparent prior to saving. So to accomplish this, you’ve got to eliminate the background layer entirely. Look in the Layers panel to see which layer is active. The active layer is indicated with subtle highlighting. Click on the background layer to make it active, and then simply click the trash icon on the bottom right of the Layers panel to delete it.

With only the image layer remaining, you’ll see the visible portion of your image along with a checkerboard-tiled background in gray and white. Wherever you see this checkerboard background, that’s Photoshop’s way of showing that this portion of the image is actually transparent. Now it’s time to save the file.

You may be used to saving image files for web use as JPEGs, but JPEGs don’t support transparent backgrounds. So, instead, you’ll need to use a format such as GIF, TIF or, ideally, PNG. The PNG file is small enough for use online but still delivers high quality with transparency as well. If your image is a text-style logo, you might be fine with a GIF, but for a continuous tone photograph, you’ll be better served by PNG.

In an earlier version of Photoshop, “Save for Web and Devices” on the File menu was the way to accomplish saving an image with a transparent background for this purpose. Now that option is found under the Export heading of the File menu. When open, the dialog box offers options for everything from finished dimensions and file size to file format and much more. It offers a number of controls for fine-tuning the finished image—if you want them.

If you’d prefer a simpler saving option, simply ensure your image is already the size you’d like (and if it’s not, use the Image Size controls found under the Image menu to resize the dimensions) and choose Save As under the File menu. Then, choose the appropriate file format (such as PNG) from the Format dropdown. This file is now ready to use online or in any other situation in which a transparent background is necessary.

Leave a Reply

Save Your Favorites

Save This Article