Making Your Typography Shine

Sometimes you need to create a quick type treatment to dress up a project. This situation applies when flat text just won’t do. You just need an extra something to make a headline or an important word stand out. Photoshop is great for this, and in this tutorial, I’ll show you how to create glossy, dimensional typography in roughly 30 seconds or less. Sometimes it just boils down to the combination of layer styles that you use.

glossy typography example

Step 1: Select Your Typeface

I chose Bariol Bold, because it is bold, and has nice rounded edges. This makes it easy to create a glossy look. Any thick typeface with rounded edges would make sense here.



Step 2: Bevel & Emboss

Select an Inner Bevel and choose Smooth as the technique. The direction is really important here. Choose up if you want your typography to appear to be raised. Down will make it look like it is sunken inward. Set the Size between 10-12, and soften the bevel. Choose a value between 3-5, depending on the size of your typeface. To create the shine and glossy effect, set the angle of the shading to 90°. Altitude is important here as well, because it will determine the overal angle of the shading and lighting.

Step 3:Alter The Contour

Under the Contour setting choose Gaussian by clicking on the down arrow and selecting it from the number of different choices.. This won’t create enough of a gloss shine, but we can alter the points in the contour to make the shine on the text more prominent. Click the image of the contour to bring up the points that make up the curve. Drag them and move them until they look like the example shown below.



Step 3:Create an Inner Shadow

Next, we will create an Inner Shadow. Set the color to #3c1212 and set the Blend Mode to Multiply. Make sure that the angle is at 90°. Set the distance between 10-15. Set the choke to 25 and the size to somewhere between 20-25.

Step 4: Create An Inner Glow

We will be creating an Inner Glow. Set the color to a deep red (#660000). Set the blend mode to Multiply and the opacity to 50%. Set the size between 8-10.

Step 4: Add Satin

Satin is always a good choice when creating a glossy effect. Set the color to red (#ff0000) and set the blend mode to overlay. Crank the distance and the size up close to 40.

Step 4: Choose Color Overlay

Color Overlay has a lot of control over what color your typography effect will look like. Select Red (#ff0000) if you want to match the color from the example. If you want to create the effect using a different color, this is where to see the biggest change. Just make sure to change the colors in the other steps to be based on what you choose here. Leave the blend mode as normal.

Step 4: Create An Outer Glow

To add a soft outer glow to your type, choose a softer tint of your color (#fc4448) and set the blend mode to screen. Lower the opacity to 60%. Set the size to somewhere between 20 and 25px. This is meant to be an extremely subtle effect.

Step 4: Add An Drop Shadow

The idea behind the drop shadow in this effect is to add a subtle shadow that creates the illusion of a decent amount of distance. Use the same tint of red that you used for the Outer Glow, but this time the blend mode is set to Multiply. Lower the Opacity to 70%. Keep the distance at 90° and set the distance to somewhere between 15-20px. Set the size between 10-15px.

The result should be similar to the example shown below. The text is glossy and has a nice shine to the top portion of the text. This typography effect adds dimension, but doesn’t take a lot of time to create.

glossy typography example


It is amazing how quickly that you can create a beautiful typography effect in Photoshop in little to no time at all. Choosing the right combination of layer styles and blend modes can turn your typography from boring and uninspiring to sleek and beautiful.

How long did it take you to create the text effect described above? What type of project would you use this on? Leave your response in the comments section below.

I am a professional graphic designer and web designer with years of experience. I am also an illustrator and Wordpress theme creator and author of this design blog. I write tutorials and build custom websites. I do what I love, and I love what I do! You can: Follow Me on Twitter, Join Me on Facebook, & Or Follow James George on Google+

About Us

Creative Beacon is about teaching you web design, how to run a design business, and growing your revenue and career like never before.


6515 Clinton Hwy, Suite 202
Knoxville, TN 37912