Steps to convert this .jpeg into a .png with transparency

[thechad]

Hi folks,
After a few days of reading and testing I am closer to my goal, but always seem to hit a dead end and could use some help from the experts on here.

I want to convert the .jpeg radio logo's on this page to .png's with transparent backgrounds so I can place them only buttons for a gui I am designing.



This post Make an image transparent and on Convert greyscale PNG to transparent PNG get me close (although the second relates to greyscale and I'd prefer colour)...but I can not seem to crack it!

The tricky bit is the "feathered" edges of the image...which seem to create a png like this when overlayed on (say) a blue background.

I appreciate this is not easy...but I am sure other have tackled it in the past and may have some best practice steps to follow.

Thanks in advance

[fmw42]

This is not an easy task because your are starting with a jpg which is compressed and does not have uniform colors. It would even be hard if you started with any non-compressed image, because the transition between colors is anti-aliased. Thus you cannot fully make any one color transparent without leaving a "halo".

But try this. The blur tries to mitigate some of the transition problem by anti-aliasing. It won't be perfect.


convert 3AW_slogo.jpg \
\( +clone -fuzz 30% -fill black +opaque white -negate -blur 0x1 \) \
-alpha off -compose copy_opacity -composite result.png

[snibgo]

If you remove all the white, will your result be readable on (say) a dark blue background?

I think the "best practice" answer is (Windows script):

Code: Select all

convert ^
  http://resources.3aw.f2.com.au/myTalkNetwork/3aw/css/img/bg_headings.gif ^
  -crop 200x100+0+0 +trim ^
  -bordercolor None -border 5 ^
  b.png

This has many advantages: it is readable on any background, the logo's owner is unlikely to object that you have messed up their corporate standards, etc.

Replacing white (including anti-aliased white) with transparent is difficult. JPEG compression really messes up flat colour like this. You need to replace the anti-aliased blue/white with blue and the anti-aliased yellow/white with yellow, and then find the appropriate alpha values. I can't see an easy way to do this in the general case, and it doesn't solve the readability problem.

This, which is similar in priciple to fmw's suggestion, might be an acceptable general solution:

Code: Select all

convert ^
  3AW_slogo.jpg ^
  -fuzz 30%% ^
  -transparent White ^
  -channel A -blur 0x1 ^
  b.png

[fmw42]

convert ^
3AW_slogo.jpg ^
-fuzz 30%% ^
-transparent White ^
-channel A -blur 0x1 ^
b.png

Same approach but more elegant/simpler code.

[thechad]

Outstanding. I do appreciate what you mean about the use of a company logo and the simplest/most universal option being to trim the original, however this is only for my personal home use and not for a aommercial product.

The command i used was...

Code: Select all

convert a.jpg -fuzz 30%% -transparent White -channel A -blur 0x1 b.png

and this allowed me to do something like this...


That button is just a quick knockup test and I am yet to work through the actual colour scheme, shape/gloss etc..but it shows what i can now do with these images that I could not before. (likely to end up being a dark grey with blue/grey for on state).

A big thankyou to you both for your help!