asked on
How to make the "inside" of a logo's lettering transparent
Hi gurus, I have a PNG logo file that has a transparent background (see attached Flexuswoosh-trans file). It's fine except for the internal teal color within the lettering - ideally I would like to have that color be the same as the color that the buttons in my app are - see attached file buttoncolor.bmp. See how the button's color has a nice metallic shiny effect? (I did this with AlphaSkins). I'd like the inside lettering color in my "Flexu" logo to be the same way.
What I was thinking was, if I could somehow make the teal colored part of that logo transparent, then I could slap the logo on top of the buttoncolor.bmp image and the nice metallic color would come thru the transparent part - then just save that. I tried this in Irfanview and it wouldn't make the teal colored part transparent. Any ideas?
Thanks!
Shawn
buttoncolor.bmp
What I was thinking was, if I could somehow make the teal colored part of that logo transparent, then I could slap the logo on top of the buttoncolor.bmp image and the nice metallic color would come thru the transparent part - then just save that. I tried this in Irfanview and it wouldn't make the teal colored part transparent. Any ideas?
Thanks!
Shawn
buttoncolor.bmp
Images and Photos
Last Comment
David Brugge
I think you would need Photoshop or Gimp to do that. Irfanview is very good at a lot of basics but not at editing layers.
ASKER
Thanks Dave... I've never used Gimp before (is it free?) - would you have any insight on how I could get this done on there?
Thanks!
Shawn
Thanks!
Shawn
Each to their own, but I would use Corel's Paint Shop Pro for the job. Not free, but you can get a fully functional 30 day trial (and it's compatible with most PhotoShop plugins)
Gimp is free. http://www.gimp.org/
Paint ShopPro is good also. I have an older version of that that I use now and then too.
Paint ShopPro is good also. I have an older version of that that I use now and then too.
GIMP is a great tool, particularly as it's free - It has an option to turn a colour into Alpha - you just choose Colour to Alpha from the Colours menu, then click the From box and choose a colour from your image - job done!
Here ya go:
![Logo With Transparent Letters]()
Here ya go:
Another free image editor I use is Paint.NET. It is quite a bit easier to use than GIMP (which I also use quite extensively), but with fewer functions... ![Teal removed!]()
You will notice that there is a bit of teal left along the edges, this can be corrected with the Zoom and Eraser tools.
You will notice that there is a bit of teal left along the edges, this can be corrected with the Zoom and Eraser tools.
ASKER
Thanks Chris and Paul, but I'm a little stumped on how I'm gonna attack this. With the letters *and* the background both transparent, once I place it on top of my desired button color - everything is gonna have the button color. I'd still like the background color to remain transparent. I guess I'll have to start first with the fully NON-transparent logo image and just change the lettering color to transparent using Gimp, eh?
Thanks
Shawn
Thanks
Shawn
Not sure I follow what you mean - I thought the whole point of this question was how to make the letters transparent, which is what shown you!!
You say you want to keep the background colour transparent but start with the non-transparent image and just change the lettering - that doesn't make sense! Either you want the background transparent or you don't
I'm confused!!
You say you want to keep the background colour transparent but start with the non-transparent image and just change the lettering - that doesn't make sense! Either you want the background transparent or you don't
I'm confused!!
ASKER
I only wanted the lettering transparent so I could capture the nice buttoncolor (as in the screenshot I attached previously). Once I have the lettering that color, I don't want the lettering transparent anymore. I only wish to have the background permanently transparent. Sorry for the confusion!
Shawn
Shawn
Your background IS transparent!![Transparent bkgrnd]()
ASKER
Yes Paul, and that's the only thing I want to leave transparent. But when *everything* is transparent all at once, everything will pick up my "buttoncolor" once I lay my logo over it. I only want the letters to be transparent initially to "capture" that buttoncolor, then I guess the 2nd step would be to take that result, and then make the background transparent. Do you see what I mean?
Thanks
Shawn
Thanks
Shawn
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
drop your logo on and this colour image
I know your using Photoshop it's kinda similar to my Paintshop pro
Use your magic wand to put a dotted line around a letter or all the letters then invert it to so that the dotted lines stay inside
I then use my clone tool adjust the size of the tool make it round or square large enough to take in most of the colour you made( it's two tone)
So Long as the letters have the dotted line around it paste your colour anywhere as it will only go inside this dotted line
I tried using the flood fill but it wont keep to the two tone colour
The clone tool worked pretty good but I made it a circle and fitted the frame of your square, as each click moves the curser along on the other image at the same time I had to re-click the center of your two tone to recenter it
![adding glow to letters]()
Rough example
![finished example]()
I know your using Photoshop it's kinda similar to my Paintshop pro
Use your magic wand to put a dotted line around a letter or all the letters then invert it to so that the dotted lines stay inside
I then use my clone tool adjust the size of the tool make it round or square large enough to take in most of the colour you made( it's two tone)
So Long as the letters have the dotted line around it paste your colour anywhere as it will only go inside this dotted line
I tried using the flood fill but it wont keep to the two tone colour
The clone tool worked pretty good but I made it a circle and fitted the frame of your square, as each click moves the curser along on the other image at the same time I had to re-click the center of your two tone to recenter it
Rough example
Lol ChrisStanyon you posted before I was done.
Mine is a transparent png
Oh well so many talents here good stuff
Mine is a transparent png
Oh well so many talents here good stuff
@Merete - yeah, few different ways of doing it depending on the program available. I don't think he has Photoshop and PaintShop Pro isn't free which is why I chose GIMP for this example. It's a pretty simple copy/paste exercise really.
My image is also a transparent PNG :)
My image is also a transparent PNG :)
Another rough example with Paint.NET![Ex]()
Place the Flexu layer over the resized button layer; merge the layers; use the Magic Wand to get rid of what you don't need.
I'm REALLY slow - what can I say! ;-)
Place the Flexu layer over the resized button layer; merge the layers; use the Magic Wand to get rid of what you don't need.I'm REALLY slow - what can I say! ;-)
Aheh wow that's a good effort for paint dot net, love that tool, at least shawn857 has now been shown 3 different tools
cheers
cheers
ASKER
Chris you nailed it, thank you so much! And to all the others who contributed thank you also.
Cheers
Shawn
Cheers
Shawn
Shawn you were really close in your own effort all you needed to invert your dotted lines you had put the dotted lines all over the image boundary as well the letters inverting them will put them around the letters only.
the thing is we all posted at the same time lol I'm in Australia..
Glad to share it was fun.
cheers
Merete
the thing is we all posted at the same time lol I'm in Australia..
Glad to share it was fun.
cheers
Merete
I know I'm late to this party, but another option is to simply add subtle shading to the transparent space within the letters. Takes a little skill, but certainly something a beginner with any compatible program can handle.
The advantage of having the shading within a transparent area is that you can then change button colors and the logo letters will change to match. However, because of the shading, they will have a somewhat 3-D effect rather than just looking like a hole punched through the lettering.
Just an idea.
The advantage of having the shading within a transparent area is that you can then change button colors and the logo letters will change to match. However, because of the shading, they will have a somewhat 3-D effect rather than just looking like a hole punched through the lettering.
Just an idea.
Thanks
Shawn
FlexuSwoosh-trans.png