Learn how to convert JPG to transparent PNG in Photoshop CC in a couple of minutes or less, and use your brand new transparent file in so many different ways on the web.
Convert JPG to Transparent PNG in Photoshop
Video Tutorial
There are a few steps to this tutorial, so if you’d like to watch me demonstrate everything from opening the file to exporting it as a png, feel free to follow along below.
Step-by-Step Tutorial
Open JPG
Step 1 – With Photoshop open, go to ‘file > open’.
Step 2 – Locate your image, select it, and click ‘open’.
Make Background Selection
Step 3 – With the image open in Photoshop, select the ‘magic wand tool’ from the left-hand toolbar.
Step 4 – Adjust ‘tolerance’ in the top options toolbar. A higher tolerance will select more pixels (use for busier images), and a lower tolerance will select fewer pixels (use for simple vector and color graphics). For this example, I set my tolerance to 10.
Step 5 – Click on the white/solid color background of your jpg to make a selection.
Step 6 – Refine your selection by first looking at it, then using ‘cmd/ctrl +’ to zoom in to certain areas, and the ‘hand tool’ (left-hand toolbar) to click and drag your way to certain areas in the zoomed-in image.
Step 7 – Select the ‘magic wand tool’ again. Hold ‘alt/option key’ and click to remove pixels from your selection.
Step 8 – To do the opposite, hold ‘shift’ with the ‘magic wand tool’ selected, then click to add areas to your selection.
Step 9 – Use a combination of step 7 and 8, and the zoom and hand tools to move around the image as needed, to refine your whole background selection.
Step 10 – Once happy with your background selection, use ‘cmd/ctrl 0’ to return to the image viewed at full size. Do not click away from your selection, as you will lose it.
Create Mask and Refine
Step 11 – With your background still selected, go to ‘select > inverse’.
Step 12 – Click the ‘quick mask’ button at the bottom of your layers panel to make a mask.
Step 13 – With your mask activated and your background transparent, in newer versions of Photoshop CC, use the ‘properties’ panel (window > properties) to use options like ‘feather’ to soften and refine the mask.
Step 14 – You can also add and remove from the mask. With the layer selected, select the ‘paintbrush’ from the lefthand toolbar.
Step 15 – Under your ‘brush’ options in the top options toolbar, select a simple brush and set the ‘harshness’ to low, or even 0%, to give you a softer blend when painting.
Step 16 – Set your foreground color (black and white boxes, bottom of left-hand toolbar) to black, then paint on the mask (be sure to click the ‘mask’ icon in the layer, not just the layer) to remove from the mask and refine it.
Step 17 – Alternatively, switch the foreground color to white, then paint on the mask to add back to the mask, and refine the edges.
Export as PNG
Step 18 – Once happy with your transparent image, go to ‘file > export > export as’.
Step 19 – Set your options as follows:
Format – Set to ‘PNG’.
Transparency – Check this on to keep your transparent background.
Image Size – You can adjust this here, but if you have already set your image to your desired size, you can leave any sizing options as they are.
Resample – You can leave this as ‘bicubic automatic’, which will try to resample the image without downgrading or upgrading the quality as best it can.
Color Space – This is up to you, but checking ‘convert to sRGB’ is worth it if your png is a simple file that will be used on the web. If you are working with specific brand and color guidelines, you can use ’embed color profile’, meaning the file will try its best to match the exported colors exactly or as close to the original file as possible.
Step 20 – Once you are happy with your settings, click ‘export’.
Step 21 – Select a save destination, set your filename, and click ‘save’.
Your transparent png should now be in your save location, ready to be used.
I know there are a few steps in this tutorial, but especially when it comes to transparency, I wanted to show you a couple of techniques that will always give you control and the ability to refine the selection.
Hopefully, you got everything you needed from this tutorial, and can now convert your jpg files into transparent pngs with ease for use on the web.
Featured Image: Licensed by Freepik