to
 

Program: Adobe ImageReady CS
Translatable: To other versions of ImageReady? Yes . I don't know about other programs
Difficulty: Not as hard as it looks
Steps: 7, but they may take a while to complete. More if you don't know how to make a gif.
Notes: All textures used are from [CG Textures]
 

 

I chose this gif because it's clear, it's interesting, and I've been wanting to make an icon out of it. I am not going to teach you how to make a gif, there is already an excellent tutorial for that. This tutorial is going to show you one of the many things you can do once you have your gif.

Step 1:
Once you have the images you are going to use as frames put them all in the same folder, making sure they are in the order that you want. This will happen automatically if you make your gif using steps 1-5 in Megan's animated gif tutorial. When you have done this, open ImageReady and go to import -> folder as frames

Step 2:
From here on out this is an epic battle to make your gif a small enough size to be able to upload to livejournal (what's the point of making an lj icon you can't use?) We can start cropping your gif in to a square. This will help with keeping your ultimate composition goal in mind.


You can place your gif anywhere within the square, which I will be doing later on. Really this can happen anytime.

Step 3:
Okay, now we're going to delete unwanted frames, which will shorten the gif and make the file size smaller. Plus, we don't want our gif to be too long anyway. We will continue to delete frames during this tutorial, so keep in mind how to do it. Highlight the unwanted frames and drag them to the trashcan underneath them.


Next we're going to want to change the duration of the last frame. We are going to do this so that our icon seems like it has an end with some closure. We do this by going to the bottom of the frame and slecting a longer time. I don't like it to be too long though, for aesthetic reasons.


By this point I have set up the gif so that it is where I want it in my icon: the top of it. I've also resized to 200x200 pixels because our square is large enough for me to want to shrink it down. That's all and it's totally optional.

Step 4:
Next I am going to open this texture and past it on top of our gif. Note that you want your textures to be the very top layer. If it is under any of your layers, it will be under those layers as it moves and not the others, causing a weird jumping gif. We do not want this. Also, from here on out, whenever you edit a texture make sure that you are on the first layer. What ever you edit while you've chosen your first layer will happen to all your other layers.


Step 5:
Next we are going to use the eraser tool on a soft setting to erase just the bare minimunm. If there there is anything covering the moving part of our icon, it reduces the file size. Again, make sure that we have the first and last layers selected. Here's what it looks like now:

Now, personally I think that this can look lovely without changing the texture anymore. I'm going to, though, since I already have so many icons with this color scheme. You can change the color anyway you want to, but keep in mind that different colors change the file size. For example, for some reason black and white icons have a larger file size. I've decided to make the texture match the armor more, and I did so by playing around with the variations option. You can find it by going to image->adjustments->variations. It now looks like this:


Step 6:
Okay, so the next thing you want to do is change the image size to 100x100 pixels. The file size is still too large though, so I'm going to give you some tricks to fix that. You can put some text over the moving part of the icon. SInce the texture is larger than the image, you can move it around and see if you can get it to cover more of the moving part. You can also go through the frames and delete the ones that are similar enough to not matter if you remove one. I moved around the texture and deleted layers. I ended up going from 50 frames in the very begining to just 12 in the end.

Step 7:
Next we want to preview our gif in the browser of our choice. Here is what the button looks like, as well as the shortcut:


The preview will tell you all sorts of information about it, including how large the file size is. To be LJ compatible our icon must be under 40k. Here is what the page will look like when you preview it:


From here I prefer to just save the icon on this preview (drag on to desktop, right click save as, etc) because I know exactly what size it is and how the colors look.

There you have it! You're done! Congratulations on making an animated icon!!


Looking for something? Check out my 2009 icon index