Who says you need Cinema 4D, 3DSMax or even Illustrator to create a simple 3D icon? In this tutorial, you’re going to learn how to do it in Photoshop with the help of layer masks.

The main point of this tutorial is to demonstrate how we are able to apply semi-realistic lighting and shadows in Photoshop [omitting the need for 3D manipulation tools]. Note that we used the term "semi-realistic", we wanted to give the illusion of a 3D object, at the same time keeping the illustration effect.

In addition, the variety of perspective we are capable of achieving solely in Photoshop is of course meer. Do take advantage of the Bevel & Extrude feature in Adobe Illustrator. Nevertheless, aside being able to give reasonable lighting to the icon in Photoshop, we were also able to complete impression of a faux 3D object — only with the use of Photoshop.

Preview

1. Create a new Photoshop document.

Create a new 512 pixels by 512 pixels Photoshop document, the standard maximum size for application icons.

2. Facebook Logo Outline

To facilitate the creation process i.e., so you wouldn’t have to draw your own Facebook logo, download the Facebook Logo Vector Outline in .AI format here: http://j.mp/facebookLogoVectorOutline

Copy the vector into your clipboard, CTRL or CMD + C.

3. Paste the Facebook Logo Vector Outline into Photoshop as a Smart Object.

Paste the vector into the newly made Photoshop document, CTRL or CMD + V.

Select Smart Object in the dialog, press OK then press enter [to get rid of the resize tool].

4. Set up the Gradient Overlay – First gradient.

The main difference of this screenshot from the previous screenshots is the background that has been pasted in. Don’t worry, that’s not part of the tutorial, it’s there just to make things look better.

Right click on the layer with the logo outline and select Blending Options.

On the left side of the panel, tick the box Gradient Overlay.

Set the first gradient slider to the color #00225b.

4. Set up the Gradient Overlay – Second gradient.

Set the second gradient slider to the color #006ed5.

5. Set up the Stroke color.

Tick the Stroke box below Gradient Overlay.

Size: 1px.
Position: Outside.
Blend Mode: Normal.
Opacity: 100%.
Color: #00103e.

6. Set up the Inner Glow.

Tick the Inner Glow box.

Blend Mode: Overlay.
Opacity: 100%.
Noise: 0.
Color: #ffffff.
Technique: Softer.
Source: Edge.
Choke: 0.
Size: 2px.

7. Set up the Inner Shadow.

Tick the Inner Shadow box.

Blend Mode: Overlay.
Color: #ffffff.
Opacity: 100%.
Angle: 120 degrees.
Untick the Use Global Light box.
Distance: 1px.
Choke: 0%.
Size: 0px.

8. Create the Perspective.

To create the bevel of the icon, duplicate the layer with the logo outline [that now has the styles shown above implemented].

(1) Move this newly duplicated layer to the right to create the 3D illusion.

(2) Move this newly duplicated layer below the original layer.

(3) On the duplicated layer, click the eye icons on Inner Shadow, Inner Glow and Stroke to uncheck them. We only want the Gradient Overlay showing on the duplicated layer.

Let’s call this layer the "bevel layer".

9. Paint the Shadows – 1.

(1) Duplicate the "bevel layer" we’ve made in Step 8.

Let’s call this newly duplicated layer the "shadows layer".

(2) This time, uncheck the Gradient Overlay on it by clicking the eye icon next to it.

Or we can simply right click on the "shadows layer" and choose Clear Layer Style (we will lose the layer style). It’s personal preference.

(3) The color of the icon on the "shadows layer" should be black.

(4) Make sure have this layer selected and click on the Set Vector Mask icon below, its icon is a rectangle with a circle inside.

(5) Then make sure you have the layer mask of the "shadows layer" selected, not the layer itself.

10. Paint the Shadows – 2.

Again, make sure you have the layer mask selected of the "shadows layer" selected.

Choose the Brush Tool.

Make your foreground color #000000.

With the Brush Tool [or the Color Fill Tool], paint all over the "shadows layer" to hide all the black so that all that is revealed is the blue gradient of the "bevel layer". You will know why we do this in a second.

11. Paint the Shadows – 3.

Select the Brush Tool.

Make your foreground #ffffff.

Ensure you select the layer mask on the "shadows layer" created in Step 9.

With the Brush Tool, paint the corners of the icon on the "shadows layer" with #ffffff to reveal shadows.

The reason why we cleared all the black color in Step 10 was so that we would have a more natural approach of painting shadows.

We could easily use the Brush Tool loaded with the color #000000 to hide the shadows and start there but it would rather seem as if we were painting highlights not shadows.

If we do it this the other way around, it would seem as if we were painting shadows [which is what we're aiming for], instead.

To achieve best results, it’s best you study how lighting and shadows fall onto your household objects.

12. Paint the Shadows – 4.

13. Paint the Shadows – 5.

14. Paint the Highlights – 1.

With the same technique used above regarding layer masks from Step 9 to Step 13, let’s paint some highlights on the front of the icon.

The process is similar to that used in Step 10.

Duplicate the first layer we made in Step 3. This newly duplicated layer will provide the highlights on the [front] face of the icon. Let’s call it the "front highlights layer".

Right click on this "front highlights layer" and choose Clear Layer Style. The color would only be #000000 or black.

Right click on it again and choose Blending Options.

Tick the Color Overlay box and choose the color #ffffff or white.

The color of the icon should now be white.

With the "front highlights layer" selected, click the Set Vector Mask icon below to set a layer mask on this layer, its icon is a rectangle with a circle inside.

15. Paint the Highlights – 2.

Make sure you have the layer mask selected of the "front highlights layer" selected.

Choose the Brush Tool.

Make your foreground color #000000.

With the Brush Tool [or the Color Fill Tool], paint all over the "front highlights layer" to hide all the white so that all that is revealed is the blue gradient of the front face.

Select the Brush Tool.

Make your foreground #ffffff.

Ensure you select the layer mask on the "front highlights layer".

With the Brush Tool, paint the front face of the icon on the "front highlights layer" with #ffffff to reveal highlights.

Final Product

And that’s all there is to it.

I hope you enjoy it, and if you have any questions please leave a comment below.

Written by Alexis Brille

Project Manager, UI/UX Engineer, Brand Identity Designer, Icon Designer, Lecturer, Author, Musician, Street Photographer. Get in touch with her here or follow her on twitter at @kaypearl