Tutorial | Animated Icon #002
In my last post angelsdee asked me to teach how to make animated icons. I hope this new tutorial will help you ^^ I'm not a pro when it comes to Photoshop but I think I did okay with this...
Before you dive in:
- Think a little about your icon. What kind of scene do you want to animate? How about a little bit color for the background? Which text could fit the animation? You decide!
- Remember: The more color you use, the bigger is the size of your icon!
- Have fun!
- I work with Photoshop and ImageReady.
- All links open up in new windows.
- Please excuse any mistakes. English isn't my first language.
WORKING IN PHOTOSHP
to
We start with preparing the base of our icon. I took a texture by gender from this set and desaturated (Shift+Ctrl+U) it.
I selected the Rectangular Marquee Tool (M) and set it to Fixed Size with
Width: 84 px | Height: 52 px.
Clicking in the middle of the texture I got a fixed selection. Move the selection to whichever place you want it on your icon. I chose the middle.
Make a new layer (Shift+Ctrl+N) and fill the selection with #E9E9E9.
In your layer palette keep this layer selected and go to Layer - Layer Style - Stroke.
In the new window that pops up, set
- Size to 1
- Postion to Inside
- Blend Mode to Normal
- Opacity to 100%.
As color I chose #888888. Click OK.
So far your icon should look like this.
You can add nifty text if you want.
- Font: Futura Hv
- Size: 11 px
- Tracking: 100
- All Caps
Place the text wherever you want it.
Merge all layers (Shift+Ctrl+E) and set it aside for now.
Now we need the screencaps. I cap with Media Player Classic. It's very easy to use and especially good for beginners.
I usually cap every second/third frame to keep the later animation smooth and yet the icon size small.
Open the caps in Photoshop. In my case we have 19 screencaps.
Drag cap after cap over the very first one.
Meaning: You start with Cap 02 and drag it in the canvas of Cap 01. Then you drag Cap 03 in the canvas of Cap 01. And so in.
In the end you layer palette should like the one in the screencap.
I selected the Crop Tool (C) and set it to
Width: 76 px | Height: 44 px | Resolution: 72.
Make sure your numbers are smaller than the ones of your rectangle!
On your screencap canvas select the area you want to crop down.
Go to Select - All Layers (Alt+Ctrl+A) and drag the layers from the screencaps canvas over in your base canvas.
Place the layers in the middle of the rectangle. Check if every layer was selected and is in the correct place.
Now we're finished working in Photoshop and will move over into ImageReady. Go to File - Edit in ImageReady (Shift+Ctrl+M).
WORKING IN IMAGEREADY
In your Base canvas select 2-Up.
Make sure you have the Animation Window open. If not, go to Window - Animation.
In the Animation Window is on the left side a little black arrow. Click on it and in the new window select Make Frames from Layers.
You see that every layer has its own frame.
The problem is that our base is not inevery frame.
In the animation window select the base frame and then delete it. To do that click on the little trash can.
In your animation window is the base frame gone.
In your layer palette you can see it at the little eye next to the base layer.
Right now the square next to the base layer is empty.
Select your new first frame in the animation window (in my case it's good old 'Lantis).
Go to your layer palette and click on the empty square and an eye should appear.
At the same time in your animation window should every single frame get the base.
You could keep your mini-movie like this but I rather have a smooth transition from the end of the animation to the beginning.
In the animation window select your last frame and click on this little four-circle-thingy to tween.
In the new window that pops up set
- Tween with: First Frame
- Frames to Add: 3
- Layers: All Layers
- Parameters: Select All
I would keep the numbers of frames to add small. The more frames, the bigger is the later size of your icon!
In your animation window you see now the three new frames.
Now onto finding the right size of your icon. For LJ and many other sites the size is 40KB.
Go to Window - Optimize. In the optimize window go to Color Table and play with the Colors number.
The higher the number, the bigger is the size of your icon.
You can see the size of your icon on the right side of the 2-Up palette.
In the optimize palette I changed the number fo Colors to 60.
That way the size of the icon was reduced to under 40KB.
The last we're doing is setting the delay time of each frame.
If you play your icon like it is now, it's superfast and you get a headache after watching it for 2 minutes.
In your animation window select the first frame and click on 0 sec. at the bottom of the frame.
In the new window select 0.5 (or whatever number you want). I did it to have the first frame last a little longer.
If you do animations with humans, I would set the first frame to 0.1 like the other frames.
Now select the other frames except the first and the last three.
To select more frames keep Ctrl pressed while clicking on the frames.
Again click on 0 sec. at the bottom of one of the selected frames.
In the new window select 0.1. You don't have to make this step if your animation looks okay with 0 sec.
Tweened frames always should have a delay time of 0 sec. to make it look smooth!
In the animation window click on the little play arrow at the bottom to see the animation.
If you think you should change something, do it.
If you're happy with the way it is, go to File - Save Optimized As (Ctrl+Shift+Alt+S) and save your icon as a .gif.
And that's it ^^
Finished!
Before you dive in:
- Think a little about your icon. What kind of scene do you want to animate? How about a little bit color for the background? Which text could fit the animation? You decide!
- Remember: The more color you use, the bigger is the size of your icon!
- Have fun!
- I work with Photoshop and ImageReady.
- All links open up in new windows.
- Please excuse any mistakes. English isn't my first language.
WORKING IN PHOTOSHP
to
We start with preparing the base of our icon. I took a texture by gender from this set and desaturated (Shift+Ctrl+U) it.
I selected the Rectangular Marquee Tool (M) and set it to Fixed Size with
Width: 84 px | Height: 52 px.
Clicking in the middle of the texture I got a fixed selection. Move the selection to whichever place you want it on your icon. I chose the middle.
Make a new layer (Shift+Ctrl+N) and fill the selection with #E9E9E9.
In your layer palette keep this layer selected and go to Layer - Layer Style - Stroke.
In the new window that pops up, set
- Size to 1
- Postion to Inside
- Blend Mode to Normal
- Opacity to 100%.
As color I chose #888888. Click OK.
So far your icon should look like this.
You can add nifty text if you want.
- Font: Futura Hv
- Size: 11 px
- Tracking: 100
- All Caps
Place the text wherever you want it.
Merge all layers (Shift+Ctrl+E) and set it aside for now.
Now we need the screencaps. I cap with Media Player Classic. It's very easy to use and especially good for beginners.
I usually cap every second/third frame to keep the later animation smooth and yet the icon size small.
Open the caps in Photoshop. In my case we have 19 screencaps.
Drag cap after cap over the very first one.
Meaning: You start with Cap 02 and drag it in the canvas of Cap 01. Then you drag Cap 03 in the canvas of Cap 01. And so in.
In the end you layer palette should like the one in the screencap.
I selected the Crop Tool (C) and set it to
Width: 76 px | Height: 44 px | Resolution: 72.
Make sure your numbers are smaller than the ones of your rectangle!
On your screencap canvas select the area you want to crop down.
Go to Select - All Layers (Alt+Ctrl+A) and drag the layers from the screencaps canvas over in your base canvas.
Place the layers in the middle of the rectangle. Check if every layer was selected and is in the correct place.
Now we're finished working in Photoshop and will move over into ImageReady. Go to File - Edit in ImageReady (Shift+Ctrl+M).
WORKING IN IMAGEREADY
In your Base canvas select 2-Up.
Make sure you have the Animation Window open. If not, go to Window - Animation.
In the Animation Window is on the left side a little black arrow. Click on it and in the new window select Make Frames from Layers.
You see that every layer has its own frame.
The problem is that our base is not inevery frame.
In the animation window select the base frame and then delete it. To do that click on the little trash can.
In your animation window is the base frame gone.
In your layer palette you can see it at the little eye next to the base layer.
Right now the square next to the base layer is empty.
Select your new first frame in the animation window (in my case it's good old 'Lantis).
Go to your layer palette and click on the empty square and an eye should appear.
At the same time in your animation window should every single frame get the base.
You could keep your mini-movie like this but I rather have a smooth transition from the end of the animation to the beginning.
In the animation window select your last frame and click on this little four-circle-thingy to tween.
In the new window that pops up set
- Tween with: First Frame
- Frames to Add: 3
- Layers: All Layers
- Parameters: Select All
I would keep the numbers of frames to add small. The more frames, the bigger is the later size of your icon!
In your animation window you see now the three new frames.
Now onto finding the right size of your icon. For LJ and many other sites the size is 40KB.
Go to Window - Optimize. In the optimize window go to Color Table and play with the Colors number.
The higher the number, the bigger is the size of your icon.
You can see the size of your icon on the right side of the 2-Up palette.
In the optimize palette I changed the number fo Colors to 60.
That way the size of the icon was reduced to under 40KB.
The last we're doing is setting the delay time of each frame.
If you play your icon like it is now, it's superfast and you get a headache after watching it for 2 minutes.
In your animation window select the first frame and click on 0 sec. at the bottom of the frame.
In the new window select 0.5 (or whatever number you want). I did it to have the first frame last a little longer.
If you do animations with humans, I would set the first frame to 0.1 like the other frames.
Now select the other frames except the first and the last three.
To select more frames keep Ctrl pressed while clicking on the frames.
Again click on 0 sec. at the bottom of one of the selected frames.
In the new window select 0.1. You don't have to make this step if your animation looks okay with 0 sec.
Tweened frames always should have a delay time of 0 sec. to make it look smooth!
In the animation window click on the little play arrow at the bottom to see the animation.
If you think you should change something, do it.
If you're happy with the way it is, go to File - Save Optimized As (Ctrl+Shift+Alt+S) and save your icon as a .gif.
And that's it ^^
Finished!