Today I will be using.
Adobe Photoshop CS3.
Lets start
Animated Gif's can only be seen in Firefox 3 and Opera 9.5. If you use any different browser such as Internet explorer then it will only show the first frame of the Picture and will stick at that frame.
First, if you're not using Firefox 3, I can't help you. If you are in fact using Firefox, click here to download the Firefox Add-On that will allow you to actually make the animated Gif's, But we are going to use Photoshop for this.
First off lets open up Photoshop, then make a new image of the size of;
Width-208.
Height-320.
Now that we have done that lets rotate it by going to:
Image>Rotate Canvas>90CW or 90CWW.
After that our image is turned around 90 degree's this making it better for text.
Now lets select our font tool.
Now draw a box that covers the canvas, if its bigger then the canvas in some area's smallen it down a little bit.
Now lets type in "hello." and make sure that its set to be in the middle.
you can do this by pressing this Icon.
Now that you're text is centered lets put it in the middle by pressing "Enter" once then type in whatever text you want and It'll be centered straight away with dead accuracy!
For example, mine looks like this now.
Now that we have done our text.
I have chosen the colour's:
"Red."
"Green."
And "Blue".
But we want these gif's to be invisible so that only the text appears and not the white background, so to do so lets Hide/delete our main background
Now with our background deleted we can now move onto making different colours.
Here we have one layer only, now lets Hover our cursor to the Layer box.
Lets Select the Image whilst holding "ctrl" key, this will then select all the pixels on the canvas.
Now that we have that done lets make 2 duplicates of the layer.
With these two duplicates we can colour them in, like before; "Select the Image whilst holding "ctrl" key". now lets go to our colour pallet.
lets select a colour we would like to use, in this case; "Green".
Now Make sure we still have the pixels in our layer selected and that the layer is also Rasterized. if you do not know how to rasterise a layer just select a layer, then "right click" with our mouse and select Rasterise layer in the drop down box.
With out razterised lets fill in our text with colour! you can do this by holding down "shift" then "Backspace". this is a hotkey to make the fill prompt pop-up.
Now lets fill it in with our colour.
You can also use the drop down box under the Section "Contents" and select "foreground colour" "Background colour" and " Colour". Colour will then make a box popup asking for the colour you want, so instead of using the pallete you can use this and select you're colour.
When finished with the options you want, select "ok".
You're text will now be coloured in a different colour, do the same with the other text. but first move the Layer you just filled in above the middle like this.
Also do the same with the different layer, but underneath the first layer.
This will help us with animation making it easier to find our text we want to move.
Like so do the same with filling as well, but a different colour, like red for example...
you're final result should look something familiar to this.
Now that we have that done lets open up our animation box. you can do this by:
Now we have our animation box open lets learn how to animate in photoshop. I`m going to leave you on you're own now for animation, but here is a tutorial on how to make animations in photoshop.
To save our animated Gif's we will goto File>Save for web and devices.
then this will popup.
Now, make sure that you're image to be saved is a Gif 128 dithered. with transparency checkbox ticked and at the bottom there's a setting for animation, set the Loop forever check box to be checked, this will then make it looped.
Okay now, lets save it!
Now its saved you're final result should look similar to this.
