Trying to generate 3D bumpmap text in PHP

Question

I have a website I monetize with numerous original pictures on it, I want people to visit the website to see the original pictures and have search engines only show the pictures with transparent watermarks.

The following is an example of what I mean by a transparent watermark. Except of course, I replace "Test!" with the company name.

Here's the PHP code I created so far:

<?php
$txt = "TEST!";
header( "Content-type: image/jpeg", true );

$w  = imagefontwidth(5) * ( strlen( $txt ) + 1 );
$h  = imagefontheight(5) * 2;
$i2 = imagecreatetruecolor( $w,$h );

imagesavealpha( $i2, true );
imagealphablending( $i2, false );
imagefill( $i2, 0, 0, imagecolorallocatealpha( $i2, 255, 255, 255, 127 ) );
imagestring( $i2, 3, 10, 10, $txt, imagecolorallocate( $i2, 255, 0, 0) );
$i = imagecreatefromjpeg( "someimage.jpg" );
imagecopyresized( $i, $i2, 2, 2, 0, 0, $w * 5, $h * 7, $w, $h );
imagejpeg( $i, null, 100 );
imagedestroy( $i );
imagedestroy( $i2 );
?>

$i2 is the resource variable for the image box in which I added the text, and $i1 is for the large image to place the text on. $w and $h represent width and height of the text image box. This code is able to produce the text on top of the image without the background box showing, but it doesn't produce the bump-map effect like what is shown in the above image.

Can anyone guide me as to what functions, mathematics or code I need to use to create the bump-map effect?

I feel my solution requires special manipulation of a block of pixels but I don't know how to do it for this effect.

I also want to stick with the PHP GD Image library.

Answer 1

I'd recommend using a semi-transparent PNG and adding it as a watermark rather than using the imagestring functions.

With the imagestring functions you'd theoretically needs to create two strings, one slightly higher and to the left than the other, and then somehow calculate the pixels that where both the strings are present and make that transparent. This will then mean the left-over parts would be black / white and give that 3d effect.

Example 1

If the watermark is the same for each image, then you can use a semi-transparent PNG. The benefit of this is that it allows for far more effects, and as a result a better result.

<?php

// Watermark will take up 80% of the photo's width
$size = 80;

$im = imagecreatefromjpeg(dirname(__FILE__) . '/photo.jpg');
$oi = imagecreatefrompng(dirname(__FILE__) . '/watermark.png');
$w1 = imagesx($im);
$h1 = imagesy($im);
$w2 = imagesx($oi);
$h2 = imagesy($oi);

$w = $w1 - (($w1 / 100) * (100 - $size));
$h = ($w * $h2) / $w2;

imagecopyresampled($im, $oi, $w1 / 2 - $w / 2, $h1 / 2 - $h / 2, 0, 0, $w, $h, $w2, $h2);

header('Content-type: image/jpg');
imagejpeg($im, null, 100);
imagedestroy($im);

Will produce the following output:

Original Photo / Watermark

Example 2

If the watermark needs to be different for each image, then you can use imagettftext to create the text using a font of your choosing (much better than imagestring but limited as to what effects you can do).

<?php

$size = 55;
$angle = 15;
$text = uniqid();
$font = 'BebasNeue.otf'; // http://www.dafont.com/bebas-neue.font

$im = imagecreatefromjpeg(dirname(__FILE__) . '/photo.jpg');
$w = imagesx($im);
$h = imagesy($im);

$text_colour_1 = imagecolorallocatealpha($im, 0, 0, 0, 99);
$text_colour_2 = imagecolorallocatealpha($im, 255, 255, 255, 90);
$box = imagettfbbox($size, $angle, dirname(__FILE__) . '/' . $font, $text);
imagettftext($im, $size, $angle, (($w - $box[4]) / 2) - 1, (($h - $box[5]) / 2) - 1, $text_colour_1, dirname(__FILE__).'/' . $font, $text);
imagettftext($im, $size, $angle, ($w - $box[4]) / 2, ($h - $box[5]) / 2, $text_colour_2, dirname(__FILE__).'/' . $font, $text);

header('Content-type: image/jpg');
imagejpeg($im, null, 100);

Output: