Principles of Glossy Interface Design

Part 1: The Basics.

Let’s do a quick tutorial first; this will get you familiar with some of the basic principles of glossy design.

Create a new canvas with the following settings.

Double click the background layer, a popup window will show up. Press OK to unlock the layer.

Open up the color picker and input these RGB values then click OK

With the layer still selected, press Shift-F5 (or go to Edit > Fill), change the drop down menu to Foreground Color and click OK. This will fill your canvas with an olive green color.

Press F8 to open up the info palette (or go to window > info).

Make sure that your units are set to pixels. If they aren’t, press Ctrl-K (or go to Edit > Preferences > General), select Units and Rulers and change Type to pixels.

Click OK

Press U to select the shape tool. Make sure that the Rounded Rectangle Tool is selected with a corner radius of 15px.

With your eye on the info palette, drag out a shape that is about 200 x 50 pixels.

Name this shape Base

Double-click your shape layer, a color picker will popup. Change your RGB values to 117, 153,163 respectively. Hit OK.

You should have something that looks like this.

Make a new layer above your shape layer.

Press M; make sure that the Elliptical Marquee Tool is selected. Draw an ellipse on top of your shape.

Press Shift-F5 (or go to Edit > Fill)and select White from the drop down list, this will fill your selection with white.

Drag the opacity slider on this layer to 30%.

It should look something like this.

With the transparent layer still selected, hold Ctrl and left click the shape layer you named Base, this will create a selection mask around your shape.

Press Ctrl-Shift-I (or go to Select > Inverse), then click delete. This will delete the remaining white.

You should have something that looks like this. It’s already looking a little glossy.

Select your shape layer (named Base) and then select the little F at the bottom of the layers palette. Select Gradient Overlay from the menu.

Click the Gradient Color Bar to get additional gradient options.

Select the swatch in the top left hand corner, we’re going to modify this a little bit.

With the new swatch selected select the gradient color on the far right and then click in the middle of the gradient to create a new copy of it.

Select the white gradient color on the left and drag it off the gradient bar to remove it.

Drag your new gradient color to the far left, you should now have a solid color.

Double-click the gradient on the right, a color picker should pop up. Click B (for Brightness) and drag the slider all the way up.

The gradient window should look like this now.

Click OK

Then click ok again to exit out of the gradient dialog.

From the Layer Style window click Drop Shadow and apply these settings.

Click OK

You’ve now created a basic glossy button!

Ok in the tutorial we just did we tackled some of the basic principles of Glossy Design. Those principles are:

1. Base Color (Very important)
2. White Transparency (Very important)
3. Gradients (You guessed it, also very important!)

We also added a drop shadow, this isn’t crucial but it helps.

Base Color:
The base color as you might expect is the foundation for the interface. It creates a surface for the gradient and white transparency layer to play off of.

White transparency:
The white transparency is an interesting phenomenon. It simulates specular highlights. Generally the sharper the shape the shinnier the object.

Gradient:
The gradient is what gives the shape it's volume. It simulates depth and creates the illusion of a tangible object.

So remember these two things:

1. Sharp is shiny
2. Gradation is grabbable.

In the real world we are encountering shiny objects all the time. From cars to forks to gumballs. Our mind is very comfortable seeing these things. There are only two things that make something look shiny. Light and surface.

Look at what you just created, notice how the gradation is bright at the top and darker at the bottom? That's because our simulated light source is above the object. That was also the reason that I put the specular highlight (white transparency) there.

So whenever you work with glossy ask yourself these three questions:

1. What color will my shape be?
2. Where is the light coming from?
3. How shiny is my object?

Close the previous project and create a new canvas with a width and height of 250 pixels.

Now using what I just taught you, make something that looks similar to this.

Now let’s make it a bit more interesting.

Double-click your shape layer and select stroke. Click B (for brightness) and drag the slider down a bit. I used these settings.

Press Ctrl and select the shape layer to make a selection mask.

Make a new layer above your shape layer and select that layer.

Press G and make sure that the gradient tool is selected. Also check to make sure that you have a white gradient going into transparent.

Inside your new selection draw a gradient going from the top to the bottom. Try this a few times until it looks close to the picture. (notice the selection mask)

The effect is subtle. Notice that this gradient made it look slightly round.
Remember that sharp is shiny and gradient is grabbable.

Ok now we’re going to add some specular highlights, make sure that the white gradient that you just applied isn't too bright otherwise we won’t be able to see them. Remember color is relative.

Take the pen tool and make some white shapes at spots where the light is brightest (usually at the corners and edges).

Take a look at what I did below. Notice how the shape starts to pop out a bit?

Ok so this is a good start but I think it still looks a bit flat. . let's do something about that.

Double click your shape layer and select the Inner Shadow option.

Apply these settings.

Your object should look like this. Notice how the added shadows give it more depth? Also note that the light is coming from the same direction.

It has some good depth but we can do one more thing to really make it pop out. Go to the Inner Glow option and apply these settings and press OK

Notice the ring that appears around it. This is simulating back light, so the light source is coming from the top and slightly behind. Quite nice if you ask me.

Your final result should look like this.

Go ahead and experiment with the glossy effect, get comfortable with it. Add some additional effects such as scan lines, text, logos etc.

So in conclusion remember that glossy effects are a simulation, an illusion of light. They are effects based on physics that exist in the real world. Always keep in mind the color and light source.

I hope you found this tutorial helpful, if you have any questions or suggestions feel free to contact me.