Campmotha (campmotha) wrote in icon_tutorial,

Animated Icon Tutorial - PS CS3

Here is my first ever tutorial, How to make an animated icon, like my user icon.
Made with Photoshop CS3
I must warn you the tutorial is image heavy. Again its my first tutorial so feedback is welcome.
Sorry about the layout of it, i had some issues with it.

Here is a Tutorial on how to make a simple animated icon like mine. This probably looks really hard because of all the writing but try not to be intimidated by it. Its really not. If you have any questions feel free to ask me. Thanks

photoshop, go to file > import > Video
frames to layers. Then find your video file

Select the "Selected Range Only" button. Find the section of the video you want, once you have, find approx where you want the animation to begin. Get the slider in position, then hold down the shift key while using the step buttons to step thru the frames.

Once you have found where you
want it to end release the shift key. Tick the [Limit to every "... " Frames]
and then put in a value I usually use anywhere between 4 to 7.
This number depends on how large a clip you selected. You have
to remember that we want as smaller clip as possible so its easier
to get it down to only 15 frames (which is a good size for making
Lj compatiable icons)When that is done
click ok.

Now when it pops up you want to make sure that the
animation bar is open so you can work with it. Go up to window an click on Animation then the bar will magically appear for you.

Now click on the play button to see the animation run through, it will go fast but donÕt worry weÕll slow it down later. Check how many frames there are.Anything 15 and under will be great but if you have more than that you need to go thru and chop some.

So for example if you have 23 frames you need to delete 8. Go through your frames and find some appropriate ones to delete be sure to remember where they were and which Layer they correspond to this can be tricky because when you delete frames they automatically rename themselves but
the layers do not. So if I delete frame 3, frame 4 becomes frame 3
and the old frame 3Õs layer is still layer 3. (I hope this makes sense)

Here it shows that I have only 18 frames But there is 23 Layers. So I need to delete the excess Layers. Due to my only deleting the last frames of the animation it is fairly simple.

So to delete the layers I simply select the Ones to be deleted and then hit the Layers Trash Can

Change the image size to something more manageable, the size you choose depends on the image and if you want the whole image to appear or if it will be cropped in on a certain section. If cropping, you want a slightly bigger size like somewhere just under 200px for the width.

For my image i am going to use 160px.
Remember this is just a temporary size which can be changed later.


Now link all the layers so that when we adjust one the other will follow, do this by selecting all the layers and going up to Layer > Link

Now open a new document 100x100 pixels, put it beside your animation, then click back on the animation and drag all of the frames
across to your new document.

There will only be one frame in your animation bar so you need to go thru and add the frames we need. if you have 15 layers you need 15 frames. So Your first frame is equal to your first layer. Go thru and make sure that only layer one is visible.  

Go to the Animation bar and click on the new frame button (Square with corner upturned) and a new frame will appear.

Now go over to the layers and make layer one invisible and layer two visible. Continue doing that until each layer has a frame. Be careful to make sure you don't accidently skip or mismatch them because then your animation will look weird.

Now we need to set the delay time, find a speed you like, (usually
0.2) and then go one up. To do this you need to select all the frames (click on frame 1 then hold shift and click on the last frame).

Now click on one of the drop down arrows then choose

either one of the presets or click
on other and input your own.

(0.3 is what I use) Then as a personal touch

I click the last frame and set it to about 1.5.

Ok now we want to move our animation into position, It is important you SELECT ALL FRAMES. Now using the move Tool,
move the animation to position, dont worry to much about blank space at
the top or sides of your animation as you can put other things in those spaces like text, brushes or you can make the animation bigger.


increase the size of the animation, make sure the frames are all
still selected and go up to Edit > Transform > Scale

Similarly you can rotate your animation too.

So now you can work on making it pretty. The next steps will depend on your animation and preferences its a bit of trial and error but at the moment these are the layers I like to use. I make a brightness/contrast layer so i can see what i am working with. then a Levels layer, Exposure layer and 2 Colour Balance layers. I used these because i felt that they brought a nice colour to the image, each image is different so you need to play around and find what you like.

Then i add 2 soft light yellow layers, a
pink and a blue soft light layer. I continue fiddling with some of these layers
until i get the bright or vibrant colour i am after.

Now i make a new Layer with a border. To make this select your new layer, select the rectangular marquee tool and select the whole icon.

go to Edit > Stroke . Then select
the colour and size (Should be about 3-5)


On a new layer i used the chalk and spatter brushes (white 6px) to make a text background

Now i add some text, so click the text tool and use these settings. Once you have your text correct and have positioned it, select all frames and make your text invisible and then visible again, this will ensure that the text is on each frame. (The text you use if entirely up to you though, you can use a different font at whateva size you like, it just depends on what suits your image)

Now fill empty spaces with colour, brushes, textures or some form of background which blends with the rest of the image.

Go thru and make sure that all the colouring alterations,borders, brushes, text and any other layers that need to be showing all the time are visible on all frames and then go to save for Web & Devices


Click on the left facing arrow beside the Preset box

Optimize to File Size Select 40kbs if this is for Lj, otherwise it could probably be slightly bigger, check the restrictions for the sites your using it on.

Now check that the Preset is set to save the file as a Gif otherwise it won't be animated

Then hit SAVE and your done. Here is a really quick no frills one I made quickly for the tutorial. Its not perfect, it was a rush job, but you get the main idea.

Tags: animation: animated gifs, animation: file size optimisation, animation: mini movies, program: imageready, program: photoshop, tutorial: animation
  • Post a new comment


    Comments allowed for members only

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded