Make text images with transparent shadows

In web development, sometimes we want to dynamically generate text images with beautiful shadow effects for buttons, titles, or watermarks. Fortunately, PHP's GD library provides powerful image processing capabilities, where the imagecolorallocatealpha() function helps us define colors with transparency, making it easy to draw text with transparent shadows.

This article will explain step by step how to use the imagecolorallocatealpha() function to create a text image with transparent shadow effect.

Step 1: Create a canvas

First, we need to create an image canvas. Here we use the imagecreatetruecolor() function to create a true color image.

 <?php
// Create wide 400px，high 100px Canvas
$width = 400;
$height = 100;
$image = imagecreatetruecolor($width, $height);

// Set background color（White）
$white = imagecolorallocate($image, 255, 255, 255);
imagefill($image, 0, 0, $white);

Step 2: Enable transparent channels

In order for the transparent parts of the PNG image to be displayed correctly, we need to turn off the blending mode and enable the save alpha channel.

 // Turn off the mixing mode
imagealphablending($image, false);
// Enable alpha keep
imagesavealpha($image, true);

Step 3: Define Shadow Color with Transparency

The parameters of the imagecolorallocatealpha() function are (image, red, green, blue, alpha) , where the alpha value ranges from 0 (completely opaque) to 127 (completely transparent).

For example, we define a black translucent shadow:

 // Define black translucent shadows
$shadow_color = imagecolorallocatealpha($image, 0, 0, 0, 60);

Note: 60 here means about semi-transparent effects.

Step 4: Draw the shadows and text

We use the imagettftext() function to draw text, and we need to specify the font file path.

 // Font file path（Please adjust according to actual situation）
$font = __DIR__ . '/arial.ttf';
$text = 'Hello, m66.net!';
$font_size = 24;

// Draw shadows（A few pixels slightly offset）
imagettftext($image, $font_size, 0, 22, 62, $shadow_color, $font, $text);

// Draw the main text（black）
$text_color = imagecolorallocate($image, 0, 0, 0);
imagettftext($image, $font_size, 0, 20, 60, $text_color, $font, $text);

Step 5: Output the image and clean the memory

Finally, we output the image to PNG format and free up resources.

 // set up header
header('Content-Type: image/png');
// Output image
imagepng($image);
// Free memory
imagedestroy($image);
?>

Complete sample code

 <?php
$width = 400;
$height = 100;
$image = imagecreatetruecolor($width, $height);

$white = imagecolorallocate($image, 255, 255, 255);
imagefill($image, 0, 0, $white);

imagealphablending($image, false);
imagesavealpha($image, true);

$shadow_color = imagecolorallocatealpha($image, 0, 0, 0, 60);
$text_color = imagecolorallocate($image, 0, 0, 0);

$font = __DIR__ . '/arial.ttf';
$text = 'Hello, m66.net!';
$font_size = 24;

imagettftext($image, $font_size, 0, 22, 62, $shadow_color, $font, $text);
imagettftext($image, $font_size, 0, 20, 60, $text_color, $font, $text);

header('Content-Type: image/png');
imagepng($image);
imagedestroy($image);
?>

Things to note

1. Font file <br> The above code uses the arial.ttf font file. Please make sure that the font file exists in the directory where the script is located, or modified to another font path on your server.

2. Transparency adjustment
   The alpha parameters can be adjusted as needed. If you want to be more transparent, you can use a larger value (nearly 127); if you want to be more opaque, you can use a smaller value.

3. Deployment Suggestions <br> When deploying, make sure that the GD library is enabled in the server's PHP configuration, otherwise the code will not run.