PHPaint v.2.1 TUTORIAL
July 15, 2002
Copyright 1999-2002 by Erica Andrews.
All rights reserved.

If you are looking for general information about PHPaint (system requirements, installation, etc.), read the Manual.




Step 1:
If you haven't done so already,
install PHPaint, then start PHPaint by going to the URL 'http://Your.Server.Com/Your_Install_Directory/phpaint.php' (usually: http://Your.Server.Com/phpaint/phpaint.php) using one of the supported web browsers. A Javascript-enabled browser is required, as is a web server running PHP 4.0b1 or better (with GD and FreeType support enabled). See the manual for a full list of system requirements.


Step 2:
The VERY FIRST thing you need to do everytime you start PHPaint is click the 'Font Directory...' button, located on the MIDDLE panel, and set the font directory to the directory where your TTF (TrueType) fonts are installed.
    (example only)
If you fail to do this, your images may not appear correctly (broken images), or you may see only 2 available fonts (times.ttf, shatter.ttf). After clicking the 'Font Directory...' button, a dialog will open, asking you to type in the full path of your desired font directory. When setting the font directory, you must include the trailing slash: '/var/www/html/ttf/' or 'C:\temp\fonts\', etc. Please type a FULL PATH, not an abbreviated path. Now, click 'OK'. PHPaint will load a list of available TTF fonts in the selected directory. Check the 'TrueType Font' font list (to the left of the 'Font Directory...' button)
TrueType Font:             (example only)
to ensure that you have set the font directory correctly and your fonts were loaded correctly. Only files with the .ttf extension (case-insensitive) will be listed in the font list.


Step 3:
Select the TTF font you want to use for the text on the image by selecting a font from the 'TrueType Font' font list, on the MIDDLE panel, to the left of the 'Font Directory...' button.
TrueType Font:             (example only)
Simply select your desired font from the drop-down menu.


Step 4:
Type in the font SIZE in the field 'Font Size', on the MIDDLE panel, just underneath the font list.
Font Size:         (example only)
This font size affects the font you just selected in
Step 3. The font SIZE must be a positive integer, greater than zero. Generally, you will want to select a font SIZE between 10 and 100. Large font sizes create large images. Font sizes which are too small, may make the text on the image unreadable. Keep in mind that any font you have selected (in Step 3) may have limits on how big (or small) of a font SIZE can be used. Some fonts won't scale about a size of 72.


Step 5:
Type in the TEXT to be drawn across the image in the field "Text On Image", which is located on the MIDDLE panel, just underneath the 'Font Size' field.
Text On Image:         (example only)
There are no restrictions on what can be typed in this field. However, PHPaint is not intended for, nor has been tested with, TEXT larger than 100 characters.


Step 6:
Next, select the MAIN color for the image by clicking a color on the 'Main Image Color' palette, located at the very top of the RIGHT panel.
Palette example     (example only)
You may also fine-tune the color by typing in an RGB value in the 'Main Image Color' text field, just above the color palette.

Palette example     (example only)
The RGB value in the text field, must be a comma-separated list of exactly 3 integers. Each integer must be between 0 and 255. Include NO spaces in the RGB value text field. The 'Main Image Color' makes up most of the image's color, and provides the color immediately surrounding the text drawn on the image. The 'Main Image Color' is the color of the image's main 'rectangle' and does not include the shading of the 'rectangle' (see
Step 7).
Image Diagram


Step 7:
Select the IMAGE SHADING color for the image by clicking a color on the 'Image Shading Color' palette, located on the RIGHT panel, in the 3rd box from the top.
Palette example     (example only)
You may also fine-tune the color by typing in an RGB value in the 'Image Shading Color' text field, just above the color palette.

Palette example     (example only)
The RGB value in the text field, must be a comma-separated list of exactly 3 integers. Each integer must be between 0 and 255. Include NO spaces in the RGB value text field. The 'Image Shading Color' is the color of the shading of the image's main 'rectangle'.
Image Diagram


Step 8:
Select the TEXT color for the image by clicking a color on the 'Text Color' palette, located on the RIGHT panel, in the 2nd box from the top.
Palette example     (example only)
You may also fine-tune the color by typing in an RGB value in the 'Text Color' text field, just above the color palette.

Palette example     (example only)
The RGB value in the text field, must be a comma-separated list of exactly 3 integers. Each integer must be between 0 and 255. Include NO spaces in the RGB value text field. The 'Text Color' is the color of the text drawn on the image, not including the shading under the text (see
Step 9).
Image Diagram


Step 9:
Select the TEXT SHADING color for the image by clicking a color on the 'Text Shading Color' palette, located on the LEFT panel, at the very top.
Palette example     (example only)
You may also fine-tune the color by typing in an RGB value in the 'Text Shading Color' text field, just above the color palette.

Palette example     (example only)
The RGB value in the text field, must be a comma-separated list of exactly 3 integers. Each integer must be between 0 and 255. Include NO spaces in the RGB value text field. The 'Text Shading Color' is the color of the SHADING of the text, and should generally be a darker color than the 'Text Color' chosen in
Step 8.
Image Diagram


Step 10:
Select the IMAGE TYPE by choosing an image format from the 'Image Type' list, located on the LEFT panel, in the 4th box from the top.
    (example only)
Currently, PHP (and PHPaint) support the following image formats: PNG, JPEG, GIF, and WBMP. Please be aware, that not all of these images formats will necessarily be supported by your particular build and version of PHP. If you choose an image type that is NOT supported by your PHP installation, no image will be created. The default value is 'png'. Not all PHP installations support GIF and WBMP. Generally, newer version of PHP do not support GIF, due to image compression patent problems. Most PHP installations can create at least 'png' and 'jpeg' images. However, check your particular PHP installation/build to be sure. The 'wbmp' (Wireless Bitmap) format, is used mostly by Wireless/WAP developers. Images in the 'wbmp' format can be created by PHPaint, but generally cannot be displayed by normal web browsers. You will want to have a WAP-enabled (wireless) web browser or image viewer available if you are working with the 'wbmp' format.


Step 11:
Type in a LINK for your image in the 'Link' text field, located near the very bottom of the LEFT panel.
Link:           (example only)
If you want your image to be part of a link to a particular URL, type the desired URL here. If you don't know what this is for, or don't want your image linked to any URL, leave the 'Link' text field blank, and skip to
Step 13.


Step 12:
Type in a TARGET for your image's LINK from
Step 11 in the 'Target' text field, located near the very bottom of the LEFT panel.
Target:           (example only)
The 'target' is an element of the 'a href' tag in HTML. If you don't know what this is for, or don't want the LINK (from Step 11) to target a specific browser window, leave it blank, and move on to Step 13.


Step 13:
Create your image! Create a 'preview' of your image by clicking the 'CREATE IMAGE' button near the top of the MIDDLE panel.
   (example only)
PHPaint will create a preview image.


Step 14:
NO IMAGE WAS CREATED! If your 'preview' image was correctly displayed, skip this step and move on to
Step 15. If you followed Steps 1-13 to the letter and see NO image at all, check the following:
- That you have images ENABLED for your web browser
- That you correctly set the font directory for TrueType fonts (see Step 2)
- That you have SELECTED a TrueType font (see Step 3)
- That you have selected an IMAGE FORMAT supported by your version/build of PHP (see Step 10).
IMPORTANT NOTE: Most regular web browsers are NOT capable of displaying WBMP images. If you selected 'wbmp' as your 'Image Type' in Step 10, and are sure you have WBMP support enabled for your version/build of PHP, your image was most likely created, but unviewable by your web browser. I suggest you do a right-click, then 'Save As...' on the preview image's rectangular "place holder", save it to disk, then attempt to open the image with your own third-party tool capable of viewing 'wbmp' images (such as a Wireless/WAP web browser) just to make sure that your 'wbmp' image was created. Also, not all web browsers can display 'png' images. If you have selected 'png', please make sure you are using one of the supported browsers known to be capable of displaying 'png' images. If you selected the 'gif' image format, please be aware that most newer versions GD, the library used by PHP to create images, do not support the creation of Gif images. If your version of GD was created within the past 2 years, it probably does not support Gif images (unless you have a special 'hacked' version).

If your image was created, but the TEXT drawn on the image appears as scrambled "junk", try selecting a different TrueType font, since some "shareware" or special fonts will refuse to print normal alpha-numeric characters. You should especially select a different font if you see a series of "squares" instead of regular text. In addition, you may want to try increasing the font size, as using a very small font size can create scrambled "junk" rather than legible text.

If your image was created, but you see NO text at all, please make sure that you did not set your Main Image Color to the same color as your Text Color or your Text Shading Color.


Step 15:
Retouch your image (if necessary). If there is something you do not like about the 'preview' image that was created, follow
Steps 3-14 again (as needed), until you are pleased with the result.


Step 16:
Adjust the 'Space Around Text', located on the LEFT panel in the 3rd box from the top. Generally, you can skip this step unless you need more 'space' around the text drawn onto the image, or want to reduce the amount of 'space' around the text drawn onto the image. You can make the necessary changes by adjusting the values in the 'X-pad' and 'Y-pad' fields.
X-pad:      Y-pad:    (example only)
You can enter any POSITIVE, INTEGER value into these fields bewtween 1 and infinity. Please keep in mind that increasing the values of these fields also increases the size of the image (both in screen real estate, and byte size). The 'X-pad' field controls the amount of space on the RIGHT and LEFT sides of the text drawn on the image. The 'Y-pad' field controls the amount of space above and below the text drawn onto the image.


Step 17:
See what your image will look like on a background similar to what you will be using on your web page by clicking on a color from the 'Background Preview' palette, located on the LEFT panel, in the 2nd box from the top.
Preview palette     (example only)
PHPaint should immediately reload with your chosen background color as the backdrop for your 'preview' image. This Step does not change the image itself in any way.


Step 18:
ADD YOUR IMAGE TO YOUR WEB PAGE.
IMPORTANT: You do NOT need to save a copy of this image to disk (unless you *want* to).

To add your image to your web page, do the following:
- SELECT ALL of the text in the box 'IMG Tag For This Image' on the MIDDLE panel

IMG Tag For This Image:
   (example only)

- COPY the text by pressing Ctrl+C
- PASTE the text into your web page by pressing Ctrl+V
- COPY the
phpimagebank.php script to the SAME directory on your web server as your web page (if you haven't already put a copy there).
- LEAVE the .ttf font file for the font you selected (in Step 3 in your font directory (from Step 2). There is NO need to copy your .ttf font file anywhere.
- VIEW your web page by opening its 'http://' URL   (not its local disk 'file:/' URL)
That's it! If you followed these instructions, your web page should be loading an image that looks identical to the 'preview' image created by PHPaint. You do NOT need to save the 'preview' image to disk unless you want to. The text you copied from the 'IMG Tag For This Image' box will 'remember' your image, allowing you to save disk space by not having to save hard copies of images to disk. The phpimagebank.php script is only about 2.9 kb and is a much better alternative to saving numerous web page "buttons" to disk and wasting server resources.

If you ever need to change the image in your web page, just start PHPaint again, create a new image, and replace the 'IMG' tag with the new 'IMG Tag For This Image'. It's that easy: No memory-intensive image editors, no wasted space, no wasted time. Let PHP do the job it was hired to do. Enjoy!

This ends the PHPaint tutorial.