1 person found this helpful
As long as we have to do with a small background image which is repeated, i think using the linear or elipse gradient of the fill category of the properties panel should do it. Draw a box (a little bigger than the 1px image you want to create, so that you can see it clearly), and use the fill category (properties panel) to add a linear gradient. You can add colors to your box through the color box of the properties panel.
You don't want to fade out this image's edge but actually you want this fading effect to be an image itself. That's why you shouldn't use any of the vector masks.
1 person found this helpful
Panos' advice is spot on. The header of that site can be recreated by a green-to-black vertical linear gradient, while the horizontal line above the footer is easily made with a black-grey-black horizontal bar gradient. Both of which, when layed on top of the solid black background, give the illusion of the edges fading out without actually doing so.
The caveat with this trick is that once the HTML background color is changed via CSS, all these gradients have to be re-created, else the fake-fadeout edges will stand out. You could avoid that problem by reducing the opacity to 0 at gradient's edges (top tabs) and export genuinely transparent pngs instead, but then there would be that dreaded IE6-transparency bug to deal with...
Best luck! ^_^
The horizontal line in the header is actually a double line, so it looks carved. I'd go ahead and use masks (linear gradient) for the endpoints on the long lines. Make one, duplicate and flip and add these ends to a solid line. For the vertical lines, mask with a circle with a radial gradient.
I've tried a few variations and so far, I'm liking Pixlors' method the best for what I'm trying to do :-)
Pixlor's png example helped me understand where I was going wrong previously... so thanks for taking the trouble to do the png for me - appreciated !
I'm happy it's working for you!
Thanks for sharing that clever trick, Lorraine! It will surely come in handy in the future for me too.
Nadia, I'm glad you got it working! ^_^
and here: http://www.potterpuppetpals.com/
and here: http://www.potterpuppetpals.com/indexr.htm (same page only the red background color is different.)
Look at the buttons in the menus on the left. how they fade to transparency. I created these in fireworks.
I think that is what you want to acomplish.
For any rectangle, choose a gradiant, lets use a linear gradiant as an example.
When you edit the gradiant properties, you need to set the upper left transparency indicator to white and the upper right one to black.
Then you need to make both color indicators to the color you want. Say green.
Then the rectangle behaves as you want, reguardless of the background color or image.