"RT @boobygraffoe: Theresa May too large to fit in studio so she has to stand outside & be interviewed through the window.…"

@ashleyford 3 hours ago

"@littlemac91 so how did you find out about Harkable?"

@ashleyford 2 weeks ago

Designer and web developer, Co-founder and Technical Director at Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]


PHP GD generate an image with text and font embedding

Use PHP to overlay custom text on an image and save it on the server


PHP isn’t limited to just generating HTML. It can also be used to create and manipulate image files in a variety of formats. I recently worked on a project where we had to generate an image for the user and include their name flattened into it. It’s extremely easy to do with PHP. Admittedly the demo I’ve put together for this tutorial is rather extravagant! but it serves the purpose to explain how to use the PHP GD image library.

The Code

// link to the font file no the server
$fontname = 'font/Capriola-Regular.ttf';
// controls the spacing between text
//JPG image quality 0-100
$quality = 85;

function create_image($user){

global $fontname;
global $quality;
$file = "covers/".md5($user[0]['name'].$user[1]['name'].$user[2]['name']).".jpg";

// if the file already exists dont create it again just serve up the original
if (!file_exists($file)) {

// define the base image that we lay our text on
$im = imagecreatefromjpeg("pass.jpg");

// setup the text colours
$color['grey'] = imagecolorallocate($im, 54, 56, 60);
$color['green'] = imagecolorallocate($im, 55, 189, 102);

// this defines the starting height for the text block
$y = imagesy($im) - $height - 365;

// loop through the array and write the text
foreach ($user as $value){
// center the text in our image - returns the x value
$x = center_text($value['name'], $value['font-size']);
imagettftext($im, $value['font-size'], 0, $x, $y+$i, $color[$value['color']], $fontname,$value['name']);
// add 32px to the line height for the next text block
$i = $i+32;

// create the image
imagejpeg($im, $file, $quality);


return $file;

function center_text($string, $font_size){
global $fontname;
$image_width = 800;
$dimensions = imagettfbbox($font_size, 0, $fontname, $string);
return ceil(($image_width - $dimensions[4]) / 2);

$user = array(

'name'=> 'Ashley Ford',

'name'=> 'Technical Director',

'name'=> 'ashley[at]',

// run the script to create the image
$filename = create_image($user);

Running the code

I’ve created two functions to make it as simple as possible. to run the code simply pass the $user array data to the function and it’ll save the new image in the folder ‘covers’ on your server. The function returns the file url so you just need to echo it into an image tag as shown below. Check out the demo where you can create your own.

$filename = create_image($user);
<img src="<?=$filename;?>" width="800" height="600"/>

GD vs ImageMagick

On a performance level there’s not much between the two libraries ImageMagick has more options for example text rotation. you can find out more about ImageMagick here and GD here.

Demo Download

Designer and web developer, Co-founder and Technical Director at Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]

Comments 16
  • Marco
    Posted on

    Marco Marco

    Reply Author

    You can create a form to upload your own image?

    Posted on


    Reply Author

    thanQ bro.. <2 <3 <3 <3

  • Charan
    Posted on

    Charan Charan

    Reply Author

    Hi this is very nice tutorial i used this it’s working fine but a small problem i want to upload a image along with form and show that image also but it was showing image uploaded path only it won’t showing image, how can i do this please any one can help me.

  • Matt
    Posted on

    Matt Matt

    Reply Author

    Could the image be saved, and could a link be made to allow the person to share through facebook/twitter/email? How could this be done?

  • andrew
    Posted on

    andrew andrew

    Reply Author

    I have changed the text boxes to a single text area but have no idea how to define the width of the generated text and it passes the width of the image. Any ideas?

  • Gun
    Posted on

    Gun Gun

    Reply Author

    Is it also possible for frontend user to change font, fontcolor and size. So yes how? Thanks!

  • muhammad
    Posted on

    muhammad muhammad

    Reply Author

    very nice i m going to use it too.

  • minnu
    Posted on

    minnu minnu

    Reply Author

    its not working whenever iam changing the image. plz help me regarding this

  • Zach Smith
    Posted on

    Zach Smith Zach Smith

    Reply Author

    i will be back for more articles like this :)

  • J
    Posted on

    J J

    Reply Author

    Thanks! Could be useful.

  • Bhavesh Sondagar
    Posted on

    Bhavesh Sondagar Bhavesh Sondagar

    Reply Author

    I really impressed,Thanks for the great codes.

    I am learner and I want to know that suppose we want to add text on different different place on image, means one text on top right, one text on top left, one text on bottom left one text on center, how can we specify them in coding. Please explain me so that I can finish one of my project.

    Thanks in advance.

  • Altin
    Posted on

    Altin Altin

    Reply Author

    thanks you so super much – it works great :)

  • Olivier
    Posted on

    Olivier Olivier

    Reply Author

    Big thanks from France !
    I looked for this for days ..
    That’s really great. Thank u so much !!!

  • irfan
    Posted on

    irfan irfan

    Reply Author

    how to insert another photos?
    for example we change the photos of that animals..? 😀
    sorry for my bad english… 😀

  • Cubicle Ninjas
    Posted on

    Cubicle Ninjas Cubicle Ninjas

    Reply Author

    Really cool! I’m going to have to give this a shot.