Animated 3D crystal text

here is the output

Let's start with the image itself. It is done with Photoshop 7. The font for the F is Terminator font and the A is Tolkien font.

1: Open a new image: size 100x100, resolution of 72, and white background.

2: Insert your text.

I did my F and A as two separate layers so I can move them around. Both are color white (so I guess you won't be able to see it.

3: We are going to apply Layer styles to both texts.

As you can see, I applied a Drop Shadow and Bevel and Emboss(checking on Contour).

Click to view image

4: Under the Drop Shadow options, set the structure angle to 90 degrees. This will make the shadow equal on both sides and at the bottom. Result is on the image below (text [1])

Now for the chrome like shading.

5: Click on Bevel and Emboss (not the Contour). Under shading, Set the angle to 90 degrees again.

6: Change the Gloss Contour to the one in the image that is highlighted in red (Cone - inverted).

You can move the layers (or transform it) so that it fits the 100x100.

Don't forget to flatten the layers and save as JPG.

In PS 7, to flatten the image:

LAYER --> Flatten Image or you can Merge Visible (Shift+Ctrl+E).

Now to prepare for the Animation.

1: Make 6 copies of the JPG and rename them accordingly (like pic1, pic2,.., pic6). pic 1 will be the one untouched.

The number of copies depend on the length of the animation or how smooth you want the animation to be. It's like playing frame by frame on Swish Since the limit to the avatar file size is 20kb, I limited it to just 6 (a result of trial and error, my friends ).

I wanted to give my image a "chrome-glint" feel so we render the images one by one.

2: Starting with pic 2, Render with Lens flare:

Click to view image

I used the 105mm Prime lens type. Unlike the other two, this flare is mostly white glare. (above image, text [3])

3: Apply rendering to pics 3 - 6.

I imagined how my images would look like frame by frame so I applied the rendering to pics 2 to 6, moving the flare to the right. I also increased the flare brightness in pic4 and decreased it as I went to pics 5 and 6 (fading glint effect ).

4: Save images.

Whew! Ok, this is almost done. For creating the animation, I used Fireworks MX. This is my first time to use it so I kinda fumbled around with it.

1: Open a new file, and set the size to 100x100 since this is the size of your images.

You will see at the bottom part of Fireworks, there is a window where the layers are. Currently there is layer 1. This layer is empty. Pressing Ctrl-R will bring you to the import window. Select pic1.

2: Add layers (a total of 6) like in the image below. Import a pic to each layer by clicking the layer and pressing Ctrl-R <-- Import (i.e. pic2 ---> layer 2, pic3 ---> layer3, and so). [inner image]

Click to view image

Also, when you add layers, the main image window will now show a play button (in red) so you can view the animation.

3: FILE --> EXPORT PREVIEW. Change the image format to Animated GIF.

You can also change the Animation speed in the Animation panel. Click on Export.

That's it. Hope this helps somebody out there.