piecrumbs.livejournal.com (![[identity profile]](https://www.dreamwidth.org/img/silk/identity/openid.png)
piecrumbs.livejournal.com) wrote in ![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png)
graphitiaru2010-02-18 04:14 pm
piecrumbs.livejournal.com) wrote in graphitiaru2010-02-18 04:14 pm
Entry tags:
tutorial for one of the dumbest methods ever
ANIMATED ICONS.
1) source image:
2) take a million screencaps:
once upon a time, with ImageReady, you could open a .gif file and have all the frames already laid out for you. if you still have it, USE IT! CS3 is fucked up and dumb and won't do that. so you need to catch all the frames you want yourself. pain in the BUTT. there are ways of doing so! a google search will tell you. but personally, I've not had that much luck with various methods. if you can find one that will actually work though, PLEASE TELL ME. There is also a way to do this with Adobe Fireworks but for this particular image it is refusing me. I hate everything OTL
3) arrange all your caps so that they're layered over each other exactly and in an easy to access order:
I tend to do this by dropping the opacity to make sure there are no fuzzy lines, and then making sure that if I click a layer visible and invisible, things that shouldn't move don't move. Use things that shouldn't move (for example, the edge of the image) as a guide. idk how else to explain it. Do that with every frame you have. I generally go from first -> last, bottom -> top in my layer order, but if you can remember what goes when it doesn't really matter.
this step can take a REALLY LONG TIME
NOTE: the more frames, the smoother the motion, the bigger the file.
edit one thing I learned AFTER I had already done this, is that if you don't crop your screencaps, you can go File > Scripts > Load files into Stack which will open a bunch of files as layers. then you can crop them all at once and they all should be in the same spot and it'll make things much easier. Especially if your caps are in the order you want them to be in. AND THEN!! you can just go straight to "make frames from layers" in the Animation menu (which I talk about in the next step) and it'll make your life SO MUCH EASIER but everything has to be in order and lined up already.
4) Window > Animation
the thing at the bottom are all your frames. This is where having your layers in order comes in handy.
5) CREATE FRAMES!
as many as you have necessary which, if you're using some layers multiple times, you may need more than your amount of layers. or if, for some reason, you're not using whatever layer, you will have less frames! (for example, if you have a lineart layer and that's always gonna be there, you won't need a frame for that)
6) hide the layers that won't be visible at each step of the animation:
frame4 is visible up to Layer 3, frame5 to layer4, so on and so forth.
7) timing between each frame:
obviously, this will change as you deem necessary. Also, it won't necessarily be the same between every frame. Do what'll make your image flow the most smoothly.
NOTE: there is that little row of fading dots next to the play/rewind/fastforward symbols. That will fade between layers. you can play with it on your own :|b
8) check it:
the timing's not right and it's a bit jerky but I'm lazy and don't want to add more frames. also, it's gonna be a huge file as it is. so I'm just gonna poke at timing.
9) keep working with the timing until you're happy or until you're frustrated and don't want to bother anymore:
10) crop it and resize!
I'm sure you all know how to do that. Just make sure nothing important is lost during your cropping. also, on occasion, layers will shift when you crop. idk why that happens 8'( the best way to avoid this is to make sure all of your layers are lined up in every single frame, whether they're visible or not, before you crop.
11) saving:
File > Save for Web & Devices. when you click "save" it should come up as "Save Optimized As" and then name it whatever you want. make sure it's a .gif!
VOILA:
incidentally, this method is easier when you're not 1)working with real people and 2) there's more motion so you don't get confused as to where each cap goes if you're capping out of order. this one also had downtime during the wait that I killed, but made the whole thing more difficult than it really had to be :Xb
seriously though, dudes, if you can find an easier way of doing it, I super encourage doing it that way instead for example the one I suggest in my step3 edit :/b also, although I'm using a Mac, it should be the same on a PC.
1) source image:
2) take a million screencaps:
once upon a time, with ImageReady, you could open a .gif file and have all the frames already laid out for you. if you still have it, USE IT! CS3 is fucked up and dumb and won't do that. so you need to catch all the frames you want yourself. pain in the BUTT. there are ways of doing so! a google search will tell you. but personally, I've not had that much luck with various methods. if you can find one that will actually work though, PLEASE TELL ME. There is also a way to do this with Adobe Fireworks but for this particular image it is refusing me. I hate everything OTL
3) arrange all your caps so that they're layered over each other exactly and in an easy to access order:
I tend to do this by dropping the opacity to make sure there are no fuzzy lines, and then making sure that if I click a layer visible and invisible, things that shouldn't move don't move. Use things that shouldn't move (for example, the edge of the image) as a guide. idk how else to explain it. Do that with every frame you have. I generally go from first -> last, bottom -> top in my layer order, but if you can remember what goes when it doesn't really matter.
this step can take a REALLY LONG TIME
NOTE: the more frames, the smoother the motion, the bigger the file.
edit one thing I learned AFTER I had already done this, is that if you don't crop your screencaps, you can go File > Scripts > Load files into Stack which will open a bunch of files as layers. then you can crop them all at once and they all should be in the same spot and it'll make things much easier. Especially if your caps are in the order you want them to be in. AND THEN!! you can just go straight to "make frames from layers" in the Animation menu (which I talk about in the next step) and it'll make your life SO MUCH EASIER but everything has to be in order and lined up already.
4) Window > Animation
the thing at the bottom are all your frames. This is where having your layers in order comes in handy.
5) CREATE FRAMES!
as many as you have necessary which, if you're using some layers multiple times, you may need more than your amount of layers. or if, for some reason, you're not using whatever layer, you will have less frames! (for example, if you have a lineart layer and that's always gonna be there, you won't need a frame for that)
6) hide the layers that won't be visible at each step of the animation:
frame4 is visible up to Layer 3, frame5 to layer4, so on and so forth.
7) timing between each frame:
obviously, this will change as you deem necessary. Also, it won't necessarily be the same between every frame. Do what'll make your image flow the most smoothly.
NOTE: there is that little row of fading dots next to the play/rewind/fastforward symbols. That will fade between layers. you can play with it on your own :|b
8) check it:
the timing's not right and it's a bit jerky but I'm lazy and don't want to add more frames. also, it's gonna be a huge file as it is. so I'm just gonna poke at timing.
9) keep working with the timing until you're happy or until you're frustrated and don't want to bother anymore:
10) crop it and resize!
I'm sure you all know how to do that. Just make sure nothing important is lost during your cropping. also, on occasion, layers will shift when you crop. idk why that happens 8'( the best way to avoid this is to make sure all of your layers are lined up in every single frame, whether they're visible or not, before you crop.
11) saving:
File > Save for Web & Devices. when you click "save" it should come up as "Save Optimized As" and then name it whatever you want. make sure it's a .gif!
VOILA:
incidentally, this method is easier when you're not 1)working with real people and 2) there's more motion so you don't get confused as to where each cap goes if you're capping out of order. this one also had downtime during the wait that I killed, but made the whole thing more difficult than it really had to be :Xb
seriously though, dudes, if you can find an easier way of doing it, I super encourage doing it that way instead for example the one I suggest in my step3 edit :/b also, although I'm using a Mac, it should be the same on a PC.
no subject
no subject