Text Over Image
Posted by Sazzad Hossain on Apr 1, 2009 in Tutorials | 0 commentsTitle: Text Over Image
Author: Sazzad Hossain & 2-Job.
Language: PHP
Demo: http://2-job.com/email/
Summary: In this tutorial, we will learn how to create a script that will place text on an image (kind of like a watermark). In this tutorial, we will be using a form which we will use to submit our text. This technique is often used for adding copyright to images and or creating cool image based signatures. To make it easier for us to understand, I will be focusing this tutorial on creating a script that will help us generate a e-mail signature.
Step 1: The Font
First things first, we will need to upload the font we want to use for the script. I use True Type Font Files for the web. It is the most widely used font type so it’s recognizable on almost all operating systems. In this tutorial (and on the demo) I have used a font called “Tahoma.” This is a font found in all windows computers. But since we are uploading an image of it, it will look the same on all operating systems. I have uploaded Tahoma in the zip file below.
Step 2: The Images
In this tutorial I will teach you how to create an e-mail signature. I will be using one form to create 2 images with the same submitted content. For this purpose, I will create 2 e-mail sigs like the ones below. I have included a PSD file for your convenience.
<< aol1.png
<< aol2.png
Step 3: The Form Page
Let’s start with the coding the main page of the script. This page will be the user-end page, meaning that the visitors/users will only see this page. I will split this step into sub-categories.
A. Create a new php based document and call it index.php and open it using your favorite text/code editor.
B. Let’s start off by writing the following codes. Make sure these lines of codes are above all other codes.
- Code:
<?php
error_reporting(E_ALL ^ E_NOTICE);
session_start(); // Start Session
$_SESSION["userid"] = $_POST["userid"];
$_SESSION["end"] = $_POST["end"];
?>
* error_reporting(E_ALL ^ E_NOTICE); will report all errors discovered except for E_NOTICE.
* session_start(); will do exactly as it says. It will start the current session.
* $_SESSION["userid"] = $_POST["userid"]; will use the session ID to remember the last typed userid.
* $_SESSION["end"] = $_POST["end"]; will be used to remember the last typed end (in this case the extension; i.e. .com, .net, .co.uk, etc.).
C. Now we need to insert the layout we are going to use. In this case, I am going to be using a really simple layout that includes the Dogtype, meta and style callout just to demonstrate that anything could go there. Treat this portion like a regular HTML template code.
- Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="en-us">
<style>
body, .textbox, .button { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; }
</style>
<title>AOL SigGen [Shrud]</title>
</head>
<body>
D. Between the <body> and the <body> tag we will need to include the form. Let’s insert the following codes:
- Code:
<form name="form" method="post">
Enter email: <input name="userid" type="text" size="30" class="textbox" style="text-align:right;" value="<?php echo $_POST["userid"]; ?>">@aol.<input name="end" type="text" size="8" maxlength="6" class="textbox" value="<?php echo $_POST["end"]; ?>"><input type="submit" class="button" value="Create">
* <?php echo $_POST["userid"]; ?> will help us recall the last typed userid.
* <?php echo $_POST["end"]; ?> will help us recall the last typed end (the extension).
E. Notice how I did not yet close the form tag. This is because we still have to display the image. The next set of codes will help input the filled information on our image. Let’s add the following:
- Code:
<p><img border="0" width="200" height="20" src="aol1.php?userid=<?php if (!empty($_POST['userid'])) { echo "".$_POST['userid'].""; }else { echo "username"; } ?>&end=<?php if (!empty($_POST['end'])) { echo "".$_POST['end'].""; }else { echo "com"; } ?>"></p><p><img border=”0″ width=”200″ height=”20″ src=”aol2.php?userid=<?php if (!empty($_POST['userid'])) { echo “”.$_POST['userid'].”"; }else { echo “username”; } ?>&end=<?php if (!empty($_POST['end'])) { echo “”.$_POST['end'].”"; }else { echo “com”; } ?>”></p>
</form>
* The above code basically states include the entered text and if not information is entered, automatically input the USERID with username and the END with .com.
** Remember to end the form with an </form> tag.
Step 4: The Backend Work
Now we need to create a series of code that will help us carry out these orders/functions. We have to create a page for each image we wish to write on. It is recommended that the names for the files are the same as the images, however the extension for the files must be php. We can achieve this with the following code:
- Code:
<?php
error_reporting(E_ALL ^ E_NOTICE);
session_start();
header("Content-type: image/png");
if ($_SESSION["userid"]){
$userid = $_SESSION["userid"];
}else{
$userid = $_GET['userid'];}
if ($_SESSION["end"]){
$end = $_SESSION["end"];
}else{
$end = $_GET['end'];}
$im = imagecreatefrompng("aol1.png");
$userid_width = imagettfbbox(9, 0, "tahoma.ttf", $userid);
$userid_start = (200 - ($userid_width[2] + 113));
$color = imagecolorallocate($im, 165, 164, 164);
imagettftext($im, 9, 0, $userid_start, 16, $color, "tahoma.ttf", $userid);
imagettftext($im, 9, 0, 151, 16, $color, "tahoma.ttf", $end);
imagepng($im);
imagedestroy($im);
?>
* $im = imagecreatefrompng(“aol1.png”); is where we input the name of the file. Just replace the aol1.png with the name of your file.
* Wherever you see tahoma.ttf, replace that with your font name.
* $userid_start = (200 – ($userid_width[2] + 113)); – The 200 used in this line is the max allowed width we are going to use. It is also the width of the image we are writing on in pixels.
Step 5: Uploading
We will need to upload the files in the root directory of the folder. The file structure is:
+ Main Directory
+- index.php
+- aol1.php
+- aol2.php
+- aol1.png
+- aol2.png
+- tahoma.ttf
Once you have that done, you are done with writing this script. If you are confused on anything, feel free to visit the official php website and view their manual.
This tutorial follows the Creative Commons License.
Download
imgtext.zip – Includes the complete script, font, images and PSD files. (240.58 KiB)