Photoshop Tutorial: How to Create Create Glitter Animations for Your Web Site and Signatures

Putting animated glitter effects onto your web page or into your message board signatures is very simple and can be a lot of fun. In this tutorial I am going to show you how to create a gliiter name. You can use names, messages, or anything else you can dream up. We are going to be using both Photoshop and Image Ready (comes standard with Photoshop) to create this effect.

To start with, you will need to have a "glitter fill" to put into your name or words. Glitter fills are little animated squares of "glitter" that we use to fill the inside of our name with. You can get free glitter fills online by searching for different sites. The web site that I used was http://www.txt2pic.com/glitters/ and I chose a black glitter fill. Pick whatever glitter fill you like and save it to your computer.

To begin, open your glitter fill into Image Ready. You can just right click on the image and choose open with Image Ready. Image Ready will split the picture up into its different layers. Glitter fills are usually three layers but some can have many more. The black glitter fill I chose for this tutorial has three layers. Once the image is open, click the Jump to Photoshop icon on the bottom of the left tool bar to send the image to Photoshop.

Photoshop should open the image with its separate layers. We need to create patterns with each layer of the image. First, make sure your palette layer is open. Go to Window (at the top) and click the Layer tab. Click on the top layer in the layer palette to work on that layer. We need to split these three layers up into different pictures. Go to Select, and check the All tab. This will select the entire image. Now go to Edit and Copy and then to File and New to open a new document. This will open an image the same size as the glitter fill image. Now go to Edit and Paste. This will create a new layer exactly like the layer of the glitter fill. Now, go back to your glitter fill picture and select the "Eye" icon to make the top layer invisible. Click on the second layer to make that active. We are going to repeat our steps by Select, All, Edit, Copy, File, New, and the Edit and Paste to make a separate image of that layer. Repeat this sequence with the third layer (see picture: 1).

Once you have the glitter fill split into three separate images, you can close the original. Click on one of the new images and go to Edit and select Define Pattern. Give this pattern a name. Repeat this step for each image. For this tutorial, I named the images as Black Glitter 1, 2, and 3.

Now that we have our glitter pattern set, it is time to work on the signature name. Open a new document, click the writing tool and write your words. Fatter fonts usually look better with glitters, but you can use any style you choose. Create two duplicate layers of your words so that you have a total of three layers of words (see picture: 3). To do this, go to Layer and Duplicate Layer. We also want our words to have an invisible background, so delete the background by right clicking and deleting it.

Next we need to select our letters. I find this easiest to do by using the magic wand tool, holding down the shift key and selecting each letter (see picture: 4). We are going to fill the letters with our pattern. But first we need to prepare each layer. Click on each layer on the palette and select Rasterize Layer (see picture: 5). Next click on each layer separate and go to Edit, Fill, and select one of the glitter fill images. Do this for each layer using a different glitter fill image each time (you can use the "Eye" icon to make the layers invisible that you are not working on in order to better see what you are doing). Once we have our each layer of letters filled with our glitter patterns, it is time to animate them. Click on the Image Ready icon on the left tool bar to send the image to be animated (see picture: 6).

In Image Ready, you will see a timeline at the bottom. This is what we will use for animating our pictures by creating "frames" of each layer. The first layer will be set already, but we need to change the time. You can use any time you like but .1 second is generally a good time for a glitter fill. On the layer palette, select the "Eye" icons on the layers not shown to hide them so that only one layer is showing. Next click the Duplicate Frame icon. This will create an exact copy of the previous frame (see picture: 7). Go to the layer palette and select a new layer to make it visible (select the "Eye" on the old layer to hide it). Repeat this step for the last layer so that we have a frame of each separate layer (see picture: 8). You can press the play button to see how your animation works.

When everything looks great, we are going to save our animation as a .gif file. Go to File and select Save Optimized As and then give your file a name. And that's it! You now have a wonderful glitter name to add to your web site and amaze your friend with (see picture: 9).