Off Topic: The Flood
This topic has moved here: Subject: An Introduction on how to make Animated .GIF's
  • Subject: An Introduction on how to make Animated .GIF's
  • Pages:
  • 1
  • 2
  • of 2
Subject: An Introduction on how to make Animated .GIF's
  •  | 
  • Exalted Mythic Member

The Frozen Minority - The most infamous clan borne from the Seventh Column.

Excellent tutorial, you could probably get it submitted to good tutorials.com. It is very useful, especially for starters. You should update it to make use of the tween function though.

You press the tween button and enter as many frames as you want (the more frames the smoother the animation) and it will, instead of flashing red to white in your example, slowly fade red to white.

This is very useful for animations with glow effects or such.

  • 07.10.2006 6:25 PM PDT

"I pledge to punch all switches, to never shoot where I could use grenades, to admit the existence of no level except Total Carnage, to never use caps lock as my "run" key, and to never, ever, leave a single BoB alive."

2B || !2B - Why don't you look Inside the Machine?

I understand, but I wanted people to get a feel of how to do it and get "their feet wet" with Animations. I have made plenty of Animations...and in fact this one BANNER is one I did for my old group site before we shut down.

  • 07.10.2006 6:27 PM PDT
  •  | 
  • Exalted Mythic Member

If in doubt, empty the clip.

Join
KOTOR

Ω8

Great thread, Zee. I wish I had photoshop so I could try that out.

  • 07.10.2006 6:47 PM PDT

"I pledge to punch all switches, to never shoot where I could use grenades, to admit the existence of no level except Total Carnage, to never use caps lock as my "run" key, and to never, ever, leave a single BoB alive."

2B || !2B - Why don't you look Inside the Machine?

Well, you could always try to buy it. Or if your school/college *if you go to either* has a computer lab...they should have it.

  • 07.10.2006 6:50 PM PDT
  • gamertag:
  • user homepage:
  • last post: 01.01.0001 12:00 AM PDT

Thanks for the tutorial, it was a lot of help.

  • 07.10.2006 8:44 PM PDT

"I pledge to punch all switches, to never shoot where I could use grenades, to admit the existence of no level except Total Carnage, to never use caps lock as my "run" key, and to never, ever, leave a single BoB alive."

2B || !2B - Why don't you look Inside the Machine?

Well if it really helpful, I might make some more intermediate Tutorials...hopefully I can find a place to host this stuff.

  • 07.10.2006 8:46 PM PDT
  • gamertag:
  • user homepage:
  • last post: 01.01.0001 12:00 AM PDT

Neat tutorial, but I don't have photoshop anymore; trial ran out.

[Edited on 7/10/2006]

  • 07.10.2006 9:00 PM PDT
  •  | 
  • Exalted Mythic Member

The Frozen Minority - The most infamous clan borne from the Seventh Column.

Posted by: Zee JollyRoger
Well if it really helpful, I might make some more intermediate Tutorials...hopefully I can find a place to host this stuff.


You could simply start an invision forum to host your tutorials - it supports image tags, it is free and easy to use.

  • 07.10.2006 9:03 PM PDT

"I pledge to punch all switches, to never shoot where I could use grenades, to admit the existence of no level except Total Carnage, to never use caps lock as my "run" key, and to never, ever, leave a single BoB alive."

2B || !2B - Why don't you look Inside the Machine?

Thanks...but I do not have the time to run my own forum or near as much experience. I barely have time to come to Bungie.net...I might Archive them in my group...hmm?

  • 07.10.2006 9:07 PM PDT
  •  | 
  • Exalted Mythic Member

The Frozen Minority - The most infamous clan borne from the Seventh Column.

Yeh a group would be fine but if you needed image tags you could post them on a dead GFX forum. No need to manage it, just link to a site no one goes to.

[Edited on 7/10/2006]

  • 07.10.2006 9:15 PM PDT

"I pledge to punch all switches, to never shoot where I could use grenades, to admit the existence of no level except Total Carnage, to never use caps lock as my "run" key, and to never, ever, leave a single BoB alive."

2B || !2B - Why don't you look Inside the Machine?

Putfile is fine, and just putting a link in my post is fine. I don't need the extra hassle...but thanks for the information and advice.

  • 07.10.2006 9:17 PM PDT
  • gamertag:
  • user homepage:
  • last post: 01.01.0001 12:00 AM PDT

Before I read can you tell me if this'll work with GIMP or not?

  • 07.10.2006 10:46 PM PDT

I don't really see what this has to do with Bungie.net, so I'm moving it to The Flood.

  • 07.11.2006 3:51 AM PDT
Subject: An Introduction on how to make Animated .GIF's

"I pledge to punch all switches, to never shoot where I could use grenades, to admit the existence of no level except Total Carnage, to never use caps lock as my "run" key, and to never, ever, leave a single BoB alive."

2B || !2B - Why don't you look Inside the Machine?

Zee JollyRoger's Animated GIF Tutorial

Since I have gotten many inquiries about how to do this from the Community, I figured I would make a guide to help everyone on B.net...Have fun.



Getting Started

Just to let anyone know, you should have a mild knowledge of Photoshop and ImageReady...this will help a-lot.


* First you need to make sure that you have a Picture with several "Layers" or different segments of the picture that will act as frames later on.

* Secondly open up your picture in Adobe Photoshop. There should be a tab to your right that has the choices "Layers", "Channels", "Paths"...you want to have the "Layers" tab selected.


Opening your Image in Photoshop

According to what you want to do will dictate how hard your Animation will be. Lets just do a simple text based one.

Okay, now that you have your Image open in Photoshop here is what you should do to make a text based Animation...

* Make 1 new layer...

(On the bottom of the "Layers" window there should be an Icon that has a square on top of another square next to a Trash can Icon...that is the Add a Layer button...click it once)


Now with this new layer, you can add material to your image without making it a permanent part of the original, this means that it can be edited without editing the original.


* Select the Text tool and type in your desired phrase... (I will use "WTF?" in my example)


Okay, once you have entered your desired text...click on the Eye Dropper tool under the Text Tool to deselect the Text tool and finish your adjustments.


Now, what you need to do next is save the image in a .PSD format...or PhotoShop format. After that you need to export it to ImageReady...under the toolbar there is a button on the bottom that has an Arrow going to another icon...that is the Export button. Click that button, or you could press "Shift + CTRL + M" at the same time to export it.



BRACE YOURSELF...


Creating the Animation

* Now what you need to do is go up to the top and click the "Windows" choice next to "View" and "Help"

* You should see a drop down menu appear with a lot of choices, you want to click on Animation. A box should appear with the title on the tab "Animation" and have some arrows that look like VCR buttons.


Now comes the tricky part...deciding what you want your animation to do? Do you want it to change color? Do you want it to fade in and out? Do you want it to spin? For this example, I will make it simple and just have it change color.


Authors note, these next few parts are to finish my example


I have a picture, with a black background and some white text with the words "WTF?"...and as I said I am going to make it change color in an animated style. So what I am going to do is copy the text "Layer" under the "Layers" tab in the window to the right of the screen. You can copy the Layer by right clicking the Text layer and clicking "Duplicate Layer" or you can left click on the Text layer and then press "CTRL + J"


Now that I have my copy of the layer...we need to add the frames. This becomes a little complicated...so don't get frustrated.


In the window that says "Animation" there should be an Icon that has a square on top of another square next to a "Trashcan" icon...it is the duplicate frames button. It makes a copy of the frames in the Animation window.


* If you are following my example, click the Duplicate Frame button once. There should be a second frame that appears.

* Click on the Frame that has the Number 1 on it...in the "Layers" Window there should be your original text frame and the one that says "Text copy"...to the left of the "Text copy" frame there should be an "eye" like symbol. Click on it for the "eye" sybmol for the "Text copy" layer only!!!


Break Time

Authors note, the "eye" like sybmol is the "On/Off" button for each layer. By clicking it you turn a layer of. If the "eye" isn't there and you click it, you turn it on. This is important because it allows you to edit the two layers differently without both layers showing at the same time. If you have problems, just PM me



* Now click on the Frame 2 in the animations window. Now we will do the opposite.

* Click on the "eye" symbol next to the original frame and then click on the "eye" symbol for the copied frame.


Now, with the second frame still selected...just color the text in the copied frame a different color than the original text.


* With that done, there should be a forward arrow button in the Animations window. Click that, it plays the animation.


Depending on how fast you want it to go, you can click on the spot where it says "Sec" on the Frames in the Animation window for each frame to slow it down.

Now comes the easier part...just go up to File...and make sure you click "Save Optimized As" and then save it as an "Images Only (.gif)" format...otherwise you won't have an animation.

Now all you have to do is just open it...

Voila! An animated .GIF file. Congratulations.


If you require more information or help...just PM me for help.


Finished Animation

[Edited on 7/10/2006]

  • 07.10.2006 6:18 PM PDT
  •  | 
  • Exalted Mythic Member

5/5 Stars - Kritz.net

You can also make .GIFs with Flash MX, but you shall get no tutorial from me! No sir.

If I was on my Mac (Too lazy to find it) I'd go and make a quick one. But yeah, making 'em in Flash is a hell of a lot easier if you're going for a better animation.

>> Kritz

  • 07.11.2006 4:00 AM PDT
  • gamertag:
  • user homepage:
  • last post: 01.01.0001 12:00 AM PDT

*claps*

But tis much easier with Macromedia FLash, but whatever.

  • 07.11.2006 4:02 AM PDT
  • gamertag:
  • user homepage:
  • last post: 01.01.0001 12:00 AM PDT

Grr, I don't have the money for Photoshop!!!

  • 07.11.2006 8:55 AM PDT
  • gamertag: [none]
  • user homepage:

Posted by: mr poopoo232
its like a large force of win going through fusion, thus creating a chain reaction of a huge asplosion of win destroying any fail within its awesomeness.

Neat.

  • 07.11.2006 2:59 PM PDT
  • gamertag:
  • user homepage:
  • last post: 01.01.0001 12:00 AM PDT

Tutorial!

  • 07.11.2006 3:03 PM PDT
  • gamertag:
  • user homepage:
  • last post: 01.01.0001 12:00 AM PDT

Theres a much easier way to do it. Just google Advanced GIF animator and it should pop up. The program is pretty self explanatory and it doesn't require photoshop.

  • 07.11.2006 3:09 PM PDT
  • gamertag:
  • user homepage:
  • last post: 01.01.0001 12:00 AM PDT

Tempted not to mention how to "procure" Photoshop... So I wont get Black Listed...

  • 07.11.2006 3:14 PM PDT
  • gamertag:
  • user homepage:
  • last post: 01.01.0001 12:00 AM PDT

Posted by: Pezza
Excellent tutorial, you could probably get it submitted to good tutorials.com. It is very useful, especially for starters. You should update it to make use of the tween function though.

You press the tween button and enter as many frames as you want (the more frames the smoother the animation) and it will, instead of flashing red to white in your example, slowly fade red to white.

This is very useful for animations with glow effects or such.


When I first used the tween option I thought it was just copying the frame that was currently highlighted however many times I desired. Is there more to that or did I just explain all of it?

XD I think I might make a tutorial - good job!

[Edited on 7/11/2006]

  • 07.11.2006 3:19 PM PDT

"I pledge to punch all switches, to never shoot where I could use grenades, to admit the existence of no level except Total Carnage, to never use caps lock as my "run" key, and to never, ever, leave a single BoB alive."

2B || !2B - Why don't you look Inside the Machine?

Well I made this tutorial because I had been asked a lot of questions about doing it, and ImageReady is easier for me to use since that is what I learned to do them in.

Although Fireworks is easier, you can still make great Animations with ImageReady.

  • 07.11.2006 3:42 PM PDT
  • gamertag:
  • user homepage:
  • last post: 01.01.0001 12:00 AM PDT

OMG you just made making gifs easier for me thank you, i used to go into photoshop save all my frames as .gifs and then use the microsoft gif animator for simple animations, a different program for more complicated animations. Thank you i had no idea you could make animations in image ready :)

Standby Me!! < Rate it!!!

  • 08.23.2006 12:35 AM PDT

  • Pages:
  • 1
  • 2
  • of 2