Welcome, Guest

Please login or register

TUTORIALS SUBMENU

PHOTOSHOP    FLASH    ILLUSTRATOR    BLENDER    CINEMA 4D    WEB-CODING    [SUBMIT]

Related Links

An Introduction to the GD Library

pages (4): 1 2 3 [4]


Filling Shapes
This is not as hard as it may sound. In fact, it’s merely a change of function names! You simply add the word “filled” into the name of the function and it gets done! The arguments are the same as the outline functions, so that’s not a problem. Here’s a couple of examples:

· imagepolygon() => imagefilledpolygon()
· imagerectangle() => imagefilledrectangle()
· imageellipse() => imagefilledellipse()

Etc... And that’s it! That’s all you need to do to fill a shape! Instead of drawing an outline with [color], it will fill the shape outline with [color]!

Here’s a couple of examples from previous sections, using filled functions this time:

Writing Text Onto An Image
Writing text is just as simple as using the shape functions - it uses an image identifier, and a colour identifier. It also uses an x and y coordinate to define where to start writing.

imagestring() accepts these arguments: image identifier, font, [x], [y], string, colour

The font argument basically represents the font size, you can change the font using some other GD functions like imageloadfont() which I wont go over in this tutorial.

So let’s give it a go. Let’s make a canvas, and output some text onto it!
 

<?php

$im = imagecreate(800, 400);

$words = "imagestring ex. by scrowler";

$bg = imagecolorallocate($im , 0,0,0);
$txt = imagecolorallocate($im , 255,255,255);

imagestring($im, 2, 200, 300, $words , $txt);

# outputting

?>

That’s it! You can extend yourself by giving the user a form to input data, you can load up an image first, then put inputted text on it.  You can even apply wordwrap() formatting to define an edge to where text can go!

Now… After all that time, let’s finally get on to outputting the image!

Outputting The Image
Like the other functions, outputting images is a real doddle!  The first step is to decide which major format you wish to output to: .jpg, .gif, .bmp or .png.

Now set the header content to that image type (you can use a form, as $_FILES[‘file’][‘type’] will return the appropriate format for this, but let’s do it manually):

· JPG/JPEG: header(“Content-type: image/jpeg”);
· GIF: header(“Content-type: image/gif”);
· BMP: header(“Content-type: image/wbmp”);
· PNG: header(“Content-type: image/png”);

Right, after we’ve done all that, there’s only one more important step: actually outputting it. We’ve now told the browser that this is an image, so let’s output the content. To do this, we use image[type](). This function accepts these arguments: image identifier, filename, quality.

Substitute the [type] in the above function to .jpeg, .gif, .png or .wbmp to output to different formats. The image identifier argument is the variable name containing all the image data you’ve processed through the script. The filename specifies where you want to save the image, but we aren’t saving it, so just put "" in there. The last argument sets the quality - this is a simple integer from 1 to 100 specifying the output quality of the final image.

And you’re done! Have fun, here’s a couple of examples:
 


<?php

# jpeg
header(“Content-type: image/jpeg”);
imagejpeg($im, “”, 100);

# png
header(“Contept-type: image/png”);
imagepng($im, “”, 100);

# etc…

?>

If you have any problems, comments or suggestions for this tutorial, don’t hesitate to contact me via the BioRUST Creative Forums. You can click my name below to visit my profile, where you can email or send a private message. I will be happy to help you. I hope I have inspired you to create a new kind of art. Goodbye and good luck!

PS. You can download the example files by clicking here.   ;)

- Tutorial written by Scrowler

Pages (4): <Prev 1 2 3 [4]
Automatic Translations: Translate Into French Translate Into German Translate Into Italian Translate Into Spanish Translate Into Portuguese

Last 5 User Comments


There are no comments for this tutorial yet.
You can place a comment by clicking here.
Amazing Font Pack!

Featured Tutorialsmore

Inset Lines
Inset Lines
- Adobe Photoshop -
Razor Stryke Logo
Razor Stryke Logo
- Adobe Photoshop -
Night Lights (w/ A...
Night Lights (w/ A...
- Macromedia Flash -
Advanced Abstract ...
Advanced Abstract ...
- Maxon Cinema 4D -
Membership

Username:
Password:  
Remember Me

Lost Password? || Register

Related Links



Special Options
Download Source File
Printer Friendly Version
Forum Threads

 Deactivate Account
Author: jerinian
Posted: Oct 02nd, 11:16am
Activity: 1 replies, 887 views
 changes....
Author: supertackyman
Posted: Sep 12th, 2:56am
Activity: 2 replies, 1052 views
Back again and with free webhosting :)
Author: ngz
Posted: Aug 14th, 3:50pm
Activity: 0 replies, 1054 views
Cartoon Crab 6 Legs Walk Run created in Blender
Author: patricia3d
Posted: Jun 19th, 12:58pm
Activity: 0 replies, 1935 views
HTML Form Post Array to PHP
Author: Space Cowboy
Posted: May 25th, 2:18pm
Activity: 0 replies, 1832 views
My blog where i create Digi Scrapbook
Author: claudya07
Posted: May 11th, 2:33pm
Activity: 0 replies, 14441 views
Blood Dripping from Letters
Author: patricia3d
Posted: Apr 05th, 3:37am
Activity: 0 replies, 2751 views
A New Designer has joined the ranks
Author: skates1
Posted: Mar 28th, 2:19pm
Activity: 2 replies, 2772 views
The hole in Photoshop
Author: Mars
Posted: Feb 13th, 9:28pm
Activity: 2 replies, 3439 views
Colour Swatch
Author: ebz7350
Posted: Jan 15th, 11:18am
Activity: 0 replies, 2356 views
 BioRUST Forums - Reply to Topic
Author: inonShozy
Posted: Jan 11th, 11:32am
Activity: 8 replies, 2499 views
 Version 2 of my portfolio site.
Author: andrewnleon
Posted: Jan 08th, 6:18am
Activity: 6 replies, 2798 views
Forum Threads

--- Site Resources ---
Total Tutorials:212
Total Downloads:    441
Total Fonts:    4673