How to make custom avatars with php

Before we begin coding let's open up Photoshop and play around with our image for a bit. There are few things you need to remember when you're creating images for this project.

• Every image MUST have the same dimensions.
• The background MUST be transparent.
• Each image MUST be saved in 24 bit .png format.

Open up your image in photoshop, (for the sake of this tutorial I'm going to assume you used the picture of Brian from Family Guy. It's called original.jpg and it's included in the zip file.).

This step is all about creativity. As I was looking at this image I was thinking to myself. "Ok what can I do to change this picture up a little bit? I can give him some pants, some shoes, a hat, I can change his martini. . . " There were many things I could do with it.

I will quickly show you my workflow for creating accessories.

I grabbed the original image and used the magic wand tool to select and delete the background. I also removed Seth McFarlane's (a genius by the way) signature.

I created a new layer above the base layer and named it hat.

Using my Wacom Tablet, I drew a baseball cap on his head. I could hide and show it using the layers palette. (Make sure that you draw your accessories on separate layers, this is what makes customization possible.)

Once I was happy with the hat I hid it and saved the image of brian as Base.png.

It's crucial that you save the image as 24 bit png image. If you don't the image won't look right. Make sure that transparency is selected as well..

Then I saved the hat image as hat.png keeping the same settings as before.

That's the basic process that I went through. Pretty straight forward. I repeated this process for additional accessories. If you like, add some of your own unique ideas, perhaps a scarf or a tie. You may also use the images that I've included.

Part Two: Visualizing how it will work in php.

I spent a good amount of time just thinking about how this was going to work. This is what I came up with.

I also knew that I wanted to make this as modular as possible so I decided to use OOP (object oriented programming)

Note: If you are not familiar with Object Oriented Programming, I encourage you to read up on it and come back. There is a good tutorial here.

Part Three: Setting the variables

Open up your pure text editor and create a new file. Name it avatar.php

Copy and paste the following code into avatar.php

class avatar
{
	var $filename; 		//the filename of the final image
	var $width 	= 100; 	//the final width of your icon
	var $height = 100;	//the final height of the icon
	var $parts  = array(); 	//the different images that will be superimposed on top of each other
 
}//end of class

Above is pretty self explanitory, I'm just setting global variables.

Part 4: Creating our "set" methods

By set methods, I'm talking about the functions we will use to pass information to our new class.

Copy and paste the following code into avatar.php right after the $parts variable. Please refer to the comments for explanation.

/***************************************************************************************************************************
SET WIDTH
This function sets the final width of our avatar icon. Because we want the image to be 
proportional we don't need to set the height (as it will distort the image)
The height will automatically be computed. 
**************************************************************************************************************************/
function set_width($width)
{
//setting the width
$this->width  = $width; 
}
/***************************************************************************************************************************
SET FILENAME
This sets the final filename of our icon. We set this variable if we want 
to save the icon to the hard drive. 
**************************************************************************************************************************/
function set_filename($filename)
{
	$this->filename = $filename; 
}
/***************************************************************************************************************************
SET BACKGROUND
From this function we can add one of two types of backgrounds
either an image or a solid color. 
**************************************************************************************************************************/	
function set_background($background)
{ 
	$this->background_source = $background; 
}
 
/***************************************************************************************************************************
ADD LAYER
This is the meat and potatoes of this class (And it's so small!)
This function let's us add images to our final composition 
**************************************************************************************************************************/
function add_layer($filename)
{
	//by using the syntax $this->parts[] we are automatically incrementing the array pointer by 1
	//There is no need to do $this->parts[$index] = $filename; 
	// $index = $index + 1; 
	$this->parts[] = $filename; 
}

Ok we have our first part of the class done, we have set our data, now we need to take that data and build upon it. So let's create our "build" functions.

Part Four: Building the background.

Copy and paste the following code into avatar.php right below add_layer

/***************************************************************************************************************************
BUILD BACKGROUND
This function takes our background information and compiles it
**************************************************************************************************************************/
function build_background()
{
//----------------------------------------
// Getting the height
//----------------------------------------
//grabbing the first image in the array
$first_image = $this->parts[0];
 
//getting the width and height of that image
list($width, $height) = getimagesize($first_image);
 
//finding the height of the final image (from a simple proportion equation) 
$this->height = ($this->width/$width)*$height; 
 
 
//----------------------------------------
// Compiling the background
//----------------------------------------
//the background canvas, it will be the same width and height
$this->background = imagecreatetruecolor($this->width, $this->height);
//----------------------------------------
// Adding a background color
// I'm going to be sending hex color values (#FFFFFF), 
//----------------------------------------	
//checking to make sure it's a color 
if(substr_count($this->background_source, "#")>0)
{
	//converting the 16 digit hex value to the standard 10 digit value
	$int = hexdec(str_replace("#", "", $this->background_source));
 
	//getting rgb color
	$background_color = imagecolorallocate ($this->background, 0xFF & ($int >> 0x10), 0xFF & ($int >> 0x8), 0xFF & $int);
 
	//filling the background image with that color 
	imagefill($this->background, 0,0,$background_color); 
 
//----------------------------------------
// Adding a background image
// If $background is not a color, assume that it's an image
//----------------------------------------
}else{
	//getting the width and height of the image 
	list($bg_w, $bg_h) = getimagesize($this->background_source); 
 
	// Make sure that the background image is a png as well. 
	$img = imagecreatefrompng($this->background_source); 
 
	//This function copies and resizes the  image onto the background canvas
	imagecopyresampled($this->background, $img, 0,0,0,0,$this->width, $this->height, $bg_w, $bg_h); 
}
}

Ok the background image is compiled and ready to go. Now the moment you've all been waiting for! Putting the images together!

Part Five: Building the composition

Copy and paste the following code into avatar.php below the previous function.

/***************************************************************************************************************************
BUILD COMPOSITION
This function compiles all the information and builds the image
**************************************************************************************************************************/
function build_composition()
{
//----------------------------------------
// The Canvas
// Creating the canvas for the final image, by default the canvas is black
//----------------------------------------
$this->canvas = imagecreatetruecolor($this->width, $this->height); 
 
//----------------------------------------
// Adding the background
// If the background is set, use it gosh darnit 
//----------------------------------------
if($this->background)
{
	imagecopyresampled($this->canvas, $this->background, 0,0,0,0,$this->width, $this->height, $this->width, $this->height); 
}
 
//----------------------------------------
// Adding the body parts
// Here we go, the best part
//----------------------------------------
//looping through the array of parts
for($i=0; $i<count($this->parts); $i++)
{
	//getting the width and height of the body part image, (should be the same size as the canvas)
	list($part_w, $part_h) = getimagesize($this->parts[$i]); 
 
	//storing that image into memory (make sure it's a png image) 
	$body_part = imagecreatefrompng($this->parts[$i]); 
 
	//making sure that alpha blending is enabled
	imageAlphaBlending($body_part, true);
 
	//making sure to preserve the alpha info
	imageSaveAlpha($body_part, true);
 
	//finally, putting that image on top of our canvas  
	imagecopyresampled($this->canvas, $body_part, 0,0,0,0,$this->width, $this->height, $part_w, $part_h);  
}
}

Ok all the images have been put together, now it's time to handle image output.

Part Six: The output function

Copy and paste the following code into avatar.php right below the previous function.

 
/**************************************************************************************************************************
OUTPUT
This function checks to see if we're going to ouput to the 
header or to a file 
**************************************************************************************************************************/
function output()
{
	// If the filename is set, save it to a file 
	if(!empty($this->filename))
	{
		//notice that this function has the added $this->filename value (by setting this you are saving it to the hard drive)
		imagejpeg($this->canvas, $this->filename,100); 
 
	//Otherwise output to the header
	}else{
		//before you can output to the header, you must tell the browser to interpret this document 
		//as an image (specifically a jpeg image) 
		header("content-type: image/jpeg"); 
 
		//Output, notice that I ommitted $this->filename
		imagejpeg($this->canvas, "", 100); 
	}
	//Removes the image from the buffer and frees up memory
	imagedestroy($this->canvas); 	
}

There is one function left! No time to lose!

Part Seven: The Last function!

You know the drill :P

/***************************************************************************************************************************
BUILD
The final function, this builds the image and outputs it
**************************************************************************************************************************/
function build()
{
	//Builds the background
	$this->build_background(); 
 
	//builds the image
	$this->build_composition(); 
 
	//outputs the image
	$this->output(); 
}
 

Ok. . . your new avatar class is done and ready to go. . . but how do you use it? I'm glad that you asked because it's VERY easy! That is the wonder of classes, you only have to write it once and then you can use it over and over again with ease. All you have to remember are a few functions!

Take a look at the code below.

//creating a new instance of your shiny new avatar class :)
$avatar = new avatar; 
 
//setting the width of your final image (the image will 
//resize themselves dynamically)
$avatar->set_width(100); 
 
//setting your background color to black
$avatar->set_background("#000000"); 
 
//you can also send it an image
$avatar->set_background("my_background_image.png");
 
//ah hah! adding your body parts, think of it like layers 
//in photoshop in reverse order.  
$avatar->add_layer("base.png"); 
$avatar->add_layer("beer.png"); 
$avatar->add_layer("hat.png"); 
$avatar->add_layer("shorts.png");
$avatar->add_layer("mustache.png");
 
//you're done setting the width, the background and the
//layers, let's build this sucker! 
$avatar->build();

Now you can now add a whole new world of customability to your website! You can create a base character (like good ol Brian here) and over time, create a whole archive of interesting accessories for him to wear!

I hope this was helpful, if you have any questions or suggestions feel free to contact me.

I'm accepting requests. If any of you have a question about Photoshop or PHP and would like to see a tutorial, send me an email here. Make sure that you put "request" in the subject.

We are looking for good tutorial writers to help us over at TutorialQuest.com come on by and submit your stuff!