Make Money with Photoshop

Join our mailing list to receive the ShowAndTell-Graphics Newsletter. You will get an email whenever a new tutorial is added, or when new Myspace layouts are created.

At ShowAndTell-Graphics we value your privacy. Please view our privacy policy.

Come join me on Myspace! Click here to view my page. Drop me a note and say "Hey!"

Search Query
Do you want to know how it's done? Learn how to use Photoshop the easy way!

How to Create an Animated Myspace Avatar
Photoshop Training

It seems that Myspace has taken over the internet. It is unbelievable to me just how many people are using it. And hey, why not? It's free, and a great way to hook up with people you haven't seen in many years. Many people use the site for promoting web sites and products. I use it myself to bring people up to date for this site. One thing that I like to do is create an eye catching avatar so that people will notice it and maybe go check it out. There are a couple of things you can do to achieve this. The first is to make some kind of flashing animation. I always notice this type of avatar. The other is on the size. Although you are restricted to a width of 170 pixels, there seems to be no end to the length you can use. I tested it out and made an avatar that was 170 X 5000, and it works. Now I am not suggesting you make one this big. I think a lot of people would find that irritating. For me, a happy medium is in the 400 to 500 pixel length. For this tutorial I will use 400 pixels.

You will either need to create some interesting design in Photoshop or use a picture. I am going to use a picture. You will need to crop your picture to 170 X whatever length you choose. As I said, I am creating mine at 170 X 400 pixels.

Now that we have this first layer, we will want to duplicate it. Select Layer/Duplicate Layer. On this new layer I am going to use the smudge tool to play around with. You can do whatever you like to yours. There are a million possibilities. Here is my second layer. Notice how I smudged around the eyes.

Now we need to duplicate this layer. On this layer I am going to smudge the eyes a bit more, and some around the lips. Remember not to do too much at once as these will each be individual frames for our animation. Continue duplicating layers and modifying until you have at least 4 o5 different layers.

Now we need to jump over to ImageReady to create the animation. Click on the Jump to ImageReady button.

Once you are in ImageReady, you will need to make sure that you have the animation window open. Select Window, and put a check mark next to Animation. You should have something that looks like this.

For your first frame, turn off all the other layers except your first one on the bottom. Do this by clicking on the little eye on the layer.

Next we need to add a new frame. From the animations flyout window select New Frame.

Now we need to hide all the layers except the second one. Continue doing this for each layer you have created. Add a new frame, show the layer etc. You will also want to do the reverse for the last few frames so it has a smooth transistion back to the origianal. If you go by layer number starting from the bottom, and you have 5 different layers, the frame order should be 1,2,3,4,5,4,3,2.

Now you can hit the play button on the bottom of the animation window to see how it looks. Mine is a bit too fast because there is no delay between frames. You however might like it like that.

If you want to change how long each frame will be displayed, select each frame in your animation window by holding the Ctrl key while clicking. There is a delay time drop down menu under each frame. Select the time you want, and all frames that you have selected will change to this new time. You can also adjust the time of each frame individually if you want some frames to stay on longer than others.

Now you will need to save your animation. It will need to be saved as a GIF file. Make sure your your Optimize window is open. To do this, select Window and put a check mark next to optimize. I set mine to GIF 128 Dithered as shown below.

Now select File/Save Optimized As. Choose your folder and a name for your file. Upload this picture into your myspace account and set it as the default picture. Here is my final product.

Here are some other interesting animated avatars I found on myspace to get your creative juices flowing.