Using the Right Logo Image – Transparent PNG

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

1 PNG - Open File

2. Add a transparent layer

Select “Layer” > “New Layer” from the menu (or just click on the square icon in the layers window).

2a PNG - add layer

2a PNG - add layer button

The new layer should automatically be transparent.

Drag this new layer below your image’s layer and select your content layer.

2b PNG - add 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:

3a PNG - transparent wand settings

You can also experiment with different settings to get the result you want.

3a PNG - transparent

Hit the Delete button. The selected area will removed and the transparent background becomes visible.

3b PNG - transparent

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!

4 PNG - save

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

Simplify and grow your fundraising

It honestly felt like using CauseVox expanded our team by another member.

    Easy-to-use Free to get started Cancel anytime