[SOLVED] Gradient Text

DarkWater · April 23, 2008

The second one should preserve the letter order but reverse the colors. And there's no easy way to overlay the gradient over text and make the rest transparent. You'd be better off making an image in Photoshop and using that. I did the best I could with PHP, lol. Maybe Barand would know how to do what you want, but I really doubt it.

P.S: If you ever do need a higher > lower text gradient, keep that function. The second version works. =P

cheechm · April 23, 2008

Well can't you just create an image using PHP (instead of using normal text). The thing is I am doing this website, and he wants to be able to easily make this graphic on the fly..

Thanks

DarkWater · April 23, 2008

Why does he need to be able to make it on the fly? Serious question. Does he have a real need for it?

Barand · April 23, 2008

Create gradient image as you have now.

Create image, same size, containing black text on white background (the mask)

Create third image (same size) for output

Loop through rows and columns of the mask image.

If the pixel at x,y is black, get color at x,y in the gradient and write same color to x,y in the output.

output the output image

cheechm · April 23, 2008

Well he said, he would like to have the option, as it means he can easily create title images for every page on the fly.

Barand: Thanks for the reply, although I have no php Image knowledge. Could you expand on that, or maybe you understnad that better Darkwater?

Thanks

DarkWater · April 23, 2008

I get what Barand is saying, but I'm not too sure on all the functions right now. I could look it up, but I'm kind of busy right now. Go look in the PHP manual. You should be able to find what you need.

cheechm · April 23, 2008

Thanks. Although any code appreciated..

Barand · April 23, 2008

Did it slightly differently, only 2 images

gradient and mask

if pixel at xy in mask is not black, set pixel in gradient to white

Leaves the gradient pixels alone where the text is in mask.

I added to your gradient code

<?php

//GET TYPE (THAT USER WANTS)
$type = @$_GET['type'];
if ($type == false) {
    $type = 'top';
}

//GET DIMENTIONS (THAT USER WANTS)
$height = intval(@$_GET['height']);
if ($height == 0) {
    $height = 50;
}
$width = intval(@$_GET['width']);
if ($width == 0) {
    $width = 100;
}

//GET HEX COLOURS (THAT USER WANTS)
$start_colour = $_GET['start_colour'];
if ($start_colour == false) {
    $start_colour = '000000';
}
$end_colour = $_GET['end_colour'];
if ($end_colour == false) {
    $end_colour = 'FFFFFF';
}

//CONVERT HEX COLOURS TO RGB
$hex_r  = substr($start_colour, 0, 2);
$hex_g = substr($start_colour, 2, 2);
$hex_b = substr($start_colour, 4, 2);

$start_r = hexdec($hex_r);
$start_g = hexdec($hex_g);
$start_b = hexdec($hex_b);

$hex_r  = substr($end_colour, 0, 2);
$hex_g = substr($end_colour, 2, 2);
$hex_b = substr($end_colour, 4, 2);

$end_r = hexdec($hex_r);
$end_g = hexdec($hex_g);
$end_b = hexdec($hex_b);

//CREATE BLANK IMAGE
$image = @imagecreate($width, $height) or die("Cannot Initialize new GD image stream");

if ($type == 'top') {
    
    //LOOP THROUGH ALL THE PIXELS
    for($y = 0; $y < $height; $y++) {
        
        //LOOP THROUGH ROW
        for($x=0; $x < $width; $x++) {
            
            //CALCULATE THIS ROWS RGB COLOURS
            
            if ($start_r == $end_r) {
                $new_r = $start_r;
            }
            $difference = $start_r - $end_r;
            $new_r = $start_r - intval(($difference / $height) * $y);
            
            //====
            
            if ($start_g == $end_g) {
                $new_g = $start_g;
            }
            $difference = $start_g - $end_g;
            $new_g = $start_g - intval(($difference / $height) * $y);
            
            //===
            
            if ($start_b == $end_b) {
                $new_b = $start_b;
            }
            $difference = $start_b - $end_b;
            $new_b = $start_b - intval(($difference / $height) * $y);
            
            //===
            
            //ALLOCATE THE COLOR
            $row_color = imagecolorresolve($image, $new_r, $new_g, $new_b);
            
            //CREATE ROW OF THIS COLOR
            imagesetpixel($image, $x, $y, $row_color);
            
        }
        
    }

}

if ($type == 'left') {
    
    //LOOP THROUGH ALL THE PIXELS
    for($x = 0; $x < $width; $x++) {
        
        //LOOP THROUGH COLUMN
        for($y=0; $y < $height; $y++) {
            
            //CALCULATE THIS ROWS RGB COLOURS
            
            if ($start_r == $end_r) {
                $new_r = $start_r;
            }
            $difference = $start_r - $end_r;
            $new_r = $start_r - intval(($difference / $width) * $x);
            
            //====
            
            if ($start_g == $end_g) {
                $new_g = $start_g;
            }
            $difference = $start_g - $end_g;
            $new_g = $start_g - intval(($difference / $width) * $x);
            
            //===
            
            if ($start_b == $end_b) {
                $new_b = $start_b;
            }
            $difference = $start_b - $end_b;
            $new_b = $start_b - intval(($difference / $width) * $x);
            
            //===
            
            //ALLOCATE THE COLOR
            $row_color = imagecolorresolve($image, $new_r, $new_g, $new_b);
            
            //CREATE ROW OF THIS COLOR
            imagesetpixel($image, $x, $y, $row_color);
            
        }
        
    }
    
}

$bgcol = imagecolorallocate($image, 255,255,255);
$mask = imagecreate (100,50);                                  // mask image
$maskbg = imagecolorallocate($mask, 255,255,255);
$masktextcol = imagecolorallocate($mask, 0,0,0);
imagettftext($mask, 20, 0, 10, 40, $masktextcol, 'c:/windows/fonts/ariblk.ttf', 'Barand');


for ($x=0; $x<100; $x++) {
    for ($y=0; $y<50; $y++) {
        if (imagecolorat($mask,$x,$y) != $masktextcol) {
            imagesetpixel($image,$x,$y,$bgcol);
        }
    }
}
header("content-type: image/png");
imagepng($image);
imagedestroy($mask);
imagedestroy($image);
?>

DarkWater · April 23, 2008

I like it. =D Good job, Barand, you seem to know what you're doing with GD. =P

cheechm · April 23, 2008

Amazing. Thanks DarkWater and Barand.

cheechm · April 23, 2008

Although two things:

I want the text to be 100 whatevers (pts? or px?). Literally bigger.

And, I looked around -> Is it as anti-aliased as it goes?

Thanks

cheechm · April 24, 2008

Bumping.

Barand · April 24, 2008

If you want 100pt text you need imagettftext() with a truetype font and a bigger box to put it in.

cheechm · April 24, 2008

I did this:

$bgcol = imagecolorallocate($image, 255,255,255);
$mask = imagecreate (700,700);                                  // mask image
$maskbg1 = imagecolorallocate($mask, 255,255,255);
$maskbg= imagecolorresolve($mask, $new_r, $new_g, $new_b);
$masktextcol = imagecolorallocate($mask, 255,0,255);
imagettftext($mask, 70, 0, 10, 40, $masktextcol, 'c:/windows/fonts/calibri.ttf', 'Nick');

But it only shows the bottom of the N... That is it.

Barand · April 24, 2008

When using imagestring(), the y pos is the top of the text.

When using imagettftext(), the y pos is the baseline of the text.

cheechm · April 24, 2008

So what should I set it as?

Barand · April 24, 2008

try 100

cheechm · April 24, 2008

This is what your code outputs:

Just the code to confirm:

<?php

//GET TYPE (THAT USER WANTS)
$type = @$_GET['type'];
if ($type == false) {
    $type = 'top';
}

//GET DIMENTIONS (THAT USER WANTS)
$height = intval(@$_GET['height']);
if ($height == 0) {
    $height = 700;
}
$width = intval(@$_GET['width']);
if ($width == 0) {
    $width = 700;
}

//GET HEX COLOURS (THAT USER WANTS)
$start_colour = $_GET['start_colour'];
if ($start_colour == false) {
    $start_colour = '000000';
}
$end_colour = $_GET['end_colour'];
if ($end_colour == false) {
    $end_colour = 'FF0000';
}

//CONVERT HEX COLOURS TO RGB
$hex_r  = substr($start_colour, 0, 2);
$hex_g = substr($start_colour, 2, 2);
$hex_b = substr($start_colour, 4, 2);

$start_r = hexdec($hex_r);
$start_g = hexdec($hex_g);
$start_b = hexdec($hex_b);

$hex_r  = substr($end_colour, 0, 2);
$hex_g = substr($end_colour, 2, 2);
$hex_b = substr($end_colour, 4, 2);

$end_r = hexdec($hex_r);
$end_g = hexdec($hex_g);
$end_b = hexdec($hex_b);

//CREATE BLANK IMAGE
$image = @imagecreate($width, $height) or die("Cannot Initialize new GD image stream");

if ($type == 'top') {
    
    //LOOP THROUGH ALL THE PIXELS
    for($y = 0; $y < $height; $y++) {
        
        //LOOP THROUGH ROW
        for($x=0; $x < $width; $x++) {
            
            //CALCULATE THIS ROWS RGB COLOURS
            
            if ($start_r == $end_r) {
                $new_r = $start_r;
            }
            $difference = $start_r - $end_r;
            $new_r = $start_r - intval(($difference / $height) * $y);
            
            //====
            
            if ($start_g == $end_g) {
                $new_g = $start_g;
            }
            $difference = $start_g - $end_g;
            $new_g = $start_g - intval(($difference / $height) * $y);
            
            //===
            
            if ($start_b == $end_b) {
                $new_b = $start_b;
            }
            $difference = $start_b - $end_b;
            $new_b = $start_b - intval(($difference / $height) * $y);
            
            //===
            
            //ALLOCATE THE COLOR
            $row_color = imagecolorresolve($image, $new_r, $new_g, $new_b);
            
            //CREATE ROW OF THIS COLOR
            imagesetpixel($image, $x, $y, $row_color);
            
        }
        
    }

}

if ($type == 'left') {
    
    //LOOP THROUGH ALL THE PIXELS
    for($x = 0; $x < $width; $x++) {
        
        //LOOP THROUGH COLUMN
        for($y=0; $y < $height; $y++) {
            
            //CALCULATE THIS ROWS RGB COLOURS
            
            if ($start_r == $end_r) {
                $new_r = $start_r;
            }
            $difference = $start_r - $end_r;
            $new_r = $start_r - intval(($difference / $width) * $x);
            
            //====
            
            if ($start_g == $end_g) {
                $new_g = $start_g;
            }
            $difference = $start_g - $end_g;
            $new_g = $start_g - intval(($difference / $width) * $x);
            
            //===
            
            if ($start_b == $end_b) {
                $new_b = $start_b;
            }
            $difference = $start_b - $end_b;
            $new_b = $start_b - intval(($difference / $width) * $x);
            
            //===
            
            //ALLOCATE THE COLOR
            $row_color = imagecolorresolve($image, $new_r, $new_g, $new_b);
            
            //CREATE ROW OF THIS COLOR
            imagesetpixel($image, $x, $y, $row_color);
            
        }
        
    }
    
}

$bgcol = imagecolorallocate($image, 255,255,255);
$mask = imagecreate (100, 50);                                  // mask image
$maskbg = imagecolorallocate($mask, 255,255,255);
$masktextcol = imagecolorallocate($mask, 0,0,0);
imagettftext($mask, 50, 0, 10, 40, $masktextcol, 'c:/windows/fonts/calibri.ttf', 'Barand');


for ($x=0; $x<100; $x++) {
    for ($y=0; $y<50; $y++) {
        if (imagecolorat($mask,$x,$y) != $masktextcol) {
            imagesetpixel($image,$x,$y,$bgcol);
        }
    }
}
header("content-type: image/png");
imagepng($image);
imagedestroy($mask);
imagedestroy($image);
?>

No variables in the URL.

Barand · April 24, 2008

I adjusted the mask size to same as image size and same with the x and y for loops

<?php
//GET TYPE (THAT USER WANTS)
$type = @$_GET['type'];
if ($type == false) {
    $type = 'top';
}

//GET DIMENTIONS (THAT USER WANTS)
$height = intval(@$_GET['height']);
if ($height == 0) {
    $height = 700;
}
$width = intval(@$_GET['width']);
if ($width == 0) {
    $width = 700;
}

//GET HEX COLOURS (THAT USER WANTS)
$start_colour = $_GET['start_colour'];
if ($start_colour == false) {
    $start_colour = '000000';
}
$end_colour = $_GET['end_colour'];
if ($end_colour == false) {
    $end_colour = 'FF0000';
}

//CONVERT HEX COLOURS TO RGB
$hex_r  = substr($start_colour, 0, 2);
$hex_g = substr($start_colour, 2, 2);
$hex_b = substr($start_colour, 4, 2);

$start_r = hexdec($hex_r);
$start_g = hexdec($hex_g);
$start_b = hexdec($hex_b);

$hex_r  = substr($end_colour, 0, 2);
$hex_g = substr($end_colour, 2, 2);
$hex_b = substr($end_colour, 4, 2);

$end_r = hexdec($hex_r);
$end_g = hexdec($hex_g);
$end_b = hexdec($hex_b);

//CREATE BLANK IMAGE
$image = @imagecreate($width, $height) or die("Cannot Initialize new GD image stream");

if ($type == 'top') {
    
    //LOOP THROUGH ALL THE PIXELS
    for($y = 0; $y < $height; $y++) {
        
        //LOOP THROUGH ROW
        for($x=0; $x < $width; $x++) {
            
            //CALCULATE THIS ROWS RGB COLOURS
            
            if ($start_r == $end_r) {
                $new_r = $start_r;
            }
            $difference = $start_r - $end_r;
            $new_r = $start_r - intval(($difference / $height) * $y);
            
            //====
            
            if ($start_g == $end_g) {
                $new_g = $start_g;
            }
            $difference = $start_g - $end_g;
            $new_g = $start_g - intval(($difference / $height) * $y);
            
            //===
            
            if ($start_b == $end_b) {
                $new_b = $start_b;
            }
            $difference = $start_b - $end_b;
            $new_b = $start_b - intval(($difference / $height) * $y);
            
            //===
            
            //ALLOCATE THE COLOR
            $row_color = imagecolorresolve($image, $new_r, $new_g, $new_b);
            
            //CREATE ROW OF THIS COLOR
            imagesetpixel($image, $x, $y, $row_color);
            
        }
        
    }

}

if ($type == 'left') {
    
    //LOOP THROUGH ALL THE PIXELS
    for($x = 0; $x < $width; $x++) {
        
        //LOOP THROUGH COLUMN
        for($y=0; $y < $height; $y++) {
            
            //CALCULATE THIS ROWS RGB COLOURS
            
            if ($start_r == $end_r) {
                $new_r = $start_r;
            }
            $difference = $start_r - $end_r;
            $new_r = $start_r - intval(($difference / $width) * $x);
            
            //====
            
            if ($start_g == $end_g) {
                $new_g = $start_g;
            }
            $difference = $start_g - $end_g;
            $new_g = $start_g - intval(($difference / $width) * $x);
            
            //===
            
            if ($start_b == $end_b) {
                $new_b = $start_b;
            }
            $difference = $start_b - $end_b;
            $new_b = $start_b - intval(($difference / $width) * $x);
            
            //===
            
            //ALLOCATE THE COLOR
            $row_color = imagecolorresolve($image, $new_r, $new_g, $new_b);
            
            //CREATE ROW OF THIS COLOR
            imagesetpixel($image, $x, $y, $row_color);
            
        }
        
    }
    
}

$bgcol = imagecolorallocate($image, 255,255,255);
$mask = imagecreate ($width, $height);                                  // mask image
$maskbg = imagecolorallocate($mask, 255,255,255);
$masktextcol = imagecolorallocate($mask, 0,0,0);
imagettftext($mask, 300, 0, 10, 500, $masktextcol, 'c:/windows/fonts/ariblk.ttf', 'Barand');


for ($x=0; $x<$width; $x++) {
    for ($y=0; $y<$height; $y++) {
        if (imagecolorat($mask,$x,$y) != $masktextcol) {
            imagesetpixel($image,$x,$y,$bgcol);
        }
    }
}
header("content-type: image/png");
imagepng($image);
imagedestroy($mask);
imagedestroy($image);
?>

cheechm · April 24, 2008

Master. Thanks. If I could I would send you a cold beer.

Although next thing is the anti-aliasing. Read that it isn't too possible? Is this true?

Barand · April 24, 2008

It nay be my imagination but I think it's slightly better if I change

for ($x=0; $x<$width; $x++) {
    for ($y=0; $y<$height; $y++) {
        if (imagecolorat($mask,$x,$y) != $masktextcol) {
            imagesetpixel($image,$x,$y,$bgcol);
        }
    }
}

to

for ($x=0; $x<$width; $x++) {
    for ($y=0; $y<$height; $y++) {
        if (imagecolorat($mask,$x,$y) == $maskbg) {               // <<<<< changed line
            imagesetpixel($image,$x,$y,$bgcol);
        }
    }
}

cheechm · April 24, 2008

That is better, but would still like more..

I was told something like: Make it really big, but then reduce it. Or something like that.

Barand · April 24, 2008

this creates it at 800x1600 then outputs as 200x400

<?php

//GET TYPE (THAT USER WANTS)
$type = @$_GET['type'];
if ($type == false) {
    $type = 'top';
}

//GET DIMENTIONS (THAT USER WANTS)
$height = intval(@$_GET['height']);
if ($height == 0) {
    $height = 800;
}
$width = intval(@$_GET['width']);
if ($width == 0) {
    $width = 1600;
}

//GET HEX COLOURS (THAT USER WANTS)
$start_colour = $_GET['start_colour'];
if ($start_colour == false) {
    $start_colour = '000000';
}
$end_colour = $_GET['end_colour'];
if ($end_colour == false) {
    $end_colour = 'FF0000';
}

//CONVERT HEX COLOURS TO RGB
$hex_r  = substr($start_colour, 0, 2);
$hex_g = substr($start_colour, 2, 2);
$hex_b = substr($start_colour, 4, 2);

$start_r = hexdec($hex_r);
$start_g = hexdec($hex_g);
$start_b = hexdec($hex_b);

$hex_r  = substr($end_colour, 0, 2);
$hex_g = substr($end_colour, 2, 2);
$hex_b = substr($end_colour, 4, 2);

$end_r = hexdec($hex_r);
$end_g = hexdec($hex_g);
$end_b = hexdec($hex_b);

//CREATE BLANK IMAGE
$image = @imagecreate($width, $height) or die("Cannot Initialize new GD image stream");

if ($type == 'top') {
    
    //LOOP THROUGH ALL THE PIXELS
    for($y = 0; $y < $height; $y++) {
        
        //LOOP THROUGH ROW
        for($x=0; $x < $width; $x++) {
            
            //CALCULATE THIS ROWS RGB COLOURS
            
            if ($start_r == $end_r) {
                $new_r = $start_r;
            }
            $difference = $start_r - $end_r;
            $new_r = $start_r - intval(($difference / $height) * $y);
            
            //====
            
            if ($start_g == $end_g) {
                $new_g = $start_g;
            }
            $difference = $start_g - $end_g;
            $new_g = $start_g - intval(($difference / $height) * $y);
            
            //===
            
            if ($start_b == $end_b) {
                $new_b = $start_b;
            }
            $difference = $start_b - $end_b;
            $new_b = $start_b - intval(($difference / $height) * $y);
            
            //===
            
            //ALLOCATE THE COLOR
            $row_color = imagecolorresolve($image, $new_r, $new_g, $new_b);
            
            //CREATE ROW OF THIS COLOR
            imagesetpixel($image, $x, $y, $row_color);
            
        }
        
    }

}

if ($type == 'left') {
    
    //LOOP THROUGH ALL THE PIXELS
    for($x = 0; $x < $width; $x++) {
        
        //LOOP THROUGH COLUMN
        for($y=0; $y < $height; $y++) {
            
            //CALCULATE THIS ROWS RGB COLOURS
            
            if ($start_r == $end_r) {
                $new_r = $start_r;
            }
            $difference = $start_r - $end_r;
            $new_r = $start_r - intval(($difference / $width) * $x);
            
            //====
            
            if ($start_g == $end_g) {
                $new_g = $start_g;
            }
            $difference = $start_g - $end_g;
            $new_g = $start_g - intval(($difference / $width) * $x);
            
            //===
            
            if ($start_b == $end_b) {
                $new_b = $start_b;
            }
            $difference = $start_b - $end_b;
            $new_b = $start_b - intval(($difference / $width) * $x);
            
            //===
            
            //ALLOCATE THE COLOR
            $row_color = imagecolorresolve($image, $new_r, $new_g, $new_b);
            
            //CREATE ROW OF THIS COLOR
            imagesetpixel($image, $x, $y, $row_color);
            
        }
        
    }
    
}

$bgcol = imagecolorallocate($image, 255,255,255);
$mask = imagecreate ($width, $height);                                  // mask image
$maskbg = imagecolorallocate($mask, 255,255,255);
$masktextcol = imagecolorallocate($mask, 0,0,0);
imagettftext($mask, 300, 0, 10, 500, $masktextcol, 'c:/windows/fonts/ariblk.ttf', 'Barand');


for ($x=0; $x<$width; $x++) {
    for ($y=0; $y<$height; $y++) {
        if (imagecolorat($mask,$x,$y) == $maskbg) {
            imagesetpixel($image,$x,$y,$bgcol);
        }
    }
}
$small = imagecreatetruecolor(200,400);
imagecopyresampled($small,$image,0,0,0,0,200,400,$width, $height);
header("content-type: image/png");
imagepng($small);
imagedestroy($mask);
imagedestroy($image);
imagedestroy($small);
?>

cheechm · April 24, 2008

Amazing thanks.. I owe you one..

Solved finally !!!

cheechm · April 24, 2008

Oh no! I just realised I want it transparent (which is possibly a nightmare). Any help no that?

(Sorry, haven't ever done image functions..)

Sign In

[SOLVED] Gradient Text

Recommended Posts

Link to comment

Share on other sites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information