?

Log in

No account? Create an account

Previous Entry | Next Entry

I'm going to show you how I made this icon:


Using GIMP 2.6 and the GAP plug-in.

Level: Intermediate (you'll need to know your way around GIMP, or failing that, possess a lot of patience/drive.)

This is a very lengthy tutorial, because (no two ways about it) making animated icons is extremely time consuming. I love them, though, so I spend the time trying to make the best ones I can. And I'm always searching for ways to improve.

(NOTE: You will need to download and install GAP and the bug fixes before using this tutorial. An alternative way of making animated icons is to take frame-by-frame screen caps. If you find installing and/or using GAP too confusing, you might want to try this tutorial, and pick back up at Step 4.)



Step 1 - select your clip
Go to your avi, mpg or mov file and note the timestamp of the clip you want. For example, Shawn and Juliet's cheek kiss happens between 39:07 and 39:15. Be careful to pick something that only lasts a few seconds. Make sure to write it down!

Step 2 - extract the frames
In GIMP, go to Video-->Split Video into Frames-->Extract Videorange


On this menu you need to:

A) Open your video file here (if you're not used to the old DOS system, this is the worst part, lol)
B) Click downward arrow to remove audiotrack
C) Pick a folder to save the frames to here (I tend to make a new folder for each animated icon)
D) Click Video Range here
E) Press the up and down arrows until the time codes here** match the range you wrote down
F) Click Loop and Play Selection Only
G) Click here to play -- but first it will ask you if you want to create a video index file.



You do! After it is done (it takes a little while), you can click the left side button again to start it
H) A really annoying "Videoseek" bar will start up. When it's done, the clip will play just that bit. Move the frame numbers higher and lower until you get exactly the clip you want. The Videoseek will reset each time, hence me naming it "annoying." After doing that several times, I ended up selecting between Frame 56270 and 56370.


It's too many frames, though -- your finished product should only have between 15-20 frames. I'll deal with that in Step 3
I) The frames will load into the folder you specified in Letter C, and then the first frame will show in the new GIMP picture:


Click out of it without saving - you want to select your frames differently.

Step 3 - reduce the number of frames
Go to File-->Open As Layers and find your folder.

I created about 100 frames just now -- WAY too many. So I have to figure out which frames to keep!

I look at each frame in the preview to the right, noticing where the movement is. I decide that I want to begin just as Juliet's moving to kiss him, and end just as Shawn closes his eyes. BUT! I only select every third frame (this works well with videos), using Ctrl+Click.


This gets me down to 33 frames. I can still do better. So I decide to cut out the middle section, right after her lips touch Shawn's cheek to just before he closes his eyes.

I de-select the "eye" icon in front of each layer until I find the ones I want to cut. I am able to delete the frames between 56306 and 56347 (using the Trash Can icon at the bottom).


Now I'm at 21 layers. This is workable - if I make the animation a small image size. :) Don't forget to re-click the "eye" icons to make everything visible again.


Step 4 - brighten the frames
Now, you might notice how DARK the image is right now. It will not look good when sized down. There is a nice trick to brightening the frames. An animated GIF can only have a limited number of colors or the size will be too large. This helps reduce the colors as well! Only problem? You have to do it frame by frame. :(

Select a color with the eyedropper - something beige or yellow works best. I found a spot between their heads with a lighter color.


Create a new layer right above the top layer by clicking the New Layer icon (sheet of paper at bottom) and selecting foreground color. Drag it to the top if it isn't there already.


Change the layer mode to "Divide". This seems to work best - though a different setting may work better depending on the color you chose.


Notice how much brighter the image is? Now it's time to copy that layer and move it down between each layer, until you have enough for each frame.


Press "Duplicate" at the bottom, then drag the layer below. When you're done it should look like this:


Now merge each layer by right-clicking on the colored layer and selecting "Merge Down." Do this with every colored layer.



Step 5 - crop and scale down
Time to check the animation - to make sure it's light enough before going on. Go to Filters-->Animation-->Playback.


Then click the Play button on the new window which pops up. If it's fine, move on, if not, repeat Step 4 until it's light enough!


Now I want to crop the picture so that it's basically square. Sometimes I do rectangles, it all depends on the animation. The most important things I want in this crop are their faces, so I try to center it the best I can, using the "eye" icons to check that I'm not going to crop off anything I shouldn't. This selection is 344x344, exactly square.


Go to Image-->Crop to Selection to crop it.

Next we need to scale the whole animation down so that the finished product is a manageable file size! The more frames you have, the smaller the animation has to be, unfortunately. I think 60x60 will be small enough, but I may have to go smaller later. Image-->Scale Image, then Save As an .xcf file for later, just in case.



Step 6 - fade in and out
Create a new white layer and move it to the top. Duplicate it 2 times. Place one layer directly under, and the other below the top video frame. Change the opacity of the lowest one to 33.0, and the middle one to 66.0. Then Merge Down each of those two with lower opacity.


It should look like this after the merge:


Repeat with the two lowest layers of the stack as well, but in reverse:


Use playback again to check it, if desired. Now, I felt like Juliet's kiss was still too dark, so I followed Step 4 again here, only on her portion of the icon.

Step 7 - add a background/border

First we need to enlarge the canvas, just a little. Go to Image-->Canvas Size. I increased the size to 66x66, to create a 3 px border. Click "Center" and then "Resize".


Next I used the eyedropper as before to select a border color. I chose the pink of Shawn's lips, but it could be anything you like. :)

Then create a New Layer with the new Foreground Color, and move it below the bottom frame.


Merge Down the bottom video frame to the colored layer. You now have a border!

Third, enlarge the canvas again to 100x100 and center again. Create a new white layer and place it below the bottom frame, then merge, just as before.

It should look like this. Check in playback again, if desired!


Step 8 - save as a GIF
Right now, the icon would be too large to use, even as much as we've done to it. We have to Optimize it, then reduce the colors further.

Go to Filters-->Animation-->Optimize for GIF.

This will create a new GIF file. The other file is still there, just in case you want to change something later.


Now if I saved this as a GIF, its filesize would still be too large at 53K. We have to reduce the colors even more! Go to Image-->Mode-->Indexed.


Usually 100 colors works, but sometimes I have to Undo a couple of times and try more or less colors.


I also tried 110 colors, and it was also small enough.


Both are a little grainy, but I would probably have to make the animation a little smaller (55x55 or 50x50) to fix that.

Save the new GIF file, selecting "Save As Animation", then Export-->Save. The 100 colors file size is now 38.9K, and the 110 is 40K -- perfect for using on LiveJournal/elsewhere.

If you made it this far, you get a gold star!!! Hopefully this helped. :)

This tutorial did not discuss adding text or different timings on the frames at all. I would be happy to do a separate tutorial for that later! ♥

Tags:

Comments

( 26 comments — Leave a comment )
alamo_girl80
Jun. 25th, 2009 02:57 pm (UTC)
This has little to do with the tutorial, but remind me again what ep of Psych that was? Because I REALLY need to see it again. Or hell, I may have missed it the first time around! GAH!
htbthomas
Jun. 25th, 2009 03:11 pm (UTC)
LOL.

It was the season finale of Season 3 - ep 3.16. And it was amazing! You definitely need to watch/rewatch, because I'm sure that some things will carry over into season 4 in August!

(BTW, I redid your "Sticks and Stones" GIF. I wasn't happy with how pixelated the text was - I'll send it on you to via PM).
alamo_girl80
Jun. 25th, 2009 05:46 pm (UTC)
YAY! I found the ep on Hulu. I remember coming in at the very end. Now I remember why I got frustrated with Psych last season. NOTHING with Shawn/Julz until that very last episode ( unless I'm forgetting something. Was there any more Shawn/Julz-y eps last season I need to see? I missed a few). I really hope they play with them more this season.

And THANK YOU THANK YOU THANK YOU for the new gif icon! Will be adding into my cue!

Edited at 2009-06-25 05:46 pm (UTC)
htbthomas
Jun. 25th, 2009 05:50 pm (UTC)
The Roller Derby episode was the other Shawn/Jules episode that I remember well - did you see that? There wasn't a lot, but other than the horror-style ep, I really liked the back half of S3. I hope they do more as well! Did you see my, ahem, steamy PB fic for them? *waggles eyebrows*

And YAY! I'll be offering that one in my next mixed batch of icons, if that's okay. :D
alamo_girl80
Jun. 26th, 2009 02:16 pm (UTC)
The Roller Derby episode was the other Shawn/Jules episode that I remember well - did you see that? There wasn't a lot, but other than the horror-style ep, I really liked the back half of S3. I hope they do more as well! Did you see my, ahem, steamy PB fic for them? *waggles eyebrows*

I DID see Roller Derby ep. That was a very cute ending. And I remember the haunted house episode, as probably one of the funniest this season. A lot of the others were just 'meh'.

I DID see your rated R Psych fic, at FF.net. I was surfing through some Psych fic, looking for some good, in character Shawn/Jules. I'll have to read through it today!

Offer away! I'm sure there are some others on your f-list that would like whips and chains ect. HEE!
htbthomas
Jun. 26th, 2009 02:24 pm (UTC)
Oh! I just realized that there were two horror eps...

The Haunted House one WAS funny. :D It was the one set in the camp that I didn't like.

Yay, I hope it is in character (I tried), and that you enjoy it. ♥

I bet there ARE people who would like the whips and chains, lol. I mean, other than you. :D
saavikam77
Jun. 25th, 2009 04:04 pm (UTC)
Wowsa, this is complex! O_O I did try to read the whole thing, so I at least have a starting point for when I try to learn how to do these. My hubby does everything frame by frame, though he doesn't do animated icons from clips like that, mostly text and still frames.

Thanks for the intro! :D
htbthomas
Jun. 25th, 2009 04:16 pm (UTC)
Yeah! I know! But I haven't found any tutorials except that tutorial I linked above that really get into the nitty gritty of making animated icons, and only one for GAP, which only covered Steps 1-3.

So I had to contribute. Hopefully if some people try it, they can help me work out any kinks in the wording and I can post it to the GIMP comm or an icon tutorial comm.
fairfax_verde
Jun. 25th, 2009 04:52 pm (UTC)
Goodness gracious! You are extremely patient and talented. Unfortunately, I am neither ;-) Fortunately, there are generous people like you who share. I'm saving this in case I feel ambitious someday soon!
htbthomas
Jun. 25th, 2009 05:03 pm (UTC)
I think it's probably more "obsessive" than either of the others! I've seen GIMP animations that are so beautiful I want to sit at the icon maker's feet... but alas, I just spend hours reading every tutorial I can to figure stuff out. :D

I hope you do try it someday, though! I just made another icon this morning - and it's not THAT long to do once you know the steps. :D
autumnrae89
Jun. 26th, 2009 03:14 pm (UTC)
Thank you!

Oh gosh, that's a lot of stuff. I bow to your awesomeness.

Well, I'm gonna have a read through of this. I think my brain may explode before I reach the end. Remember me well!
htbthomas
Jun. 26th, 2009 03:17 pm (UTC)
It IS a lot of stuff, I know! And I definitely want you to tell me where you're getting confused so I can improve it.

If you have a chance to try it with a video of your own, I'd love to see how it turns out!
chickadilly
Jun. 26th, 2009 06:01 pm (UTC)
Wow - this is an awesome tutorial, Barb. I'm impressed. I've messed around with animated icons in Photoshop and they're a lot of work! Good job.

*Could I talk you into posting it on the Graphics Tutorial comm? :D :D :D
htbthomas
Jun. 26th, 2009 06:15 pm (UTC)
Thanks! I do plan to post it on Graphics Tutorial... but so far no one's tested it to make sure it all makes sense! I want to wait for at least Rae to test it. Then I will! I wonder if there are tutorial betas out there...?
chickadilly
Jun. 26th, 2009 06:17 pm (UTC)
! I wonder if there are tutorial betas out there...?

Hee - I never thought of that but that's a good idea!
catzeta08
Jun. 26th, 2009 11:10 pm (UTC)
nice tutorial :)
memming!
htbthomas
Jun. 26th, 2009 11:53 pm (UTC)
Thanks! I hope you get some good use out of it! :)
catzeta08
Jun. 29th, 2009 03:10 am (UTC)
just asking do you know how to make it round corners?
htbthomas
Jun. 29th, 2009 03:19 am (UTC)
Let me see if I can explain without pics...

After you scale the image down to the size you want (before putting on the border), use the the round selection tool to select the rounded edges. Then Invert the selection (Ctrl+I or find it on the menu) and delete the corners.

You'll have to use Alpha to Selection-->Border-->Duplicate-->Fill with BG color //OR// Alpha to Selection-->Stroke Selection to get the border, but you should still be able to get the same effect!
catzeta08
Jun. 29th, 2009 04:43 am (UTC)
got it..thank you so much.. :D
you should make another tutorial for gif :D thanks and Godbless.. :D
imagineatime
Jul. 8th, 2009 05:42 pm (UTC)
I know, I'm really late on this but I just tried some of your steps and made this icon! Thanks, meming it now!
htbthomas
Jul. 9th, 2009 12:42 am (UTC)
That is really great! :D I didn't talk about text at all - but you did a great job of incorporating it into your icon! :)

I'm so glad this helped you. :)
cuyler_morgan
Jan. 30th, 2011 08:11 pm (UTC)
I just want to reinterate my love for you! You're so awesome for taking the time out to put all of this together for us novices :)

 
htbthomas
Jan. 31st, 2011 12:28 am (UTC)
Aw!

Did you make that gif with this tutorial?
cuyler_morgan
Jan. 31st, 2011 04:24 am (UTC)
lol no! I wish. I just did a mini post on the journal of the ones i did, though.

Plus the icon I'm using

Edited at 2011-01-31 04:25 am (UTC)
htbthomas
Jan. 31st, 2011 03:47 pm (UTC)
Awesome!

(Yeah, GIMP does some odd things to the coloring with large GIFs. Photoshop is better, but I don't have it, so...)
( 26 comments — Leave a comment )

Latest Month

October 2015
S M T W T F S
    123
45678910
11121314151617
18192021222324
25262728293031

Tags

Powered by LiveJournal.com