Cait ([info]paintmespotless) wrote,
@ 2007-05-06 11:01:00
Previous Entry  Add to memories!  Tell a Friend!  Next Entry
Entry tags:animated icon tutorial

Animated Icon Tutorial (original posted @ heartoutofstone)

HOW TO MAKE ANIMATED ICONS (REQUIRES PHOTOSHOP CS2, VIRTUALDUB & IMAGEREADY) 
(and DVD Shrink & Auto Gordian Knot if you're gonna use DVD clips) 
I've also included links to download the programs mentioned, as well as how to use them.
I've included pictures of most of the processes as well.
EVEN IF YOU SUCK AT PHOTOSHOP YOU CAN MAKE THIS.TRUST ME. :D

HOW TO MAKE THIS:
 OR

First of all, you need to get the clip you want to use. If it's already an .AVI file, then you're good to go. 

If you're going to rip something from a DVD, then you're going to have to download a few programs. I use DVDSHRINK and AUTO GORDIAN KNOT to rip my DVDs onto my harddrive and convert them to .AVIs to use with VirtualDub.
These steps are fairly simple. Put in your DVD, open DVDShrink, Click 'Open Disk', and then everything should be there. Chances are you're just going to want to a single clip, so go to 'Re-Author' and from the lists on the right find the episode or whatever you're looking for (they should be called Title 1, Title 2, etc.. under the Main Movie heading) and add it to the list on the left.



Now you're going to trim that clip. See the little thing by the 2 grey arrows and the 'x'? 2 vertical lines with arrows coming out of them and going in the middle? Wow, that was a bad description.  Anyway, its on the same line as DVD Compilation and its to the far right.
Click on your video you put in the list on the left so its hi-lited, then click on the weird 2-arrow thing. This lets you find the clip you want and trim out any unnecessary bits.



Move the slider until you find where you want the clip to start. Then go to the second slider and move that to where you want the clip to end. It can be longer than the one you actually want to use in your icon; mine usually is because I'm always afraid I'll cut something out by mistake. The main point of this is to sort of isolate the clip you'll be working with so there isn't much video to convert. 
Click 'OK'.
You can preview your video to make sure its what you want, and if it is, click on 'Backup!' at the top of the window, select a place to save your file, and then OK again. 
This will take a few minutes and will probably leave you with 2 seperate folders: VIDEO_TS and AUDIO_TS. However, there's never anything in my audio folder, so you can delete that. You don't even need audio for an animated icon, so yeah.
Once you have your folder made with your clip in it, go into it and you'll see you have a few different files. .VOBs, .ISOs, etc. This is where Auto Gordian Knot comes in. I'm assuming you've installed it by now. Oh, and you'll also have to have VirtualDub installed now too, since AutoGK uses that as well to convert. You can download VirtualDub HERE.
Open Auto Gordian Knot.



Click on the folder with the green arrow by 'input file' and go find your .VOB version of your clip. Since your clip should be short (a few minutes) there SHOULD only be one .VOB file. If you have any more than that well... you probably shouldn't, lol. Double click it so it goes to the Input File bar. The Output File bar should say 'blahblahblah.AVI'. That's what your'e looking for. Audio doesn't matter this time, so it doesn't matter what's checked off there. Finally, click 'Add Job' so its listed in the Job Queue, and then click 'Start'. It should begin the conversion process. This might take a few minutes. 

Once your file is in AVI form, find the file hidden among random VOB and ISO files, and open it up in Virtual Dub. (its still in your VIDEO_TS folder.. at least, it should be.)



There are lots of tutorials around for VirtualDub, but I'm gonna explain it here so even if you're completely new to animated icons, this tutorial should teach you everything you need to know.
See the 2 buttons I have circled in red? Those define the clip you want in your icon.
Slide the slider around until you find out where your clip starts. (it should be SHORT because you can't use many frames in the icon.) Once you find it, click the first button I have circled. Then slide the slider until you find where your clip ends, and click the second button I have circled. Your clip should be hi-lited in light blue. 
Once this is achieved, click 'File' --> 'Save image sequence...'
Your best bet is to make a new folder on your desktop to save your still frames. Make sure its completely empty. Make sure your files are going to be saved as .JPEGS, and then click 'OK' or whatever it is that it says.
Now you should have all the frames you'll need saved in a folder. Phew.

Now comes the fun part: actually making the icon.
If you don't have Photoshop, then you'll have to install it. The trial version is all I have (oh no and my free trial is running out :( ) Anyway, you can download it HERE. It should also install ImageReady with it.
Open Photohop. You have to make your icon base.
File --> New --> 100x100 pixels.
Make whatever you want! (make sure its on the bottom part of the base though because your animation could cover it.)
Here's what I made:



Download some cute squiggle brushes ( [info]100x100_brushes) and add some text if you want.

Now, open ImageReady.

File --> Import --> Folder as frames

Select the folder you saved your still frames in.




Should open up something like that. Now take a look at the number of frames you have in your animation. For example, I have 58. That's WAY too much for an icon, so you're going to have to trim your clip even more. You can start by pressing ctrl and hi-liting all the even numbered  animation stills and then deleting them. It won't make much of a differentce; it just cuts down the size. That's what I usually do and it seems to work. However, when I do it I still have 29 frames. Ideally, an icon should have anywhere from 10-14 frames. At least, that's what I've discovered. Sometimes you can get more, sometimes you have to use less. We'll see what happens.
I'm going to start cutting some frames off the beginning and the end. You shorten yours however you want to.
So I managed to get mine down to 12 frames. It should be good to go.
Next, you're going to have to crop your animation. If you did what I did and put a little color/text on the bottom half of your base, your going to want to crop your animation like me: W:100 H:47



Double click on your cropped area and voila. Now see the little button on the far left side of the screen? with a blank document and an arrow pointing to the Photoshop logo? (feather)? It should say 'Edit in Photoshop' when you hold your cursor over it. Click that. Obviously, this will open your animation in photoshop.

If your animation's too dark or too bland, then you can try the following:
Layer --> New Adjustment Layer --> Levels (messaround with that until it lightens up your picture)
Layer --> New Adjustment Layer --> Hue/Saturation (up the saturation)
Layer --> New Adjustment Later --> Selective Color (use whatever selective coloring you normally would)
Make sure any adjustments are at the TOP of your animation! (the first layer) This is VERY IMPORTANT.



Next, go to Image --> Canvas Size and make it 100x100 pixels. 
Now scroll down until your at the bottom of your layers. Hi-lite the very bottom one. Now go to your base you made earlier, select -->all,    edit--> copy merged, and paste it towards the bottom of your animation layers. Then manually move its so its at the bottom.
Also, make sure the layer visibility (the eye, lol) is checked. That's also important.




Now you're going to click your 'Edit it ImageReady' button (the same one with the feather) and once again, this obviously will open it up in IR.

If its resized when it opens, just go to View --> Actual Size(pixels). That always bugs me when it resizes.
Now the fun part, preview it!
Click play on the animation bar.

Now you're going to want to tween the last frame so the animation is smooth. 
Click the tween button ().
Make sure it says 'Tween with: First frame' and 'Frames to add: 2' 
That should smooth it out a little.
Now your final step is to see what size it is. On your preview screen, click 'Optimized' (next to Original 2-up, 4-up, etc). If its for LJ, it can't be over 40 KB. Mine's 42, so that means I'm going to have to delete a frame or 2. Find one that you don't think is necessary and delete it.
Then finally, File --> Save Optimized As
You should have a semi-nice looking animated icon now. :D

 

Here's mine:


Here are some more examples (I wasn't too fussy about the background in the one I just made for this tutorial):
 

Hopefully that was easy enough to follow!

 

 

 




(Post a new comment)


[info]deansweetie
2007-05-06 03:19 pm UTC (link)
Awesome,tutorial! Added to my memories and I'm gonna try it later. =)

(Reply to this)


[info]rockerannah
2007-05-06 04:01 pm UTC (link)
i love that you used clips of Jon Togo as Wolfe

(Reply to this) (Thread)


[info]heartoutofstone
2007-05-06 04:06 pm UTC (link)
I ♥ Togo :D

(Reply to this) (Parent)(Thread)


[info]rockerannah
2007-05-06 04:10 pm UTC (link)
I love him too haha.

(Reply to this) (Parent)


[info]doulix
2007-05-06 05:19 pm UTC (link)
This is great I've been looking for this type of tutorial. :D

(Reply to this)


[info]frozen_heat141
2007-05-06 05:51 pm UTC (link)
GAH. Great tutorial but I can't get Virtual Dub to work. Everytime I open up my file (that is an AVI.) it comes up with the message:

'Couldn't locate decompressor format 'XVID' (unknown). VirturalDub requires a video for Windows (WFV) compatible codec to compress video. DirectShow codecs, such as those used by Windows movie player, are not suitable.'

The files I'm trying to open though definately say AVI. though. Does anyone know what I should do?

(Reply to this) (Thread)


[info]heartoutofstone
2007-05-06 05:56 pm UTC (link)
Hmmm I think something like that happened to me before.
Just out of curiosity, do you have any XVID codecs installed? If not, try downloading them.
And make sure you have the latest version of Direct-X.
If you try both of those and it still doesn't work, don't click play directly on VDub, just move the slider to find your clip. That works when mine won't play correctly.
That's all that I can think of :/

(Reply to this) (Parent)(Thread)


[info]frozen_heat141
2007-05-06 06:01 pm UTC (link)
THANKYOUTHANKYOUTHANKYOU.

Magically, download the XVID codec did the job ^^ Which is weird cause I already had some Divx codes.

Once again, THANKYOUTHANKYOUTHANKYOU.

(Reply to this) (Parent)(Thread)


[info]heartoutofstone
2007-05-06 06:03 pm UTC (link)
Yeah, XVID is weird.. I almost pulled my hair out when I was trying to figure it all out awhile back.
No problem!! Glad I could help! :D

(Reply to this) (Parent)


[info]sunn_doyouknow
2007-05-06 07:32 pm UTC (link)
This is awesome, but I have a question. How can I move the animation around in the 100x100 image? Because if I leave it in the middle, it blocks the base that I'm using.

(Reply to this) (Thread)


[info]paintmespotless
2007-05-06 07:36 pm UTC (link)
Hmmm, that's something I haven't quite figured out yet.
I always just end up moving my base around to accommodate the animation. There is a way to do it though, I just don't know how, lol. Check the Archive.. i looked there briefly earlier, but there might be something there. :)

(Reply to this) (Parent)(Thread)


[info]sunn_doyouknow
2007-05-06 10:19 pm UTC (link)
Nevermind, I figured it out. Instead of changing the canvas size straight to 100x100, I changed it to 90x90 with the animation anchored to the top right corner. Then I changed the canvas size to 100x100 with it anchored to the middle. It put my clip right where I wanted it! *dances* And look what I made!

(Reply to this) (Parent)(Thread)


[info]heartoutofstone
2007-05-06 10:55 pm UTC (link)
Wow, okay thanks for helping me! :D
Awesome icon! :D Its pretty :)

(Reply to this) (Parent)


[info]girls_are_weird
2007-05-06 09:17 pm UTC (link)
totally unrelated but-- RYAN! *so much love¨* i might just snag the "that's hot" icon, is that okay? it is beyond awesome xD

(Reply to this) (Thread)


[info]heartoutofstone
2007-05-06 09:45 pm UTC (link)
:D
I LOVEEEEE Ryan. :D
Sure! Snag away! And if you're interested, I posted a whole lot of Ryan Ryan/Calleigh animated icons like those few here: http://paintmespotless.livejournal.com/16522.html#cutid1 some of them are better than the ones I used in the examples, lol. :)

(Reply to this) (Parent)(Thread)


[info]girls_are_weird
2007-05-07 01:56 am UTC (link)
OH MY GOD C/R ICONS! 8O you totally win in life. those are absolutely awesome, the world definitely needs more C/R & ryan icons. i think i'll snag ALL of them and have my wicked way with them. season3!ryan is love =3 thanks for the heads up! always nice to meet a fellow fan ^_^

(Reply to this) (Parent)(Thread)


[info]heartoutofstone
2007-05-07 06:51 pm UTC (link)
:D The world definitely does need more of those. :D
Glad you like 'em! S3 Ryan = better than season!4 and season!5 Ryan. :(
Same to you! I don't know many fans, haha :D

(Reply to this) (Parent)


[info]horatioslover
2007-05-07 06:46 pm UTC (link)
Wow this is great! I'm memming this and gonna give it a try later.

(Reply to this)


[info]bookworm04
2007-05-09 02:03 am UTC (link)
Wow, finally someone explains it so that I can go straight from DVD to icons. Thanks so much! :D

(Reply to this) (Thread)


[info]heartoutofstone
2007-05-09 07:02 pm UTC (link)
:D
I'm glad you found it useful.
No problem!

(Reply to this) (Parent)


[info]letoist
2007-05-14 08:40 pm UTC (link)
This tut has been fantastic, but I keep getting this message:

'Couldn't locate decompressor for format 'MP42'(Microsoft High Speed MPEG-4 V2)

Virtual Dub requires a video for Windows (VFW) compatible codec to decompress video. DirectShow codecs, such as those used by Windows Media Player, are not suitable.'

And I had tried changing the video formats to .avi, but when it's done, I don't know where to find the video ^^; Do you think you could help me out a bit? Thanks <3

(Reply to this) (Thread)


[info]heartoutofstone
2007-05-14 09:22 pm UTC (link)
Hmm, I've never encountered that error before (and I've encountered lots, trust me lol). I've never even heard of 'MP42' before. The only thing I can think of doing would be make sure you have the XVID codec(http://www.xvidmovies.com/codec/), DIVX codec (http://www.divx.com/divx/windows/codec/) and/or the DirectX codecs (http://www.softwarepatch.com/windows/directx.html).
Restart your computer after installing any of the codecs mentioned and see if it works properly. If not, try uninstalling VirtualDub and then re-installing it?
I know that's probably not very useful, but its all I can come up with. :(
Try typing in 'MP42' in a search engine and see what it is, because I have no clue, lol.
Sorry :(

(Reply to this) (Parent)(Thread)


[info]letoist
2007-05-15 12:05 am UTC (link)
Thanks for the tips hun! I'm to tired to try them out now, so I'll be sure to try them out tomorrow. Thanks so much for your help! <3

(Reply to this) (Parent)(Thread)


[info]heartoutofstone
2007-05-15 12:19 am UTC (link)
No problem! Hopefully they work! ♥

(Reply to this) (Parent)(Thread)


[info]letoist
2007-05-15 12:36 am UTC (link)
I hope so too!

(Reply to this) (Parent)


[info]aoi_mateki
2007-11-13 08:18 pm UTC (link)
Thanks a lot for the tutorial
I had looking much
And this is very easy

I want to show you my result ^^

Photo Sharing and Video Hosting at Photobucket



(Reply to this)


Create an Account
Forgot your login or password?
Login w/ OpenID
English • Español • Deutsch • Русский…