SEARCH
Newsletter
Subscribe to get design
tips, latest trends, free
stuff and more.
It doesn't look like an e-mail address

hosting

  Tutorials Photoshop ImageReady Animation Animated Matrix Tutorial

Animated Matrix Tutorial

Ok in this tutorial i will teach you how to make an animated matrix text with 1's and 0's going down the screen, if you want you can do it with chineese's symbol's.

Before i begin, i dedicate this tutorial to my girl friend Monica, she really keeps me going with my life. And shes more then any guy could ask for.

Ok lets just jump right in, here we go!

Step 1: Open up a 500x500 size document.

Step 2: Fill the background layer with pure black

Step 3: Select the type tool and set it to verticle type and drag that over then entier document.

Step 4: Pick out a good color for your text like a semi bright green color but you can change it if you want and chose a good font for it too, i for one used courier new, but i'm using 1's and 0's so if you use chineese's font it will be different of course lol.

Step 5: Start typing down the document to about the bottom qarter of the document and after that pressing enter 1-3 times, changing font size (to give it that matrix depth) and typing down again. (NOTE: dont put all the row's of one's and 0's at the same level but change how far down they go each time). And you should get something like this

image 1
Click to enlarge

Step 6: Now this is the anvanced part. Grab the rectangular marquee tool and put it on fix size mode. Then set the marquee to 500 pixles width (if you use the 500x500 size) and set the hight to 60 pixles.

Step 7: Once you have done step 6 press ctrl+c (on our type layer which you can rasterize or leave as a type layer its your choise). And then press ctrl+v to paste the marquee on a new layer.

Step 8: Do the same thing again but again raise the marquee's hight up anothe 30 pixles and copy again. (Ctrl+c) but to make this easier when animating it select layer 1 (which we pasted the first marquee on) and then press ctrl+c. That should make a new layer above that layer.

Step 9: Now to make the animation more smooth at the end. You will notice the number's will be miss aligned, in order to correct this you will need to press and hold the ctrl key down and move the mouse to align the number's. Make it so the letter's are perfectly aligned (you might have to zoom up to do this).

Step 10: Keep repeating this process until you have done this will all of the text.

Step 11: Go into ImageReady and create as many layer's as you have frame's (except the original type layer) so i had 13.

Step 12: Select the first frame and then select the background layer, after doing that hide all other layer's to assign the background layer to the first frame. Then select the 2nd layer and the layer that should say "layer 1". Then do what you did with the first frame, hide all other layer's to assign that layer to that frame. Keep doing that process until you have done this with all layer's and frame's (keep in mind we are ignoring the original type layer).

Now just hit the play button and if you did it right you will see something like this (but without the "free your mind" enter the matrix" i will be adding that later)

Animated Matrix Tutorial
Click to enlarge

Well thats it! good luck!

   
subscribe to newsletter