It's easier than you might think to give your icons some flash
and sparkle. In this tutorial, we will learn how to do these two
effects:
Glittery |
Twinkley |
I am going to assume you have done the first two tutorials (see
tutorials index) and will understand
the terms I use. If there is something you don't know how to
do, it will probably be covered in one of the first two tutorials.
First, we will do the glittery butterfly icon.
I use this effect often. I have used it for Fairy icons, to
simulate the sparkle of sun on water, or to simulate sequins
on a dress, just to name a few. It works best for the sparkles
to be placed over dark areas. Sparkles don't show up well on
white or pale colors like some yellows, so pick your base accordingly.

Start with your base on the bottom layer in the
layer palette. Click on the new layer icon 3 times to make three
new transparent layers above the base. In the toolbar, double
click on the hand tool at the bottom of the palette, which will
make your icon as big as will fit on your screen.
Above is how your layer palette should look now,
and your base image should be blown up as far as your working
space will allow.
Next, make sure your colors in your toolbar are
black and white, with white being the foreground color and black
being the background color. Select your pencil tool, and give
it a one pixel brush. When I do this effect, I start at the
top transparent layer and work my way down. You may find a method
that works better for you, be sure to experiment. Remember,
with photoshop, there are always many different ways to accomplish
each task. My way may not be the right way for you.
Starting with the top layer and the pencil tool,
I begin placing white dots randomly over the area I want them
to be, in this case over the butterfly wings. I don't want to
place too many clumped together, and on this image, I want to
be a little careful to avoid certain areas, like the black lines
that divide the colors. Depending on your taste, there could
be such a thing as too much sparkle, so you may want to place
a few sparkles on each layer, and keep rotating among the three
layers. The trick is to keep the sparkles fairly even on each
layer.
This
is what my icon looks like now, with all three sparkle layers
turned on. Click the thumbnail to the left to see a larger image.
You can see now that the sparkles are fairly evenly
divided across the butterfly. Now is the time to turn off the
layers, then turn them back on one at a time to check if the
sparkles are fairly evenly divided across each layer. If you
have one layer with many sparkles, and one with few, it will
be sort of lopsided when you animate it.
When you have it how you like it, add text on
a new layer, if you want. Think of stationary, un-animated text
for now. Later you can practice with blinking text as well as
sparklies, but for now, let's just work on the sparklies. When
you are done with text, add a border on a new layer. Mine isn't
going to have text, and just a plain one pixel border because
I want attention drawn to the sparkling wings.
Now, turn on the background layer, the border
layer, and one sparkle layer, then jump to ImageReady. This
animation will have three frames. Each frame will have the butterfly
layer and the border layer. (Oh, and the text layer, if you
have one.) Then, the first frame will have the first layer of
sparkles, second frame should have the second layer of sparkles,
third frame, third layer.

(click for a larger image)
I like to preview the animation at 'no delay',
0.1 and 0.2, but with this kind of sparkles, I almost always
end up going with 0.1. Save image as .... name it and save it
as a .gif, and you're done!
Hints, Tips, Ideas
*You can make longer marks instead of one pixel
to get a rain effect
*You can put your dots on, then give them a gradient overlay
for a different effect
*Instead of using white, you can use a lighter color of the
shade the sparkles are going on. For example, if it's a dark
blue background, you can use pale blue sparkles instead.
*You can lower the opacity on the sparkle layers for a less
bright sparkle
*If, when you are animating it, it doesn't sparkle evenly, sometimes
just changing the frame order will help. You can just click
and drag a frame to a new location.
The next page covers a (maybe) more subtle sparkle..
and a mini-tutorial about brushes....