[TuT] Making an animated avatar

[AlmarM]

Hello,

In this post ill explain how to make avatars like this
http://img511.imageshack.us/img511/3558/almarmavate4.gif (http://imageshack.us)

Things you might need.

3 the Hard Way Rmx Font (http://www.dafont.com/3the-hard-way-rmx.font)

Tutorial
Step 1.
Start PhotoShop CS2 and make a new file with these settings:
http://img184.imageshack.us/img184/7339/settingsch5.jpg (http://imageshack.us)

Step 2.
Paint the current (background) layer with the color you want to have as the text color. In this case Black.
Create a new layer (Layer > New > Layer... > Ok) and paint it the color you want to have as the background. In this case White.
http://img525.imageshack.us/img525/3299/layersfz8.jpg (http://imageshack.us)

Step 3.
Press the 'T' button to write down text. Make the color red (or any other color, doenst care. We are going to delete this later), size, font (3 the Hard way Rmx) and choose your text.
http://img525.imageshack.us/img525/6176/textge2.jpg (http://imageshack.us)

Step 4.
CTRL + Click on the 'T' in the 'Layer' tab, click on the 'Layer 1' and press CTRL + X.
http://img356.imageshack.us/img356/5017/cuttingnz3.jpg (http://imageshack.us)

Step 5.
Delete the Text layer and create a new layer between 'Layer 1' and 'Background'.
When you deleted the layer, your text because black.
http://img356.imageshack.us/img356/3548/deletero2.jpg (http://imageshack.us)

Step 6.
Make 'Layer 1' and 'Background' invisible by clicking on the eyes. Now dubble click on the main color panel and choose your favorite color.
Press the gradient button and draw a line! (Make sure 'Layer 2' is selected)
http://img266.imageshack.us/img266/234/gradient1fd3.jpg
http://img136.imageshack.us/img136/197/gradient2wy6.jpg
http://img507.imageshack.us/img507/2294/gradient3kx1.jpg

Step 7.
Make 'Layer 1' and 'Background' visible again by pressing the eyes. Now click the 'Photoshop > ImageReady' button.
http://img234.imageshack.us/img234/6188/imagereadyjj8.jpg (http://imageshack.us)

Step 8.
Now that ImageReady is open, select the image in the left corner and press the 'Duplicate' button.
http://img234.imageshack.us/img234/4917/duplicatejs8.jpg (http://imageshack.us)

Step 9.
Select the first image and make 'Layer 1' and 'Background' invisible again. Now click on the 'Move' button and move the 'Layer 2' (The gradient line) to the left corner. Do the same with the Duplicated layer, only this time move the 'Layer 2' (Gradient line) to the right. When moving to the second picture, just make the 'Layer 1' and 'Background' from the first picture visible again.
http://img340.imageshack.us/img340/7381/lefttl1.jpg
http://img266.imageshack.us/img266/5766/rightvw1.jpg

Step 10.
Make all layers visible again. Now CLICK on the first image, then CTRL + CLICK on the seconds image. Then press the 'Tween' button.
A setting window will popup.
Settings are:
Tween With: Selecting
Frames to Add: 60
Select: All Layers
Check all Checkboxes
Now press OK, and you will see this
http://img266.imageshack.us/img266/3498/tweendb3.jpg (http://imageshack.us)

Step 11.
Resize the image to 128 x 128 for a forum avatar. Than just save it (File > Save Optimized As...)
http://img110.imageshack.us/img110/7840/resizeandsavehz0.jpg (http://imageshack.us)

So heres the result:
Normal
http://img520.imageshack.us/img520/7567/normalur5.gif

Resized
http://img340.imageshack.us/img340/3358/resizedxg6.gif

Let me know what you think about it :)


Video Tutorial (not actualy a tutorial, im just showing you here the same as the pictures. If too fast please pause)
http://nl.youtube.com/watch?v=9d4OB9LyS2k

AlmarM

[Reinn]

Wow, this is pretty cool, thanks for posting +rep !!!

[Kaskame]

Hmmm nice! :)

Btw Reinn you will use this is on your avatar? :P
It would rock on that letters ^^

[Poosc]

Awesome thanks for a great post! I hope i'll do some pretty complicated animated images like this one but for a website and not an avatar ;)

[PeaceBreaker3]

wow, awesome, TY