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:
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: