Fade/Gradient Image? (Need Help ASAP)

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

I've no idea about those things, but you can do it with the GIMP's gradient tool very easily.

Heh. It's possible with PHP.

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

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...

Thank you for your sugestions.

Quote:

---

Originally Posted by djr33

Heh. It's possible with PHP.

---

Okay, but how?

PHP Code:

---

 


---

Hi there techno_race.

you might like to check out this site...

http://tools.dynamicdrive.com/gradient/

coothead

Y'know, DD, the resulting image from that gradient tool only needs to be a pixel wide...

Yet quite tall... 1 x 482 isn't exactly my taste...

Quote:

---

I'm not good with things like Illustrator and Photoshop

---

But you're good with PHP, CSS, JS, Paint.net and Fireworks?
What exactly would "things like" Photoshop be? Fireworks? :p

Aaaanyway....


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

PHP Code:

---

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; }
    imagesetpixel($im,$x,$y,imagecolorallocatealpha($im,$color['r'],$color['g'],$color['b'],$color['a']));
}

function applygradientpx($im,$x,$y,$c1,$c2,$dr,$intensity,$repeat=0) {
    $dr = gradientrepeat($dr,$repeat);
    if($dr>1){$dr=1;}
    if($dr<0){$dr=0;}
    $dr = (pow($dr,pown(2,$intensity))+(1-pow(1-$dr,pown(2,-$intensity))))/2;
    if($dr>1){$dr=1;}
    if($dr<0){$dr=0;}
    $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);
    setpx($im,$x,$y,$c);
}

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;
        applygradientpx($im,$x,$y,$c1,$c2,$dr,$intensity,$repeat);
    }
}
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/)

Quote:

---

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...