Supernatural Promo Animated Icon Tutorial
Almost 2 months ago I asked you guys which animated icon you'd like to see in a tutorial. As the result shows when I closed the voting 2 icons were head to head and both got 14 votes. So I decided to make tutorial for the wb_promo animated icon, because imo this is easier than the "scary just got sexy" one.
Hope you'll like it, it's mostly pretty detailed so if you know the bases this might seems boring :)
p.s.: Not dial up friendly.
Used programs: Adobe Photoshop CS2, Adobe ImageReady, Frameshots
1. Capping
First thing you have to do when you make an animated icon is to screencap the part you want to see on the icon from the clip. There are several awesome programs for it. Either PowerDVD or VLCPlayer, or Frameshots or anything that can make frame by frame capping. (Except VLCPlayer the rest is shareware.) Eta: ImageGrab is a freeware program, so if you don't have any other choice choose this one.
Once you have the scene capped put them in a separated folder. (This is important and only put the pictures you wanna use) Usually an animated icon doesn’t work with more than 20 pictures. So try to choose a compact scene or movement so your icon wont broke. If you want more frames you will have troubles at the end with saving it in the limited size.
In this case we work for more caps (23 in numbers).
[sidenote: I experienced if you choose white as a background you can end up actually using more frames. Once I managed to put 40 frames into an animation. Also the picture size can change the the overall size. If you use little pictures you can use more frames and vica versa]
[for request:the folder with the pictures zipped HERE]
2. Importing folders as frames
To make everything easy just open your Adobe ImageReady Animation Editing/Making program. We are going to switch back and forth on Photoshop (PS) and ImageReady (IR).
So when you have you IR open go to File/Import/Folders as Frames. (see below)
A window will pop up and you have to give the folder’s path that where we were collecting our caps before.
After you clicked ok, it will look like something like THIS.
(I present here the things we are going to use, just as /animation bar/layers/preview window/optimization bar etc/)
I usually play the animation (before I'd do anything) to see if its flawless or if I have to delete some frames or add new ones. After this, go to the Animation bar, and select all the frames and delete them.
3. Switching to Photoshop
Then go to the toolbar and push the little button you have at the bottom of it. That is the button that switches between PS and IR. It’s really helpful, I use it a lot. I usually edit my icons in PS. Color them, resize the images, adding brushes and texts/textures, then I switch back to IR.
4. Editing Image
Now we are at the PS. We are going to make a still icon basicly, but when we are editing the image, we select all frames and working with it like it was one.
For the first step go to Image/Canvas size and make it to 100x100.
Then select all of your layers and go to Edit/Transform/Scale and scale it to the good rate and move to the middle of the icon. (Don't forget here, if the pictures are too big you'll end up with a big size and you won't be able to save it to 40kb)
That’s how your icon now looks like now.
Now go to Layer/New fill layer/solid color and chose white (#ffffff). That's gonna be our background.
5. Coloring
I always put the coloring layers on the top of the image layers, so it will be easier to use them later. So go and make the top layer visible (little eye sign before the layer) and click on the layer itself as well with you mouse to make it active. This means when we are making new layers it will appear on the top of the image layers.
For this icon first I want to add a little more contrast and will lighten it a bit. I use Levels, so go to Layers/New Adjustment Layer/Levels.
And write the following numbers into the boxes.
34/1,54/193 - if you don’t like the result you can play around with the slides.
Then go to the toolbar, select the rectangle tool (U) and get an icon big shape. Make it to Exclusion and set the color to #060221.
Now add a brush to the icon and we are ready to move back to IR.
(Adding a brush: Make a new layer, go to toolbar Brush Tool (B) and select a tiny text brush you think would fit.)
That’s how the icon will look like.
Now switch back to IR the same way you got to the Photoshop (3.)
6. Making frames from layers
Once we are in IR again, go to the animation bar and click on the little arrow and select Make Frames From Layers.
A lot of frames will appear in the animation bar. Some of them we wont need, so check out the frames carefully.
I deleted all the ones that not containing the picture. Afterwards in the Animation select all the frames and activate all the color and brush layers you wanna see on the icon.
7. Timing
Now we are almost ready we only need to set the proper time for the animations.
without timing it would look like something like this:
Select all the frames and set the time to 0,1 seconds. This way you slowed down the animation.
with 0,1 second timing:
I usually when I want to have a fading effect I set the time faster on the fading frame than the rest of the animation. In this case, go to the last frame, select the last picture in the Layer bar and set the opacity to 50% and the timing 0,05 second in the Animation bar. (choose ‘Other…’ when you want to set timing and simple type 0,05)
Now we are ready with the animation, you can play it and check if it's fluently without any flitches.
8. Saving|Optimizing
Now we have the icon only its too big to be used over LJ.
You have to have open the optimization window (Window/Optimize) and you have to switch the preview window to 2-Up tab as you see in the picture below. With this option you will be able to see how the icon will look like and how big it will be. You have to play around the Colors number in the Optimize bar to get lower size that you can check where the arrow shows. Don’t forget you can only edit your icon in the original window, and you can optimize in the Optimized or 2-Up window.
To save the icon go to File/Saved Optimized As and save as .gif.
Here is the result how the icon. colors:35 frames:23 filesize: 39.92 kb
Now let me congratulate to you, to read through this detailed tutorial. If you have any questions regarding how to make animated icons, comment here and I will try to answer with my best knowledge :)
I've only made one coloring tutorial before, so take it easy on me. Oh, and if you make an animated icon with this tutorial I'd be happy to see it :)
Hope you'll like it, it's mostly pretty detailed so if you know the bases this might seems boring :)
p.s.: Not dial up friendly.
Used programs: Adobe Photoshop CS2, Adobe ImageReady, Frameshots
1. Capping
First thing you have to do when you make an animated icon is to screencap the part you want to see on the icon from the clip. There are several awesome programs for it. Either PowerDVD or VLCPlayer, or Frameshots or anything that can make frame by frame capping. (Except VLCPlayer the rest is shareware.) Eta: ImageGrab is a freeware program, so if you don't have any other choice choose this one.
Once you have the scene capped put them in a separated folder. (This is important and only put the pictures you wanna use) Usually an animated icon doesn’t work with more than 20 pictures. So try to choose a compact scene or movement so your icon wont broke. If you want more frames you will have troubles at the end with saving it in the limited size.
In this case we work for more caps (23 in numbers).
[sidenote: I experienced if you choose white as a background you can end up actually using more frames. Once I managed to put 40 frames into an animation. Also the picture size can change the the overall size. If you use little pictures you can use more frames and vica versa]
[for request:the folder with the pictures zipped HERE]
2. Importing folders as frames
To make everything easy just open your Adobe ImageReady Animation Editing/Making program. We are going to switch back and forth on Photoshop (PS) and ImageReady (IR).
So when you have you IR open go to File/Import/Folders as Frames. (see below)
A window will pop up and you have to give the folder’s path that where we were collecting our caps before.
After you clicked ok, it will look like something like THIS.
(I present here the things we are going to use, just as /animation bar/layers/preview window/optimization bar etc/)
I usually play the animation (before I'd do anything) to see if its flawless or if I have to delete some frames or add new ones. After this, go to the Animation bar, and select all the frames and delete them.
3. Switching to Photoshop
Then go to the toolbar and push the little button you have at the bottom of it. That is the button that switches between PS and IR. It’s really helpful, I use it a lot. I usually edit my icons in PS. Color them, resize the images, adding brushes and texts/textures, then I switch back to IR.
4. Editing Image
Now we are at the PS. We are going to make a still icon basicly, but when we are editing the image, we select all frames and working with it like it was one.
For the first step go to Image/Canvas size and make it to 100x100.
Then select all of your layers and go to Edit/Transform/Scale and scale it to the good rate and move to the middle of the icon. (Don't forget here, if the pictures are too big you'll end up with a big size and you won't be able to save it to 40kb)
That’s how your icon now looks like now.
Now go to Layer/New fill layer/solid color and chose white (#ffffff). That's gonna be our background.
5. Coloring
I always put the coloring layers on the top of the image layers, so it will be easier to use them later. So go and make the top layer visible (little eye sign before the layer) and click on the layer itself as well with you mouse to make it active. This means when we are making new layers it will appear on the top of the image layers.
For this icon first I want to add a little more contrast and will lighten it a bit. I use Levels, so go to Layers/New Adjustment Layer/Levels.
And write the following numbers into the boxes.
34/1,54/193 - if you don’t like the result you can play around with the slides.
Then go to the toolbar, select the rectangle tool (U) and get an icon big shape. Make it to Exclusion and set the color to #060221.
Now add a brush to the icon and we are ready to move back to IR.
(Adding a brush: Make a new layer, go to toolbar Brush Tool (B) and select a tiny text brush you think would fit.)
That’s how the icon will look like.
Now switch back to IR the same way you got to the Photoshop (3.)
6. Making frames from layers
Once we are in IR again, go to the animation bar and click on the little arrow and select Make Frames From Layers.
A lot of frames will appear in the animation bar. Some of them we wont need, so check out the frames carefully.
I deleted all the ones that not containing the picture. Afterwards in the Animation select all the frames and activate all the color and brush layers you wanna see on the icon.
7. Timing
Now we are almost ready we only need to set the proper time for the animations.
without timing it would look like something like this:
Select all the frames and set the time to 0,1 seconds. This way you slowed down the animation.
with 0,1 second timing:
I usually when I want to have a fading effect I set the time faster on the fading frame than the rest of the animation. In this case, go to the last frame, select the last picture in the Layer bar and set the opacity to 50% and the timing 0,05 second in the Animation bar. (choose ‘Other…’ when you want to set timing and simple type 0,05)
Now we are ready with the animation, you can play it and check if it's fluently without any flitches.
8. Saving|Optimizing
Now we have the icon only its too big to be used over LJ.
You have to have open the optimization window (Window/Optimize) and you have to switch the preview window to 2-Up tab as you see in the picture below. With this option you will be able to see how the icon will look like and how big it will be. You have to play around the Colors number in the Optimize bar to get lower size that you can check where the arrow shows. Don’t forget you can only edit your icon in the original window, and you can optimize in the Optimized or 2-Up window.
To save the icon go to File/Saved Optimized As and save as .gif.
Here is the result how the icon. colors:35 frames:23 filesize: 39.92 kb
Now let me congratulate to you, to read through this detailed tutorial. If you have any questions regarding how to make animated icons, comment here and I will try to answer with my best knowledge :)
I've only made one coloring tutorial before, so take it easy on me. Oh, and if you make an animated icon with this tutorial I'd be happy to see it :)