friendsterTalk - Friendster Forum

Guys, check this out you could use this trick for your siggy or banners ^^ here's a sample: (i repeat, this is just a sample!)

if you want one and i'm not busy with school, i could make one for you ^^ just PM me
But i believe it's better if you learn for yourself, so that not only do you know, but you can make your own, however you really want it to be ^^

This TUT is a little bit more complicated than my first TUT: Updated! Wobly Frames (PSD) - For Newbs. This requires ANIMATION, so if you're not familiar with it, i suggest you read Basic Tutorials on how to Animate from the Internet. It's pretty easy
So anyways, this TUT is gonna show you how to create an animated Pen wrtiting your name/text! Cool huh ^^ But it's actually pretty basic and pretty is.
I'm not gonna show you guys how to make it all fancy, just the basic stuff cause once you learn this, it's gonna be a sitch for you ^^

Everybody can learn this, you just have to have the will to do so ^^

Let's start!

1) Of course, let us open Adobe PhotoShop. If you're using the CS3 like me, animation is already here. But for CS and CS2, you'll have to have Adobe ImageReady.

2) Create a new Document
The size would depend on you. Since i'm just teaching this, let's start off with a 500 x 250 px file


3) Next, Type in your text. Choose your font face, font size, font color, etc .. Let's just start basic. My text is MERX, Black, Big Font (so you guys can really see how this works) and a basic Comic Sans font.



4) Now that you've got that, RASTERIZE your layer (i'm sure by now you know how to do this). For those who don't, please read my first tutorial: Updated! Wobly Frames (PSD) - For Newbs


5) This is where it really starts! ^^ What we have to do is to CROP different sections of the letters by CREATING NEW LAYERS VIA CUT (CTRL + SHIFT + J).
I suggest using the Polygonal Lasso Tool (from the Tool bar):
Crop the layers like parts where you write.
Something like this:

6) Once you've selected the part, Create a New Layer from that Via cut (CTRL + SHIFT + J or Layer >> New >> Layer via Cut)

That layer will basically become a New Layer all on it's lonesome ^^


Just continue on .. I suggest you hide the new layers that are gonna be created so that you don't get all confused ^^ (To hide layers, simply click on the EYE Icon on the Left side of the layer icon in the Layers list)
Also, try not to mix up the layers, when you create new layers theyre gonna be arranged. Try not to mess them up so that you wont get confused later ..


7) Now, all you have to do is continue on until you just have that one part left on your original layer. --DIDNT GET THAT? Continue on cropping and creating new small parts 'till all you have left is the end of your last letter. --STILL DONT GET IT?? Continue on until all you have left is the last part of your last letter! (i.e., mine is the last stem of my LETTER X )

Did you get that?

I'm sure you did
Moving on ..

8) Once you're through with that, it's gonna be easy from here on end!! ^^
Now, let's not forget the pen ^^ First off, this is not limited, you can search for nice pens from the internet or something. But let's start basic! Choose one from the Custom Shapes! (if you don't know how, pelase refer to my first tut). The Pens can be loaded from the "Objects".
When you've loaded those, choose a pen! I chose this one:
Draw that anywhere on your area. When you draw it, try to move it ON TOP of your Layer List so that you dont get confused or you dont mix up the other layers (parts of your letters).

Once you draw it and move it, you'll have something like this:
BY THE WAY: i flipped the pen, cause i'm right handed ^^ hahahahahaha!!


9) Now, it's time for the animation stuff! This part is pretty easy ^^ just dont get confused, so take your time!
For those with CS2 and below, you'll need Adobe ImageReady. For CS3 user like me, just Open the Animation window:
For those that need the ImageReady: open your file in ImageReady or "move" to ImageReady, just press CTRL + SHIFT + M
Your workspace (for both) should basically look like this now:

Basically, the important thing is to have the Animation Window


10) Let's really start aniamting! ^^ To create the first "stroke" of your word .. Show the very first Part of you word. Mine is the DOWNSTROKE of my Letter M


11) Align the pen with the top point/starting point of where you usual start writing. (So basically, imagine youre really writing! Now, mine's the letter M, where do we usually start with that? The top right? so basically:

Dont worry about the pen being cut, it adds to the effect ^^

12) After that (dont get confused, just follow, i'm telling you guys about this STEP BY STEP! ^^) Hide that First Part again!


13) Next .. Create a NEW FRAME (animation, not the frame as in border! ^^)
How? Just Click on the icon that looks like the "Create New Layer" icon on the ANIMATION WINDOW


14) So now that you have 2 Frames, highlight the Second one (the new one we just made)
In that Frame (be very carefull, make sure you're in the right frames), SHOW the first part! ^^


15) (Still on the second frame) Now, drage the PEN to the bottom of the stroke! In other words, follow it ^^


16) Basically, all you have to do is to continue this process with the other parts! Before SHOWING the part, make sure your pen is position right ..
The process is basically CREATE NEW FRAME > SHOW PART > POSITION PEN > HIDE PART then CREATE NEW FRAME > SHOW PART > POSITION PEN and so on ..



I hope you guys are getting the idea ^^ I believe we can all make this, if we just really try it and try to understand it

17) Sometiems, try to press PLAY in the animation window to check your progress ^^


When you play it, i'm sure it's pretty fast that you can't really appreciate it. All you have to do is RIGHT CLICK on any of the BOTTOM part of the Frames (the one with the "0 sec)



Experiment with different times. For this, i suggest 0.1 seconds. It really depends on what kind of "writing" you have.]
APPLY THIS WITH ALL OF THE FRAMES. If you just apply it to the first frame, it's just gonna be that frame with that time

18) When you're done with every part of your word/letters, check it out! press play and see how it looks ^^ For the very last frame, try putting the pen aside, like to the corner or something, so that it doesnt block your view of your wonderful masterpiece!


and that's basically it! All you have to do now is to save it. For CS3 users, just press ALT + SHIFT + CTRL + S otherwise known as the Save for Web & Devices. For CS2 users and below using the ImageReady, just "Save as Optimized as"

That is basically it!
I hope you guys got that. If you have questions, feel free to PM me!
Thank you guys ^^ Take care. Enjoy!

Dont forget to: SHARE!

Last edited by merx7ii (2008-07-26 12:32:13)