Tutorial: animated icon
at the request of my lovely emmy-chan (
bloomzy) today i'm going to teach you how to make an animated icon like this one, using paint shop pro & animation shop 3:
Warning to dial-up users: this tutorial uses all .png & .gif images that will probably kill your dial-up @_@
ok first step is you have to have a .gif animation. most of mine i've saved from forums and such but you can also make your own... but that's a little more complicated, i'll save that for another day. if you really want to know, i suggest using a program like virtual dub to cut clips of a video to be made into gifs.
so i open up my .gif in animation shop. it's too long at 35 frames, 15-18 frames is ideal to save an animation at a fair quality. so i cut it, deciding only to use the first 17 frames. (select the first frame by clicking on it>scroll till i get to frame 17 then click on it while holding down the shift key, this should highlight all 17 frames>edit copy>edit paste as new animation)
now i want to crop my animation to get rid of the black border, so i select the crop tool (4th button from the left) then i click and drag in any frame of my animation till i get the box i like. then i simply click the crop button and it crops it for me.
time to resize my animation, so i go to animation>resize animation. a window will pop up, i usually like to do it at 80 width but it really depends on the shape and size of your animation. when you have the settings the way you like click ok.
now i open up my paint shop pro, DON'T CLOSE ANIMATION SHOP YET! we are just switch over to make a background for the animation. i go into my texture folder, looking at a few that i like before picking one that i think will match/compliment the colors in the animation nicely. this one happens to be made by the awesome
gender
i like to make a little border around my animations. so having opened up my texture in psp, i go to create a new image at 84x54 pixels since my animation is 80x50 pixels. i fill it a color of my choice, i usually use a light grey, then copy and paste it in my texture image. moving it around to where i'd like my animation to go. this will give a 2 pixel border. this would also be the time to add text if you like, the bottom half of my texture looked a bit open and lonely so i added a little text box to spice it up. looks much better, right?
merge all layers>copy and paste back into animation shop. you can close psp now since we really won't be needing it anymore. since we have 17 frames in our animation, we have to make 17 frame in our new animation. right click on texture>paste>after current frame, repeat this until you have 17 frames. now go to edit>select all, to highlight all your frames.
do the same for your animation, edit>select all>copy. then go back to your texture frames, edit>paste>into current frame. move it around in your first frame until you have it where you want it, then click to drop it. should paste all of your animation frames into your texture frames. right click>view animation, to preview your finished product & check to make sure everything it good.
now go to file>optimization wizard. select animated gif then click next, with the quality vs. size settings i usually set it second down. lowers the quality a bit but still good! click next twice and then you will reach the preview, click next again now your at the results window... this is important, check to make sure it says that the file size is 39K bytes or less otherwise you can't use it as a lj icon because it's too big. mine ended up being 34K.
click finish, now you are ready to save! this is how mine turned out:
you could also do some differnet varations, i also like to add text in the animation sometimes like in this example:
to do this i simply copy & pasted a frame to the end of my animation before i copied it into my texture frames, filled it with white and added text. then i after i copied and pasted it into my texture frames (remember you now have 18 instead of 17 frames so make sure you also add an extra texture frame) right click on the frame>frame properties>set display time to 100.
hope i explained things well enough! if you get stuck on anything, feel free to ask for help ^_^ also, i don't require credit though it would be nice. i would however like to see what you guys all come up with using this tutorial, so please share with me!
p.s. feel free to use the either icons made for this tutorial, but please do credit me for them!
bloomzy) today i'm going to teach you how to make an animated icon like this one, using paint shop pro & animation shop 3:
Warning to dial-up users: this tutorial uses all .png & .gif images that will probably kill your dial-up @_@
ok first step is you have to have a .gif animation. most of mine i've saved from forums and such but you can also make your own... but that's a little more complicated, i'll save that for another day. if you really want to know, i suggest using a program like virtual dub to cut clips of a video to be made into gifs.
so i open up my .gif in animation shop. it's too long at 35 frames, 15-18 frames is ideal to save an animation at a fair quality. so i cut it, deciding only to use the first 17 frames. (select the first frame by clicking on it>scroll till i get to frame 17 then click on it while holding down the shift key, this should highlight all 17 frames>edit copy>edit paste as new animation)
now i want to crop my animation to get rid of the black border, so i select the crop tool (4th button from the left) then i click and drag in any frame of my animation till i get the box i like. then i simply click the crop button and it crops it for me.
time to resize my animation, so i go to animation>resize animation. a window will pop up, i usually like to do it at 80 width but it really depends on the shape and size of your animation. when you have the settings the way you like click ok.
now i open up my paint shop pro, DON'T CLOSE ANIMATION SHOP YET! we are just switch over to make a background for the animation. i go into my texture folder, looking at a few that i like before picking one that i think will match/compliment the colors in the animation nicely. this one happens to be made by the awesome
gender
i like to make a little border around my animations. so having opened up my texture in psp, i go to create a new image at 84x54 pixels since my animation is 80x50 pixels. i fill it a color of my choice, i usually use a light grey, then copy and paste it in my texture image. moving it around to where i'd like my animation to go. this will give a 2 pixel border. this would also be the time to add text if you like, the bottom half of my texture looked a bit open and lonely so i added a little text box to spice it up. looks much better, right?
merge all layers>copy and paste back into animation shop. you can close psp now since we really won't be needing it anymore. since we have 17 frames in our animation, we have to make 17 frame in our new animation. right click on texture>paste>after current frame, repeat this until you have 17 frames. now go to edit>select all, to highlight all your frames.
do the same for your animation, edit>select all>copy. then go back to your texture frames, edit>paste>into current frame. move it around in your first frame until you have it where you want it, then click to drop it. should paste all of your animation frames into your texture frames. right click>view animation, to preview your finished product & check to make sure everything it good.
now go to file>optimization wizard. select animated gif then click next, with the quality vs. size settings i usually set it second down. lowers the quality a bit but still good! click next twice and then you will reach the preview, click next again now your at the results window... this is important, check to make sure it says that the file size is 39K bytes or less otherwise you can't use it as a lj icon because it's too big. mine ended up being 34K.
click finish, now you are ready to save! this is how mine turned out:
you could also do some differnet varations, i also like to add text in the animation sometimes like in this example:
to do this i simply copy & pasted a frame to the end of my animation before i copied it into my texture frames, filled it with white and added text. then i after i copied and pasted it into my texture frames (remember you now have 18 instead of 17 frames so make sure you also add an extra texture frame) right click on the frame>frame properties>set display time to 100.
hope i explained things well enough! if you get stuck on anything, feel free to ask for help ^_^ also, i don't require credit though it would be nice. i would however like to see what you guys all come up with using this tutorial, so please share with me!
p.s. feel free to use the either icons made for this tutorial, but please do credit me for them!