Transparent rounded rectangle

[billa]

The problem is you were using linear transparency instead of linear fill on the top shapes of your groups.

Ok, now how do I undo the linear transparency so that I can do the linear fill on my original file that was the full width button?

[billa]

Thanks, Soquili

Talk about old and forgetful!

Anyway, I changed the transparency to NONE.

And when I came back to the forum screen I realized you had uploaded changes for me. Thank you.

Now I have another problem. When these files are exported as GIF's and put onto the web page with the #00CCCC background even at this small size the pixels around the curve look terrible and ragged. Is this something else that needs to be learned with ten years of experience or can I expect to find some documentation about fixing this.

I presume this would be in the export dialog somewhere because the drawn XAR looks clean and smooth.

[Soquili]

Bill make your workspace background that colour or use a rectangle of that colour behind your shapes.

Select only your shapes and not any rectangle used behind them and export. This will antialias the shapes to that colour and it will blend in with your site's background.

[Soquili]

If you notice in my first post in this thread http://www.talkgraphics.com/showpost...03&postcount=2

The first yellow button has the turquoise colour showing around the curves. That is because I used that colour for the page background. It does not look good on the very pale blue of the forum's background. The second yellow button looks better because I used a lighter colour that matches the forum better.

[billa]

I will try that now, but what you say brings up another question. I was hoping to be able to reuse this complex button on other web sites but if I have to have the background colo(u)r included each time that is a few extra steps.

I guess my question is what is Xara's definition of transparent. Putting a color behind kind of precludes having to use transparent at all, correct?

[Soquili]

Bill it isn't Xara's definition of Transparent. It is the old CompuServe 1987 and 1989 created gif definition of transparent.

Pixels are square in shape on most monitors. When trying to simulate a curve you can either staircase the pixels or you can try to smooth them.

The smoothing is called antialiasing. This is where many pixels are used and variations of the curve line colour and the adjoining pixels of the background blend in a range of colours.

See the wikipedia article http://en.wikipedia.org/wiki/Anti-aliasing.

[iamtheblues]

My attachment (post #3) shows how to cure the ragged edges.
Alternatively, you could export the image as a .png file with alpha transparency.
Saludos,
Bob.

[Soquili]

You can use another file format that supports transparency. The Portable Network Graphics or png file format supports transparency.

It has been around for a long time but some browsers did not support it very well until fairly recently.

Using a Truecolor + Alpha channel png file does not antialias or not as much at a 256 colour gif or even a 256 colour png.

This creates a larger file size but can eliminate the need to export different images over different backgrounds.

[billa]

Thank you Bill (Soquili) and Bob (iamtheblues) I think I can get a sliding door button done now, finally.

[Soquili]

Glad to help Bill.

I made a few examples so I'll post them as well.

All three buttons have a shadow applied to accentuate the effect of the background colour.

I used a dark cyan background for all images.

Notice the Truecolor+Alpha png looks the best, but is larger in file size.