Introduction
In this tutorial I’m going to show you how to create customizable avatar icons with php. This is a great feature that isn’t seen that
often around the internet and I think should be used more. So let’s get started.
What you will need
- Adobe Photoshop.
- A pure text editor. I like Notepad++.
The Source Files
Download the PHP and Photoshop Files
Part One: Creating the images.
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.
Now let’s start playing with some code. . .
Comments
Post by m00dy on July 25, 2007
coool.. thanx i really need thiz for my another project!
Post by vladimir on August 3, 2007
Cool!
Post by Siavash on August 7, 2007
do you have any demo ?
Post by JFuste on August 16, 2007
Fantastic use of GD Library and PHP!
Post by atc on October 6, 2007
cool
Post by darshan gesota on October 18, 2007
Good documentation and use of power of GD with PHP
Post by Alex on November 19, 2007
i found it verry complicated to understand to be honest and couldnt follow all the steps
Post by miley on November 23, 2007
i just stroled threw it all i have to say is wow!!! just giving a shout out miley ^_^
Post by yo on December 4, 2007
thanks x3
Post by terence on December 7, 2007
Wow thanks...can be of good use in my sitehttp://www.empoysworld.com
Post by Alfred on January 19, 2008
thats really nice
Post by Alex on April 23, 2008
For the final image, a background is set. Is there anyway to make the background for the final result transparent instead of a solid image?
Post by Rigo Valencia on June 16, 2008
kool
Post by MaRiSsA iS sO cOoL on July 13, 2008
It looked so confusing i got dizzy and nearly fainted I LOVE TWILIGHT
Post by Matt on July 15, 2008
I'm no artists so when it comes to makeing the graphical parts I'm so lost. Do you know if there exists a suitable collection of basic and free as in speach (OS/CC/Other) art work that would make a good starting point? You can get hold of me via http://lordmatt.co.uk
Post by praveen on July 17, 2008
Thank you for a great tutorial.. where can i get the set of images and objects to create avatars
Post by Gautam on August 1, 2008
gr8 tutorial...i was looking all over this type of code...but i found here...very nice. :)
Post by Chad Allard on November 11, 2008
Note: Can be modified to support PNG-8 alpha transparency (exported from Adobe Fireworks) if use use imagecreate() rather than imagecreatetruecolor in the build process, and then allocate a transparent color with imagecolorallocate(). That way, you can support the transparent PNG images in older browsers like IE6.
Post by Andrei on November 11, 2008
Awesome tutorial! A++ Thank you very much for this
Post by sohail on December 2, 2008
this is exactly what i was i looking for ... thanks alot.
Post by DigiMaX on January 6, 2009
Sry but i got the problem that the background color is always black color, whatever i changed it from #000000 to another color such as #FFFFFF or anyelse...
Post by DigiMaX on January 6, 2009
I found the solution, thanks anyway =)
Post by Keenan on January 14, 2009
I have the same issue, can you please post solution.
Post by saiprasad on April 4, 2009
I am using the above code. but I am not getting any output. I am creating instance and called build function as above
Post by mika on September 9, 2009
kooooooooooool!!
Post by Michael on September 10, 2009
Is there any way to make buttons so that when, for example, the "hat button" is pressed, the hat appears? Thanks!
Post by Cleveland Wolcott on February 9, 2010
Hi, first I want to tell you that I follow your blog. Great post, I totally agree with you. Have a good day mate.
Post by Dyl on June 3, 2011
I am trying your tutorial, but everytime I call $avatar->set_width(125); It says "Fatal error: Call to undefined method avatar::set_width()"
Post by Warning: imagejpeg(): Filename cannot be empty on April 19, 2013
LINE# 183 before: imagejpeg($this->canvas, "", 100); after: imagejpeg($this->canvas, NULL, 100);
Post by Derision on May 25, 2013
I get an error with the $background_color = imagecolorallocate ($this->background, 0xFF & ($int >> 0x10), 0xFF & ($int >> 0x8), 0xFF & $int); line. Help?