How to make custom avatars with PHP

Published on July 27th, 2007 by admin

Learn how to use php to make a customizable avatar. A great and unique feature for any website!

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.).

12_001

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.

12_002

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

12_003

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.)

12_004

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..

12_005

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

12_006

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. . .

Leave a Reply




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()"

Popular Posts

Posts By Category

Supported by