Post by VanillaOrchids on Jun 19, 2008 14:00:14 GMT -5
OK, I wrote up this tutorial and posted it (Jan. 4, 2006) on Proboards Support for someone who was wondering how to do this. Thought I'd go ahead and post it here since the thread it's in on PBS is no longer visible to regular members because when they decided to start fresh with the Graphic Design Discussions board they just moved the whole board out of public view and created a new board. I happened to still have the thread bookmarked or I probably wouldn't be able to access it anymore either. ;D
Hopefully by the end of this tutorial, you will end up with something like this.
Before you do anything, the best thing to do is download a glitter file. Here is one I like to use.
Save the glitter file then open the file in Image Ready to separate the layers.
Transfer the layers to Photoshop. Once in Photoshop, click EDIT > DEFINE PATTERN. That will set the visible layer as a patten for your BUCKET tool. Select each layer of the glitter file and set it as a PATTERN by repeating the DEFINE PATTERN process. Once you have all three layers of the glitter set as patterns you are ready to begin. Basically any glitter file will work though some glitter files have a lot more animation frames than the three this one has.
You can now close the glitter file animation as you no longer need it.
In Photoshop, open up a new transparent file. In this example, I started with a 500x200 image. That just gives you extra space to decide what size text you want to add.
Add text and make sure that Anti Alias is set to none.
Best to choose a font that has some thickness to it. You can see the animation in it better than a thin font.
Now DUPLICATE your text layer.
i29.photobucket.com/albums/c255/lukenlorelei/Tutorials/glittertut1.gif
RIGHT CLICK on your first text layer and select RASTERIZE.
Hold CTRL (Control key) and left click on the now rasterized text layer. This selects the text in that layer.
Go to SELECT > MODIFY > EXPAND and select 2. (Two is the number I chose to be the stroke around the text.)
i29.photobucket.com/albums/c255/lukenlorelei/Tutorials/glittertut2.gif
Your image should then look like this:
i29.photobucket.com/albums/c255/lukenlorelei/Tutorials/glittertut3.gif
Take the paint brush and go over the selection with whatever color you want to be your stroke color. For this example, I used black.
Hold CTRL (Control key) and left click on the duplicated text layer. Create new layer.
At this point you want to select the color that you want your text to be. For me, I chose a gradient. If you just want to choose a solid color then take the bucket tool and fill it with the color of your choice. Or use the gradient tool and fill the selection with a gradient.
i29.photobucket.com/albums/c255/lukenlorelei/Tutorials/glittertut5.gif
Now HIDE the layer you just added color to.
With the selection still active, go back to your DUPLICATED TEXT later and create a new layer above it.
Select the BUCKET tool and switch to PATTERN FILL. From the pattern window select the first of the three glitter frames. Fill the select with glitter.
Create new layer, change to the second glitter frame in the Pattern Fill window and fill the selection. Repeat once more for the third glitter frame, being sure to select the third glitter frame in the Pattern Fill window.
i29.photobucket.com/albums/c255/lukenlorelei/Tutorials/glittertut7.gif
Now, click on the color layer that you hid earlier and change the blend mode to what you like best. For this I changed it to COLOR.
i29.photobucket.com/albums/c255/lukenlorelei/Tutorials/glittertut8.gif
You can now do one of two things. You can use the selection tool and crop out your text to remove excess space OR you can CTRL + click on your first layer (the layer which you expanded the text) and then click IMAGE > CROP.
i29.photobucket.com/albums/c255/lukenlorelei/Tutorials/glittertut10.gif
Now, before we send what you have to Image Ready, go back to your layers and HIDE the second and third glitter layer. Leave only glitter layer 1 visible.
i29.photobucket.com/albums/c255/lukenlorelei/Tutorials/glittertut11.gif
Jump to Image Ready
Duplicate the animation frame two times, so that you have a total of three frames of animation.
i29.photobucket.com/albums/c255/lukenlorelei/Tutorials/glittertut14.gif
Click on the SECOND frame of animation then go over the layer palette and make glitter layer #2 visible. Then click on the THIRD animation frame and then make glitter layer #3 visible.
i29.photobucket.com/albums/c255/lukenlorelei/Tutorials/glittertut15.gif
You can play the animation to see if it looks good to you. If it's too fast, you can change the speed.
i29.photobucket.com/albums/c255/lukenlorelei/Tutorials/glittertut16.gif
Then go to FILE > SAVE OPTIMIZED AS. It should want to save the file as a GIF. If not, then you need to check that the OPTIMIZE window has GIF selected as the output type.
You're done.
I hope this helps and if you have any questions about this, just ask.
NOTE: The reason that I chose to duplicate the text layer, rasterize one and expand it just to create a stroke and not use the stroke feature is because even though the Anti Alias is set to NONE when you add a stroke and then save it as a GIF, you will end up with lighter color stray pixels around the edge of the stroke. So in fact, doing it this way keeps the edges clean. I learned that the hard way.
Hopefully by the end of this tutorial, you will end up with something like this.
Before you do anything, the best thing to do is download a glitter file. Here is one I like to use.
Save the glitter file then open the file in Image Ready to separate the layers.
Transfer the layers to Photoshop. Once in Photoshop, click EDIT > DEFINE PATTERN. That will set the visible layer as a patten for your BUCKET tool. Select each layer of the glitter file and set it as a PATTERN by repeating the DEFINE PATTERN process. Once you have all three layers of the glitter set as patterns you are ready to begin. Basically any glitter file will work though some glitter files have a lot more animation frames than the three this one has.
You can now close the glitter file animation as you no longer need it.
In Photoshop, open up a new transparent file. In this example, I started with a 500x200 image. That just gives you extra space to decide what size text you want to add.
Add text and make sure that Anti Alias is set to none.
Best to choose a font that has some thickness to it. You can see the animation in it better than a thin font.
Now DUPLICATE your text layer.
i29.photobucket.com/albums/c255/lukenlorelei/Tutorials/glittertut1.gif
RIGHT CLICK on your first text layer and select RASTERIZE.
Hold CTRL (Control key) and left click on the now rasterized text layer. This selects the text in that layer.
Go to SELECT > MODIFY > EXPAND and select 2. (Two is the number I chose to be the stroke around the text.)
i29.photobucket.com/albums/c255/lukenlorelei/Tutorials/glittertut2.gif
Your image should then look like this:
i29.photobucket.com/albums/c255/lukenlorelei/Tutorials/glittertut3.gif
Take the paint brush and go over the selection with whatever color you want to be your stroke color. For this example, I used black.
Hold CTRL (Control key) and left click on the duplicated text layer. Create new layer.
At this point you want to select the color that you want your text to be. For me, I chose a gradient. If you just want to choose a solid color then take the bucket tool and fill it with the color of your choice. Or use the gradient tool and fill the selection with a gradient.
i29.photobucket.com/albums/c255/lukenlorelei/Tutorials/glittertut5.gif
Now HIDE the layer you just added color to.
With the selection still active, go back to your DUPLICATED TEXT later and create a new layer above it.
Select the BUCKET tool and switch to PATTERN FILL. From the pattern window select the first of the three glitter frames. Fill the select with glitter.
Create new layer, change to the second glitter frame in the Pattern Fill window and fill the selection. Repeat once more for the third glitter frame, being sure to select the third glitter frame in the Pattern Fill window.
i29.photobucket.com/albums/c255/lukenlorelei/Tutorials/glittertut7.gif
Now, click on the color layer that you hid earlier and change the blend mode to what you like best. For this I changed it to COLOR.
i29.photobucket.com/albums/c255/lukenlorelei/Tutorials/glittertut8.gif
You can now do one of two things. You can use the selection tool and crop out your text to remove excess space OR you can CTRL + click on your first layer (the layer which you expanded the text) and then click IMAGE > CROP.
i29.photobucket.com/albums/c255/lukenlorelei/Tutorials/glittertut10.gif
Now, before we send what you have to Image Ready, go back to your layers and HIDE the second and third glitter layer. Leave only glitter layer 1 visible.
i29.photobucket.com/albums/c255/lukenlorelei/Tutorials/glittertut11.gif
Jump to Image Ready
Duplicate the animation frame two times, so that you have a total of three frames of animation.
i29.photobucket.com/albums/c255/lukenlorelei/Tutorials/glittertut14.gif
Click on the SECOND frame of animation then go over the layer palette and make glitter layer #2 visible. Then click on the THIRD animation frame and then make glitter layer #3 visible.
i29.photobucket.com/albums/c255/lukenlorelei/Tutorials/glittertut15.gif
You can play the animation to see if it looks good to you. If it's too fast, you can change the speed.
i29.photobucket.com/albums/c255/lukenlorelei/Tutorials/glittertut16.gif
Then go to FILE > SAVE OPTIMIZED AS. It should want to save the file as a GIF. If not, then you need to check that the OPTIMIZE window has GIF selected as the output type.
You're done.
I hope this helps and if you have any questions about this, just ask.
NOTE: The reason that I chose to duplicate the text layer, rasterize one and expand it just to create a stroke and not use the stroke feature is because even though the Anti Alias is set to NONE when you add a stroke and then save it as a GIF, you will end up with lighter color stray pixels around the edge of the stroke. So in fact, doing it this way keeps the edges clean. I learned that the hard way.