- Zee JollyRoger
- |
- Exalted Mythic Member
"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]