This content has been marked as final. Show 4 replies
I'm replying to update my situation. I've gotten most of it settled by tightening the slice to the object.
But it still is a rectangular slice over a rounded rectangle, so there are going to be slight points that are blank on the points of the square - it seems there's no way around that unless I do CSS which I'm not adept in.
I am still open to any tips or pointers to improve this.
Ah yes. The old "I want to anti-alias a transparent gif over a gradient background" problem.
If you had a solid background, then you could just anti-alias your rounded rectangle against your background color and not worry about transparency. Since you need those corners to be transparent, you have to have a hard edge to them, because the .gif format only has one value of transparency.
Making your slice no bigger than your object helps file size (a good thing), but it won't help your corners. My advice there is to first export a flattened, 24-bit .png image where your rounded rectangle is placed over a background color that is an average of what the background gradient is (trial and error may come into play, here, later). Then, import THAT image and flood fill the corners with something wild, like yellow or bright green. Next, go to File >Image Preview and set your format to .gif. In the Transparency drop-down box, select Index Transparency. Click the dropper tool on the left (Select transparent color) and click on your wild corner color. Your corner tips will become transparent, but you will maintain some anti-aliasing to the overall background color.
Try your image in your Web page. You may need to tweak the background color a bit to make it look the best.
Thanks Pixlor, I'll have to tackle that in the morning and see what I can do.
Many Thanks, Frank B.
Well, this is a bit awkward. I had a Private Message from Frank asking for a clarification, but when I reply I get an error. So, Frank, if you're reading...
What I've done is this:
Take your Fireworks image, where you have the rounded rectangle vector object (and text and whatever else on your background color) and export (Image>Preview, not Save) that to a PNG 24, but save it with a different file name or in a different folder.
Hmm...I've JUST realized there's a slightly easier way! Okay...open this flattened image. Go to Modify>Canvas>Canvas Color and set that to transparent.
Select the magic wand selection tool. In the Properties palette, set the tolerance to 0. Click in one of the corners, then press your Delete key. That portion of your image will become transparent. Do the same for the other corners.
Now export to GIF format and make sure to select Alpha Transparency so that your corners come out, well, transparent.
If this doesn't work for you, bump your thread: