Mini Movie Animation Tutorial




Mini Movie Animation Using Photoshop 7/ImageReady 7

I've finally gotten around to answering that question, "how the hell do you animate your icons?"
I'm sure there is a much easier way to do this, but this is the only way I know how. And I'm gonna try real hard to confuse the crap outta you...so! Here we go. Brace yourself

Ok, this is what we're working towards --> Ayane
Notes:Just to clear things up, LAYERS are what I'm calling the icon bases, and FRAMES are...the frames your animating with.

Step 1: Getting your frames
First off, in PS7 you've got your finished icon that you'd like to use for the base. That's all self explanitory.
--Duplicate the layer once
Now it's time to get your frames.
--Using ImageReady, click "file, open" and open the video you'd like to use.
--Next, (this is the coolest function ever) since you only need a few frames, click "selected range only"
--Hold down the shift key and drage the slider till you get all the frames you want and click "OK"



So you got all your frames, now it's time to resize them.

--Click the toolbar up top (next to Edit) "Image", "Image Size..."

I re-sized to 70px for the width (the height gets configured automatically so don't worry bout that one) and click "OK"
::note: About 15 frames (more or less, depending) usually comes to be about 40kb for the livejournal icon standard::



Step 2: Setting the frames
--Click on your first frame over in the layer window
--And click ctrl+a to select it, then ctrl+c to copy it.


--Now switch back over to Photoshop 7.
--You have your two layers, right? So what your gonna do is, ctrl+v to paste the frame you copied in between the two layers.



--Click on the first (top) layer, and set the opacity to about 45% so you can see the frame underneath. Select the frame again and click ctrl+t to position it where you want it.


--Now select back to the top layer, and erase over the frame area, and then set the opacity back to 100.

There are alot of techniques and things you can do to the frames, like sharpen, screen, soft light, adding textures and what not, but I'm just gonna keep it simple for now.



Step 3: Saving the frames
--In your layer box, click ctrl+shift+e to merge all your layers together, then ctrl+shift+s to save. Save as #1 in whatever folder your using. Save in JPEG Format, Maximum Quality.
--Once you've saved, click back a step in your "History" box so you're back to your layers and frames.



Do the same precedure for the rest of the layers. Positioning them in the same spot. If your having trouble with positioning, click/unclick the eye to see how the frames are matching up. Remember to "merge visible" and "save" in sequential order everytime you add a new frame



Step 4: Final Animation
--Open up your folder of where you saved your individual finished frames.
--In PS7 click "File, New" (width 100, height 100) and copy and past the frames (in sequential order) into your new window.



--Now click on the ImageReady icon.



ImageReady should load with one frame in the animation box.



--Click the little arrow at the top right corner of the animation box. Select "Make frames from layers"



All your frames should now be loaded.
If the animation goes too quickly for your liking, click under the frame where it says "0 sec." and select a delay and play around with it till you get the speed you want.



--When your ready to save, click "File" "Save Optimized As..." Save as type "Images Only [*.gif]"



And vwalla! You now have an animated icon.
*Wipes sweat off forehead* phew! that was a toughy.
I hope this wasn't too confusing. Feel free to ask any question if there's something that doesn't make sense :)