How to Create a Glass Morphism Effect in Photoshop 2022

what is up guys photo fever here and welcome back to another photoshop tutorial now i've seen this design trend going around recently and i must say i've really liked it it is called glothmorphism and basically what it is take a standard photo and you go ahead and looks like you're applying what is basically a glass pane in the photo now on that glass pane you can apply logos text and all sorts of things and i've seen quite a few different designers use it you ui designers use it a lot in their apps you've seen it in web design but you also can see in game designs as well so today i thought i'd share my secrets on how you can create this effect at home just using photoshop and i'm going to start right now [Music] right guys so the first thing you want to do is go ahead and choose a photo you'd like to add this glothmorphism effect now it works on all types of photos but today we're specifically going to be working on landscape photos and if you would like to follow along i'll make sure to place the link in the description with the photo that i'm using today and today's photo is off of unsplash.com and it is this photo here so what we're going to do is we're going to add in a glass morphism effect so it looks like there's a pane of glass within the photo now it can be any shape you can make here circle square rounded edges or all sorts so today i'm going to be using a square with slight rounded edges now the way you can add a shape and this is probably the most important part is go ahead over to the left hand side tools panel i'm going to go ahead and choose rectangle square tool or if you click and hold you've got your ellipse tool triangle tool and all sorts you've even got a custom shape tool at the bottom but we're just going to be working on a rectangle in this tutorial i'm going to hold down shift just so i can create a perfect square and we're going to make it fairly large now it will come up with the properties panel once you've applied the square so we're going to do is going to go to our stroke we're just going to turn that off we don't need a stroke in this particular case i'm going to go to our fill and we're going to do is i'm just going to apply maybe a white color so i'm just going to apply it just as pure white as you can see here now if you're working in a very modern photoshop you can apply rounded edges by looking at the corners of the square so in the corners of the square you've got this small little circle here all you'll need to do is just simply drag and you can start applying your rounded edge like so so i'm going to apply around 200 pixel rounded edge effect and i'm going to do is turn off the properties now once you're happy with that all you need to do is click enter and that has now applied it to your photo now obviously if you want to move it around you're more than welcome to which is what i'm going to do i'm going to have it placed in the center so i'm going to go ahead and press command t that'll allow you to free transform and then all you need to do is simply move it around until you are happy and i want it bangs back in the middle like so so i'm gonna go ahead and press enter to confirm placement now this is where we want to start adding in the blur so we're gonna do is just gonna duplicate the background turn it into a smart object and then apply a gaussian blur so we're going to do is we're going to go to our background here i'm going to go ahead and press command j that will duplicate the background layer now i'd recommend applying a smart filter just in case you ever want to increase or decrease the amount of blur in the photo after the fact if you don't apply a smart filter then you're not going to be able to do this step so i'm going to do is i'm going to right click on there and i'm going to go ahead and convert it into a smart object then what i'm going to do is go up to filter then i'm going to drop down to blur and i'm going to go down to gaussian blur now i find a good blur for this gloss morphism effect is around 30 pixels but experiment it might be more or it might be less all depending on what photo you're working on and in this tutorial i'm going with 30. so i'm going to go ahead and choose 30 pixels as the radius there i'm going to go ahead and click ok now obviously this is currently below our square which is really not what we want so i'm going to go to our background here and i'm going to go ahead and draw it right at the top i'm actually going to make it a little bit simple i'm actually just going to call this blur layer here but obviously it's now disappeared you can't see the square anymore so we're going to use is we're going to use a clipping mask we're not going to use a layer mask for a reason although i will discuss in a bit so we're going to do is we're going to right click on that layer i'm going to go down to clipping mask and as you can see that blur has now been applied to the shape below are not affecting the rest of the photo which is great but now it just looks like you've got a blurry center of the photo we need to add a glass morphism effect so we're going to make this look like a pane of glass and we can do this by using our adjustment layers so we're going to do is we're going to go to that rectangle here and we're going to go ahead and double click and what this will do is we'll bring up our layer stylizing box and this with our blending modes as well we can create a really cool effect so what we're going to do is we're firstly we're going to go down to gradient overlay so we'll go ahead and select gradient overlay like so and this is where we can start adding an opaque kind of opacity to the actual photo itself so we're going to do is we're going to go firstly go to our blending mode we're just going to keep it normal we're going to go for an opacity of around 40 but more importantly we're going to go to our gradient here so in our gradient we want to choose firstly on the left hand side we want to go for more of a dark gray like a gray that we've got here like so i'm going to go ahead and click ok then on the right hand side we want to choose pure white so i'm going to go ahead and choose pure white then on the top here so you've got your color on the bottom section of this gradient but on the top section you on here you've also got an opacity an opacity for this particular case i'm going to go ahead and choose 45 percent oh i've made it disappear and then on this side here we're going to go want to choose an opacity of 10 so we're going to choose an opacity like so and you can move it around until you are happy with the result so i'm going to go for an opacity of 10 so i'm going to select it like so i'm going to go ahead and click ok so what it should do is it looks should look something like this so we've got gray to white and then on the on top section the opacity we've got 45 to 10 percent i'm gonna go ahead and click it like so now you can change the angle so i find uh changing the angle so it's slightly darker at the top or slightly larger at the bottom again you guys can experiment with what you think looks best but for this particular case i'm going to go for an angle of around -45 i find that looks good having a darker color sometimes at the bottom and a brighter color at the top but the problem is now it just looks like we've got this kind of gray blob we need to make it look more like glass and we can do this by adding in a edge or what we call a stroke so what we can do is go to our stroke section we've got just here i'm going to go ahead and apply a stroke now in our stroke settings it's going to be very similar to our overlay settings we've just applied so we're going to go for a size we're going to go for 20 pixels actually make it a little bit smaller let's go for 15 pixels in this particular case we're going to go for our blending mode again keep the blending mode as normal so we don't want to change the blending mode with our opacity we're going to go for around 15 percent and then underneath we've got our gradient here and we want to go for a similar gradient but an opposite gradient to what we were previously so if he went from gray to white now we want it to go from white to gray so with here we want to make sure we've chosen pure white and then we're going to go ahead on the right hand side we're going to go ahead and choose a darker gray so again whatever you did just do it in reverse for when it comes to your stroke versus the overlay that you've just recently applied so once we've done that and then again well if you want to we can add in a 45 gradient there so opacity sorry and then we're going to add in a 10 there so we'll go ahead and apply that and then what you can do is go ahead and click ok now this is a little bit dark so actually i'm going to do is actually increase the opacity a little bit so i'm going to go for something like that so we'll go for about 20 i think in this particular case and then with our angle we want the exact same angle that you had on your overlay and this will correctly match up the kind of stroke that you're applying so i'm going to do is go go to our angle here i'm going to go ahead and drop that down to minus 45 so it is basically the exact opposite of what we applied previously and then if you want to you can i think what i might do is increase the opacity again a little bit so i'm going to go for 25 it looks like in this particular case and then what you can do is go ahead and click ok and as you can see if we go click off now we've applied this really cool gloss morphism effect now the reason i like using a clipping mask instead of using a layer mask in this particular case is because because we've applied it as a smart object we can actually move the square or change the shape of the square after the fact so let's say i want this square to be more of a rectangle we can go ahead and click this rectangle here press command t on our keyboard and i can actually make it smaller so i can go ahead and do it something like so and because we've applied it again using a uh a clipping mask instead of a layer mask we can move it around as much as we want and we can actually take this shape and apply it to another photo and you can create an action so you can create this glass morphing effect a lot quicker so i think this is a really cool design and i must say i really like it and if you want to you can even cut out certain shapes within your landscape photo and place it above the layer so you can add this three-dimensional look as you can see on the photo here it can add sometimes depth and perspective and it makes it look like the glass is actually inside the photo itself this is a really cool effect as well so what i can do is now show you the before photo and then i can show you the after and then here you go i've applied a few logos onto it i've actually applied some text to it and it's really that simple and it must say it looks really cool so if you're thinking of maybe using it for a website or maybe you're using it for more of a design platform this is how you can create this really cool glass morphism effect here is the before and here is the after

Channel: Photo Feaver

Views: 247

Keywords: Glass Morphism Effect in Photoshop 2022, glass morphism, glass morphism effect, glass morphism Photoshop, Glassmorphism, glass morphism new design trend, Glass effect Photoshop, Blurry Glass Effect, Blurry Glass Effect Photoshop, UI designs in Photoshop, User interface trends 2022, User interface designs in Photoshop, Photoshop tutorial, Photoshop 2022, Photoshop CC, Photoshop CC 2022, Photo Feaver, Photo Fever, James feaver

Id: Kt2IxhSUAdE

Length: 10min 29sec (629 seconds)

Published: Fri Dec 17 2021