Tutorial #9 > animated icons
A tutorial on how to make animated icons, requested by serenity2bliss. I make mine using Adobe Photoshop CS3. For other programs, the steps will be different.
Make an icon like this:
If you want to make a mini-movie icon, like the Lindsay one above (which is the example I refer to in the steps), you will need your own capping software, or someone who'll volunteer to cap the scene for you. If you just want to make a slideshow-type icon, then you can just use any caps you want.
1. Select your caps. You don't want to have too many, or the file will be too large to use on LJ. I've found that 9 caps is almost the perfect amount.
2. Resize your caps. For this Lindsay one, I cropped it a bit, but I resized it so that it was 100 px wide. If you want to make it 100x100 px, you can do that. My animated icons from 3x24 of CSI: NY were like that. The smaller the caps, though, the smaller the size of the icon.
***If you want to do a 100x100 animated icon (i.e. not have the white space like in the Lindsay one), use this tutorial to crop/resize your caps. Do not do the following step.***
When you resize your caps, make sure that both the "scale styles" and "constrain proportions" boxes are checked. Otherwise, the image will come out looking distorted. This is assuming that you are doing a size other than 100x100 px.
3. Alter your caps. I usually just brighten them either by adding a screen layer or doing Image > Adjustments > Brightness/Contrast. Doing too much to them will make the icon too big.
4. Go to File > New. Make a new document with the following measurements:
Height: 100 pixels
Width: 100 pixels
Resolution: 100 pixels/inch
Pixels should be the default measurement.
I make the background color white, but you don't have to if you don't want. I've also made icons that faded to other colors - like black, green, and red.
5. Select your first cap. Hit CTRL+A to select all, then CTRL+C to copy. Then go to your new, colored image and hit CTRL+V to paste it as a new layer.
6. Hit SHIFT+CTRL+E to merge the new layer with the background. (Only merge this first layer - DON'T merge any other layers.)
7. Repeat STEP 5 for as many caps as you have. If you made your caps like I did for the Lindsay one, you will have extra space in the layer. Select the paint bucket tool and fill the areas above and below the cap with whatever color you chose.
***STEPS 8 through 17 are if you want your icon to fade to text, like in the Lindsay icon. If you just want your icon to fade to a color, do STEPS 8 and 9, then skip to STEP 13, then to STEP 15, then to STEP 18. If you are making a slideshow icon, you can just skip to STEP 18.***
8. Duplicate the last layer either two or three times. An easy way to do this is to select the layer and hit CTRL+J.
If you have 9 or more caps in your icon, I suggest only duplicating the last layer twice. If you have less than 9 (for this Lindsay one, I had 6), then you can make three copies if you want.
9. Hit SHIFT+CTRL+N to make a new layer, then use the paint bucket to fill it with whatever background color you're using.
10. Add your text.
11. Duplicate your text layer the same amount of times you duplicated the last layer in STEP 8.
12. Line up the text layers with duplicate layers you made in STEP 8. They will say "copy" and "copy 2" - I line up the layers according to the numbers. Make sure that your original text layer is above the color fill layer on top.
That may sound confusing, so let me see if I can explain it a little better.
On the right hand side of the screen, you should see all of your layers in a window. Select the top text layer (either "text copy 3" or "text copy 2") and drag it down until it is above the top copied layer ("layer copy 3" or "layer copy 2"). Repeat this for all the copied layers.
13. Select the first layer copy ("layer copy"). Right-click and go to "Blending Options". When the dialogue box appears, select "Color Overlay". Do not just check the box, click on the words. You should get a menu that looks like this:
Change the color of the overlay by clicking on the box to the right of the "blend mode" list arrow (it will be red by default). Change it to whatever your background color is (in this case, white).
Change the opacity of the overlay. If you made three copies of your text/last layer, change the opacity to 11%. If you made two copies of your text/last layer, change the opacity to 33%.
14. Select the first text copy ("text copy") and change the opacity so that is the same as your first layer copy that you did in STEP 13.
15. Repeat STEP 13 and STEP 14 with all of your copied layers. If you made three copies, the opacities should be 11%, 33%, and 66%. If you made two copies, the opacities should be 33% and 66%.
16. Select both the original text layer and the color fill layer (to select both, hold down either the SHIFT or the CTRL key while clicking on them). Hit CTRL+E to merge the two together.
DO NOT hold onto the SHIFT key when you merge them.
17. Repeat STEP 16 with the copied layers. Merge "text copy" with "layer copy" and so forth.
Your layers should look like this when finished:
***If you are using Adobe Photoshop CS2, stop here and save your icon as a .psd file. Then open Image Ready and open the file. Continue with the remaining steps in Image Ready.***
18. Go to Window > Animation. The animation window will open, with only one frame - your top layer.
19. Click on the menu, which is on the right side of the window. It is three lines with an arrow on the left of it.
Select "make frames from layers". All of your layers will then appear in the window, like a slideshow.
20. Change the time of delay between layers. You do this by clicking on the arrow next to the time at the bottom of each frame. The default is 0 seconds, or no delay.
If you are making a mini-movie, change the delay to 0.1 seconds for all frames except the final one with text (or just color). I usually change that to 1 second.
If you are making a slideshow icon, change the delay to whatever you wish. I usually change the time to 1 second for all frames.
You can click the play icon to watch what your icon will look like. It will help you figure out what to adjust the delay to.
21. Go to File > Save for Web & Devices. In the dialogue box that appears, change the settings (except LOSSY) so that they match the ones in the following image:
The most important thing to remember is to change the file type to GIF. Otherwise, it won't work.
22. Check the bottom left corner of the window. This is where you can see the size of the file.
LJ won't let you use icons larger than 40kb, so odds are you will have to change the file size. Go back to the settings from STEP 21 - specifically, LOSSY. Increase the lossy until your icon is under 40kb. The lower the lossy, the better.
Click the play icon to see how your finished icon will look. If the icon is very grainy (meaning the lossy is high), you may want to consider removing some layers. If you used the recommended 9 caps and did not alter them too much in STEP 3, then the icon should look fine. (For this Lindsay icon, I only needed to set the lossy to 5.)
23. Click "save", and you're done!
If you have any questions, or you need something clarified, please don't hesitate to ask.
Make an icon like this:
If you want to make a mini-movie icon, like the Lindsay one above (which is the example I refer to in the steps), you will need your own capping software, or someone who'll volunteer to cap the scene for you. If you just want to make a slideshow-type icon, then you can just use any caps you want.
1. Select your caps. You don't want to have too many, or the file will be too large to use on LJ. I've found that 9 caps is almost the perfect amount.
2. Resize your caps. For this Lindsay one, I cropped it a bit, but I resized it so that it was 100 px wide. If you want to make it 100x100 px, you can do that. My animated icons from 3x24 of CSI: NY were like that. The smaller the caps, though, the smaller the size of the icon.
***If you want to do a 100x100 animated icon (i.e. not have the white space like in the Lindsay one), use this tutorial to crop/resize your caps. Do not do the following step.***
When you resize your caps, make sure that both the "scale styles" and "constrain proportions" boxes are checked. Otherwise, the image will come out looking distorted. This is assuming that you are doing a size other than 100x100 px.
3. Alter your caps. I usually just brighten them either by adding a screen layer or doing Image > Adjustments > Brightness/Contrast. Doing too much to them will make the icon too big.
4. Go to File > New. Make a new document with the following measurements:
Height: 100 pixels
Width: 100 pixels
Resolution: 100 pixels/inch
Pixels should be the default measurement.
I make the background color white, but you don't have to if you don't want. I've also made icons that faded to other colors - like black, green, and red.
5. Select your first cap. Hit CTRL+A to select all, then CTRL+C to copy. Then go to your new, colored image and hit CTRL+V to paste it as a new layer.
6. Hit SHIFT+CTRL+E to merge the new layer with the background. (Only merge this first layer - DON'T merge any other layers.)
7. Repeat STEP 5 for as many caps as you have. If you made your caps like I did for the Lindsay one, you will have extra space in the layer. Select the paint bucket tool and fill the areas above and below the cap with whatever color you chose.
***STEPS 8 through 17 are if you want your icon to fade to text, like in the Lindsay icon. If you just want your icon to fade to a color, do STEPS 8 and 9, then skip to STEP 13, then to STEP 15, then to STEP 18. If you are making a slideshow icon, you can just skip to STEP 18.***
8. Duplicate the last layer either two or three times. An easy way to do this is to select the layer and hit CTRL+J.
If you have 9 or more caps in your icon, I suggest only duplicating the last layer twice. If you have less than 9 (for this Lindsay one, I had 6), then you can make three copies if you want.
9. Hit SHIFT+CTRL+N to make a new layer, then use the paint bucket to fill it with whatever background color you're using.
10. Add your text.
11. Duplicate your text layer the same amount of times you duplicated the last layer in STEP 8.
12. Line up the text layers with duplicate layers you made in STEP 8. They will say "copy" and "copy 2" - I line up the layers according to the numbers. Make sure that your original text layer is above the color fill layer on top.
That may sound confusing, so let me see if I can explain it a little better.
On the right hand side of the screen, you should see all of your layers in a window. Select the top text layer (either "text copy 3" or "text copy 2") and drag it down until it is above the top copied layer ("layer copy 3" or "layer copy 2"). Repeat this for all the copied layers.
13. Select the first layer copy ("layer copy"). Right-click and go to "Blending Options". When the dialogue box appears, select "Color Overlay". Do not just check the box, click on the words. You should get a menu that looks like this:
Change the color of the overlay by clicking on the box to the right of the "blend mode" list arrow (it will be red by default). Change it to whatever your background color is (in this case, white).
Change the opacity of the overlay. If you made three copies of your text/last layer, change the opacity to 11%. If you made two copies of your text/last layer, change the opacity to 33%.
14. Select the first text copy ("text copy") and change the opacity so that is the same as your first layer copy that you did in STEP 13.
15. Repeat STEP 13 and STEP 14 with all of your copied layers. If you made three copies, the opacities should be 11%, 33%, and 66%. If you made two copies, the opacities should be 33% and 66%.
16. Select both the original text layer and the color fill layer (to select both, hold down either the SHIFT or the CTRL key while clicking on them). Hit CTRL+E to merge the two together.
DO NOT hold onto the SHIFT key when you merge them.
17. Repeat STEP 16 with the copied layers. Merge "text copy" with "layer copy" and so forth.
Your layers should look like this when finished:
***If you are using Adobe Photoshop CS2, stop here and save your icon as a .psd file. Then open Image Ready and open the file. Continue with the remaining steps in Image Ready.***
18. Go to Window > Animation. The animation window will open, with only one frame - your top layer.
19. Click on the menu, which is on the right side of the window. It is three lines with an arrow on the left of it.
Select "make frames from layers". All of your layers will then appear in the window, like a slideshow.
20. Change the time of delay between layers. You do this by clicking on the arrow next to the time at the bottom of each frame. The default is 0 seconds, or no delay.
If you are making a mini-movie, change the delay to 0.1 seconds for all frames except the final one with text (or just color). I usually change that to 1 second.
If you are making a slideshow icon, change the delay to whatever you wish. I usually change the time to 1 second for all frames.
You can click the play icon to watch what your icon will look like. It will help you figure out what to adjust the delay to.
21. Go to File > Save for Web & Devices. In the dialogue box that appears, change the settings (except LOSSY) so that they match the ones in the following image:
The most important thing to remember is to change the file type to GIF. Otherwise, it won't work.
22. Check the bottom left corner of the window. This is where you can see the size of the file.
LJ won't let you use icons larger than 40kb, so odds are you will have to change the file size. Go back to the settings from STEP 21 - specifically, LOSSY. Increase the lossy until your icon is under 40kb. The lower the lossy, the better.
Click the play icon to see how your finished icon will look. If the icon is very grainy (meaning the lossy is high), you may want to consider removing some layers. If you used the recommended 9 caps and did not alter them too much in STEP 3, then the icon should look fine. (For this Lindsay icon, I only needed to set the lossy to 5.)
23. Click "save", and you're done!
If you have any questions, or you need something clarified, please don't hesitate to ask.