Creating Frosted Glass Effect in After Effects

Creating a frosted glass/blur effect in After Effects using Gaussian blur and masking for improved designs.

### Creating a Frosted Glass Effect in After Effects
* 🔍 The frosted glass effect is commonly seen in iOS and other modern applications, adding a **cool and simple design element**.
* 📷 I'm here to help you with that. Could you please provide me with the image you would like to add to the composition?
* 🌀 Create a new adjustment layer and apply a blur effect, such as Gaussian blur, to it. Position this layer between the image and the foreground element (e.g., an iPhone frame) to **blur only the image**.
* ✂ Use a mask to define the area that should be **blurred**, ensuring a **smooth transition**.
* 🔍 To enhance the realism of the effect, consider using a **magnify effect** to make the blurred area appear more natural.
* 🎨 Adjust the blur intensity to achieve the **desired frosted glass effect**. Typically, iOS applications use a **significant amount of blur**.
* 🖼 ️ Optionally, you can add a shape layer on top of the adjustment layer and **reduce its transparency** to create a **colored overlay** for the frosted glass effect.
* 🎥 If you want the colored overlay to act as a mask for the blur effect, use the **alpha matte track matte option**. Remember to **adjust the transparency and blur settings** accordingly.

what's going on guys? I'm like four Moe Bock's graphics dot com. And in this video tutorial, we're gonna be doing a very simple frosted glass slash blur effect in After Effects. So you see this all around iOS as well as some other newest applications, and it's really cool. It's a really cool design. It's very simple, but if you don't know how to do it, it will improve your designs. Anyways, jumping into this composition here, you'll see that I already have my Instagram name and my iPhone frame. I made this in a live stream. You can check that out on the YouTube channel. So if you want to know how to do it, you could just go watch that video. But if you're back now, we can go ahead and get started. So I'm not going to go through every aspect of this, but I'm going to show you the most of the big pieces here. So for starters, I'm going to just add an image. So I already have a couple photos here if you would like to download this.

project file. Be sure to become a Patreon subscriber, where you will get this demo as well as what we complete here, and these images and everything so you can follow along. Or you could just use this in your own application and tweak it. So I'm just going to drag this photo in, which I did, and I'm gonna hit S on the keyboard and just scale this down. So I think that size looks about good. I could tell that the image does not appear to be in the center of the comp. I'm just gonna move it over. It just snaps to grid. And I'm gonna put this image about there. And I'm gonna drag it beneath my iPhone. So how I get the blur effect is actually pretty simple. So I'm gonna create a layer new adjustment layer. And what an adjustment layer does is anything below that adjustment layer will get the effects applied that are applied on the adjustment layer. So if I search for an effect called blur, you can see there's multiple different blur effects here. I use Gaussian blur, but fast blur is just

a little bit faster camera blur. I noticed it's kind of one of the slower ones so Gaussian blur is kind of a good medium for this application. It's perfectly fine. I'm just gonna add it to the adjustment layer. And if I increase the blurriness, you can see that everything becomes extremely blurry. Now, here's the trick. If you put it underneath the iPhone but above the photo, then just the photo gets blurry. Okay, well that's great. Now all you have to do is mask out the area that you would want to be blurry. So you could do that by just adding a mask. So just pick up the pen tool. If you hold shift, it creates a straight line. And now I can simply mask around this object. As simple as that. So that's pretty simple. But you'll notice that the edges here kind of make this artificially look larger or something. Sometimes it looks smaller. What I like to do now is I like to search for a tool called magnify and drag this on. So technically this is correct. But when you're making art, which

I don't consider myself necessarily an artist, but when you're creating art, there's something that's correct, and then there's something that looks correct. So oftentimes, what looks correct is not actually what is correct. So you kind of, it's up to you to kind of make it mend and make it kind of appear correct, even if it's not necessarily correct. If that's your prerogative, that's your choice. So I add the magnify on, I increase the size until it encompasses the entire image, and then I just decrease the magnification or increase it as needed. So in this case here, I can't really decrease this any farther, but if this was, if it looks small, so let's see if I bring this image up, you'll see that it may actually look smaller in some cases, which it doesn't. Let's see what happens when I change the background to white. So in this background's white, I think you can see what I mean. It looks just a little bit smaller on that side. So now if I add a little bit

of magnification. It will kind of bring that more in line to a more apparently natural effect. So now it's just a matter of just adjusting the blurriness. iOS tends to blur the crap out of these things. I think maybe a little bit too much. So I like to bring it down just a little bit. But you could see here that now when I move this image behind it, which I keep accidentally grabbing the iPhone. So I'm gonna actually just lock these layers here so I don't grab them on accident. When I grab this image and I hold shift, you can see that it blurs when it's behind. So that's good. Now all I need to do is mask out this background. So very simple. I could just create a new shape layer and draw it across the frame. Make sure it's not a. I don't want to create a mask here. I'm going to create a shape layer. So make sure you don't have any of your layer selected. So I'm just going to follow this along and this is

basically, just making a new shape, and I am just going to draw it all the way around. Now, this is kind of a little bit of a cheat, but now when I bring it underneath the iPhone, you can see that when the colors are riad Adhan to the background, that really, I'm just kind of masking it out with just a shape that's the exact same color as the app. So, this application, it works. So, anyways, guys, I hope this tutorial helped you learn how to kind of do a cool blur/slash glass, I guess, frosted glass effect. If you would like, you can add a shape layer on top of this. Again, if you have a layer selected, it will create a mask, so you want to make sure you don't have a layer selected. So, if I just add a shape layer on top of this and put it over the adjustment layer and hit T on the keyboard and reduce the transparency, you could even add like kind of almost like a frosted glass. I'm to add a little bit of color.

and you could obviously change this color to black if you want. It to have it, you know, slightly dark look to it. And it's very, very simple. Now, obviously, I just drew this shape layer. But alternatively, I can delete the mask on this adjustment layer by hitting M on the keyboard and clicking the mask and deleting it. And I can actually use this shape layer as a mask for my adjustment layer by just going under the track mat options and select alpha mat. Now, the problem here is that now this layer is invisible. And when I make it visible, it's completely black. So you can't see. One option is to reduce the transparency. However, the transparency is directly related to how much of this adjustment layer is shown. So if you reduce the transparency to make it more visible, the blurriness goes down. So you'd have to crank up the blurriness. But that's not really ideal. So what I like to do is I like to just leave it all fully colored. Make it invisible so I could see my blur.

and then just duplicate this by hitting ctrl+D, and making this visible, and hitting T on the keyboard, and making it slightly transparent. And then all I would need to do is now parent the black layer to my mask layer, so whenever I move my mask, lock those layers again. Whenever I move my mask, it will also move the black layer. So anyways, guys, I hope you enjoyed this video. I hope you learned something new. If you did not learn anything new, hit a thumbs down. But if you did enjoy this video, give it a thumbs up. Check out our Patreon where you could download this project file at the $3 level, as well as letting us know in the comments down below if you would like to see future videos covering stuff like this or UX design. Lastly, share with us your cool stuff that you make with this technique on Twitter, and we'll see you next time. Anyways, guys, thanks for watching. [Music] [Applause] [Music]

UX/UI Blurred Frosted Glass - After Effects Tutorial

This channel focuses on 2D & 3D motion graphic tutorials for After Effects and Cinema 4D.

Our Gear:
× Keyboard - Logitech - https://amzn.to/2lNgyjq
× Mouse - Logitech G402 - https://amzn.to/2lLYshJ
× Microphone - Rode NT-USB - https://amzn.to/2lgudyZ
× Headphones - Audio-Technica ATH-M50x - https://amzn.to/2kixzRZ
× CPU - Intel i7 8700k @ 4.88GHz - https://amzn.to/2jQbfza
× CPU Cooler - Corsair H100i v2 - https://amzn.to/2jOB2Yv
× Motherboard - ASUS TUF Z370-PRO - https://amzn.to/2lNlfd3
× GPU - Nvidia RTX3090 FE
× RAM - 64GB G.Skill 3200 DDR4
× Storage - 3 x 1TB Samsung SSD



MOBOX Graphics

Creating a Frosted Glass/Blur Effect in After Effects

The tutorial demonstrates how to create a frosted glass/blur effect in After Effects, commonly seen in iOS and other applications.

The process involves adding an image, scaling it, and using a new adjustment layer to apply the blur effect.

Viewers are encouraged to check out the YouTube channel for a live stream of creating the Instagram name and iPhone frame, or become a Patreon subscriber to get the project file and images for the demo.

Adjusting Camera Blur and Using the Magnify Tool in Artwork

Using Gaussian blur on an adjustment layer can create the desired level of blurriness.

Placing the blur effect underneath the iPhone but above the photo allows for targeted blurriness.

The magnify tool can help adjust the appearance of the artwork, even if it may not be technically "correct.

Adjust the magnification and reduce blurriness for a more natural effect on the image.

Lock the layers to avoid accidental movements and then create a shape layer to mask out the background, matching it with the color of the app.

You can further enhance the effect by adding a shape layer on top and adjusting the transparency for a frosted glass look.

Using Shape Layers for Adjustment Layer Masks in Adobe After Effects

Shape layers can be used as masks for adjustment layers by selecting alpha mat in the track mat options.

However, this may cause the layer to become invisible or appear completely black.

Adjusting the transparency of the shape layer can impact the visibility of the adjustment layer and the level of blurriness, often requiring an increase in blurriness which is not ideal.

Use the shortcut Ctrl+D to duplicate a layer and press T to make it slightly transparent.

Parent the black layer to the mask layer to link their movement.

Remember to lock the layers after parenting them.