Sarah ([info]damnicons) wrote,
2006-04-19 13:38:00
  • Previous
  • Memorize
  • Share
  • Next

Spongebob tutorial: animation

A tutorial for one of my icons I posted in my last icon post.

How to make:


In GIMP.


1. I started off by working with this pic. I duplicated the layer and set it to Soft Light, and sharpened it a bit. Then I merged the layers.

>

2. Next, I added the text "OOH" in Arial Black at size 14. Now, with the text layer selected (meaning that, in the layer dialog, it should be selected in blue), go to Script-Fu > Shadow > Drop-Shadow... Here were my settings.



Now there should be a layer called "Drop-Shadow" underneath the text layer. You can merge all of the layers, and now you have your first frame.

3. I followed steps 1 & 2 for this image, except I added the word "SNAP" instead of "OOH."

>

4. Next, I made a new layer in the "OOH" image and pasted the "SNAP" picture on. Like this. Make sure to anchor the layer right after you paste it by clicking the anchor button.

5. I set the "SNAP" layer to invisible (click the eye next to the layer in the dialog) since I didn't need it at the moment, and it would only get in the way. So what I did next was I duplicated the "OOH" layer and went to Filters > Blur > Gaussian Blur... Here were my settings.



7. On the same layer, I went to Filters > Blur > Motion Blur... and put the settings as:

Blur Type: Linear
Blur Parameters: Length: 10; Angle: 45

8. Now you can make the "SNAP" layer visible, and repeat the blur process on that layer. Your dialog should look similar to this when you're done.

9. Yay, it's time to animate! You don't need GAP (Gimp's animation plug-in) for this at all; I downloaded it a while ago and I think it's too confusing. :/ Anyway.. You can change the speed of each frame by renaming each layer (right click on the layer in the dialog and go to "Edit Layer Attributes"). The speed is based on milliseconds, so you'd edit the layer with the amount of milliseconds like this: (100ms)

I set both Blur layers at 100ms and the others to 3000ms, which is 3 seconds incase you didn't know. :S

10. We're almost done, now you just have to save it. Go to File > Save As... and save it as a GIF. Another window should pop up, and make sure "Save as Animation" is selected. Click Export, then another window should come.. mine looked like this: http://img395.imageshack.us/img395/208/ok7zc.jpg

Oh, and these were my layers:



Well, that's it! Feel free to show me what you made with this tutorial. Just don't copy it exactly. I hope I wasn't too confusing. :)
Tags: tutorials

  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    switch

    Your IP address will be recorded 

     
    Help
  • 41 comments

[info]sae16

April 19 2006, 18:28:56 UTC 6 years ago

wow! thats really cool!!! =]

i don't know if you said it or not, but what program did you use? is their anywhere to download it?

[info]damnicons

April 19 2006, 19:14:27 UTC 6 years ago

The program is Gimp. You can download it somewhere at GimpTalk.

[info]tangled_girl

6 years ago

  • Loading...

[info]damnicons

6 years ago

  • Loading...

[info]damnicons

6 years ago

  • Loading...

[info]sexthruafence

April 19 2006, 19:05:44 UTC 6 years ago

yeah yeah!! what program! i wanna make super duper cool spongebob icons like you!

[info]damnicons

April 19 2006, 19:15:47 UTC 6 years ago

Gimp, it's in the tutorial. :S

But I'm glad you like it, hehe. :)

[info]sakura_no_kage

April 19 2006, 20:00:37 UTC 6 years ago

mmm. what's GIMP?

[info]damnicons

April 19 2006, 22:46:23 UTC 6 years ago

Gimp = GNU Image Manipulation Program. Basically it's a scaled down Photoshop and doesn't have all the features because it's freeware. But Photoshop plugins and the sort can still run on it. ^^

[info]guzophela

April 19 2006, 21:20:51 UTC 6 years ago

Thanks so much for this!
I had no idea how to use the GIMP animation program, so you've helped me somewhat. xD

[info]mozart

April 20 2006, 02:59:02 UTC 6 years ago

homg. I love spongebob. If I credit you, can I use this one?

http://img63.imageshack.us/img63/7876/tut65qy.png

[info]damnicons

April 20 2006, 03:24:47 UTC 6 years ago

Go ahead! :D

[info]xsail_oceans

April 20 2006, 03:08:26 UTC 6 years ago

Awesome tut! But how do you change the frame sec.? I'm not sure if i have it,i right click and went to edit,nothin there...

[info]damnicons

April 20 2006, 18:40:50 UTC 6 years ago

You're not supposed to right click on the image itself, but the layer in the dialog. See the blue, highlighted layer in the last pic? You have to right click on all of those, and the first option that comes up is "Edit Layer Attributes." Sorry if I didn't make that clear. :)

[info]our_wreckage

April 20 2006, 05:59:27 UTC 6 years ago

lmao I love this. w00t! for Spongebob.

Awesome tutorial.

[info]helenbutterfly

April 20 2006, 15:55:05 UTC 6 years ago

1. I love SpongeBob. I also have the movie. xDD
2. I love and use with great pleasure the GIMP. What version is yours? My windows are not like that...
3. I love you tutorial. It is understandable and easy to follow. Thank you!!!

Can I friend you?

[info]damnicons

April 20 2006, 18:38:05 UTC 6 years ago

1. Spongebob pwns! I don't have the movie yet, though :(
2. I have version 2.something. lol, I'm not sure, but it's not the version that made the windows like that. I'm using a Windows theme called "Royalty", I think, that I downloaded somewhere on DeviantArt.
3. You're welcome. :D

yay, sure! :)

[info]helenbutterfly

6 years ago

  • Loading...

[info]kweenofkayos

April 20 2006, 17:21:23 UTC 6 years ago

GIMP is one of software components of Linux. I have GIMP 2! =)

[info]sonicxhedgehog

April 20 2006, 22:50:29 UTC 6 years ago

Sorry to bother you again, but do you know how I can get the layer screen to show? Everytime I open up GIMP it only shows the window with the tools and not the layer screen like in step 4.

[info]damnicons

April 20 2006, 22:58:20 UTC 6 years ago

go to Dialogs > Layers and the window should pop up.

Don't worry, you're not bothering me at all. :)

[info]sonicxhedgehog

6 years ago

  • Loading...

[info]xorli_stalkerx

April 21 2006, 18:47:41 UTC 6 years ago

Lovely! I'm not much of a SBSP fan, but the icon made me laugh :P

Is the trial free? Or do you possibly know where I could get it for free? I've not been able to make my animation icons lately, becuase my trial died, and I can re-download the trial again till I go and get the program :/
And if I can get the program working, then your tutorial will have been of much help :D

[info]yumyum_orange

April 25 2006, 03:56:38 UTC 6 years ago

OMG thank you so much for this tut! I use the gimp XD

[info]rockin16

May 12 2006, 19:31:21 UTC 6 years ago


*spazzes*

I haven't even read the tutorial yet, but I must give you GIANT hugs for making a gimp tutorial. It's such a wonderful thing to run across, either the gimp tutorials I find are luckluster quality or just adapted (halfway most times) from other programs.

..YAY!

*hugs*

[info]lexiedoh

February 19 2007, 03:24:24 UTC 5 years ago

Oh my WORD. How much do I adore that icon?!

[info]rockin16

5 years ago

  • Loading...

[info]ny_down_hearted

May 14 2006, 01:29:38 UTC 6 years ago

Very nice tutorial. +mems ^___^

[info]wildthyme

June 11 2006, 02:03:19 UTC 5 years ago

Okay, I have a driving need to proclaim my undying love for you, simply on the basis of this tutorial. I've been losing my mind trying to figure out how to animate in Gimp, and this was a huuuge revelation to me. I can give my layers separate animation speeds! AMAZING! Seriously, you are awesome.

Thank you SO much.

[info]fizzy_pepsi

June 14 2006, 00:52:40 UTC 5 years ago

what is gimp. i do not understand.

[info]damnicons

June 14 2006, 00:55:38 UTC 5 years ago

[info]fizzy_pepsi

5 years ago

  • Loading...

[info]damnicons

5 years ago

  • Loading...

[info]emeraldjay

June 15 2006, 22:51:59 UTC 5 years ago

Like you I'm not overly thrilled with the GAP plugin either. http://gimp-savvy.com/BOOK/node80.html is where I found how to animate GIF's before and after GAP was inflicted upon the masses. Then again, I've been a GIMP user since before version 1.x.

[info]lrita

June 16 2006, 17:13:41 UTC 5 years ago

GIMP is the best isn´t it?!
really nice effect, thanks for sharing.
:-)

[info]boyss

June 29 2006, 07:22:54 UTC 5 years ago

great tutorial, it will definately
help. thanks!

[info]lied_ohne_worte

August 4 2006, 10:37:45 UTC 5 years ago

Ah, great! I was looking for a GIMP-specific tutorial on how to get this effect. Thanks!

[info]cadey

February 18 2007, 02:56:52 UTC 5 years ago

yay! Thanks for the tutorial - was wondering how to get this in GIMP.

[info]mrssparkes

July 31 2008, 10:34:28 UTC 3 years ago

Great! I made this [link]

[info]foxylovesme

March 25 2009, 00:03:00 UTC 3 years ago

Is this translateable to Photoshop? :)

[info]diek09

December 28 2009, 04:39:01 UTC 2 years ago

I may say thanks a lot! This is amazing, I'm sure it will help me a lot as I participate in a community that allows animated icons, I will show what I've done later... Thanks again!!
Create an Account
Forgot your login or password?
Facebook Twitter More login options
English • Español • Deutsch • Русский…