awesomemeter

Life of FreakinMi

A climpse into a perverted mind

Previous Entry Share Next Entry
Animated Icon Tutorial [w. Adobe ImageReady]
awesomemeter
freakinmi

Hello Kids and welcome to the show!

Today I am going to teach you a little about making your very own animated icons. Keep in mind, that I am also new in this field, so I can only share with you what little knowledge I have managed to gather so far. Meaning I will not be able to overcomplicate stuff either. Unfortunately my screenshots show Danish versions of the programs, but I’m pretty sure I’m using the correct English terms in my descriptions. Okay, enough with the random ranting. Let’s get on with it.

Stuff you’ll need for this tutorial:
> Adobe ImageReady (I use v7)
> A program that can pause your footage on each frame of your desire (E.g. Media Player Classic or Movie Maker. I use the last one, purely because I like to delete the parts of the footage I will not be needing, MPC is just as good and can handle more file types.)
> Footage you want to make an icon from
> The button “PrtSc / SysRq” (located around the end of your F-key’s) or other means to take a screen capture/dump/shot. However you prefer it.
> For nice quality, LJ sized, well-looped icons: a little patience and a good eye

If you know your way around most of these programs and don’t want any theory on icon making, you can skip the following two “information rants”.

About ImageReady
ImageReady is unfortunately no longer being developed by Adobe, and they have no program like it. Fireworks resemble it, but it’s just not the same. ImageReady is no good for making awesome graphics, but it specializes in making animations among other things.
If you have never worked with this program or Photoshop before, you need to know that these programs work in something called layers. Don’t worry, this just means that you can have several images on top of each other, which we are going to make use of. We won’t be showing more than one picture at a time, so there’s no reason for you to know that much, but all screenshots will have to go in the same file.
I also recommend you learn the basic tools of this program, and if you need to do some graphic editing, get the Photoshop version that goes with your ImageReady – meaning I use Photoshop v7, even if I have the complete CS4 package installed on my computer. ImageReady and Photoshop both have a feature that can automatically transfer the image you are working on from the one program to the other, automatically updating the file in the one program, when you edit it in the other – provided they are the same version.

Before capturing the icon
Size: When deciding what you want in your icon, you have to think about how long the part you consider to animate is. Usually an icon for LJ can hold a max of 1-1½ second worth of entertainment. If you’re planning on making icons with no limitations, be my guest and capture as much as you like. Personally I like making long animations and use them on my MSN or forums with no limitations. But having around 100 screenshots in one file can make it a bit hard to handle. You can increase the amount of frames your can have in the animation, by making only part of your animation animated. This is where you need to know about layers, which won’t be covered in here.
Looping: I also like icons, where it’s hard to see where the animation starts and where it stops. In anime, it’s not that hard to make these icons. This is because the animators like to loop their animations themselves, making it easier. They can draw 3-4 images and easily loop them in 2 or more seconds, without us getting bored (especially when they run, speak or do a funky dance). This means they only have to draw 4 out of 48 images. On a further note, they don’t have to do more than 8fps, as filling out all 24fps is both expensive and gives a huge workload. Most anime is only 8fps. Note that the background might sometimes stop you from being able to exploit this, as it might move in all 24 frames or even zoom in/out while the character moves. Some icons you can play in the correct order, then follow up with showing the pictures in reverse, returning you to the start point, that will then show the pictures in the correct order again. This also gives of the illusion of a looped animation.
Tweening: If a loop is not an option and you wish for your icon to have a nice flow. You can use tweening. I will explain this in the tutorial.
Time: When you only capture 8 out of 24 frames pr. second, your animation will of course be 3 times as fast. Meaning you will have to change the time later on, according to how many frames you have captured in a second. You want between ‘no wait’ to ‘0,15’ seconds of wait. Remember the speed of your icon is also dependant on the internet speed of the computer viewing it online = huge icons might be slower when viewed online. If you want to pause on a single image, you can make the pause longer on that one. If you want to make it slower than this, the lazy animation job will become visible, and the icon seem jagged (if you’re not capturing off a high quality animation with more images pr second).

Capturing the icon
> So, now we got all the info cleared you can open your footage – in my case in Movie Maker. This is a screenshot of what that should look like, and which buttons are important. Yes, I will be making an animation involving cute child Uryuu from Bleach episode 235. If you use Classic Media Player the arrow keys will move the show forwards/backwards by 1 frame.
> When you find the frame you want to use as the first one in your animation, you take a screenshot. This can be done (at least on PC, don’t know with Mac) by pressing the “PrtSc/SysRq” button. On my keyboard this button is located just after “F12”.
> Open up Adobe ImageReady and create a new file, normally ImageReady will automatically suggest a canvas size equaling your resolution, since you have a screenshot of this size saved in the clipfolder. This is perfect for us. Insert the first frame into the program, I use the shortcut “Ctrl” + “V”, but you can do ‘Right Click – Paste’ too (if you have marked the cutting tool).
> Go back to the footage, go to the next frame you want, take a screenshot, and insert it into the same file as the previous screenshot. This will create a new layer, with the new picture. Repeat this until you have all the frames you want. In my case I took 9 frames.

What to do in ImageReady
> First off I’ll cut the excess screenshot, as I only want to work with the part containing cute little Uryuu and the Kurosaki siblings. I first use the normal mode on the cutting tool to crop off the part showing Movie Maker. I do this by selecting the cutting tool – normal mode, mark the area I want to keep, click ‘Image’ – ‘crop’. However this will leave me with an area that is not ideal for making an icon. I now use the cutting tool – fixed ratio mode, mark a square small enough that only the picture is visible, but big enough that what I want in the icon isn’t cut off, then ‘images’ – ‘crop’. It does not matter what size the icons has at this point, as we can edit this later.
Note: When doing this part, make sure that all the underlying images are also placed good for the animation, that no character is cut off in the middle or completely leave the animation. If this is the case, Re-do the last crop, and find a better spot to cut it. Perhaps you’ll need to zoom out.
> Now comes the animation part. Click the Duplicate button until you have as many frames as pictures. The first frame is a key-frame. Meaning everything you do in this frame, will be done in the following frames. So the first thing you need to do is make only the first picture in your animation visible. You do this by clicking the first frame, marking it in blue, and then clicking off the eye in the layers you don’t want. Then click the second frame, and click on the images you want, etc. until all frames have the image you want.
> By pushing the play button you can see your animation so far. Usually it will be very fast, so you need to slow it down, before you can check if your animation is to your pleasing. At this point I notice that my animation does not look like a loop, as there between frame 9 and 1 are no animation. Wanting to make this icon LJ sized, I delete a few of the unnecessary frames and add new frames after frame 9. Here I simply show all the images in reverse, returning me to the first frame.
Note: the first and ‘last’ (actually middle) picture in the animation shouldn’t be shown twice. The time in my animation ended up being a 2 second pause on frame 1 and 7 (first and “last” frame), and no wait on the frames between them.
Note: you can change the time on all frames at the same time, by marking them all (hold “Shift” and click the next frame), and just proceed as normal by clicking the time underneath a frame.
> Now the animation is done, and all that is left is to make it the right size. First you’ll want to click ‘Image’ – ‘image size’ and set the figures to height: 100 pixel, width: 100 pixel. This reduces the total kb size of the file a lot. However this is most likely not enough to make the icon LJ sized. You need to enter ‘2-op’ or ‘4-op’ look, and then tamper around with the settings, until the icon has the right size. You probably already heard of 16, 32, 64, 128 and 256 colors. 128 keep all info in the icons I’ve worked with so far, but I’m often forced into using only 64 colors. Most of the time this can’t be seen though. 32 however is not good. But I think you should find your own favorite mix, and you might not care if some of the colors end up being lost.
> When you have mixed and matched your icon until you’re satisfied, you’ll have to save it. You’ll need to use the ‘File’ – ‘Saved optimized as’ in order to save it as an animated file in the .gif format (images only).

This is what the final product will look like:


Tweening
As a last tip, I’ll tell you guys about tweening – which basically is a transition tool. ImageReady will simply make the images in between two frames for you, making a nice transition. I use this in some of my icons, when I want something to fade to black or white or a text frame - or between the first and the last frame if I can’t make a decent loop. Note that each image in this function will count as a unique frame and make your file size that much bigger, this means you can’t just suddenly have 25 frames instead of the 12 normal ones.
In this example I have the two final images in my Uryuu to Kurosaki siblings animation. Now I will mark them both by clicking the first frame, hold “Shift” and press the next frame. Both frames should now be marked in blue, then you can click the tweening button. Simply type in how many frames you want to fill in and click OK, more frames equal better transition, but much bigger file. I use between 3-8 when I use this function. You’ll probably also want to use a background image (just a white or black one will do nicely), as the frames becomes see-through for a while. Note that sites like Photobucket might make files using tweening bigger than what you originally saved them as, this is only a theory though. I have never checked up on it.

The final result:



This is how I make my icons, and now you can do it too. I’m looking forwards to seeing your works! If you learn something new and cool using these tools, I’ll be more than interested in hearing about it. You’re also more than welcome to ask me questions (regarding this), or post a link to some icons you’ve made using my tutorial.


Fan service!


And here’s a little fan service for coming this far. I couldn’t resist. If I was Isshin, I would have bragged about my son growing into pure sex instead of my little girls being cute. If you have a picture or two you’d like shown in this way, I don’t mind making the icon for you. Just comment here and we’ll work something out.</b>

  • 1
Hoshit what a tutorial indeed! I'm happy to see I've the software needed already installed.

I'm so glad you did this one! *curtsey* I'll put it in my memories.

The example icon is adorable btw, the fan service one somehow disturbing and hot at the same time. :D It's like shota - washboard abs - shota - washboard abs - etc
Makes me dizzy.

xD Indeed, it just kept growing for reasons that are beyond me. I don't hope the sheer volume of it scares anyone off though.

=D I wanted to do an icon with this anyways, so the only trouble was writing the text and remembering some rules and the like.

xD hot and disturbing, that's just the way I like it <3

Loving your new layout :) especially the three little pics on the top right

I've always wanted to learn how to make icons but never had the time - but I've put your entry into memories and it'll be my Christmas break project :)

:3 Unfortunately I cannot take any credit for the layout, but yes it is very cool indeed!

^^ I hope to see loads of nice icons from you in the new year then =D
It's not that hard, I just put in way to much information and details in the tutorial ^^

^^ Pressure's on - more than likely it will take me ages to figure it out - it took me a good couple of months to familiarise myself with lj... meh technology...

;D Usagi-san <3 I love him as a seme :3

Haha, hopefully it won't be that hard to learn ^^

I know!! Usagi! *happy sigh*

Are you still reading Viewfinder?

I like how he just goes and has his way with Masahiro (I think his name was) all the time xD Kinda reminds me of how I imagine the Urahara/Ichigo relationship.

And I finished it off ages ago =D was too good to just stop reading it ^^

Have you read the latest chapter of Viewfinder - DO DO DO, you'll never think of tomatoes the same way :)

There's more?
*vanishes into thin air to go read it*

I KNOW!! I thought it finished too!!
Tell me what you think! :) TOMATOES!!

can you possibly fix me up with a link? I can't seem to find what you'tr reffering to =`|

Here's the link: http://www.mediafire.com/?d5ydmwjjztw - the group scanlating VF is club_vogue - just look them up on LJ - also for the latest VF/Yamane Ayano stuff, join club_sion and/or yamane_ayano :) ENJOY.. YUM TOMATOES!!!

=D Thanks! *reads*
*goes lol for hours*

Memming! <3 Thank you so much for doing this ^o^ The capturing-the-frames part was really helpful, I didn't know that trick ^^ I knew about the tweening but I was doing 1 or 2 frames and it was kinda crappy ^^UU oh, and the reverse-tip was really useful too, gotta do that one next time :D

=D

I'm happy that you found it useful! Means my work here is done ;D

  • 1
?

Log in

No account? Create an account