[TUTORIAL] Animating in Photoshop and/or Imageready

[marick626]

First off, welcome to my tutorial. I hope that by doing this people will learn how to create animated banners for their websites, sigs or for whatever you need them. I will try to make this tutorial as simple to understand and yet detailed enough so noobs can understand and experts learn something new if anything.

--------------------START----------------

Ok, I want you to remember when you, as a kid, used to take a notebook and make pictures on the corner of it, and in each page, the caracter or thing was doing something different so that when you passed the pages quickly, it looked like it was moving, in other words animated. That is animating and its the same principle you will use when creating an animation in photoshop.

Now mind you, there are different ways of animating. I am going to teach you the most difficult, why? because once you learn how to do it the hard way, everything will get easier from here on out.

Ok, so enough jabbering, lets get to it!!

1. Open photoshop or Imageready Duh. Ok that was unnecesary but lets move forward.

2. We will be creating the banner you see on the top, so open up a new canvas with a width of 468 and a height of 60 (468x60). Also, open the animation window although we wont start animating right away clicking Window + Animation. Imageready already has this window open I beleive.


3. Now you need to make the background. I did a very simple one but you can go crazy. The way I did it was make a gradient with the color #535353 in the lighter end and #000000 in the darker end, look at the picture to get the full effect.


4. At this poing do everything extra you might want. I added the border but you can put whatever you see fit.

5. Now for the text. I wont get into any detail with this but the font I used was Trajan Pro. I then added a gradient and added a stroke with a gradient on it. This gives it a shiny effect. The small text has nothing special to it. This is how it looks after I added everything:


6. OK, now we will do the good stuff... First off, click on the small arrow pointing down on the animation window. This will make popup a screen. Basicaly just uncheck the selection that says "New layers visible in all frames" this is bad... most of the time.


7. Now, drag both text layers just below the canvas. Click on th small button to the left of the small trash can. This duplicates the frame in the timeline.


8. Now what you want to do is select the main text layer "Marick's tutorial" and with the second frame selcted, click the up arrow 5 times. This will bring up the text just a bit. The times in which you move the layer will determine the speed so if you want the text to move faster, you want to click 8-10 times, so on and so forth. Now, click on the duplicate frame again with the second frame selected and repeat the process, you should see the text go up a bit on each frame. It took me 15 frames to have the text in the middle, it could be less for you or more but 15 is about right. Another effect you can add is the fade, to make it look smoother. Basicaly all you do is on each frame, increase the opacity a bit, so on the first frame the opacity for the text should be 0% but on the 15th frame the opacity should be 100%. This is just a neat trick



9. Now do the same with the small text. Exactly the same as before, only you will select the layer that says "Animation". Its simple.


10. Now you can just do another fade effect to end the animation but I went a bit farther than that. This part is a bit more advanced and a bit more confusing so read closely. To add the Blur effect you need to selec the main text layer "Marick's tutorial" and go to Filter + Blur + Motion Blur.

Listen Closely!!
Duplicate the Main text layer and add the effect to the original. This will add the blur effect behind the main text... put the slider at about 10%. Make sure you added a frame before hand. Ok, now duplicate the frame again and deselect the blurred text layer (so you wont see it), Duplicate the unblurred text again and add a bit more blur to it. Make sure it is behind the unblurred text layer. Repeate the process adding a bit more to the blur slider each time. After you did this, fade the blurr effect.
Here is the part in Slow mo:


11. Now just make the ending sequence, I decided to add a fade effect. To make it slowly fade away but you could make it move to the right or anything you want.
------------

I hope this proved to be useful. If you have any questions feel free to post. :wave:

[Neth'zul]

F'n thx alot dude thats awsem guide +rep!

Edit: lol sorry forgot cant rep here XD

[EliMob441]

4rep this is awsome

edit: I really went though a whole page of your threads to rep you and none work

[PsycoDisciples]

ThanKs +52Rep

[marick626]

4rep this is awsome

edit: I really went though a whole page of your threads to rep you and none work

that sucks, I gotta tell Matt about this.

[CarlosJ]

thanks for this marick awesome tut will help alot

+rep


EDIT: ahhh sorry same problem as Eli

[Phase228]

Epic animation dude

[marick626]

thanks for this marick awesome tut will help alot

+rep


EDIT: ahhh sorry same problem as Eli

if you wanna rep me, go to the thread I made in the account services thing at the bottom of the forum. It appears matt disabled reping from the graphics section.

[CarlosJ]

if you wanna rep me, go to the thread I made in the account services thing at the bottom of the forum. It appears matt disabled reping from the graphics section.

yeah sorry i cant i had the same thing as Elimob. ive tried nearly all your threads outside the graphics section and i keep getting you can't give reputation to this post

[Remahlól]

Epic animation dude

Yup, it's really a cool one. I think I'll use it.. and Marick, get a post where I can rep you !