How to Create a Glass Effect in Photoshop

Zagrobelna, M. (2023). How to Create a Glass Effect in Photoshop: Envato Tuts+. Retrieved from https://design.tutsplus.com/tutorials/how-to-create-a-glass-effect-in-photoshop–cms-93789

What You’ll Be Creating In this tutorial, you’ll learn to create a realistic reflective glass effect. Because a frosted glass effect may mean two different things, I’ll show you the techniques to achieve both: a foggy glass overlay useful for UI elements and a realistic glass texture.

What You’ll Learn in This Glass Effect Photoshop Tutorial

• How to add a glass effect in Photoshop
• How to create a frosted glass effect in Photoshop
• How to create three types of glass overlay in Photoshop
• How to add a glass texture in Photoshop
• How to create a reflective glass effect in Photoshop

1. How to Create a Frosted Glass Effect in Photoshop

Step 1

Let’s start with the most basic Photoshop glass effect. Open your image in Photoshop, right-click it, and select Convert to Smart Object. This way, you can easily replace the photo later, while keeping the glass effect intact!

Step 2

Duplicate the Smart Object (Control-J) and put it into a group (Control-G).

Step 3

Use the Rectangular Marquee Tool (M), or any other selection tool, to select the area that you want to apply your frosted glass effect to. Then add a Layer Mask to the group.

Step 4

Select the layer inside the group and go to Filter > Blur > Gaussian Blur. Adjust the Radius to achieve the desired effect.

Step 5

Our Photoshop frosted glass effect is almost done, but remember that a matte glass effect doesn’t only blur the image—it also brightens it! So let’s brighten the image by using a Hue/Saturation Adjustment Layer. Increase the Lightness to about 30.

Step 6

To make it more convincing, change the Blend Mode to Lighter Color, and adjust the Opacity to about 50%.

And that’s it: your Photoshop frosted glass effect is done!

2. How to Create a Textured Frosted Glass Effect in Photoshop

Step 1

If you want to create a more detailed glass texture in Photoshop, you can start in the same way: turn your image into a Smart Object (right-click > Convert to Smart Object).

Step 2

Duplicate the Smart Object (Control-J) and put it into a group (Control-G).

Step 3

Use the Rectangular Marquee Tool (M), or any other selection tool, to select the area that you want to apply your textured glass effect to. Then add a Layer Mask to the group.

Step 4

This is where the process changes. Select the layer inside the group, and go to Filter > Filter Gallery. Open the Distort tab and select Glass. Use the Frosted texture. Adjust the settings to create the effect you need—the exact values will depend on the size of the photo (mine is 2000 px wide), as well as your own vision. Here are mine:

• Distortion: 19
• Smoothness: 3
• Scaling: 139%

Step 5

The textured frosted glass effect is visible now, but it looks a bit rough. Let’s make a couple of adjustments. Duplicate this layer (Control-J) and double-click its Filter Gallery filter. Change the values to make the frosting smaller, almost like noise. Here are my values:

• Distortion: 19
• Smoothness: 2
• Scaling: 95%

Step 6

Go to Filter > Blur > Gaussian Blur. Add a little bit of blur to this noise.

Step 7

Change the Blend Mode to Lighten. This will mix the effects of these two layers together. Then, drag this second layer up a bit and to the right, making the distortion even more convincing.

Step 8

Let’s add some finishing touches. Right-click the group and select Blending Options. Check Color Overlay and set it to blue (#769eda), Blend Mode to Color, and Opacity to about 13%. This will give the glass a nice wintry look. Feel free to use a different color to complement the color scheme of your photo.

Step 9

Let’s add an Inner Glow. This is optional—the glass effect will look good even without it. Here are the settings that I used to make the glass brighter from the inside:

• Blend Mode: Overlay
• Opacity: 14%
• Noise: 59%
• Color: White
• Technique: Softer
• Source: Center
• Choke: 40%
• Size: 213%
• Range: 100%
• Jitter: 0%

The exact values will depend on the size of your photo.

And the textured glass effect is done!

3. How to Create a Reflective Glass Effect in Photoshop

Step 1

If you want to create a reflective glass effect in Photoshop, you can start by turning your image into a Smart Object (right-click > Convert to Smart Object).

Step 2

Duplicate the Smart Object (Control-J) and put it into a group (Control-G).

Step 3

Use the Rectangular Marquee Tool (M), or any other selection tool, to select the area that you want to apply your textured glass effect to. Then add a Layer Mask to the group.

Step 4

Change the Blend Mode of the layer in the group to Screen. Then go to Edit > Transform > Flip Horizontal.

Step 5

The reflection is already there, but let’s improve it now. Press Control-T to resize and drag the reflection around. This will allow you to remove any obvious reflections from the main area (anything that would take attention away from the actual subject of the photo).

Step 6

Right-click the group and select Blending Options. Check Inner Glow and adjust these settings:

• Blend Mode: Screen
• Opacity: 15%
• Noise: 0%
• Color: white
• Technique: Softer
• Source: Edge
• Choke: 0%
• Size: 57%
• Range: 50%
• Jitter: 0%

Again, the exact values will depend on the size of your photo.

Step 7

Add a Gradient Overlay. Use these settings:

• Blend Mode: Screen
• Opacity: 30%
• Gradient: black and white (or white and black, Reversed)
• Style: Reflected
• Angle: 148
• Scale: 100%

Step 8

Finally, add a Color Overlay. This will lower the contrast in the reflection. Use Color as the Blend Mode, with a low Opacity (about 13%). Here I used green (#24a268).

And your reflective glass effect is finished!

Zagrobelna, M. (2023). How to Create a Glass Effect in Photoshop: Envato Tuts+. Retrieved from https://design.tutsplus.com/tutorials/how-to-create-a-glass-effect-in-photoshop–cms-93789