View Full Version : Fade/Gradient Image? (Need Help ASAP)

07-18-2007, 09:34 PM
Hi, does anyone know how to accomplish the effect of "fading" your picture?
For example, go to http://www.mozilla.com and look at the top and bottom of the Firefox banner. See that the edges of the banner fade into the color of the page? That's the effect I mean.
Does anyone know if this is possible with Macromedia Fireworks MX, FreeHand MX, Paint.NET, Ulead PhotoImpact or just plain PHP, Perl, HTML, CSS or JS? If so, please tell me how. I'm not good with things like Illustrator and Photoshop, and even if I was, I don't have them. :p

07-18-2007, 09:44 PM
I've no idea about those things, but you can do it with the GIMP (http://www.gimp.org/)'s gradient tool very easily.

07-19-2007, 04:07 AM
Heh. It's possible with PHP.

But just use a photo editor. Many of those would work.

07-19-2007, 06:44 AM
That mozilla site really looks like the 1 pixel wide 200+ pixel high gradient picture background, with a nice picture over the top which blends in nicely. The whole thing is uniform on the left and right edges. Looks just like the MSN.com site but blended on both sides.

I'm definitely loving GIMP... very cool how it gives you preset pixel sizes based on what you just copied...

09-15-2007, 04:54 PM
Thank you for your sugestions.

Heh. It's possible with PHP.
Okay, but how?

09-15-2007, 05:41 PM
Hi there techno_race.

you might like to check out this site...


09-15-2007, 06:08 PM
Y'know, DD, the resulting image from that gradient tool only needs to be a pixel wide...

09-15-2007, 06:40 PM
Yet quite tall... 1 x 482 isn't exactly my taste...

09-16-2007, 12:16 AM
I'm not good with things like Illustrator and PhotoshopBut you're good with PHP, CSS, JS, Paint.net and Fireworks?
What exactly would "things like" Photoshop be? Fireworks? :p


As for doing this in PHP, here's some code from an ongoing project several of us are working on.

function pown($base, $power) {
if ($power < 0) {
return 1 / pow($base, -$power);
else {
return pow($base, $power);

function setpx(&$im,$x,$y,$color) { //image, x coord, y coord, rgba color array; changes image, no return
if ($x>=imagesx($im)||$y>=imagesy($im)||$x<0||$y<0) { return FALSE; }

function applygradientpx($im,$x,$y,$c1,$c2,$dr,$intensity,$repeat=0) {
$dr = gradientrepeat($dr,$repeat);
$dr = (pow($dr,pown(2,$intensity))+(1-pow(1-$dr,pown(2,-$intensity))))/2;
$cdiff = array($c1['r']-$c2['r'],$c1['g']-$c2['g'],$c1['b']-$c2['b'], $c1['a']-$c2['a']);
$r = round($c1['r']-$cdiff[0]*$dr);
$g = round($c1['g']-$cdiff[1]*$dr);
$b = round($c1['b']-$cdiff[2]*$dr);
$a = round($c1['a']-$cdiff[3]*$dr);
$c = array('r'=>$r,'g'=>$g,'b'=>$b,'a'=>$a);

function lineargradient($im,$x1,$y1,$x2,$y2,$c1,$c2,$intensity=0,$repeat=0) {
$len = sqrt((($x1-$x2)*($x1-$x2))+(($y1-$y2)*($y1-$y2)));
$m = -($x1-$x2)/($y1-$y2);
$offset = $y1-$m*$x1;
if ($y1<$y2) { $len = -$len; }
for ($x=0;imagesx($im)>$x;$x++) {
for ($y=0;imagesy($im)>$y;$y++) {
$dist = (($m*$x)-$y+$offset)/sqrt(($m*$m)+1);
$dr = $dist/$len;
return $im;

Used within a fairly complex system, so it would need some setup before use.

(Under this CC agreement: http://creativecommons.org/licenses/by-nc-sa/3.0/)

09-16-2007, 12:29 AM
PHP, CSS, JS, Paint.net and Fireworks?Well, I'm not good with PHP. That's why I couldn't make the code myself. ;)
And FreeHand, and Paint Shop Pro 9, and GIMP :D, and Paint, and Booditor II.9/OpenARF~~7*9*8*77 :: IMP5, and PhotoImpact...

09-16-2007, 07:30 AM
Yet quite tall... 1 x 482 isn't exactly my taste...But once repeated the width (or height for a horizontal gradient) doesn't make any difference. It looks exactly the same but has a considerably smaller filesize.

09-16-2007, 10:37 AM
True, as long as it is just a vertical gradient. Horizontal would be one pixel tall, and an angle would require the entire image rendered.
With the case of the generator on DD, I'd agree, except for the last one, with the four colors.

10-02-2007, 04:47 AM
Hey Techno, I can help if you still need it...Pretty much all of the image editors you mentioned will do it and its really simple especially when its a larger image with only a handful of colors like the FF Web page..Typically, once the image is done you can optimize the image by choosing the appropriate image format extension .Gif .jpeg .png are common for the web and other minor tweaks in hopes of getting a good image file size to quality ratio..basically higher the image quality the larger the file the larger the download time the longer it takes to display on a page. Once optimized you can export the image in HTML, XHTML, or with CSS property's to a web editing program like MS Front page yuk!!! or Dream Weaver... I'll describe here a little and if you want to try it and have access to the software apps I'll support cha here until you produce what ya want as long as we don't turn it in to a marathon.. lol ....Or if its not to entailed email or post the image or link whatever so I can copy the Image and I'll try to produce what ya want I dont mind I enjoy design.......I'll post a link for ya of a screen cap of FireWorks I did I highlighted in yellow the tools and assets along with the tool descriptions beside them this may help ya.. post again if I can futher assist peace Criss


10-13-2007, 03:24 AM
I am a LOT better with fireworks than i am with photoshop. fireworks is basically a photo and graphic suite like photoshop, but geared more t'wards web graphics.

I have Adobe's CS3 master collection... photoshop just frustrates me but fireworks is fun lol.

10-13-2007, 07:25 AM
I find that people are frustrated when they don't understand Photoshop and would rather use Fireworks, but for those who do understand PS, Fireworks is annoying and limiting. It's ok, but not on par with PS.
Perhaps, as I don't do much drawing in PS, fireworks has some nice tools for image creation, but for manipulation, PS no question.

10-17-2007, 06:10 AM
I am learning more and more for photoshop, but that tends to be why i like fireworks (simpler tools)... I figure it is about time i learned how to use ps though as i am starting to need more advanced image editing these days and it takes to long to do by hand with fireworks...