friendsterTalk - Friendster Forum

Warning: This is recommended to all who do not know how to make animations using Adobe Photoshop and Imageready.

I decided to post this old tutorial of mine to help those newbies who really want to learn how to animate their graphics using photoshop. Although it's possible to do animation--but programs liek photoshop have more fun features to play with and you don't need the interwebz. LOL.

Again, this is only for BEGINNERS so don't go posting crap liek "I already know this so thanks for sharing" or "thnx foe sharing"..

Requirements:
*Adobe Photoshop
     - I'm using version 7.0 so I don't know if this applies to all versions especially the CS+ types.
*Adobe Imageready
     - Just click CTRL+SHIFT+M while you're in the Photoshop window.

- - - - - - - - - - - -
I'll teach you how to make an uber uber uber simple blinking animation like this:


1) First, type in your text in the photoshop window.


2) Then, go to imageready.


3) A new window will pop up.. That's already the IMGready window.




A rectangular palette can be seen.. That's where you manage your animation frames so you can animate. When you open up the text, you'll see only one frame there.

4) Make a new frame. Click the button on the upper right of the palette and select NEW FRAME.


5) A new frame will appear. Yay.


6) Because we're going to make the text blink, the second frame should not reveal the text. So we have to hide its layer. You'll see that there's an eye beside each layer. Click the eye beside the text layer, and make sure you've selected the second frame while doing this.




After clicking that eye thing, you'll only have the BG for the second frame.


7) To set the time/delay/whatever you call it, just right-click the time below the frame. In this case, I chose 0.1 sec. Do this in each of the two frames.


8) Afterward..you'll see that in the first frame, the text is seen. In the second frame, there's nothing but the BG. Click the play button to view your work.


9) HOW TO SAVE (I had a hard time with this one, hahahaha): Go to FILE, click SAVE OPTIMIZED AS, type in your filename (make sure it's GIF), and click ok.



There ya go. Easy, right?
Experiment with the time delay and add more frames. Add more layers and move the pic/text all around. Experiment with the size and blending options.

With this basic tutorial, you can already explore and learn different animation styles already. The concept is still the same. Play with the frames, the visibility and the positions of the images. Read more tutorials and experiment to make your own unique style.


Don't forget to leave some COMMENTS.

Last edited by joebz (2008-07-12 13:30:27)