Guide: Simple Animated Avatars, Signatures and Posts

[lag]

Had a few people ask me how I made my "snazzy" animations that I've been flashing around.... okay. Just one, but that's how all my guides are! Note: Creating aWeSoMe graphics is out of the scope of this tutorial, this is just about animation!

Anyway, here it is

To make all my animations, edits, etc. For this guide I will use the industry standard Adobe Photoshop CS2 and Adobe ImageReady CS2. Feel free to use any version of Photoshop though, and for that matter, another program all together! There are many alternatives.

First I will find my subject image. Hmmm let's say, from here: The World of Warcraft Armory

I take a screenshot of the window (PC: Alt-PRNTSCN / MAC: Command-Shift-4, Spacebar, Click) to grab my subject.

Note: Your screenshot will come out better, I had to compress the crap out of this image to save my bandwidth.

Crop your image using the crop tool, this is located on the control panel on the left hand side. If it's missing () try going to the menu at the top and clicking Window => Workspace => Default Workspace.

Click-Drag the area you would like to use, the marching ants will indicate the area you have selected. Once you are satisfied, hit enter.


Now I am going to use the shapes tool, and the type tool to create an arrow graphic point out what I'm talking about!

First I use the shapes tool and select an arrow shape from the top menu bar.



Select a color from that same menu bar.



Click and drag your arrow to make a shape, it works much the same way the crop tool does as far as controls go.



Then I add my text using the type tool. You can use the top bar again to select your typeface and size, and color.


Click and drag to make a text area, and type your witty text.


Now we have our art, we are ready to animate! Go to your top menu and File => Edit in ImageReady


For this animation I am only going to have 2 frames: arrow visible, and arrow invisible. First I go to my Animation pallet (Window => Animation if it's missing). Use the duplicate current frame tool once to make two frames. It should look like this now.



Double click on the second frame (should already be selected). Then, go to your layers palette and click the eyes on the text layer and the arrow layer.



Now your animation pallet should look like this.


Click where is says "0 secs" and change the timing of your graphic. I am using 2.0 seconds here for.... dramatic effect.

Do that to each of your frames.

FINALLY we can save our shiny new animated gif! WOOT! File => Save Optimized as... name it and make sure that the file type is .GIF! Only .GIFs can animate, .png .jpg etc will not animate!



Save, upload, post, etc. Enjoy your new animated .gif



If I'm missing anything or you need help, post it here and I will reply. I've been working in graphics for print and video for longer than I care to remember so sometimes I skip a step

Hope you learned something!

[Snitch]

Nice guide Lag! Wondering what the text next to the face says in your animated avatar.

Snitch

[Demonkunga]

Sweet guide Lag, I will definatly have to go use my haxxor skills and get my hands on Photoshop/image ready and try this out!

Ps. is that your 19 twink rogue im assuming?

Edit: It may be very obvious once I get Photoshop up and running, but for the first picture of your last guide, how did you blur everything except the text you didnt want blurred?

http://planetlag.com/posts/rep_step0.png

Nice guide Lag! Wondering what the text next to the face says in your animated avatar.

Snitch

It says:

Subliminal
Message:
Vote For
MMowned

[lag]

Nah, that's some level 10 twink mentioned previously somewhere on the forum, I have no twinks I would never post a link to my characters or mention my server... although I really have nothing to fear as I haven't broken the WoW TOS

As far as the blur, you just use the selection tool to pick what part of the image you want blurred and then use Filter => Blur => Gaussian Blur

[BYSCUIT]

i cant find the shaps on the program lol

[lag]

i cant find the shaps on the program lol

The default "shape" is the rectangle (but it looks like a square, i digress). Find the rectangle on the left toolbar and hold-down left-click to drag and find the custom shape tool. Let me know if that helps.

[Skull]

i Followed the guide and all saved it as .gif but when I upload it from my mac to the forum it loses it animation, I changed to something diffrent now but wondering what I did wrong

[Flying Piggy]

Awesome guide lag +rep

[lag]

i Followed the guide and all saved it as .gif but when I upload it from my mac to the forum it loses it animation, I changed to something diffrent now but wondering what I did wrong

Try "Save Optimized as..." perhaps? Can you link the sample image so I can take a look at it?

[Xepher]

Very nice guide, I use animation shop, It's a little easier but what ever works for you. Just one question how to you get an animation like the one in your avi :P *wants to animate the avi I made for myself*

[wicked jt]

lol omg ty lag
this just scored my a gf
made a retarded .gif for a chick
and she fell in love with me
shwing...

[lag]

lol omg ty lag
this just scored my a gf
made a retarded .gif for a chick
and she fell in love with me
shwing...

My life goal is now complete.

[wicked jt]

My life goal is now complete.

Mind if i put in my sig i completed Lags life goal, because that would make me feel like a
Superstar!!

[lag]

Mind if i put in my sig i completed Lags life goal, because that would make me feel like a
Superstar!!

Sure, better than what most people put about me in their sigs :yuck:

[wicked jt]

lol ok
now i do feel like a
Superstar!!