Logos with colored backgrounds often clash with the background color of your website. Unless you want change the color of your site, you need transparent PNG logos that seamlessly integrate with your page.
Often times, whoever created your logo would be able to give you an image with transparent background. If not possible, we’ll walk you through on how you can make your logo have a transparent background through this post. This isn’t the easiest thing to do yourself, but with some practice, you can make it perfect.
If you have a logo with colored background, you must first make the background transparent. Then you can convert the file format into PNG, which is the file format designed for transferring images onto the internet. The JPEG format, though useful, does not support transparency.
(Program used here: Adobe Photoshop CS4. Other image editing programs work as well. See bottom of the post for list of alternatives to choose from.)
1. Open the file of your logo
2. Add a transparent layer
Select “Layer” > “New Layer” from the menu (or just click on the square icon in the layers window).
The new layer should automatically be transparent.
Drag this new layer below your image’s layer and select your content layer.
3. Make the background transparent
Using the magic wand or lasso tool, select the area of the image you want to be transparent. Magic wand settings:
You can also experiment with different settings to get the result you want.
Hit the Delete button. The selected area will removed and the transparent background becomes visible.
4. Save the image as a PNG image
Click “File” -> “Save As”. Select “PNG (*.PNG) as the file format. Note that though a transparent background looks checkered in Photoshop, it will actually be transparent in the final PNG file. Now you can upload this logo with a transparent background onto your website!
Tip: You might need to go to “Mode” -> “RBG Color” to change your image’s color format into RBG, which supports transparency.
Alternative Image Editing Programs