deeppink circle gold circle red circle white circle

Gradcircle Tute

The GD library is a part of PHP,it`s used for the dynamic creation of images.If you have a webhost that supports PHP it also probably has a GD library.

Utilizing the GD library I used the below script to make the above gradcircles.

<?php
// TELLS SERVER TO MAKE A PNG.
Header ("Content-type: image/png");

// OVERALL WIDTH.
$width = 200;

// FINDS YOUR CENTER FOR THE GRAD EFFECT.
// CHANGE / 2 TO / 4 OR WHATEVER TO OFFSET CIRCLE = 
// (MOVE PARTIALLY OFF THE SCREEN).
// CIRCLE DIAMETER WILL BE THE WIDTH & HEIGHT OF BACK.
$center = $width / 2;

// NUMBER OF COLOR GRADUATIONS.
// 255 IS HIGH. 100 OR LESS IS LOW.
$colordivs = 255 / $center;

// WIDTH & HEIGHT (IT IS USING YOUR 200 WIDTH FOR 
// YOUR HEIGHT ALSO.
$im = imagecreate($width, $width);

// COLOR OF YOUR BACKGROUND.
$back_color = imagecolorallocate($im, 0, 0, 0);

// CREATES THE IMAGE & FINDS CENTER. 
// TECNICALLY i = 0 IS CENTER BUT i = 0.5
// ALIGNS IT PERFECT
imagefill($im, 0, 0, $back_color); 
for ($i = 0.5; $i <= $center; $i++)
{

// CIRCLE SIZE
$diameter = $width - 2 * $i;

// 0-255 = RGB = RED BEING 0 & BLUE BEING 255.
// FIRST COLOR = OUTER & SECOND COLOR = CENTER.
// 0,0 = RED
// 50,50 = BLUE/RED
// 100,100 = MORE BLUE/RED
$color = imagecolorallocate($im, $i * $colordivs, 50, 50);

// TELLS IT TO BE A CIRCLE.
imagearc($im, $center, $center, $diameter, $diameter, 0, 360, $color);

// TELLS IT TO FILL THE COLORS INTO THE CIRCLE. 
imagefilltoborder($im, $center, $center,  $color, $color);
// TELLS IT TO MAKE THE BACKGROUND TRANSPARENT.
imagecolortransparent( $im, $black_color );
}

// TO SHOW IMAGE AS A PNG.
imagepng($im);

// DESTROY THE IMAGE TO FREE SERVER MEMORY. 
ImageDestroy ($im);

You`re probably asking why would you want to make or use gradcircles,well for me the reason is that they can give some great depth to a graphic when composited into a graphic as in this example.

I took this graphic

white rose

and composited the above gold gradcircle at Image Magick using "Multiply" to get this graphic

or you can composite them into a white ding to create real depth to the ding like I did with these heart dings-

Heart Dings

or like Moondogee did with these shamrock dings-

Shamrock Dings

To use the above script make a new file within a directory and call it "gradcircle.php" or call it whatever you want to call it just make sure you use the .php extension for it.

CC&P the above script into that file and make sure the first line
<?php
is in the upper left corner.

The Preview feature doesn`t work on php scripts so Save your "gradcircle.php" file and then click onto it to view it.You`ll see a red gradcircle with a blue outer circle around it.

If you can`t view your file try chmoding it to 755 or if it is chmod already to 755 then change the chmod setting to 644.If you still can`t view your file then your web host probably doesn`t support GD.

In order to actually create a gradcircle gif you need to take your "gradcircle.php" url and beam it back into your directory and during the beaming you need to rename it to gradcircle.png

Change the extension from .php to .png during beaming

You now have a gradcircle png and you also still have your "gradcircle.php" script in your directory where you can change some of the numbers in order to make a new gradcolor png.

Each time you make a new color gradcircle with your gradcircle.php script just rebeam the gradcircle.php url back into your account renaming it to a .png again.

When I beam the script back into my account I normally rename each png to the color that I produced with the script

redgradcircle.png
bluegradcircle.png
goldgradcircle.png
and so on.

Within the above script you`ll find comment lines made by Pagemaster and myself that help explain what the different parts of the script do.Each comment line is preceeded by two // lines.

Here`s the above script with no comment lines in it,it`ll be easier in this script to see what to change in order to change the color gradcircles this script produces.

There are 2 parts of the above script that can be changed in order to make new colors,neither of which I understand completely but I`ll explain what to change so that you can play around with it and see what you come up with for colors.

At the bottom of this page I`ll post the scripts for the different colors I`ve come up with.

The first tag in the script that you can change to achieve different colors is this-

$colordivs = 255 / $center;

You can change the number 255 to as low as 100 and I`ve gone up as far as 1000.Any number over 265 will cause a circle within a circle effect and when you get up near 750 you'll create multiple circles like in this example

3 circles

The other tag within this script that you can change to achieve different colors is this-

$color = imagecolorallocate($im, $i * $colordivs, 50, 50);

You can change the two "50`s" to any number between 0 and 255.I haven`t really figured out what color spectrum those 2 numbers represent but I found that these number combinations will produce the below colors

0,0 = solid red circle
50,0 = green outer circle,orange inner circle
150,0 = bright green outer circle,yellow inner circle
255,0 = green outer circle with a slight yellow inner circle
0,125 = purple outer circle,bright pink inner circle
0,255 = med blue outer circle,pink inner circle

By changing the

$colordivs = 255 / $center;

$colordivs = 100 / $center;

and then changing the two numbers in this tag

$color = imagecolorallocate($im, $i * $colordivs, 50, 50);

to the below numbers I achieved these colors-

0,0 = solid red circle
10,0 = red inner circle,light blue outer circle
20,0 through the numbers 150,0 = green outer circle,orange inner circle
250,0 = light green circle
250,10 = green outer circle,yellow inner circle
250,150 through the numbers 250,250 = pale blue circle
0,250 = medium blue outer circle,pink inner circle

I know that this all probably seems confusing but just try changing the numbers in the above two tags to see what colors you get.

Now I`m going to make this even more confusing by adding a new element to the above scripts.

You`ve noticed with the above number combinations that the only solid colors that we can get is red,pale blue & light green.Well I found that if I define only one of the colors in this tag

$color = imagecolorallocate($im, $i * $colordivs, 50, 50);

I can achieve some solid colors besides red,pale blue & light green.

I define the new color with this tag

$white = imagecolorallocate($im, 255, 255, 255)

255, 255, 255 are the RGB value for white.
I add it to the script this way

$color = imagecolorallocate($im, $i * $colordivs, $white, 0);
$white = imagecolorallocate($im, 255, 255, 255);

I`ve added the new coding to the below script

You would think by that by giving both of the numbers in this tag

$color = imagecolorallocate($im, $i * $colordivs, 50, 50);

a defined RGB color value that you could make pretty much any color you`ld like but I found that on the whole when both numbers in the above code are defined colors I end out with a light pink gradcircle.

Try changing the $white value to different RGB colors in the above code and also move it from the first number placement to the second number placement and see what you come up with.

Here are some text scripts of the different colored gradcircles I`ve come up with so far.

White gradcircle
EXAMPLE

Blue gradcircle
EXAMPLE

Dark pink gradcircle
EXAMPLE

Gold gradcircle
EXAMPLE

Green gradcircle
EXAMPLE

Light pink gradcircle
EXAMPLE

Red gradcircle
EXAMPLE

Here are a few more gradcircles that I`ve made.

Gradcircles

sewsally`s index of her GD tutes

GD Tutes

and my tute on making gradlines

Gradlines

GradCircles

Gradcircle Tute