How to Create 3D Icons

It sometimes feels like you have to have some sort of magical skills in order to make 3D icons but I'm here to show you that that is not at all the case! It just requires a little bit of sleuthing to figure out where the highlights and shadows are meant to be!

Needed:

Basic graphics editor! I used Paint Shop Pro, but you can use Gimp too, which is free!

The pictures here show a freely available icon and my rendition of it. As you can see, besides the color scheme, it is nearly identical. And once you have your own pattern, you can create any variation of the icon!

Step 1: Create the Shape of Your Icon

The icon I was trying to recreate was a circular icon, so I created a new vector circle. My default fill was black, but because the icon itself is white, you'll want to make the fill white!

Duplicate this circle, make the center of this new vector clear, and the border, black.

Step 2: Create the Dramatic Edging of the Whole Icon

Gaussian blur is your friend. You will want to select your outer black ring and gaussian blur it to the effect you would like. When you are done with that, you will notice that the blur is on the inside as well as the outside of the icon circle border. You will want to get rid of the outside portion.

The easiest way to do this is to "magic wand" or select the area outside of the vector circle. Then switch to the layer for the gaussian blur and press delete. This will delete the gaussian blur that is outside of the vector circle for that shadowed look!

We will be using this trick a few times for making the icons.

Step 3: Create the Inner Portion of the Icon

Now that we have the outer circle of our icon, we want to work on the different layers. The next one to approach is a blue circle that we see has a few different types of shading elements. The first one we are going to address is the outer shadow that the circle has. Much like the circle we just addressed, the blue one also has a shadow-ed edge for dramatic effect.

After making a vector circle and changing its fill to blue, you will want to duplicate that vector. With the copy, make the center of it clear and the border of it black.

Gaussian blur that border. As before, we do not want any of the blur to appear beyond the blue circle. So magic wand/select the portion outside of the blue circle, switch to the layer for the Gaussian blur, then press delete. You should see the Gaussian blur disappear outside of the blue circle.

Note, this may require hiding the white circle while you work on the blue circle.

Step 4: Create the Larger Brushstrokes

We see that there is yet another circle in the center of the icon and a plus/cross sign. Make the vector shapes for these. For the plus sign, I converted that into a raster. Why I did this will come into play later!

Step 5: Add the Main Top Highlight

If you look closer at the highlights that make the 3d icon look 3d, you'll see that there are some on the top and on the bottom. For the top, create an oval that is white with a white border (I left the black border in the picture just so t hat you could see where the oval was).

Depending on what you think looks better, the highlight can either be just a white oval with transparency, or you can use a white to transparent fade for the fill - that is up to you. I chose to use a white to transparent fill and had to adjust where the white began transitioning to transparent.

This portion may require adjusting alpha settings for what you think looks best.

Step 6: Add the Main Bottom Highlight

This is where you really start to see how neat the icon can look. For the bottom highlight, I created another white fill oval. You'll want to adjust the transparency of this oval, and then, Gaussian blur the circle.

Now you'll see a whitish blur where your circle once was. To seal the deal, you'll want to use the layer effects that your program is capable of doing. In Paint Shop Pro, I added "luminance" layer effects which bring out the glow of the blue and enhance the bubble-feel of the icon.

Also remember to put this layer behind the inner white circle of the icon.

Step 7: Delete the Inner Plus-signed Raster

For this specific icon, I can see that the original icon's plus sign shows the highlights and blue of the layer behind it. This means that the plus sign is actually deleted from the white vector circle.

So before, we had changed the plus sign to a raster. I selected this area, switched to the inner white vector circle, and deleted that area. This gives us a window through the inner white circle through to the blue layer behind it.

You will want to hide the original plus sign by making it invisible, or getting rid of it all together.

Step 8: Add the Bottom Shadow

Of course, another way to indicate that something is 3D, is to give it a shadow. This is particularly easy! Just create a black oval that is roughly the same width as the icon, and Gaussian blur this to your heart's content! Make sure to play it behind the icon so it looks like the shadow is under the icon and not in front of it.

Step 9: Add the Top Subtle Highlight

So now that you have most of the large strokes involved in making this icon look good, we have just a couple of additional details to consider. There are two highlights that are still outstanding. The first is a highlight that creates the whole sphere effect. It's very faint but it is enough that adding it will increase the quality of the icon.

And you already know how to create a highlight! You'll want to create a white circle for the top and Gaussian blur that. Adjust the layer effects for this and the transparency of this layer to get it to the right look.

This brings a highlight to the entirety of the sphere that you've now created.

Step 10: Finish With the Little Details

You may have to adjust some of the layers to get the right glow that you want. In this example, I changed the layer with the bottom highlight so that it was able to impart a glow!

And voila! With a few circles, gaussian blur, and layer magic, you can now easily make your own customizable 3D icons! The only thing you would need to change is the inner white circle and its cutout! Or get rid of the white cutout and put in an icon!