Photoshop Glass Effect Tutorial

glass effectUsing Photoshop to make transparent letters in a glass effect isn’t that hard once you have some direction on how to do it.  It is highly advisable to take a class on working with Photoshop for graphics when you need to make banners or graphics for a website.  Without a class you are doing yourself a real disservice and you are making your website look awful.  If it is worth doing, then it is worth doing right! A class like Steve Cherubino’s online graphics class “Graphic Design for Entrepreneurs…Who Can’t Draw” is an excellent and really inexpensive way to get started.

Creating the Glass Effect on Text in Photoshop

glass effect 1

Create a new 500px x 400px workspace.  Go to Edit>Fill and then click on the drop down under “use” on the fill screen select Pattern. Then select a pattern that you like. It is best if you do a dark, dramatic pattern. The one I selected for this tutorial is too light. Select a nice, thick text to use and write your word.  The color you use for the text doesn’t matter, it won’t have any effect on the outcome.

Let’s Get Started Making Glass

glass effect 2

First go to Layer>Layer Style>Drop Shadow.            Click on Blending Options and change your “fill” to 0%.  This is what will make your letters transparent even though they will have a color.

glass effect 3

Next, click on “Drop Shadow” and make sure your blend mode is Multiply, Opacity 94%, angle -167, Distance 5px, Spread 0%, Size 13px, Contour Linear, Noise 0% and make sure Layer Knock Out is checked.

glass effect 4

Click on “Inner Shadow” and make the following settings: Blend Mode Normal, Opacity 75%, Angle -167, put a check on Global Light, Distance 8px, Choke 11%, Size 4px, Contour Linear, Anti-Aliased unchecked and make Noise 0%.

glass effect 5

Click on the “Inner Glow” and make the following settings:  For Blend Mode use Screen, Opacity 75%, Noise 0%, click on the Gradient Color box and select a color.  I’m using a powder blue that is #6ce6f1. Use the Technique called Softer, click on Edge, have Choke at 0% and Size 27px. Contour should still be Linear, but select Anti-Aliased.  Make the Range 50% and Jitter 0%.

glass effect 6

Click on “Bevel and Emboss” and use the Inner Bevel Style and Smooth Technique.  Depth should be 100%, Direction Up, Size 4px, Soften 2px.   For Shading use Angle -66, have Global Light unchecked, Altitude 26 and for Gloss Contour select Rolling Slope Descending.  Uncheck Anti-Aliased.  Highlight Mode should be Screen, Opacity 75%, Shadow Mode Multiply, color black and Opacity 75%.

glass effect 7

Click on Satin and make the following settings: Blend Mode Multiply and then choose a color that is a darker version of the color you are using.  I’m using a dark blue #111474. Make Opacity 50%, Angle 19, Distance 34, Size 65, Contour Gaussian, Anti-Aliased uncheck and put a check in the Invert box.  Tip: if you hover over the contour choices you will see they have names.  If only took me an hour to figure that out!

glass effect 8

Click on Stroke and make the size 2, Position Outside, Blend Mode Soft Light, Opacity 53%, Fill type is Gradient.

glass effect 9

Now click on your background layer.  Go to Edit>Fill and fill your background with the darker color you used in the Satin layer style.

Now your letters look like etched glass and they are transparent.  You can see the background through the letters.  Unfortunately, I should have used a more dramatic background for this tutorial, but you can see the paper splotches through the letters if you look carefully.  It is pretty cool, no?

There are as many ways to accomplish this glass technique as there are people using Photoshop.  If you surf around on the Internet you’ll find all kinds of different ways to do this technique.  Each person adds their own cool tweaks to the making glass in Photoshop idea.

Here is a blog that has a pretty cool Photoshop glass effect.  The letters are chiseled hard for a very clean, sharp appearance.  If you want color, you can probably combine the color portion of this tutorial to their tutorial and have something other than just grey.  You’ll notice a lot of the tutorials use grey.  I think it is because it shows the effect better than if you are using some color.

It is amazing how much you can do with Photoshop, isn’t it?  This glass effect is just amazing.  It really looks like someone carved it out of glass and took a photo of it.  I love it.  If you want to get very serious about making your own graphics for print and for the web then you should check out this online graphics class by Robert Farrell, “Fireworks CS6:Web Graphics and Design Comp A-Z Master Course.” It is very reasonably priced and it is online so you can learn at your own pace at home.

Become an Instant Photoshop Expert

If you want to do your own graphics for your website like making banners and other jpgs to spruce up the place, you really need to take a class.  A little education goes a long way to make you into someone who can produce professional, clean, sharp looking graphics.  When you have a business, the look of your website is going to mean everything.  If it looks sloppy and thrown together then your potential customers are going to think your work is sloppy.  If your website looks professionally done and has beautiful, professional graphic, then your potential customers will think you are a true professional and do quality work.

Here is an online course for Photoshop CS6 that you should check out and bring yourself up to speed. The class is run by Infinite Skills and is named “Adobe Photoshop CS6 Tutorial. Self-Paced and Easy to Follow.”  Another great online Photoshop class is “Beginners Adobe Photoshop CS5 Tutorial” which is run by the same company but is focused on CS5 instead of CS6.