How do you fix the transparency problem in gifs or pngs with rounded edges?

Question

Have a look at the 'post box' on this site and the header edges:

www.pedromatriciano.com

If you know the solution for photshop, even better.

Answer 1

Create an image in RGB mode and use Photoshop's rounded rectangle tool. Have the background transparent and "export" the images in PNG-24 format. But keep in mind that internet explorer 6 and prior versions do not display the transparent PNG images properly.

If you choose to use GIF images you should use a "matte" color that is same as the back ground color to reduce the "stair-step" effect.

Lastly, it seems like there are two background images shown behind the corners. May be the parent container also has a background image. Use one background for the corners and the other one for inside content.

Answer 2

You need to make the edges outside the round parts transparent.  I used GetPaint and did it this one in 3 seconds:

http://www.pedromatriciano.com/wp-conten...

Ron

Answer 3

It is a common problem!

In Photoshop, prepare your image with a contrasting background layer (for you to see small mistakes).

Each rounded corner will have to be re-worked in details, erasing with a pixel wide brush.  The problem is DITHERING.

Make sure you erase well any pixel you don't want to see.

Then, when your image is correct, hide the background and save it "as".

Set it for GIF, Transparency: yes. NO dithering, and INTERLACED. (PNG does not work well).

Then, change the bkg of your web and check your picture again.

Re-do if there are some "whitish" dots left around...

Pain, but works.

Answer 4

File> Save for web> pick PNG-24 and tick the transparency box.