How to make an image transparent?
If you need to make your company logo image transparent or need to use any other transparent image on your site simply follow this step by step tutorial how to remove the background from an image.
We use Photoshop in this tutorial but the similar actions you may do with any software for digital photo editing for example:
- Gimp (FREE)
- Paint.NET (FREE)
- Affinity designer
- Corel Photo Paint
- Krita (for Linux also)
- pixlr
Open your image file in Photoshop
Press Ctrl + O (for Mac users Cmd + O) and navigate to the folder where your file is located. Select your image file and click on the Open button.
Make a layer from an original image
Click on the lock on your Background layer. This action makes your image editable.
Photoshop layers are like sheets of paper stacked on top of each other. If you have any transparent areas, you can see what is in the layer below. You can also change their order by moving them up and down.
Select magic eraser tool
Go to the Tools panel, right-click on the eraser tool set (1) and select Magic Eraser Tool (2).
Magic Eraser Tool Erases a single shade of color from a layer. Magic Eraser Tool Erases a single shade of color from a layer.
Remove background from the image
Begin clicking on the all white areas you want to remove and make them transparent.
You can easily zoom in and zoom out to make the accuracy of your click larger. To do this, scroll up and down while holding down the alt key.
Save for web your edited file
Go to File > Export > Save for Web
"Save as..." option includes hidden unnecessary data, like meta data, app version, time created etc.
"Save for a Web..." removes all proprietary data from the file so the file size is smaller.
Choose image file format for transparent images
Set the file format to PNG-24 (to preserve transparency). You can also adjust the image size in the provided input boxes. Click Save button, enter the new filename and click Save.
PNG - Raster image file format and lossless compression of graphic data. It supports graduated transparency (alpha channel) and 48-bit color depth
Voilà! Your transparent image is ready to use on your website.