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



UX/UI Blurred Frosted Glass - After Effects Tutorial

Scripts