Glossy Reflective Icons

The idea behind a lot of reflection adobe photoshop tutorials is creating an object in your document, and then adding some white highlights along the top to reflect an outer environment.

Here we will follow a similar, yet totally different method of designing a similar effect. We will still simulate a reflective surface on our object, but rather than reflect an environment at the top, we will reflect a floor like setting.

Let's Get Started

For teaching purposes, I will create a document with the size of 300x300. You may wish to do the same so that it is easy to follow along with the tutorial. Fill your document using the paint bucket tool ( ) with a dark shade of Gray.

Now we need to create our basic shape. Their are a variety of ways we could go about doing this, but I suggest using the pen tool to create a small blob of some sort. Whatever you do, whether it be with the marquee tools, brush, or pen tool, be sure to do it on a new layer. Make your object a nice shade of blue, or if you would like, use another color of your choice.

Shading and Highlights

Pull out those Dodge and Burn Tools, and start shading your object! Before starting, be sure to rasterize your shape if you used the pen tool to create it. Begin with a large, soft burn tool, as shown in the diagram below:

Brush around the bottom left side of your shape. Start with this large burn brush, and move down to a smaller one to finish up along the edges. You can see kind of what I have done in the picture below:

Now, repeat this process with the Dodge tool along the upper right of your shape:

Now turn your shapes outline into a selection. To do this, hold Ctrl and click on the shape layer in the layers panel. Contract the selection by 2-3 pixels:

Using the Elliptical Marquee Tool, substract from your selection a good portion of your current selection. To do this, hold Alt, and then make a selection around the area you would like to subtract.

Create a new layer, and fill this selection with white. Set the opacity down to somewhere around 25%. Set this to Soft Light.

Now lets add an inner shadow with the following settings (you may wish to experiment here, as different settings may look better on different images.

Now, pull out a small dodge brush again, and for the final part of your lighting, add a bright spot in the top right like shown in the diagram below:

And that concludes our tutorial for glossy reflective icons. Play around with the final result to create something unique!

Enjoy!