Log in

19 July 2007 @ 12:08 am
3° Tutorial "iLove"  
We'll be learning how to do a simple animation effect and create this:
in Adobe Photoshop CS2 & Imageready.

1. Open your 100x100 base.

2. Fill it with any color you want. For this icon I used #4ba956.

3. This is where you get creative. Add your text. The font I used for "iLove" is Myriad Web in bold (yes, it's the same font used in the iPod ads) and for "my music, my style & my world" is Myriad Web Regular.

4. Time for Imageready to come. Click here in your task bar OR Menu > File > Edit in Imageready OR Shift+Ctrl+M.

5. You'll see your icon there in the Animation Bar. Choose the first frame and click on the little eye of every text layer you made except for the one that says iLove in the layers palette.

6. Duplicate your frame twice (as shown in the pic)

and in the third frame change the layer visibility of your first text layer. Then select the Tween option and in "frames to add" write 2. Your text will fade now.

7. By now, you should have 5 frames. Duplicate this frame and change the layer visibility of your next text layer. Repeat the last step.

8. Step 8 and 8 frames, right? Repeat last step.

9. Time to change your speed. We are almost finish. So far, you should have something like this:

Right click in the "0 sec" and change frame 1 through 4 to 0.1 seconds, frame 5,8,11 to 0.5 seconds, and the rest of them to 0.1 seconds. (All this settings depend on every icon, you should be able to change the speed depending on your needs) Click the play button and check if you like what you see. Now you have this:

NOTE: Do not leave the 0 sec setting because it brings problems when uploading to the web.

10. Saving. (Easiest step ever) Be sure you have your "Save Optimize" window on sight, if not just go to Menu > Window > Optimize. Use this settings (or the ones who work best for you):

Just go to Menu > File > Save Optimized and you're done! Remember to save your icon as .gif

For reference the weight of this icon is 4.34 KB pretty little huh?

and obviously the result:

Hope you find it useful/easy and that you like it. Feel free to add me for more tutorial updates, icons updates or just for having a good friend :)

also if you have questions or doubts, leave me a comment. I'll do my best to help you. AND again, please leave me a comment if you like this tutorial. I love comments and feedback.

last (but not least) check my other tutorials: Pete Wentz Tutorial 

Val <3lastelement on July 19th, 2007 11:04 pm (UTC)
oh god! These tutorial is just soo awesome! I'll be trying it out thanks!
panic4panic4 on July 19th, 2007 11:57 pm (UTC)
thank you!
totchi_san_622 on July 20th, 2007 01:40 am (UTC)
Thank you. *-*
panic4panic4 on July 22nd, 2007 05:22 am (UTC)
fantasy781 on July 20th, 2007 12:55 pm (UTC)
Awesome ^^
fantasy781 on July 20th, 2007 12:59 pm (UTC)
Where can you download the font? I cant find it O.o
panic4panic4 on July 22nd, 2007 05:29 am (UTC)
mmm. if you look in the internet you would need to BUY it, BUT a few days ago I ask for that font in fontaddicts and a very nice guy/girl upload it for me in this post: http://community.livejournal.com/fontaddicts/2497764.html :)
fantasy781 on July 23rd, 2007 07:11 pm (UTC)
Thanks ^^
tinkerbell008tinkerbell008 on July 20th, 2007 04:44 pm (UTC)
thank you!!!!!!!!!! i've alawys wanted to try animation but it's hard to find good tutorial with picture steps and SIMPLEness. thank you so much!!
panic4panic4 on July 22nd, 2007 05:29 am (UTC)
glad you like itt!
joey_fraser on July 21st, 2007 01:19 am (UTC)
Meming! This is awesome, thank you!
Alexiz GSbedisinterest on July 21st, 2007 05:43 am (UTC)
it's amazing
i've always wanted to do animations but i didn't know how
so thankz a lot

this is my result:
panic4panic4 on July 22nd, 2007 05:29 am (UTC)
love your result :)
nina nur: siam shadeninaphobic on July 21st, 2007 11:15 am (UTC)
added it to my memories... thx
i woke up in the spaces of your heart;greggyhouzer on July 21st, 2007 12:05 pm (UTC)
nice and simple, but very effective, memming ;P
duckgirlie: Nevilleduckgirlie on July 21st, 2007 08:11 pm (UTC)
Great tutorial! I made a few, but most are spoilery... Here's the most not-spoilery one. Thanks!
panic4panic4 on July 22nd, 2007 05:30 am (UTC)
HackerX5hackerx5 on July 22nd, 2007 05:49 am (UTC)
OMG Thank you...
sunflower_pixie: yessunflower_pixie on July 24th, 2007 12:05 am (UTC)
This tutorial rocks the universe. I just used it to make an animation for the first time and I really appreciate your help. :)
sparklingrocks on September 4th, 2007 07:59 pm (UTC)
Thanks so much - a really great tutorial! :D