Trendy Glass Morphism Effect - Illustrator tutorial

Рет қаралды 428,706

Күн бұрын

Learn more Illustrator tips in my course: skl.sh/3QK9LzH
Glass morphism is a cool new trend in the graphic design world.
It allows you to create an amazing illusion of glass in your artwork.
-----
How to Freelance: jeremymura.podia.com/run-a-fr...
Freelance Notion Hub: jeremymura.gumroad.com/l/free...
Brand Discovery Template: jeremymura.gumroad.com/l/disc...
Logo Presentation Deck: jeremymura.gumroad.com/l/logo...
Stylescape Template: jeremymura.gumroad.com/l/styl...
Free Stuff -
🎓 1 Month FREE Skillshare: skl.sh/2wsKIw7
✉️ Weekly Newsletter: www.jeremymura.com/signup
💵 Win your first client: www.jeremymura.com/gyfcbook
📘 Brand Identity Quick Guide: www.jeremymura.com/designguide
Resources -
Envato Elements: bit.ly/3HQuQ7R
Creative Market: bit.ly/2rJrLF9
Logo Package Express Plugin: bit.ly/logoexpress
Epidemic Sound: bit.ly/36HXdCe
Instagram - / thejeremymura
Twitter - / thejeremymura

Пікірлер: 249

@JeremyMuradesign 3 жыл бұрын

Love this type of effect?

@JeremyMuradesign 2 жыл бұрын

@Joaco Make your own video then ;)

@JeremyMuradesign 2 жыл бұрын

@st1ckm4n 🔥🔥 no fluff here

@_VishalBhoye 2 жыл бұрын

@@JeremyMuradesign whoa😂, Great thing is that I came to know about how to make gaussian blur. Thank you mate.

@JeremyMuradesign 2 жыл бұрын

@@_VishalBhoye :)

@RobertNowland 3 жыл бұрын

The grain is an excellent touch! Wouldn’t have thought of that. Always thought this effect was super compelling 👊

@JeremyMuradesign 3 жыл бұрын

Thanks dude yeah really think it's a nice effect!

@danielnewton2390 2 жыл бұрын

I've been using a lot of gaussian blur and grain overlays in my work recently. I hope this trend sticks around for a while, because I like it!

@JeremyMuradesign 2 жыл бұрын

Awesome man I like playing with the same it looks good.

@bysshreyas Жыл бұрын

This video was exactly what I was looking for! And your design turned out really really cool! Can’t wait to use this style on my next project. Thanks a lot!

@JeremyMuradesign Жыл бұрын

Yay! Thank you! appreciate teh feedback!

@chome4 2 жыл бұрын

Very creative. So many effects take ages elsewhere, but this was just perfect. And the music didn't drown out your voice!

@JeremyMuradesign 2 жыл бұрын

Thank you so much I appreciate this comment :). Yeah I thought music was low haha

@gabrielamiyuki6197 2 жыл бұрын

Supercool! Thank you for sharing it!

@JeremyMuradesign 2 жыл бұрын

Glad you liked it Gabriela!

@user-rx9np5tm9s 2 жыл бұрын

Love your design skilllllll~ thank you so much!

@JeremyMuradesign 2 жыл бұрын

Thank you too!

@obert1000 2 жыл бұрын

Thanks for this amazing Tutorial. Let me turn on my notifications so that i get to see new tutorials on time.

@JeremyMuradesign 2 жыл бұрын

Awesome, thank you Obert!

@kristenclayton2619 Жыл бұрын

Your video has been the most helpful and efficient by far! Thank you so much

@JeremyMuradesign Жыл бұрын

Glad it was helpful! Kristen :)

@theaajbranding2406 3 жыл бұрын

It’s an awesome effect. Love the effect. Cool bro.😍🔥

@JeremyMuradesign 3 жыл бұрын

THANKS BRO!

@KVNTA 2 жыл бұрын

Great job man it’s an excellent effect keep up the good work you’re really good

@JeremyMuradesign 2 жыл бұрын

Thanks a lot Tom :)

@commonaffection1703 2 жыл бұрын

this is pretty cool. like i wouldve never guessed this was possible in illustrator. i mainly do 3d so my workflow would be totally different but more or less the same result. but not having to render it out is amazing.

@JeremyMuradesign 2 жыл бұрын

Thanks so much, Illustrator is great it can do all the same effects as photoshop which is cool. That is awesome.

@YS9-9 2 жыл бұрын

Same exact thoughts

@kristenbell5214 Жыл бұрын

Thank you! Great tutorial - this was really helpful.

@JeremyMuradesign Жыл бұрын

Glad it was helpful!

@abderrahmanekoriyahia7077 Жыл бұрын

it worked! thank you so much!!

@JeremyMuradesign Жыл бұрын

You're welcome!

@user-un9wq1ky8j 3 ай бұрын

Thank you for the tutorial, clear and helpful🙌🙌

@JeremyMuradesign 3 ай бұрын

Glad it was helpful!

@Huumok 2 жыл бұрын

Thanks for the tutorial ! :D

@JeremyMuradesign 2 жыл бұрын

No problem!

@Gabriel-qv7pt 2 жыл бұрын

Tnx for this amazing video, i really enjoy this design style u

@JeremyMuradesign 2 жыл бұрын

Most welcome Gabriel

@scuper501 2 жыл бұрын

It's a surprise skill, thank you for sharing.

@JeremyMuradesign 2 жыл бұрын

Thank you!!

@phongnguyen-bs4xw 2 жыл бұрын

I just wanna learn even more now- it looks so cool o.O

@JeremyMuradesign 2 жыл бұрын

yeh subscribe for more!

@IKSOONLEE 2 жыл бұрын

lovely design

@JeremyMuradesign 2 жыл бұрын

Thank you! Cheers!

@carolinahurtado6439 2 жыл бұрын

Thank you! so cool! It works perfect =)

@JeremyMuradesign 2 жыл бұрын

You're welcome Carolina thanks!

@rather_be_camping 2 жыл бұрын

Awesome tutorial bro. Nice work

@JeremyMuradesign 2 жыл бұрын

Thanks a ton Nico

@lephatdalat Жыл бұрын

Thanks... it's working... Good Job...!

@JeremyMuradesign Жыл бұрын

You're welcome!

@SanTTchez 2 жыл бұрын

GG guy, thanks for this tuto !

@JeremyMuradesign 2 жыл бұрын

Thanks bro

@billyman8308 2 жыл бұрын

Thanks, really helped

@JeremyMuradesign 2 жыл бұрын

Glad it helped Billy!!!

@martapitadelgado2972 2 жыл бұрын

Gracias! It,s help me a lot!

@JeremyMuradesign 2 жыл бұрын

Glad to hear that! Gracias!

@SonuMathewNinan 2 жыл бұрын

Thanks a lot for this

@JeremyMuradesign 2 жыл бұрын

Cheers Sonu!

@hovikabrahamian3801 2 жыл бұрын

Great Tutorial, you did a good job, is a Very Very useful Tutorial. understandable all your explanation. Thank you so much.

@JeremyMuradesign 2 жыл бұрын

Glad it was helpful Hovik!

@ensenameadisenar2219 Жыл бұрын

ITS REALLY WORKED LOL THANK YOU DUDE

@JeremyMuradesign Жыл бұрын

Thanks!!

@quynhhoa_vlogs8364 2 жыл бұрын

Fantastic video bro, legend.

@JeremyMuradesign 2 жыл бұрын

Legend! thanks!

@sentionmusic 2 жыл бұрын

Looks sick, subbed

@JeremyMuradesign 2 жыл бұрын

Thanks Logan you the man!

@Blaackcreator Жыл бұрын

perfect!!!!

@JeremyMuradesign Жыл бұрын

Thanks!!

@oaiue_2000 3 жыл бұрын

thank you so muchhh

@JeremyMuradesign 3 жыл бұрын

Welcome 😊

@dharma4871 2 жыл бұрын

Nicely explained

@JeremyMuradesign 2 жыл бұрын

Thank you so much 🙂

@trungnguyen27039x 9 ай бұрын

nice, thank you so much bro

@JeremyMuradesign 9 ай бұрын

Always welcome

@user-dq9kb6yz8k 2 жыл бұрын

great work

@JeremyMuradesign 2 жыл бұрын

Thank you! Cheers!

@hutha6652 2 жыл бұрын

Thts what i thinkin about!!

@JeremyMuradesign 2 жыл бұрын

let's go!

@moskoallstars1234 2 жыл бұрын

you can add gradient to a text without expand the shape, only you need to do is add new fill in the appearance window, next to fx tab. In that way the text keep editable.

@JeremyMuradesign 2 жыл бұрын

Of course you can do the appearance panel if you want if you want to keep stuff live.

@arunkarthik520 2 жыл бұрын

Superb :)

@JeremyMuradesign 2 жыл бұрын

Thanks Arun🤗

@rahmatheking Жыл бұрын

Good guide for beginners)

@JeremyMuradesign Жыл бұрын

Glad you think so!!!

@nicolasmoreno8209 Жыл бұрын

I also really like softEX, it has a very nice effect to it

@JeremyMuradesign Жыл бұрын

nice

@omardejesuscampisfontalvo607 Жыл бұрын

bro thanks so much. dis video is tiless 3 years ltr n still great

@JeremyMuradesign Жыл бұрын

aye cheers Omar glad it helps!

@uxsernames Жыл бұрын

Yesssss!!!

@JeremyMuradesign Жыл бұрын

@karasukrs5910 Жыл бұрын

Work 100%

@JeremyMuradesign Жыл бұрын

awesome!

@e3innovative 2 жыл бұрын

Thank you

@JeremyMuradesign 2 жыл бұрын

You're welcome

@AntTonyLOLKID 2 жыл бұрын

A tip for the stroke for the "glass"; you could aline the stroke to inside of the shape (by clicking the word "Stroke" on the Control bar - the row of controls below the "File", "Edit"... tabs), rather than changing the gradient.

@JeremyMuradesign 2 жыл бұрын

Yep that's another good way of doing it!

@erin758 2 жыл бұрын

lol, that's right. That's all you need to do to fix overlapping stroke

@doniaelattar345 Жыл бұрын

thanks mate tNice tutorials was a big help

@JeremyMuradesign Жыл бұрын

Glad it helped

@shdesigning8780 2 жыл бұрын

Thanks!

@JeremyMuradesign 2 жыл бұрын

Thank you my friend!

@shdesigning8780 2 жыл бұрын

Subscribe to my channel and please share..

@ilysensei2916 Жыл бұрын

Thanks Bruu

@JeremyMuradesign Жыл бұрын

Cheers bruu

@ShadowBanned0 2 жыл бұрын

nice!

@JeremyMuradesign 2 жыл бұрын

Thank you! Cheers!

@mohamedouattara8734 2 жыл бұрын

🔥🔥🔥🔥

@JeremyMuradesign 2 жыл бұрын

tytyt

@ItzSajjad 2 жыл бұрын

Nice

@JeremyMuradesign 2 жыл бұрын

Thanks

@victorflorest 2 жыл бұрын

gracias causa

@JeremyMuradesign 2 жыл бұрын

GRACIAS

@b_q12_b12 3 жыл бұрын

thank u

@JeremyMuradesign 3 жыл бұрын

You're welcome!

@CarlosJacintoIFUFAL 2 жыл бұрын

All the best,

@JeremyMuradesign 2 жыл бұрын

@ZACKDEV 2 жыл бұрын

Pretty cool tutorial! I do know if the easier more simple/fast process to create this effect and fully customize the color hand in hand like a preset. Great work though keep it up. 👍

@JeremyMuradesign 2 жыл бұрын

Thanks Zack, yeah there is easier ways you can do it in XD or figma too but this is just one process of doing it.

@ZACKDEV 2 жыл бұрын

@@JeremyMuradesign awesome man! Great to hear back from a KZfaqr😂 but yes I think figma would be simple too!

@JeremyMuradesign 2 жыл бұрын

@@ZACKDEV haha yeah bro here I respond to every comment yo! Yeah I'm just an Illustrator geek haha

@garebizarre4446 2 жыл бұрын

Its really fuckin dope Thanks mate

@JeremyMuradesign 2 жыл бұрын

Thanks bruz

@anhquile7808 2 жыл бұрын

nice

@JeremyMuradesign 2 жыл бұрын

Thanks

@scuper501 2 жыл бұрын

謝謝！

@JeremyMuradesign 2 жыл бұрын

thank you

@PaulDoesIt 2 жыл бұрын

wish there would be live version of this effect

@JeremyMuradesign 2 жыл бұрын

Ofcourse tell that to #Adobe

@aior3616 2 жыл бұрын

خدارو شکر عالی هستید خدارو شکر کنید که به اینجا رسیدید

@JeremyMuradesign 2 жыл бұрын

@aaliswings 4 ай бұрын

Hi! Thank you, it was very helpful! Is it also possible in Illustrator to add this glassmorphism effect to a png picture (for example with a peaseful landscape)?

@JeremyMuradesign 4 ай бұрын

Yeh just put picture under the effect

@sidalinettah6580 2 жыл бұрын

great tutorial thanks for the tips buddy would you mind sharing the exact grain settings please i kinda got lost in there and i can't get it quite like yours

@sidalinettah6580 2 жыл бұрын

never mind i found out what was the problem ^^ thank you

@JeremyMuradesign 2 жыл бұрын

Awesome :) usualyl keep contrast at like 50 and the use light grain at around 10-20

@EliezerGrawe 2 жыл бұрын

You don't need to expand the text to apply gradient. Just go to appearence and add another fill above the original fill off the text. Then apply the gradient.

@JeremyMuradesign 2 жыл бұрын

Yeah you can do everything in appearance if you want to keep things live/editable in this case It didn't matter this is my flow bus.

@elijahdaniel_ 2 жыл бұрын

Awesome video. What sucks is that when translated into CSS: backdrop-filter: blur(5px), it's not supported in Firefox (I'm a chrome user but still lol)

@JeremyMuradesign 2 жыл бұрын

LOL that sucks , Yeh I'm on chrome too!

@velmalai4377 2 жыл бұрын

Appreciated for this video so much but I'm wondering how can i use shape builder without affecting my gradient effect?

@JeremyMuradesign 2 жыл бұрын

Thanks best thing is to make compound paths, I have a video on that too!

@velmalai4377 2 жыл бұрын

@@JeremyMuradesign thank you so much!

@JeremyMuradesign 2 жыл бұрын

@@velmalai4377 ty!

@noktos.5883 2 жыл бұрын

good tutorial, one question about soft recording. How do you do it? lol

@JeremyMuradesign 2 жыл бұрын

I use camtasia, you can use LOOM

@photocane 2 жыл бұрын

interesting effect, thank you! but isn't it better to show layers tab and adjustments about grain filter?

@JeremyMuradesign 2 жыл бұрын

Thanks mate, it depends on your style youcan do it that way if you want in the appreance tab.

@vogulz 2 жыл бұрын

I'm having an issue where when I reach the point of using the shape builder tool, the gradient of the object in the background then changes to fit the new shape, rather than maintaining its original spread. Im not sure if I missed a step or what....

@JeremyMuradesign 2 жыл бұрын

Doiuble check steps, Make it a compound path or go to gradient and click reverse or cahgen graident angle back.

@YS9-9 2 жыл бұрын

Why the fuck do you only have 30k subs bro, I mean you got a bit chaotic in there for a moment, but overall this vid was very nice to watch and educational :) Thanks and good luck! You are doing a great job imho.

@JeremyMuradesign 2 жыл бұрын

Hahah hard bro! Yeah I try and keep it organic not scripted one bit hence a little bit of chaos ;). Thanks man all the best.

@ErCapoAlex 2 жыл бұрын

♥️

@JeremyMuradesign 2 жыл бұрын

♥️

@myassin 2 жыл бұрын

I really appreciate your effort, but I got lost at the 5-minute mark and couldn't get the same results as yours. I think showing the layers panel would have helped. Thank you!

@JeremyMuradesign 2 жыл бұрын

Thanks mate for the feedback maybe watch in slow motion might help

@tonisevabernabeu2961 2 жыл бұрын

👌🏻👌🏻👌🏻💯💯💯

@JeremyMuradesign 2 жыл бұрын

thanks Toni!

@xenelectricsba9236 2 жыл бұрын

Hahahaha sae dudee

@JeremyMuradesign 2 жыл бұрын

haha

@HiTiffanyNg 2 жыл бұрын

when i create clipping mask from 4:07... the circle is clipped to the rectangle. And when i do gaussian blur it blurs out all the edge around the clipped circle (in the rectangle selection :( idk why

@JeremyMuradesign 2 жыл бұрын

use direct selection tool and select the circle inside the mask no the mask itself

@Lux_Resort 2 жыл бұрын

Do you have a project download link I can get? I literally cannot figure out illustrator to save my life, I only understand photoshop.

@JeremyMuradesign 2 жыл бұрын

No download link but you can figure it out follow the tutorial or check my other tutorials on my channel all about illustrator!!

@ozkanozer83 Жыл бұрын

how do you make without use raster effects

@JeremyMuradesign Жыл бұрын

You can't

@user-gy4ge5zk3g 2 жыл бұрын

Why don't apply the blurry effect on all of the art board and mask the glass in a way so you can move the glass and still get the effect anywhere you place it?

@JeremyMuradesign 2 жыл бұрын

You may be able to do it in the appearance panel I just did it this way because i't's easier to understand.

@vlasek_is_back2547 2 жыл бұрын

other desktop soft making software have more features and you can do much more than you can on mobile but the user interface in

@JeremyMuradesign 2 жыл бұрын

@jhonadrianl 2 жыл бұрын

Is this doable in Ps?

@JeremyMuradesign 2 жыл бұрын

Yes man similar way of doing it

@VL-yh5hy 2 жыл бұрын

Like background blur in figma)

@JeremyMuradesign 2 жыл бұрын

yeh similar but not everyoe uses figma

@teabagNBG 2 жыл бұрын

my computer always starts to lag when i use effects in illustrator....

@JeremyMuradesign 2 жыл бұрын

Yeah I have a video on how to fix lag on my channel!

@Mi-jt6nn 2 жыл бұрын

Друзья пользуйтесь фигмой для решения подобных задач.

@JeremyMuradesign 2 жыл бұрын

yeh bro!

@PaulSmithVPS 2 жыл бұрын

Great tutorial, but please lower the music a tad.

@JeremyMuradesign 2 жыл бұрын

Thanks mate

@cyanCubes 2 жыл бұрын

Is this how they did the windows 11 glass design?

@JeremyMuradesign 2 жыл бұрын

Yes it's glass morphism

@H10933X 2 жыл бұрын

can u plz share the Ai file????? it wud be great help bro

@JeremyMuradesign 2 жыл бұрын

Maybe

@haniefpratama3974 2 жыл бұрын

it bugs me that you didn't use the layers window 😂

@JeremyMuradesign 2 жыл бұрын

Lol I have other videos for that ;)

@atlaf24 2 жыл бұрын

nozomi ya bang?

@JeremyMuradesign 2 жыл бұрын

@atlaf24 2 жыл бұрын

@@JeremyMuradesign nah my friend borrowed my phone last time sorry, but your tutorial is helpful thanks man

@JeremyMuradesign 2 жыл бұрын

@@atlaf24 ahaha

@dubaiuxuidesigner Жыл бұрын

Desfoq no work :(

@JeremyMuradesign Жыл бұрын

what?

@petermain1211 2 жыл бұрын

Or just use background blur in Figma lol

@JeremyMuradesign 2 жыл бұрын

Lol bruh illustrator is the tool we use here not Figma ;)

@user-uk2cv8xd3i 2 жыл бұрын

I procrastinated for 6 years

@JeremyMuradesign 2 жыл бұрын

lol

@Plan73 2 жыл бұрын

Nice tutorial, but... have you sardinian ancestors? :)

@JeremyMuradesign 2 жыл бұрын

Italian background yep

@Plan73 2 жыл бұрын

@@JeremyMuradesign ok, because I'm italian (from sardinia) and we have the same last name :)

@JeremyMuradesign 2 жыл бұрын

@@Plan73 Yeah my nonna is from Sardinia!

@666MetalRogo666 2 жыл бұрын

That would be 99 percent of us

@JeremyMuradesign 2 жыл бұрын

lol

@surya2428 Жыл бұрын

🖤🖤🖤🤍🤩

@JeremyMuradesign Жыл бұрын

thanks!

@Estaphet 2 жыл бұрын

How do you realize blured-transparent on css? Backdrop-blur is not useful or maybe not a very professional way because not all browsers support this, say firefox. designers should also think about it. I mean, you also have to know or at least know enough about technical things like this, as a form of responsibility for the next process, namely programming. So, please don't make things that are beautiful but can't be realized properly.

@JeremyMuradesign 2 жыл бұрын

I understand not sure how to code that in css, you can actually save it as a small transparent PNG/SVG and put it on a website you don't have to use css