Create 3D Icons using Simple Techniques

I have noticed a lot of 3d looking icons on sites lately and I realized that they use simple techniques to achieve some nice effects. I thought I would write a tutorial on simple ways to create some of these effects.

I am going to start out with a 300X300px canvas for plenty of room
to work on.

First grab your elliptical shape tool and just draw a circle on your canvas whatever color you want, I am using default black.

Next go into your blending options:

Color Overlay (use a dark bluish color):

Stroke:

The colors I used for the stroke are: #676767 and #C0C0C0.

Now you should have something like this:

Nothing spectacular yet but we will get there.

Grab your elliptical shape tool and choose color white and draw a circle over top of your other one in a new layer but don’t cover the whole circle,
leave some edges showing:

Now grab your eraser tool and choose a 200px sized soft brush:

We are going to erase parts of the circle we just made so place your cursor over top of the circle about here:

Then while holding down your mouse button move your cursor from left to right until you get something like this:

After that I set the opacity of what I just erased to 80%.

Guess what we are going to draw yet another circle, but really its more of
an oval shape.

Grab your elliptical shape tool again, still using the color white and draw an oval like shape in a new layer like this:

Get your 200px eraser tool again with the same brush and use the same erasing technique used on the previous one except move your mouse in an up and down motion.

Now duplicate that layer, rotate it 180 degrees and move it to the top of the
icon:

After that all you need to do is start a new layer, get your brush tool with the color white, 100px size and put a spot on the top right of the layers
we just made:

We are going to do the same thing again except with a 45px brush and the
bottom left corner:

That pretty much finalizes the simple techniques you can use to add 3D type depth to objects in photoshop, really simple but has a cool effect.

I showed you the simplest shape to use this technique on, but I am going to make a few others to show you so you can get an idea on other ways to use
this.

I will show you a quick way to give the object a cool shadow to make it look
more real.

Just make a small oval shape underneath your object like this:

Apply a gaussian blur about 10px and you should have this:

You can also put an image inside the shape so it looks like there is something
inside the orb, an example:

Here are some more icons I made real quick using these techniques:

By John Overbee

John Overbee is a graphic designer for the iEntry Network.

Leave a comment