Give Your Icon Some Sparkle

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....

Page 2 - Twinkley Sparkle

 

Tutorials Index

©icondoit