Photoshop Help: Making a Background Transparent

[GeorginaS]

I'm not certain if this is the right area to post this, but I'm sure if it needs moving, a mentor will take pity on me, be kind, and move it.

Anyway, a friend of mine has a logo image that she only has a scan of. It's a black outline drawing on a white background. I have it in both a .tiff format and .jpg format. She needs it for both online use on a webpage and touchy-feely printing use for business cards and letterhead.

The problem is the background. I'm pretty certain what I need to do is isolate the line-drawing image and turn the background transparent so we can place it on any colour background and not have a square around it.

For the life of me, I'm having a massive brain-cramp and can't figure out how to make that happen. I have Photoshop; I'm just spectacularly bad with it.

Any help, suggestions, instructions, anything would be hugely appreciated.

 

[Jonathan Scott]

I'm not certain if this is the right area to post this, but I'm sure if it needs moving, a mentor will take pity on me, be kind, and move it.

Anyway, a friend of mine has a logo image that she only has a scan of. It's a black outline drawing on a white background. I have it in both a .tiff format and .jpg format. She needs it for both online use on a webpage and touchy-feely printing use for business cards and letterhead.

The problem is the background. I'm pretty certain what I need to do is isolate the line-drawing image and turn the background transparent so we can place it on any colour background and not have a square around it.

For the life of me, I'm having a massive brain-cramp and can't figure out how to make that happen. I have Photoshop; I'm just spectacularly bad with it.

Any help, suggestions, instructions, anything would be hugely appreciated.

If you can save in .gif format then that format has an option to make a colour transparent, which may be available at save time. If your tools don't support transparent option, there's a website which can be used to turn a non-transparent GIF into a transparent one: http://stuff.mit.edu/tweb/map.html"

You just have to make the non-transparent GIF available somewhere where the website can fetch it, then give it the URL and click on the colour you want to be transparent and it will display a transparent GIF which you can save.

(I have also in the past made a GIF transparent by zapping the header using the Windows debug command, but that's a bit advanced).

 

[GeorginaS]

Thanks Jonathan. That's helpful for the website graphics. I know I need something with high-density pixels for a professional printer, though. Or, okay, let me rephrase that. Years ago, when I used to have lots of stuff professionally printed, that's what they required. They also used to require colour separations too, which they don't any more, so maybe I should check with them what their specifications are.

I'll try the .gif file for the website, though. I'm ftp(ing) the images directly to the site so everything lives in one place. That may well be my solution for that part, though.

Thanks!

 

[Andre]

The downside of the GIF format is that it causes quite noticeable posterization. For high quality colors you need other methods

I'm not working with photoshop but with Gimp but it should be possible to work with layering and smart additions of the several layers to get that effect.

 

[GeorginaS]

I don't think I'm making myself clear, here.

 

[MacLaddy]

Not sure if I understand completely either, but I'll give it a shot.

Similar to what Jonathan said earlier, in order to save your image with a transparent background you will have to save it in either GIF format, or TIFF format. GIF is usually the simpler solution though. Take a look at the thumbnail and you will see a shot from Photoshop CS3. You can also see from the additional "TEST" picture shown below with the desired transparency I think you are looking for.

First you will want to make sure you layer the background that you want to get rid of, and be sure it isn't locked. Then either delete it, or just hide it. Afterwards when you save as a GIF just be sure to check the transparency box.

I'm finding this difficult to explain. Let me know if I'm on the right track at all for explaining this, or if I'm clueless on what your looking for.

*EDIT* If you don't know how to layer the background, you'll want to choose your "Magic Wand Tool," and click somewhere on the white background. Once the squiggly lines have outlined the area you want, right click on the image and choose "Layer Via Cut." That will create a new layer for the entire background area around the logo. Then simply delete or hide the new layer you created. Also, be sure the background you are working on doesn't have the lock symbol next to it. If it does, then right click and choose "duplicate layer." Once you do that just delete the original locked layer. This will allow you to modify things.

 

[GeorginaS]

Yes! Thank you, MacLaddy! That's precisely what I was asking about.

I'll try to follow that and see what I come up with. I'm not sure that I fully understand the laying concept that Photoshop uses, so that slows me up quite a bit.

I've attached a thumbnail of the image that I need a transparent background on so it can get dropped onto any colour background.

I'll give your instructions a go and see what I come up with. Sorry for my poor explanation.

 

[MacLaddy]

I found this YouTube video someone did that explains it really well. In fact, she does it about twice as quick as what I knew how to do.


Cool logo... The one below is now transparent. Not sure if you can use that, or if it's too small.

 

[GeorginaS]

Wow. What a cool link, MacLaddy. Give me a second while I un-slack my jaw.

Thank you!