As an ex wedding photographer who left to become a developer, I cannot thank you enough for this video 😭 This is something I’ve wanted to tackle so bad as tasteful grain was such an important part in my editing process, and I wanted to emulate it in my web designs as well. Amazing job.
@@neverninetofive Oh man, more reasons than I can count haha. Main issues boiled down to missing almost every important event (all of my best friends’ weddings, family events, etc.), 100-120hr work weeks permanently, and no “off the clock” time. I’m very grateful for the 7ish years I did it as I don’t have a degree and it provided a way out of my retail job, but it was definitely time to move on. I’m eternally grateful for companies taking a chance on me with development as well due to the no degree thing. Life is crazy!
Hey Jake! I think the work of dev and photographer depends highly on personality as well. I'm full-time designer and also work closely only with devs. I think it's kind of job that is more for people, who value one place. I'm also a hobby photographer and also think to move to photography, since I would love to have more contact to people and have less "editing, reviewing" phases in my daily job. Would love to hear more from you about your experience. It would be also nice if you could share your Instagram! Good luck!
Genuinely love seeing more people using this kind of style. I've been enjoying noisy textures for a long time now, and this is honestly a blessing. Even NASA uses grainy backgrounds for their app.
Dude, stumbled upon these accidently, and as the second video Ive watched, instantly in love with your style, the clear simple way you deliver information, the fast pace nature and the bits of humor sprinkled in. Instant fan. Thank you so much
I just found out your video randomly while exploring and the nature has brought you an subscriber. Amazing work from video editing style, to narration from scrpts to style of video. 🎉
1:56 For this effect I would recommend to alter the standard gradient instead of leaving it as it is. It will give you the same effect than what the person did with procreate. You just have to move the node with the 0 opacity hue a little bit higher. Also when you use the noise texture, aside from playing with the opacity of the texture, play with your blending options. You can find those when you click on the drop icon when you open the fill to change the color.
Wow! It's rare to come by someone who has both the technical execution and design eye like yourself! I'm curious about your journey, possible next video idea? Also, if you have one tip for anyone to get started on their development journey, what would that be? I'm mainly asking because as a designer, I struggle to actualize my designs for personal projects 😅
After using Blender with a low-end PC for quite some time, those grains make an image look & feel so pleasing to the eyes (Even though grainy images aren't what most people are looking for)
I use SVG with react all the time. You just copy the Figma item as SVG (or export it as SVG code), and then you can use it as a regular html element in your react code, inside a return block. Subsequent CSS changes can be made just like with any other JSX or TSX file
I just discovered your channel with your last video about the colour theme website you created, I really enjoy the editing, pace and content! This is another great video and I am gonna have a lot of fun playing with this. To me, the last option leaving the svg markup inside the html is the best, because with a Framework you can just hide that stuff inside a component and by that have a super clean solution 😊
Little Lifehack: you don’t need to do the inspection part with sections to get to the svg code. If you import the svg file right into VS Code, you will immediately see the svg code itself.
very nice video. Info about base64, it's just an encoding to be able to show any binary data or text with spaces and unwanted characters as a single string and can be reverted, and in data URLs it starts after the comma. you can also convert them back to bytes, there is a website i found that makes it quick, you just paste any base64 and it spits out the original file, you may need to fix the file extension if it doesn't get it
glad to see all these comments about the voice over, thought I was going crazy. new AI trends got me questioning my sanity. still unsure if this is generated or not
Noise is the no.1 driver in CG. To apply noise over an image in whatever application is via a blend mode like overlay etc. The number one rule for the noise to work correct is to build it right. - > Make a layer with 128 grey (50%) and apply your noise on this layer. This way you have neutral grey with lighter and darker peaks. Now when blending this layer over the image, the image itself won't appear darker or lighter, thanks to the 50% grey layer!! < - With different blend modes, contrast or highpass you can change the noise ammount/graininess even more. Try to use an app that alows to generate differen size (scalable) noise. But best is to generate procedural NEUTRAL GREY noise on the fly instead of noise images to blend over!
There's a trick with youtube to make quality better for free - if you export & upload a video you made in 4k instead of 1080p (even if the content itself is just 1080p), YT will store the video with higher bitrate so if you watch the video in 4k quality on a 1080p screen you still feel a good increase in quality. I think this can be useful for videos like this where the fine quality can be appreciated
No criticism here but two comments: Grainy originally comes from film grain. (old chemical-based, not laser-printed) Photos don't have pixels, they have small grains of different colors that make up the image. So a grainy image would be one that has large-enough grains (for various reasons) that you can see them individually and as they have distinct color they can make what was meant to be a smooth color gradient look pixel-y. Also the look you're going for would technically be a mixture of graining and heavy out-of-focus blur. (interestingly an effect that is very much associated today (at least in my field) with raytracing).
Hey, I think for the part where you had to paste the svg code, you can either directly copy the shape from figma and paste it into a text editor (it will paste as a code), or you can right click, copy as, and it will give you options. On illustrator, you can just copy it normally, and paste it directly as code
windows' Acrylic material is doing that too. noise over blur overlayed with a main color. it's used in various places like the START menu. honestly it's the best blur I've ever seen
0:32 just wanna clarify - on film, ISO was not a "setting" on film (and it definitely isn't something to do only with old cameras), also, your next point about low-light conditions - that's also to do with ISO. Film essentially works by exposing small grains of silver halides to light for a certain amount of time. The size of those grains is what ISO is - the bigger the grain, the more sensitive the film is to light - the higher the ISO is. ISO is essentially sensitivity, i.e. how sensitive the film/sensor is to light, so for your second point - it's not the dark causing the grain, it's having to use a higher ISO because of the dark, that is why you can take long-exposures when it's darker and the image wont turn out grainy. Hopefully what I said explains the topic well enough, it's 3 am and I'm procrastinating doing work rn.
Amazing video! I'm definitely going to apply these techniques in the future. My only suggestion would be to remove the baked-in/hardcoded subtitles from your video, since there are TH-cam captions already, and they block the interface. Better to give viewers the options to turn them on or off.
did you use an ai for the voice? at one point it's hard to recognize if it's an ai so i don't know if it's fully ai, but as a musician, either you have a toaster as a mic or are using an ai for your voice.
PNG is a lossless image format, what did you mean by it being low quality? The SVG adds extra compute at page render (which will start to matter for larger screen sizes). Pre-generating the noise texture and embedding (as base64 data) it in the document is likely the most scalable way if you don’t care about the noise changing on every page load.
Not sure what you mean by "can't edit" when importing a .svg Also, you can use non base64 encoded svgs with a data URI that starts with 'data:image/svg+xml;utf8,
Please tell me someone already told you that in Figma you can just: right-click -> Copy/Paste as -> Copy as SVG to copy the full SVG code into the clipboard without all the export-inspect-fuckery 😅. Just usually recommended to remove the width/height attributes on the SVG tag if you're using the whole code.
Cool tricks! As a better alternative to base64 encoded svg into your css you should most likely make the svg external and lazy load it with a bundler if you're using a framework
Lmao and here I was thinking this was for a shader or something. I was gonna suggest a perlin noise x shifting perlin noise gated to 0.95 or higher to make static grain
@@mighilife-mighi7432 Sorry, I meant, Uh, I was having difficulty guessing the author’s [rough-age]+[sex]+[gender] based on their voice? I was trying to say that kind of thing in a more sensitive way by being more vague/less-specific, but it seems I just failed to communicate instead?
Loved the video. I'm curious about the looks of that tutorial on how to write svg manually. Is there a tool that you use to do the different steps highlighting the lines you're talking of? If that's the case I'd like to know what it is. It would look awesome on my degree presentations. Sorry about my english 😅. Thanks in advance and have a nice day :)
What do you like to see me explore next? Let me know down below! ✨
Wow amazing work GJ, where do you get to study all these stuff ?
How to animate SVGs easily?
anything, you explaing things really well
I'm also interested in animating the noise filter. Imitation CRT noise in SVG would be really cool!
@lajawi2115 after effects has a few plugins for generating lottie files from SVGs
As an ex wedding photographer who left to become a developer, I cannot thank you enough for this video 😭 This is something I’ve wanted to tackle so bad as tasteful grain was such an important part in my editing process, and I wanted to emulate it in my web designs as well. Amazing job.
Why did you switch from wedding photography to developing?
@@neverninetofive Oh man, more reasons than I can count haha. Main issues boiled down to missing almost every important event (all of my best friends’ weddings, family events, etc.), 100-120hr work weeks permanently, and no “off the clock” time.
I’m very grateful for the 7ish years I did it as I don’t have a degree and it provided a way out of my retail job, but it was definitely time to move on. I’m eternally grateful for companies taking a chance on me with development as well due to the no degree thing. Life is crazy!
@@JakeLuden I appreciate the answer. I’m tying to quit my engineering job to become a photographer, that’s why I am asking 🫠
Hey Jake! I think the work of dev and photographer depends highly on personality as well. I'm full-time designer and also work closely only with devs. I think it's kind of job that is more for people, who value one place. I'm also a hobby photographer and also think to move to photography, since I would love to have more contact to people and have less "editing, reviewing" phases in my daily job. Would love to hear more from you about your experience. It would be also nice if you could share your Instagram! Good luck!
There is no such thing as tasteful grain in photography
Genuinely love seeing more people using this kind of style.
I've been enjoying noisy textures for a long time now, and this is honestly a blessing.
Even NASA uses grainy backgrounds for their app.
Do you think maybe this trend is caused by an increase of the desire for a low tech, lo-fi daily life?
@@trtl9106 😲😲
@@trtl9106 it just looks cool.
Kinda feels like all people
Dude, stumbled upon these accidently, and as the second video Ive watched, instantly in love with your style, the clear simple way you deliver information, the fast pace nature and the bits of humor sprinkled in. Instant fan. Thank you so much
Me too bro. The 1st video was “the word shorted Ui/ux course”
I just found out your video randomly while exploring and the nature has brought you an subscriber.
Amazing work from video editing style, to narration from scrpts to style of video. 🎉
+1 to this
Interesting fact: the old iPhone skeumorphic UI used grainy backgrounds a lot to conceal the phone's bad screen resolution. It worked really well.
1:56 For this effect I would recommend to alter the standard gradient instead of leaving it as it is. It will give you the same effect than what the person did with procreate. You just have to move the node with the 0 opacity hue a little bit higher. Also when you use the noise texture, aside from playing with the opacity of the texture, play with your blending options. You can find those when you click on the drop icon when you open the fill to change the color.
Wow! It's rare to come by someone who has both the technical execution and design eye like yourself! I'm curious about your journey, possible next video idea? Also, if you have one tip for anyone to get started on their development journey, what would that be? I'm mainly asking because as a designer, I struggle to actualize my designs for personal projects 😅
This is the tutorial I have been waiting my whole life for. ♥
After using Blender with a low-end PC for quite some time, those grains make an image look & feel so pleasing to the eyes (Even though grainy images aren't what most people are looking for)
Subscribed in the first 5 seconds. I love your style and look forward to watching this channel grow! Keep them coming :)
Ditto! Thaks for such a great (and entertaining) video.
This channel is a pure gem! Thanks for incredible content
When I first did ray tracing in Blender, the diffuse materials looked grainy. I wondered how it could be used as an advantage. Didn't disappoint!
Please do this type of video more often. It's awesome and really inspiring to see how to create such trendy/newly type of design, you rock !
Amount of effort in creating whole starting from making grainy texture to code to this video to edit the video is insane!
Hat's off!
I use SVG with react all the time. You just copy the Figma item as SVG (or export it as SVG code), and then you can use it as a regular html element in your react code, inside a return block. Subsequent CSS changes can be made just like with any other JSX or TSX file
I just discovered your channel with your last video about the colour theme website you created, I really enjoy the editing, pace and content! This is another great video and I am gonna have a lot of fun playing with this. To me, the last option leaving the svg markup inside the html is the best, because with a Framework you can just hide that stuff inside a component and by that have a super clean solution 😊
You have combined graphics design and programming in a way that very few people I've seen do. Thank you for this.
This is literally my favourite look these days, I plan to remake my whole portfolio website with that style
Your Voice Works.
16 seconds in and you got me. That cat is a real spirit animal.
Incredibly underrated channel, can't believe you're only at 13.2k subs.
Little Lifehack: you don’t need to do the inspection part with sections to get to the svg code. If you import the svg file right into VS Code, you will immediately see the svg code itself.
the cat pictures make this my new favorite channel
Yo your channel' gonna blow up this is one of the best videos bridging design and code I've ever seen.
very nice video. Info about base64, it's just an encoding to be able to show any binary data or text with spaces and unwanted characters as a single string and can be reverted, and in data URLs it starts after the comma. you can also convert them back to bytes, there is a website i found that makes it quick, you just paste any base64 and it spits out the original file, you may need to fix the file extension if it doesn't get it
In Figma, right click on your object > Copy/Paste as > Copy as svg
I found every video in this channel helpful. Even the small details are time consuming to learn, But this helped me here.
I didn't want to subscribe your channel but I had to bow down to your skills madame, good stuff you creating there
you got a new subscriber :)
I must say your videos are very well-made and impressive.
This video is amazing! Love the explanation, the visuals, the pace, wow! Brb doing some grainy textures ❤
glad to see all these comments about the voice over, thought I was going crazy. new AI trends got me questioning my sanity. still unsure if this is generated or not
Noise is the no.1 driver in CG. To apply noise over an image in whatever application is via a blend mode like overlay etc.
The number one rule for the noise to work correct is to build it right.
- > Make a layer with 128 grey (50%) and apply your noise on this layer. This way you have neutral grey with lighter and darker peaks.
Now when blending this layer over the image, the image itself won't appear darker or lighter, thanks to the 50% grey layer!! < -
With different blend modes, contrast or highpass you can change the noise ammount/graininess even more. Try to use an app that alows to generate differen size (scalable) noise.
But best is to generate procedural NEUTRAL GREY noise on the fly instead of noise images to blend over!
There's a trick with youtube to make quality better for free - if you export & upload a video you made in 4k instead of 1080p (even if the content itself is just 1080p), YT will store the video with higher bitrate so if you watch the video in 4k quality on a 1080p screen you still feel a good increase in quality. I think this can be useful for videos like this where the fine quality can be appreciated
the memes and sound effects make this 10x better 😂
No criticism here but two comments: Grainy originally comes from film grain. (old chemical-based, not laser-printed) Photos don't have pixels, they have small grains of different colors that make up the image. So a grainy image would be one that has large-enough grains (for various reasons) that you can see them individually and as they have distinct color they can make what was meant to be a smooth color gradient look pixel-y. Also the look you're going for would technically be a mixture of graining and heavy out-of-focus blur. (interestingly an effect that is very much associated today (at least in my field) with raytracing).
Last time humans experimented with grain this much was in ancient Mesopotamia
😂
Thank you! I've been thinking of how to do grainy designs for the past week and this was very helpful
I recently found your channel and let me tell you: YOU'RE AMAZING! thank you soo much for this video
4:12 - Just click on the element in figma, right click, copy code => CSS.
Wow~This is fantastic! Thank you for sharing the detailed steps of your thinking process~Very helpful!
Hey, I think for the part where you had to paste the svg code, you can either directly copy the shape from figma and paste it into a text editor (it will paste as a code), or you can right click, copy as, and it will give you options. On illustrator, you can just copy it normally, and paste it directly as code
1:01 my alma mater on the bg!!! sick!!!
Fireship mini with AI voice modulation. I love the quality of these videos. Thank you "mam"
You have saved my lifeeeeeeee, THANKSSSSS, JUST SAW THIS NOW AFTER LOOKING, Although i have a question, can we make the seperate grains move
windows' Acrylic material is doing that too. noise over blur overlayed with a main color. it's used in various places like the START menu. honestly it's the best blur I've ever seen
Just fyi, PNG uses lossess compression so the quality will be fine, its use case that would affect it, e.g. changing resolution dynamically
0:35 Still happens on new cameras, regardless of ISO it's just caused by not enough light entering the aperture.
Wow! Thank you, I'm making my portfolio by learning Webflow!
you explained this so accurately, genius!!!!
I love this. Have you tried combining with blend modes?
Just discovered your channel, and I love it, great work!
Love how easy to made this to grasp. I'm a noob but totally understood this. Cheers!
This was really good. I have some old grainy dribbble designs saved and I might just try to implement them after seeing this. Thank you!
That’s great! Glad to hear that!
what a cool video! There is so much more to learn and play with on svg filters!
great content + amazing voice i'd like to see the face of this great teacher!
0:32 just wanna clarify - on film, ISO was not a "setting" on film (and it definitely isn't something to do only with old cameras), also, your next point about low-light conditions - that's also to do with ISO.
Film essentially works by exposing small grains of silver halides to light for a certain amount of time. The size of those grains is what ISO is - the bigger the grain, the more sensitive the film is to light - the higher the ISO is. ISO is essentially sensitivity, i.e. how sensitive the film/sensor is to light, so for your second point - it's not the dark causing the grain, it's having to use a higher ISO because of the dark, that is why you can take long-exposures when it's darker and the image wont turn out grainy.
Hopefully what I said explains the topic well enough, it's 3 am and I'm procrastinating doing work rn.
u can layer a video or a looping gif of the grainy effect on top of the page and lower the opacity
This is dope, really well put together video!
granny grainy coming soon. It relies heavily on wavy wrinkles vs perlin noise and snoring audio
Amazing video! I'm definitely going to apply these techniques in the future.
My only suggestion would be to remove the baked-in/hardcoded subtitles from your video, since there are TH-cam captions already, and they block the interface. Better to give viewers the options to turn them on or off.
This was a really cool video, thank you for sharing. Loved the style, subscribed
I only came to watch this video becuase of your humor and to feel asmr. I don't even do ui/ux. I make identities and thumbnails 🥴🥴
did you use an ai for the voice? at one point it's hard to recognize if it's an ai so i don't know if it's fully ai, but as a musician, either you have a toaster as a mic or are using an ai for your voice.
sounds fine on my sennheisers, as a musician
sounds like AI to me as well, was wondering if I was the only one who noticed it
I agree, it sounds like AI at some points.
PNG is a lossless image format, what did you mean by it being low quality?
The SVG adds extra compute at page render (which will start to matter for larger screen sizes). Pre-generating the noise texture and embedding (as base64 data) it in the document is likely the most scalable way if you don’t care about the noise changing on every page load.
Loved this! And loved your style! Subscribed.
Thank you so much! I'm glad you liked it ✨️
Brilliantly put together video, well done
Not sure what you mean by "can't edit" when importing a .svg
Also, you can use non base64 encoded svgs with a data URI that starts with 'data:image/svg+xml;utf8,
This was very helpful!
gotta love the cat images:)
what ai voice service do you use?
Very interesting video! I love this intersection of design and code. Would like to see more videos.
Great vid! Keep it up
I like this creator lmaoo
I like the part where you talked about rainy textures
absolutely impressive work, thanks!
i have no clue what im watching but this is very cool WAAAA
Love the video, exactly what I was looking for! Thank you
You are so underrated
Very interesting and well structured video! Keep up the good work!
Thank you! ✨
Please tell me someone already told you that in Figma you can just:
right-click -> Copy/Paste as -> Copy as SVG
to copy the full SVG code into the clipboard without all the export-inspect-fuckery 😅.
Just usually recommended to remove the width/height attributes on the SVG tag if you're using the whole code.
It looks more like digital noise. You can add grayscale(1) and opacity(.15), it will look much more pleasing to the eye.
Shaders is a nice way to do it :D
Great content! High level of expertise! Amazing narration! Concise! Subscribed!
Thank you! glad you liked it✨
i fucking love you, your channel is awesome!
Cool tricks! As a better alternative to base64 encoded svg into your css you should most likely make the svg external and lazy load it with a bundler if you're using a framework
Lmao and here I was thinking this was for a shader or something. I was gonna suggest a perlin noise x shifting perlin noise gated to 0.95 or higher to make static grain
About film, many don’t realise: the grain are literally the “pixels” of the film.
loving your channel
Whoa cool stuff..
Could you try creating a pixelization / downscale effect, i feel like that'd be a challenge.
Thank you! Yeah that'd be very cool. Will give it a shot :)
@@juxtopposed Alright
Can you do glass design next?
fucking brilliant way to make a video, you are on to something, thanks for sharing it
Oh. That's cool, I had no idea existed.
You are a true hero for this one. If you need an editor or just have a commnuity of supporters Id love to join
Thank you! I'm glad you liked it! ✨
Love your voice lol
I am trying to understand what it indicates about the video author?
@@drdca8263 ? What's the matter
@@mighilife-mighi7432 Sorry, I meant,
Uh,
I was having difficulty guessing the author’s [rough-age]+[sex]+[gender] based on their voice?
I was trying to say that kind of thing in a more sensitive way by being more vague/less-specific, but it seems I just failed to communicate instead?
@@drdca8263 nah you're good lol
Ig is a woman over 20? Idk but the voice is addictive
That is so cool!!
Really well done video! Subscribed!
Loved the video. I'm curious about the looks of that tutorial on how to write svg manually. Is there a tool that you use to do the different steps highlighting the lines you're talking of? If that's the case I'd like to know what it is. It would look awesome on my degree presentations.
Sorry about my english 😅. Thanks in advance and have a nice day :)
What!!!!
Thank you so much
You blew my mind
copying svg mark-up on figma is as easy as:
left click > copy/paste as > copy as svg