Computer formats move on at such a pace it’s sometimes hard to keep up. It’s easy to just go with what you know. Saving a transparent image in Photoshop is now easier than ever. Let’s look at how we do it.
To save a transparent image go to File – Export – Export As. Select PNG 24 in the format dropdown. Ensure Transparency Box is checked. Click Export.
As graphic designers more and more work is completed for the digital world. Images may need to be separated from backgrounds or parts added into other images and so need to be transparent. Read on to see how we complete this task in Photoshop CC.
Creating a Transparent Image
Adobe is constantly making our lives easier with extra tools and additional formats. In Photoshop 21 CC it’s now easier than ever to save a file / image as a transparency. You will have to separate the part of the image that you want to have a transparent background.
This image could be anything from a logo to a person to a brand product. It doesn’t matter what it is, it all will become transparent the same way.
You can use the Magic Wand Tool if your background is quite flat or bland but unfortunately most images have busy backgrounds. It’s best to use the Layer Mask. You can adjust sections with the Layer Mask that you can’t with the Magic Wand.
Let’s look at how we do that.
Open your file. Open the Layers Panel. Click the Vector Mask at the bottom.
This will generate another box in the thumbnails beside your image.
You then need to select your Brush Tool. The layer mask will only work if your foreground and background colors are Black and White.
To quickly do this hold Shift ‘D’. This will make your colors Black and White.
Shift and ‘X’ will toggle them back and forth. (as shown below)
Now that we’re all set make sure the mask is selected (there will be a white border around the thumbnail) and work away with your Brush and black color.
This will show a grey checkerboard which is your transparent background. Don’t worry if you make a mistake and take too much away. Your white brush will add it back in if you do.
Once all is removed drag your layer mask to the bin at the bottom of the layers panel.
You will be asked ‘Apply Mask Before Removing’. Click Apply.
Any missed small bits can be tidied up by the Magic Wand Tool if needs be.
Saving Your Transparency
Now that we have our transparency all cut out it’s time to save it.
Go To – FIle – Export – Export As
In Format Select ‘PNG’
Ensure that Transparency Box is Checked.
You can also change the size here if you know what the final size of your image needs to be.
Click Export and your transparency is created.
You can now add this to other files or webpages as a transparency.
What Image Formats Allow Transparency?
There are a few reasons why we might need a transparency file. We might want to place a product on multiple different backgrounds throughout a website or you may want to join several product images together. The only way to ensure transparency after you close a file is the way you save it. PNG format is perfect as it keeps a file small but retains the screen quality.
GIF format also supports transparency however the color quality won’t be as good as a PNG. In saying that PNG files do not support CMYK so you can’t directly print a PNG. You will have to create your artwork ie generate your final image and then resave as a jpg – which doesn’t support transparency.
PNG transparencies are compatible with virtually all browsers, but they don’t support animation.
Starting a Job with Transparency
This is also an option if you are starting a new project.
File – New – Web
Make sure that the background contents are Transparent in the dropdown. You will still have to mask around an object and Save as a PNG.
If you need to save any worked aspects of your project then firstly save your file as PSD. Then you can go back in and rework it if needs be. A jpg will flatten your image and you will lose your layers. A PNG will preserve the transparency.
Here are some other posts you might find useful: