Hi, everyone. For those who are not familiar with me yet I'm a girl aliased Joebs and I'mma teach you kiddos how to make [b]animated scanbars[/b] the easy way using the TWEEN FUNCTION. You can use this trick in signatures, avatars, and other graphics. Here's an example: [img]http://i279.photobucket.com/albums/kk144/joebsz/cutestsiggie1.gif[/img] [b]Requirements:[/b] 1. Adobe Photoshop - I'm merely using version 7.0 so I dunno if this applies to all Photoshop versions 2. Basic knowledge about Photoshop & Imageready - If you lack this, you can find several threads here about Photoshop basics. Familiarize with the buttons. [b] - - - - - - - - - - - - - - - - - - Open up your Photoshop window and follow these steps:[/b] 1) Scanbars are usually used in signatures so get a siggie and open it. In this case I used a signature that I made for cutest08/AJ a long time ago. Then click the Rectangle Tool (or press [i]U[/i]). [img]http://i279.photobucket.com/albums/kk144/joebsz/ss1-1.jpg[/img] 2) Next, create a rectangular shape at the top of the signature. This will be the scanbar. [img]http://i279.photobucket.com/albums/kk144/joebsz/ss2.jpg[/img] 3) Amff, this is not really necessary but I changed the scanbar layer from [b]Normal[/b] to [b]Soft Light[/b]. You can also simply lower the opacity or use Overlay, Screen, Linear Dodge, etc. Depends on the look. [img]http://i279.photobucket.com/albums/kk144/joebsz/ss3.jpg[/img] 4) That's it. Go to the Imageready window. Press CTRL+M or click the Imageready button. [img]http://i279.photobucket.com/albums/kk144/joebsz/ss4.jpg[/img] 5) Voila. We're in the Imageready window now. [img]http://i279.photobucket.com/albums/kk144/joebsz/ss5.jpg[/img] 6) As you can see there's only one frame in the animation palette thing. Duplicate and make a new frame by clicking the button encircled below. [img]http://i279.photobucket.com/albums/kk144/joebsz/ss6.jpg[/img] 7) Now we have two animation frames. [img]http://i279.photobucket.com/albums/kk144/joebsz/ss7.jpg[/img] 8) While you're on the second frame, move the rectangle/the scanbar to the bottom of the signature. [img]http://i279.photobucket.com/albums/kk144/joebsz/ss8.jpg[/img] [img]http://i279.photobucket.com/albums/kk144/joebsz/ss9.jpg[/img] 9) Finished? So, in the first frame, the scanbar will be at the very top of the siggie. In the second frame, the scanbar is at the bottom. Now, click the tween button. See image below. [img]http://i279.photobucket.com/albums/kk144/joebsz/ss10.jpg[/img] 10) A box will pop up. In this case, I put [i]30[/i] in the [b]Frames To Add.[/b] The higher the number, the slower the movement of the scanbar. The lower the number, the faster the movement. 30 seems fine. It's what I usually use. Click OK. [img]http://i279.photobucket.com/albums/kk144/joebsz/ss11.jpg[/img] 11) Weeee. Now we have 32 frames. Don't worry. [img]http://i279.photobucket.com/albums/kk144/joebsz/ss12.jpg[/img] 12) Now, we need to tween it again so that the scanbar will go back and forth. Up down up down up down. On the 32nd frame, click the tween button again and change [b]Previous Frame[/b] to [b]First Frame[/b]. [img]http://i279.photobucket.com/albums/kk144/joebsz/Others/ss14.jpg[/img] 13) Now it has 62 frames. Play it. This is the outcome. [img]http://i279.photobucket.com/albums/kk144/joebsz/cutestsiggie1.gif[/img] 14) Don't forget to save your work. Click File > Save Optimized As, and then put your filename. ( It'll be saved as [i]filename[/i][b].GIF[/b] ) Now you're done! You can also make VERTICAL scanbars. Just make a vertical rectangle, put it on one side of the signature, and move it to the other side on the second frame. And that's it. XD Hope you learned something from this! Don't forget to share your works/outcomes, ahihi, and don't hesitate to ask. [hr][hr][hr] [b]//Edit 1:[/b] The images resized themselves! I apologize if some of them are too blurry. [b]//Edit 2:[/b] Sorry, there's still one more step. You have to tween it [b]twice[/b] so it will go back and forth (from top to bottom and vice versa). Tutorial editted. [b]//Edit 3:[/b] I forgot to mention--> this tutorial is based from what I learned from [b]starsapphire[/b]'s tutorial in Friendsterforum. I also found similiar tutorials in DeviantART. XD

Last edited by forsakendoll (2010-03-15 15:01:20)