 Welcome back to another Adobe Photoshop tutorial and this one I'm in Photoshop 2020 the latest release and guys I'm going to show you glass morphism. In fact, here is an example of what we're going to do We're going to make it a little different, but this is the basic effect essentially you use a frosted glass effect with the Background blur we're making frosted glass is really what we're doing and you'll notice here that it gives it a bit Of a multi-layered look so they don't look like it's all one layer looks like this Glass is on top of the background. We're using bright colors and a crazy background like this just to show the effect a little more Also, the background does sort of bleed through into the glass, which is what you would expect Glass morphism is very popular in the UI world right now. So let's do it We're doing it in Photoshop and let's go step by step First step file new and Photoshop and we're going to create a document I'm going to create a 1920 by 1080 pixel document just like this Hit create bang. We've got a document. It's blank. It's got a white background We're rolling this second step and this is an important one is you want to go to Google or whatever And you want to get a background now I'm going to put this background in the link in the description But this is the one I selected because it's a nice cool background and it's bright and it really shows the effect off So you want to place that background inside Photoshop? So I'm going to go to my finder window I'm going to it's in my pictures and I am going to drag and drop it or place it in there Now I'm just going to go ahead and hit okay So it's placed you're going to notice here first off that it is not the same size as the back as the image Or part of me the original background So I'm just going to go ahead and increase the size something like this just so that it kind of fits in It looks all good. How does that look something like that? Okay, cool, and then I'm going to hit enter and that is placing the object So we've got a background now The next step if you're following along is we're going to duplicate the layer You can do that by hitting control J or command J on a Mac Or you can just drag and drop it on top of this plus sign right here That means we've got a second layer. We are going to rename this layer So I'm going to double-click on the name here right here, and I'm going to name this blur We don't need it all capital. All right Name it blur now the next step and make sure you're still selected on the top layer or the blur layer We want to go to filter We want to go to blur and we're going to go to Gaussian blur. All right blur Gaussian blur right there now boom that is a hell of a blur So maybe that might be a little bit too much. So let's take it down to say What do you think something like Something like that again guys, this is Let's go with 12 pixels. It doesn't really matter because I'm just showing you the effect But you can of course season this to your taste and of course because it's Photoshop You can go in and make changes when you're done. If you don't like the end effect So we've added in a blur the next step is we're going to create a rectangle now I'm going to go to the rectangle button over here. It's you. I'm going to left-click on it once So it's selected and then I'm just going to left-click on the Canvas right here and when I do that it allows me to create a rectangle of whatever proportions I want I'm going to go 600 pixels by 300 pixels you can of course do whatever you want but this is the size that I think will work good for this demonstration and Bang we've got a rectangle. It did not place it in the center. That's okay I'm actually going to move it over to the left here and you're gonna notice here that I've hovered it so that when you See that purple in the middle that means it's centered Pardon me. Yeah, it's on it's centered. It's just not centered This way it's centered. What the hell is that vertical or horizontal? Whatever it's centered. We'll go with that Alright, so of course you can make your rectangle the size you feel fit The next step here is you want to go to your properties panel if you don't have it open Make sure there's a check mark beside properties I'm going to left-click on it and it's going to open properties for me So here's where it is for me It might be up in the top right for you depending on what your Photoshop is set up to do But you're gonna see here We're gonna go in here and we're gonna make a couple of changes The first one is we're gonna round the corners. This is an important one right down here This is how you round corners, so I'm gonna go ahead and click this to 50 pixels And then I'm gonna hit tab and it made all of them 50 pixels and when you look at the Rectangle it now has rounded corners, which is what we want. Alright guys, we are rolling the fill color I will note at this point in time doesn't really matter So let's just keep rolling the next step is you want to take this rectangle and I haven't renamed it I'm gonna name it Well rectangles pretty bloody good. Let's go with rectangle I am going to move this now underneath the blur layer and it is going to disappear and For those of you that are new to Photoshop, this could cause some panic. Do not panic I got you covered you now want to click on the blur layer the top layer and you go and you're going to want to either Right-click on it and down down down. You're gonna see where is it? Where is it? We are going to basically create a clipping mask. I just can't really read all that well So we want to create clipping masks. So right there create clipping mask bang now We've got a clipping mask now the rectangle you can barely see it, but it's there, right? We need to make some changes to it, but if I close that off. It's right there when I turn it on and off Well, it's barely visible, but that's okay guys. So we've created the clipping mask now We're going to work on the shape. So I'm gonna make sure that I'm selected on the rectangle and Let's get to work. We're gonna start adding in some effects. So I'm gonna double-click on the layer now Don't double-click here or on the name double-click over here when you're off of the name Double-clicking it is going to give us the layer style and the blending options and all that good stuff here So let's get right into this. All right So the first one is we are going to create a inner glow on this So I'm gonna left-click on inner glow and right away by doing that It you will see that it's lit up a little bit and it has a nice cool little outside White edge now. I just did this So my settings are kind of pretty close to where I want them to be So if you are following along with me an opacity of 15% is what I chose But as I dial this up, you're gonna see that the edges get brighter and brighter So depending on the effect and how subtle you want it to be That's the number you're going to want to go with you'll also see here that I've got the blending mode set to normal a Lot of times it automatically sets to multiply or screen or some such nonsense Set it to normal for this case the choke I've got it 16% but as I move it up You'll see on the edges here. It goes in and out as use as as it does So let's go to let's say yeah, let's go with 16% Let's say I was pretty good there and the size of course season as to how you see fit You can have no size or you can have a very very very Blended side effect right there. So, oh, that's my phone beeping. Hang on Of course they call while I'm doing a tutorial. Of course, that's my parole officer. We'll just ignore him. All right That's gone and done now. We've got the inner glow going on and I see you guys can probably tell where this is going we're now going to go and Select what's the next one on my list here? We're gonna change it to Have we done it to cover overlay? No, no, we have not yet. Okay, so in a glow set up We're gonna go to stroke guys. Sorry that phone call threw me off a little bit here. Forgive me for that We're gonna select stroke and we're gonna create a small stroke I've got it at one pixel and I've got the opacity drop to 50% Let's increase the size and let's increase the opacity so you can see what's happening I'm dialing it back to about 50 This is what it's gonna work for me and I've got that down to about one Maybe two pixels. I'm gonna go with one pixels because this is a very subtle effect So we've gone ahead. We've changed the stroke. We've added in part of me. We've added in the stroke It's at 50% opacity off. We go the next we want to go to color overlay left click on color overlay and Bang it applied another effect to it just a basic white effect on top of it If we click on culvert overlay part of me You're gonna notice that the blend mode is set to normal and the opacity is set to 10% That has no opacity obviously 100% so when we when we up it to 10% Let's go with 10% we're getting the frosted glass look here. We're just giving it a little bit more seasoning 10% works. Okay, so you see where we're going with this? Good we've gone to 10% click on cover overlay the last one is click on drop shadow right here and This this one is not necessary, but I feel that it adds a little bit more I have set it to an opacity of 16% But if you want to go subtler to like this type of look you can go for it I you can go for the really really hard look so that it looks like you've got a lot of space And it's like a layer that's kind of hovering in the air But again, I've gone with 16% but again season it to your taste Distance 10 pixels for me. I'm gonna go 10 pixels leaves it a little bit. Yeah, it looks about right Spread 22% size 13 pixels. I'm gonna spread the yeah, let's go with 13 pixels Again guys, these are total options for you. You can season this to your taste. We're just going for the look Guys, that is pretty much it for the glass morphism effect If you liked this tutorial remember to subscribe remember to thumbs up Let me know what you think of this if you have any questions or concerns You need me to do something for you. I'll do it and I'll be back soon with some more chops