(This goes into programming, so I trust you're familiar a little with the basic terminology.)
Probably your best bet lies in a little library called GD. This library has all the tools inside necessary for generating new images. The TYPES/FORMATS of images it can create then depends on what other libraries are installed on the system.
For instance, if you have the libJPEG library installed on your server, then GD can use it to create JPEGs. LibPNG allows GD to create images in the PNG format, and so on...
So GD does the primary work of assembling the image, "Ok, put a red line here, put a pink dot over here, and a black box over there, and add anti-aliasing so the red line doesn't look jagged..."
... and then it spits out that image data in JPEG, PNG, etc... format. (It used to support GIF format, but that GIF format is copyrighted by Compuserve.)
So how do you control GD? Usually you can control it with a programming language like PHP or Perl. You simply have to set up PHP or Perl so that they see that GD is installed on the system, basically. If you want to get technical about it, there are components that act as middle-men between the programming language and the GD library. But if you want more details on setting all of this up, you'll have to create a separate thread for it. :)
Once the system has been set up (luckily, most hosting companies already do this for you), all you have to do is write a simple program that sends commands to GD. If you want to check to see if you have PHP and GD set up, create a file on your web server called something like info.php and just have it say:
<?
phpinfo();
?>
That simple phpinfo() function will spit out a nicely-formatted, detailed list of how PHP is set up on your server and will tell you all of its capabilities. GD's about 2/3rd's down the page - just search the page for it.
Now, assuming you have GD set up, here is a simple PHP program that creates a 468x60 banner in JPEG format. First, create a new, empty file called testimage.php. Put this inside it:
<?
// This creates a 468 by 60 canvas for you
// to work with.
$im = imagecreate(468,60);
// These next lines allocate colors that you can use.
// (It's kind've like putting little gobs of paint
// on a palette in real life, so the painter can
// dip his brush into a specific color and use it
// to paint that color.)
// You define colors by telling how much red, green,
// and blue is in the color, from 0 (none of color)
// to 255 (max color). So 0, 0, 0 would be 0 red, 0
// green, and 0 blue and would create black. On the
// other side, 255, 255, 255 would be 255 red, 255
// green, and 255 blue, which would create white.
// (NOTE: The first color you allocate will also
// automatically be the background of the image.)
$white_color = imagecolorallocate($im, 255, 255, 255);
$bright_red_color = imagecolorallocate($im, 255, 0, 0);
// This just types out the phrase "A Banner" using
// the bright red color we just allocated in the
// previous step. You CAN use any TrueType font,
// but there are also some built-in fonts, so I used
// built-in font #3. The phrase is positioned at the
// coordinates X=50 and Y=35.
imagestring ($im, 3, 50, 35, "A Banner", $bright_red_color);
// Now we have a simple image - we just tell GD to
// save it as a JPEG. If you don't specify a file
// name, GD will just spit out the data straight to
// the browser.
imagejpeg($im);
// And finally, it's good practice to free up the
// memory after the JPEG has been created. It's like
// cleaning up the kitchen after you've cooked the
// meal.
imagedestroy($im);
?>
Now, assuming everything's working correctly, you should see this:
There's a whole bunch of things you can do, though - you can create shapes, use different fonts, overlay things, resize images on-the-fly, etc... Ever since I started using GD, it's been an incredible tool.
Just for a quick overview, here's the flow of info:
1. User puts data into a form (optional)
2. Data is passed to PHP/GD script.
3. Script sends commands to GD to create image.
4. GD finishes creating image and send back image.
5. Image is displayed to user.
I hope this is a little useful - let me know if you don't understand parts of it or if you want more info on a certain area. Good luck!
- Jonathan
What program? You've seen them. Image design online
Linear Mode
