Solved

How to make the "inside" of a logo's lettering transparent

Posted on 2013-12-11
21
394 Views
Last Modified: 2013-12-11
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
0
Comment
Question by:shawn857
  • 6
  • 4
  • 4
  • +4
21 Comments
 

Author Comment

by:shawn857
ID: 39712855
Sorry, other screenshot attached. I hit ENTER after typing in an explanation of 1st screenshot and it submitted my whole question. EE webmasters might want to fix this.

Thanks
    Shawn
FlexuSwoosh-trans.png
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39712874
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.
0
 

Author Comment

by:shawn857
ID: 39712968
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
0
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 
LVL 17

Expert Comment

by:Chris Millard
ID: 39712973
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)
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39712980
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.
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39712988
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
0
 
LVL 31

Expert Comment

by:Paul Sauvé
ID: 39713018
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.
0
 

Author Comment

by:shawn857
ID: 39713036
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
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39713039
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!!
0
 

Author Comment

by:shawn857
ID: 39713041
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
0
 
LVL 31

Expert Comment

by:Paul Sauvé
ID: 39713046
Your background IS transparent!Transparent bkgrnd
0
 

Author Comment

by:shawn857
ID: 39713052
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
0
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39713065
Right. I think I get what you're after.

You're going to need to do this in several steps, but the quality of the outcome will depend largely on the quality of the images you've got to work with. In GIMP (and most decent image editors) you build up images using layers. To achieve what you need, this is what I'd do.

Open your Logo
Create a layer below this and fill with a block colour such as Red
Merge the layers
Make the Teal lettering transparent (Colour to Alpha)
Create another layer below containing the gradient from your button and then merge again
You will now have an image with lettering the colour of your button and a red background
Using the Colour to Alpha select the Red and you background will become transparent.

You'll end up with something like this:

Gradient Letters
0
 
LVL 70

Expert Comment

by:Merete
ID: 39713071
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 lettersRough example
finished example
0
 
LVL 70

Expert Comment

by:Merete
ID: 39713074
Lol  ChrisStanyon you posted before I was done.
Mine is a transparent png
Oh well so many talents here good stuff
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39713082
@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 :)
0
 
LVL 31

Expert Comment

by:Paul Sauvé
ID: 39713083
Another rough example with Paint.NETExPlace 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! ;-)
0
 
LVL 70

Expert Comment

by:Merete
ID: 39713095
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
0
 

Author Closing Comment

by:shawn857
ID: 39713099
Chris you nailed it, thank you so much! And to all the others who contributed thank you also.

Cheers
   Shawn
0
 
LVL 70

Expert Comment

by:Merete
ID: 39713102
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
0
 
LVL 26

Expert Comment

by:David Brugge
ID: 39713286
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.
0

Featured Post

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

PaperPort is a popular document imaging/management product from Nuance Communications (http://www.nuance.com/), previously known as ScanSoft. PaperPort is in widespread use by both individuals (http://www.nuance.com/for-individuals/by-product/paperp…
This article discusses the PaperPort 14 Scanner Connection Tool, which Nuance provides at no charge in order to fix scanning problems in Windows 8. Furthermore, users of PaperPort 14 in Windows 7 and Windows 10 have reported that the tool works in t…
The goal of the tutorial is to teach the user how to add a water mark to there photo. Once you have a photo you like you have to go into the water mark setting and add a water mark to the image. You can either choose a text watermark or an image…
The goal of the tutorial is to teach the user how to import photos into Adobe Lightroom efficiently and to keep everything organized.

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question