Animated Checkers Tutorial of Sorts
I've never written a tutorial before, and I'm assuming you'll have iconmaking knowledge (such as how to make gradients)...moving along...
Oh, and I highly apologize for how bad this tutorial is - I suck at describing things.
This is how to make the animated background found in this icon (ignore the fuzzy blueness around her - yes, I didn't get all the background deleted):
A better example would have been this one of mine, especially since it saved crisper, had better colors for the fading checker effect, and just all around looks better, but I couldn't be arsed to make it all over again:
NOTE: I just had a bluish gradient, I believe...and angled it differently. I mean, to angle the gradient, of course, all you have to do is rotate it in 90 degree increments until you get it to look okay.
You're going to need three things - a 100x100 image with an easily defined background, the checkers GIF below, and a gradient. You can use whichever colors for the gradient you'd like...I used orangey/reddish/yellow because the person I made the icon for wanted said colors.
SAVE the checks gif file. If I copy and paste that ^ into Paint Shop Pro (I have version 6), it isn't transparent - it's just a black square. I have to open it into Animation Shop, then copy and paste it from there to PSP. I don't know why, but that's how it works for me. Otherwise, I have to paste the checks overtop of a transparent background and delete the white squares box by box. You can do that, it's just annoying.
Oh, and you'll need a gradient - make that a linear gradient. You can use one like this for now:
Take your image. In this case, I used this:
I always have to, once I have an image like that, copy and paste it as a new layer because, by default, it'll be set as a background. Backgrounds aren't as easy to edit and work with, as you can't move them up and down (they just stay on the bottom, on my version anyway), so once I paste the SAME IMAGE over the background, I delete the background. Yay - now it's a layer.
Make the image the layer on top, the checks in the middle, and the gradient on the bottom.
You're going to have to use the magic wand tool to delete as much of the background as possible. Make sure the image is your active layer. Zoom in or whatever (god, I sound so enthused - haha *winks*), and try to delete all that crap you don't need. I'm assuming you know how to do this.
Once you have all that background garbage deleted, make the checks an active layer (again - assuming you know how to do this). Set it on the BURN setting:
Now, what I do is go by 10% increments. So open up Animation Shop (or whatever YOU use to make gifs), and (after merging layers, of course), go and paste the icon with burn set to 100. Add about 20 blank frames after frame 1 just to make sure you'll have enough.
Go back to PSP, undo the merging layers, and set the BURN to 90%. Merge, copy, and paste into frame 2 in Animation Shop. Go back to PSP, undo the merging layers, and set the BURN to 80%. Merge, copy, and paste into frame 3. Do those all the way down to a 10% BURN (don't go to 0 - it looks like crap) and stop.
Or, to put it better as
littlemike did:
"In the first frame you're going to put in the 100% burn copy, in the second frame you'll put the 90% burn copy, all the way down to 10%. Once you reach the 10% frame (which should be frame 10) then go back up in 10% increments, so that frame 11 should have the 20% burn copy. (so your frames should be 100, 90, 80... 10, 20, 30... 100 again)"
Say you ended up with nine frames, which is what I had initially, except I had to cut stuff out to get under 40KB. The reason you're doing all the steps below is so the checkers will get fade, get brighter, fade, etc....instead of jumping annoyingly and tackily from bright to faded without any visible changes happening.
For frame eight, copy and paste the image in FRAME SIX.
For frame nine, copy and paste the image in FRAME FIVE.
For frame ten, copy and paste the image in FRAME FOUR.
For frame eleven, copy and paste the image in FRAME THREE.
For frame twelve, copy and paste the image in FRAME TWO.
Now stop...you honestly don't want to go one extra or you'll have two frames with the same content in a row.
Whoa, I suck at explaining things. Okay, say you had these frames to start with (back when you were pasting the 100-10% burn (I know these are only five, not nine frames, but bear with me):
After frame 5 (sooo, frame SIX), you would paste pic #4. In frame SEVEN, you would paste pic #3, and in frame EIGHT you would paste pic #2. See, because then if you posted two frame #1 contents, you'd have a big pause before the change happened again (unless that's what you wanted).
The numbers in the top right show what actual number the frame is, while the number in the lower right is where the contents came from (sorry about the big scroll factor):
http://img.photobucket.com/albums/v138/iconlicker2/tut/total.png
If you did all that and were somehow able to follow what I was saying, when you save that, you should have a nice checkered effect like what I made here:
If not, it's probably more my fault than yours because I have no idea how to describe things.
If any good tutorial writers out there could make a better one sometime, that'd prob'ly be awesome...because mine is soooo confusing.
Oh, and I highly apologize for how bad this tutorial is - I suck at describing things.
This is how to make the animated background found in this icon (ignore the fuzzy blueness around her - yes, I didn't get all the background deleted):
A better example would have been this one of mine, especially since it saved crisper, had better colors for the fading checker effect, and just all around looks better, but I couldn't be arsed to make it all over again:
NOTE: I just had a bluish gradient, I believe...and angled it differently. I mean, to angle the gradient, of course, all you have to do is rotate it in 90 degree increments until you get it to look okay.
You're going to need three things - a 100x100 image with an easily defined background, the checkers GIF below, and a gradient. You can use whichever colors for the gradient you'd like...I used orangey/reddish/yellow because the person I made the icon for wanted said colors.
SAVE the checks gif file. If I copy and paste that ^ into Paint Shop Pro (I have version 6), it isn't transparent - it's just a black square. I have to open it into Animation Shop, then copy and paste it from there to PSP. I don't know why, but that's how it works for me. Otherwise, I have to paste the checks overtop of a transparent background and delete the white squares box by box. You can do that, it's just annoying.
Oh, and you'll need a gradient - make that a linear gradient. You can use one like this for now:
Take your image. In this case, I used this:
I always have to, once I have an image like that, copy and paste it as a new layer because, by default, it'll be set as a background. Backgrounds aren't as easy to edit and work with, as you can't move them up and down (they just stay on the bottom, on my version anyway), so once I paste the SAME IMAGE over the background, I delete the background. Yay - now it's a layer.
Make the image the layer on top, the checks in the middle, and the gradient on the bottom.
You're going to have to use the magic wand tool to delete as much of the background as possible. Make sure the image is your active layer. Zoom in or whatever (god, I sound so enthused - haha *winks*), and try to delete all that crap you don't need. I'm assuming you know how to do this.
Once you have all that background garbage deleted, make the checks an active layer (again - assuming you know how to do this). Set it on the BURN setting:
Now, what I do is go by 10% increments. So open up Animation Shop (or whatever YOU use to make gifs), and (after merging layers, of course), go and paste the icon with burn set to 100. Add about 20 blank frames after frame 1 just to make sure you'll have enough.
Go back to PSP, undo the merging layers, and set the BURN to 90%. Merge, copy, and paste into frame 2 in Animation Shop. Go back to PSP, undo the merging layers, and set the BURN to 80%. Merge, copy, and paste into frame 3. Do those all the way down to a 10% BURN (don't go to 0 - it looks like crap) and stop.
Or, to put it better as
littlemike did:"In the first frame you're going to put in the 100% burn copy, in the second frame you'll put the 90% burn copy, all the way down to 10%. Once you reach the 10% frame (which should be frame 10) then go back up in 10% increments, so that frame 11 should have the 20% burn copy. (so your frames should be 100, 90, 80... 10, 20, 30... 100 again)"
Say you ended up with nine frames, which is what I had initially, except I had to cut stuff out to get under 40KB. The reason you're doing all the steps below is so the checkers will get fade, get brighter, fade, etc....instead of jumping annoyingly and tackily from bright to faded without any visible changes happening.
For frame eight, copy and paste the image in FRAME SIX.
For frame nine, copy and paste the image in FRAME FIVE.
For frame ten, copy and paste the image in FRAME FOUR.
For frame eleven, copy and paste the image in FRAME THREE.
For frame twelve, copy and paste the image in FRAME TWO.
Now stop...you honestly don't want to go one extra or you'll have two frames with the same content in a row.
Whoa, I suck at explaining things. Okay, say you had these frames to start with (back when you were pasting the 100-10% burn (I know these are only five, not nine frames, but bear with me):
After frame 5 (sooo, frame SIX), you would paste pic #4. In frame SEVEN, you would paste pic #3, and in frame EIGHT you would paste pic #2. See, because then if you posted two frame #1 contents, you'd have a big pause before the change happened again (unless that's what you wanted).
The numbers in the top right show what actual number the frame is, while the number in the lower right is where the contents came from (sorry about the big scroll factor):
http://img.photobucket.com/albums/v138/iconlicker2/tut/total.png
If you did all that and were somehow able to follow what I was saying, when you save that, you should have a nice checkered effect like what I made here:
If not, it's probably more my fault than yours because I have no idea how to describe things.
If any good tutorial writers out there could make a better one sometime, that'd prob'ly be awesome...because mine is soooo confusing.