Trendy Glass Morphism Effect - Illustrator tutorial

in this tutorial i'm going to show you how to create this glass morphism effect in illustrator cc [Music] so you've probably seen this trend going around in the design community but it's all about this frosty glass effect and it makes it feel like there's a blurred image or a floating image in the background there and you can create it on ui design or anything really and i'm going to show you how to create this in illustrator so first up what you want to do is make sure you have an artboard with a dark background and the reason why you do that is because you want to have contrast so you can see the effect what i'm going to do is i'm going to press m for the rectangle tool hold alt and i don't want to hold shift because i don't want to square on a rectangle and i'm not just going to wing it here and i think that looks fine we're just going to select white for now and what i wanted to do is i'm going to press a for the direct selection tool select my object and see the little white circles in the corner i want to drag that and round that off we'll go about 20 centimeters and it should round off all the corners as you can see there now what i want to do is i want to go to my gradient panel as you can see on the right hand side and i'm going to bring it over here and what you want to do is you want to have an effect so i'm going to make one side 0 and the other side it can be around you know 40 i'm going to change the angle to 120 so you can see it's going in the corner there like that so we've got this simple gradient what i'm going to do now is press x to go to my stroke and i'm going to select white this will add a stroke to the card we can make it two points if you want or one point it depends up to you how thick you want the stroke to be but for now i'm going to leave it at one point and then what i want to do is add a gradient to that so i'm going to just left click you can see the bar here make sure you select your shape and left click and make sure it's on your stroke not the fill make sure it's on the stroke and just click on the slider now what we're going to have is a gradient effect on our card as you can see it fades out but what i'm going to do is i'm going to select this the side with 40 opacity and i'm going to bring that up to about like 80 and i want to change it to let's go 90 and see what happens cool so now i've got this sort of edge this nice room effect happening on the edge of the card as you can see there i'm just going to bump up to two points so you can see it better so now it looks like there's a rim light it makes it stand out and and peek a little bit better so now what i'm going to do is i'm going to make a shape it could be any shape i'm just going to make a circle and then i'm going to add my colors here so i've got this orange ready color make sure it's on my fill not the stroke and on my gradient tool i'm just going to drop it in there and i'm going to quickly make the opacity 100 on each side and i can set it to 90. i'm going to drag this behind the shape and to bring it behind it you go object arrange and you can send to back and that should bring it behind the actual shape there so already we're getting a really really cool effect i want to make sure that it's perfectly under so i'm just going to quickly align it there so i know it's centered very well beautiful so what i want to do now is i want to create my blur effect so i'm going to duplicate this top shape press ctrl c ctrl f to duplicate it now you can see i've got a duplicate on top i'm going to make it a different color just for now so we can see that i'm going to get rid of the stroke because i don't want the stroke and then what i'm going to do is i'm going to duplicate my circle shape so i'm going to press ctrl c ctrl f duplicate that so what you want to do is you want to select one circle hold shift and select the shape on top in this case it's my duplicated shape which is purple then i'm going to go to object go down to clipping mask and then click make now if i drag this out you should find a mask there behind it so let me just drag it out so now we've got a clipping mask of this effect so now what i'm going to do is i'm going to press a i'm going to select inside the circle what you want to do is go to your appearance panel click fx go down to blur and click gaussian blur typically you want to sort of have it around the 30 mark and you can do less if you want but i think like 35 works really well 33 is okay so now we've got this effect now what i'm gonna do is gonna drag it back behind that it should snap in place and then i'm gonna bring this other circle and i'm going to cut that off so what i'm going to do is i'm going to make a duplicate of the shape again so you can see that we've got i'm just going to show you what's happening there and then i'm going to hold shift select the back shape and just delete that so what i did is like i used the shape builder tool so i've got this shape right then i got this shape hold shift press shift m now you can see on the left hand side it's selected now all i have to do is hold alt and you can see how it starts highlighting the shapes and all i have to do is just minus and drag to minus those shapes off so now we've got two shapes on the edges here we've got the top shape and then we've got the back shape with the clipping mask and that gives us the effect of you know the circle being blurred as it's under the glass shape right and then obviously you know you can add some more opacity to make this stroke a bit more prominent so i can always go back to the mask and the way you do that i'll just turn my edges off so you can see you want to bring this up like that like that bring this it's going to make the opacity pop that's all wait that's on the fill so all you're going to do is you want to click the stroke and then you want to bring this up and it should make the stroke more prominent hopefully you can see that it's very minimal but it does the trick so once you cut that shape now you should have two different shapes like this you will have the top this circle shape and also this shape but we got to bring this circle to the bottom so i'm going to go array object arrange and you want to send to back so now you can see it's under the glass shape there and the white is coming through beautiful i'm also just going to snap these guys back into place i think that's what i'm going to control z that and then bring it to the back beautiful i just want to make sure these these shapes are behind the white as well so you can see that it's above and then i'm going to bring it behind it to make sure that it looks correct beautiful i can always go back as well if you want to adjust the stroke i can select it go to my gradient click on the stroke and i can bring this up as well and it makes the white a bit stronger as it goes down because you can see that beautiful so that's how you basically defect and now what i'm going to do i'm going to do the master card so i'm going to make two circles like this i'm gonna get rid of the fill on your gradient tool you want to see the stroke basically you can have the same stroke 40 on one side and zero percent on the other side as you can see there and then what i can do i can do 90 at an angle [Music] all right you can do i can reverse it if you click this button it will reverse it depends how you want to go i can do 180 if i want and then all i have to do is just duplicate it holding alt and shift i can do it like that i can flip this side as well to give it a cool effect i'm just going to bring it over here and i want to make sure that it's above everything and typically what i do i google together it's a bit low so i'm gonna maybe jump at this like 60 on the opacity cool that looks good [Music] and then all i have to do is just add my text i've got my text here uh just a normal credit card number made it white the font i'm using is work sans which is nice clean add a bit of kerning type c bank maybe it stands for combank i'm just going to bump the turning back down holding alt and the left arrow key to do that and i'm going to sort of scale that down as you can see there and then bring this up and then what you can actually do is you want to go to object and you can expand so you can my shortcut is ctrl e so that expands everything then go to object and make a compound path click make and then once again i can just click on my gradient because i've already made that gradient and i'm just going to make it 90 and maybe drag it down so now i've got this sort of faded out effect and i can bring up the opacity if i want maybe 100 maybe 90 and i'll do the same to this text as well very quickly 90 angle just like that so it gives off like a little fading effect you can also like play around with text as well so maybe i wanna put like card make it white and a cool thing you can do is actually bring the transparency panel out here and i can click on the drop down and you can go to overlay and that makes it look pretty cool as well play around with that and basically that's how you create this cool glass morphism effect you can play around with illustrations different shapes you know you can use it on ui you can use on so many different types of designs but i love this effect i think it's really cool lots of details cool it's looking awesome there's one more final touch that i will add and that's going to be some grain so i'm going to go back to my menu here i'm going to go to the appearance panel and what i'm going to do is i'm going to select my main shape i'm going to go down to fx then what you want to do is you want to go down to texture click on grain and remember this is a photoshop effect you can't really see it but i'm going to bring the intensity down a little bit contrast down and i want to press ok and then now i'm going to show you what it looks like boom i'm zooming in really really far but you can see the glass effect if i took the grain effect if i turn it off and on that's what it looks like with it off you can see the banding there but if you turn it on it sort of gets rid of the banding which looks way better and so now we've got that nice noise grainy effect and that's how you create this cool glass morphism effect all in illustrator not an xd not in figma all in illustrator it's possible and that's how we do it there's a bit of a red line there so i'm just going to expand that because the auto spell correct for some reason and there thanks so much for watching hope you guys enjoyed this tutorial let me know if you want to see more tutorials like this i'm always happy to create something remember to smash the subscribe button and hit the like button it really helps me out and it helps me get the videos out there thanks so much i'll chat to you next time

Channel: Jeremy Mura

Views: 216,042

Keywords: Jeremy Mura, Trendy Glass Morphism Effect - Illustrator tutorial, Glass Morphism, glassmorphism figma, brandon groce, glass morphism, glassmorphism, glassmorphism css, neumorphism, glass morphism illustrator, glass morphism in illustrator, glass morphism photoshop, glass cards, glass ui, ux design, glass effect photoshop, glass morphism design, glassmorphism in adobe xd, glass morphism in adobe xd, glassmorphism ui, adobe illustrator, ux ui, illustrator glass morphism

Id: pNqFL34lzeE

Length: 11min 38sec (698 seconds)

Published: Tue Apr 20 2021