Exploding Icon

In this tutorial I will show you how to make those "NEW!" icons that you see all over shopping magazines and in advertisements for new products!

This tutorial covers more than that though, it will cover some basic uses of the "Polygonal Lasso" Tool as well as advanced uses of a layer's "Blending options".

Shall we begin?

Setting Up in Photoshop

Step 1. Open up Photoshop and create a new image. Size doesn't matter, but I used the following settings:

The Polygonal Lasso Tool

Step 2. Select the "Polygonal Lasso" Tool.

Step 3. Click from point to point to make the outside design of the icon, like so:

(Click at "Click 1", then to "Click 2", then "Click 3" and on and on as shown in the picture)

Go all the way around and click the starting point (or double click) to close the selection.

Step 4. Press ALT+Backspace, this will fill the selection with your foreground 

color (which in my case is black). So now we have this:

This is our outline, it's all black to make color editing easier later if you would like to duplicate it. I will show you what I mean later.

Now press CONTROL+D to deselect the black outline.

Step 5. Right click the layer with the black outline on it and select "Blending Options".

This will open a new window, and in this window is where we will work our magic.

Step 6. The first thing we want to do is change it's color, to do this, inside the "Blending Options" window, select "Color Overlay".

[Blend Mode] - Just leave this at "Normal" for this tutorial.
[Color] - The color can be anything you wish, I used #fffc00.
[Opacity] - This slider determines how visible the image is, the lower the Opacity percentage, the less visible the image is.

Now we have this:

Looking better...

Step 7. Now, lets add a border, while still in the "Blending Options" window, select "Stroke". Below I explain how to use it.

[Size] - The size of the border in pixels.
[Position] - Inside, Outside, or Center. "Inside" has a sharper border effect so I selected that. If you would like it more rounded around the edges, select "Outside" or "Center".
[Blend Mode] - Keep this Normal.
[Opacity] - This slider determines how visible the image is, the lower the Opacity percentage, the less visible the image is.
[Fill Type] - You can between Color, Gradient or Patter. Each one is self explanitory, it colors the border accordingly.
[Color] - The color of the border (Fill Type: Color)

Now, we've got a border!

We're getting there...

Step 8. Here in Step 8, we will add a shadow to give the appearance of depth. So in the "Blending Options" window, select "Drop Shadow".

[Blend Mode] - Multiply makes the shadow "Multiply" with layers under it, giving it more of a shadowy/transparent look.
[Opacity] - The overall transparency of the shadow. Use 100% for a non-transparent shadow.
[Angle] - The angle at which the light is coming from. The way it is placed in the picture, the light is coming from the top-left, which of course makes the shadow cast on the opposite side. This can be easily changed.
[Use Global Light?] - Keep this checked if you wan't it's light-angle settings to be the same for all other layers that have shadow effects, but uncheck it if you want the shadow to go in another direction different from other layers. I usually just keep it checked.
[Distance] - The distance between the object and it's shadow, the higher the distance, the image looks higher.
[Spread] - The spread of the shadow.
[Size] - The size of the shadow. Different from [Spread], but I can't explain how...
[Contour] - Different effects for the shadow, you can play around with this, but I kept it default.
[Noise] - Makes the shadow speckally... try it out, but I don't like it

Got all that? Now we've got some 3D-ish depth with our image.

Step 9. Lets add some text. Select the text tool  and click somewhere on the image to add some text. (i've added a little background image just to make things be seen easier, such as shadows).

Step 10. Since that seems a little plain, press CONTROL+T to enter "Scaling Mode", once in there, right click and select "Rotate".

Now rotate it to how you want it. To move the text, just hold-click in the center of the transform border.

And that's it! Now you have one of those fancy little exploding icons you can add to your comics (if you like to make comics) or your websites (if you get some new submission of something.

These icons can say whatever you wish, be creative. Make your own road signs if you want to. This tutorial explains all you need to know to do just that.  You do not have to stop here though!  Continue to the next page to learn how to add some more styling effects to it!

Our Result So Far:

Adding More Style Effects to the Icon

This part of the Exploding Icons Tutorial will show you how to make your icons even more attractive with some interesting style effects.

Step 1. Here is where we have left off:

Step 2. Right click the layer and select "Blending Options".

Step 3. Click "Gradient Fill" and use these settings below. I listed the colors I've used.

[Blend Mode] - Keep normal
[Opacity] - The layer's transparency
[Gradient] - The gradient you'll be using. Click on the colors to open the gradient edit window. I've listed the 2 colors I used, it's a default gradient in photoshop cs2.
[Style] - The type of gradient, linear for a simple gradient. Radial for a rounded gradient etc.. You can play around with this, but i used linear.
[Angle] - The angle of the gradient.
[Scale] - The size of the gradient on the layer.

Now we have this:

The gradient adds a more dynamic color to our icon, giving it a much nicer appearance.

Step 4. Now what if we want the icon to stand out more than it does with just a shadow? Then that's when we use some glowing... In "Blending Options", select "Outer Glow".

[Blend Mode] - I've set t to Screen this time (default). This makes it a little transparent, and whatever layer behind it will brighten a bit.
[b][Opacity] - The glow's transparency.
[Noise] - Makes the glow look pixelated.
[The COLOR] - You can pick a single color or gradient
[Technique] - Makes the shadow look more soft, or more precise.
[Spread] - The spread of the glowing effect.
[Size] - The size of the light of the glow... different from spread.
[Contour] - Different effects for the glow.
[Range] - The range of the glow effect.
[Jitter] - Makes it look more motionful... nearly noticeable most of the time.

Got all that memorized? Now, we have this (I darkened the background image)

Looking nice eh?

Step 5. Now, it looks fine the way it is, but using some Bevel and Emboss, you can make your art look a bit more 3D. Although it is not required, it can be a good addition.  Check it out... In "Blending Options", select "Bevel and Emboss".

[Style] - I chose Emboss because I like the look of "Rising Up" from the webpage. You can mess with this and do whatever.
[Technique] - I picked smooth... doesn't really matter
[Depth] - Now this does matter, the higher the depth, the deeper the emboss.
[Directions] - [Up] or [Down] - Picking down will do the opposite of what you want (lighting wise), so pick up.
[Size ] - The size of the bevel
[Soften] - The softness of the layer. (makes a harder or softer light reflect)
[Angle and Altitude] - Set this accordingly to how strong and far you want the light source. The dot in the middle is the layer you're working on.
[Highlight and Shadow mode] - Change the colors and set separate blending options.

Now we've got a very fancy NEW icon which can give the appearance of some 3D effects!

Now you should not only be able to make those icons, but also use almost every single one of the Blending Option effects and know exactly what each and every slider and dropdown box does.

Apply patters with the pattern overlay options, or add an inner glow for more of a outlining gradient effect.

Here is another example of what can be done!

Good Luck!