How To: Put A Logo On A Transparent Background
November 29th, 2007 | How-To, WorkflowAs of recent, in my new position I was putting a presentation together and had to create a logo with a transparent background. I thought I knew how to do this in photoshop but try after try it was not working correctly. I ended up consulting one of my old colleagues and the answer was easier than I thought. I’m not sure if any of you may need to do this at any point but here is how you can put any logo on a transparent background.
Ok. The first step is to bring whichever logo you’re working with into Photoshop. For the sake of this demo I’ll use my own logo.

You’ll notice that the layer is locked noted by the lock sign in your layer palate.

When you double click the layer it will ask to confirm the name of the layer. You can rename it if you like. Note: If you’re not working in RGB mode you’ll have to convert it into RGB mode by clicking “image” on the top of your screen, selecting “mode” and choosing RGB. If you’re layer began locked as mentioned above, this will be the only way to unlock it.
Using the magic wand tool, select the current background of your image. In my case it is the light blue area.

You’ll see the marching ants around your selection. At this point you can hit the delete button. The background should vanish. If you have little areas (in between letters like I do) you’ll have to repeat the process.

Ok, we’re almost done. Now, you need to save out into a format that will allow for a transparent background. What does this mean? Well, JPEG’s do not allow for you to save and maintain a transparent background. GIF files are the only file format that will allow you to do so unless you’re using Adobe Illustrator.
Ok, click file and save for web & devices as show below:

Now you must select GIF as your file format and be sure to check the “transparency” box.

Once you do that you’re all set! Just choose the destination in which you would like to save the file and you’re good to go! You have yourself a transparent background! Here is my transparent logo! You’ll notice since the antennas of the TV are white you can see them.

OK, there ya have it! If you enjoyed this post and would like to stay tuned in here at toonice4TV please, subscribe now!
If you're new here at toonice4TV, please subscribe to my RSS feed. Thanks for tuning in!




November 30th, 2007 at 1:24 pm
Greg, would you consider writing a post about how to create an icon to be displayed on the left side of the browser tab (as you’ve done with that TV icon)?
I think people would be interested to learn (1) how to create an icon in the appropriate size and format, especially if it can be done using freely available tools, and (2) how to write the HTML that links the icon to the page.
At least I know that I’d be interested!
December 3rd, 2007 at 8:12 am
[…] my recent post on putting a logo on a transparent background, my friend over at SpicePuppy.com has asked for advice on creating a Favicon. For those that do not […]