I tried designing and coding grainy textures for a week

Подписаться 209 тыс.

Просмотров 345 тыс.

50% 1

In this video, I'm exploring grainy textures in both design and code.
// Check the daily designs on CodePen:
Day 1: codepen.io/Juxtopposed/pen/ZE...
Day 2: codepen.io/Juxtopposed/pen/vY...
Day 3: codepen.io/Juxtopposed/pen/Ba...
Day 4: codepen.io/Juxtopposed/pen/zY...
Day 5: codepen.io/Juxtopposed/pen/Po...
// ✨ Become a supporter:
ko-fi.com/juxtopposedme
// Check my designs on Dribbble:
dribbble.com/juxtopposed/coll...
// Tools mentioned in the video:
Noise generator: fffuel.co/nnnoise/
SVG to Base64: fffuel.co/eeencode/
// Custom Grainy Shape Path Code Ready for Copy/Paste:
codepen.io/Juxtopposed/pen/WN...
// Dribbble designs featured in the video:
dribbble.com/shots/15379037-F...
dribbble.com/shots/13801552-S...
dribbble.com/shots/17243902-C...
Timestamps:
00:00 Intro
00:26 What are Grainy Textures
00:54 Designing Grainy Textures
02:23 Coding Grainy Textures
03:02 Creating Noise SVGs
04:21 Importing the Noise SVG into Code
04:55 Getting Creative with Grainy Textures
-----
// Let's connect:
Twitter: / juxtopposed
CodePen: codepen.io/Juxtopposed
Dribbble: dribbble.com/juxtopposed
Github: github.com/juxtopposed
Thanks for watching!
#grainytexture #codepen #figma #tutorial #designandcode #weeklyadventures #textures

Наука

Опубликовано:

19 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 259

@juxtopposed Год назад

What do you like to see me explore next? Let me know down below! ✨

@boudyhesham5875 Год назад

Wow amazing work GJ, where do you get to study all these stuff ?

@lajawi. Год назад

How to animate SVGs easily?

@AR7editing Год назад

anything, you explaing things really well

@plaskut Год назад

I'm also interested in animating the noise filter. Imitation CRT noise in SVG would be really cool!

@carloking2163 2 месяца назад

@lajawi2115 after effects has a few plugins for generating lottie files from SVGs

@JakeLuden Год назад

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 Год назад

Why did you switch from wedding photography to developing?

@JakeLuden Год назад

@@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!

@neverninetofive Год назад

@@JakeLuden I appreciate the answer. I’m tying to quit my engineering job to become a photographer, that’s why I am asking 🫠

@kirk1257 Год назад

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!

@CEntertainArt Год назад

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.

@trtl9106 Год назад

Do you think maybe this trend is caused by an increase of the desire for a low tech, lo-fi daily life?

@itsjapanic Год назад

@@trtl9106 😲😲

@l1p0v Год назад

@@trtl9106 it just looks cool.

@maskedvillainai 11 месяцев назад

Kinda feels like all people

@JaymeWilde Год назад

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

@shawnthomas85 10 месяцев назад

Me too bro. The 1st video was “the word shorted Ui/ux course”

@devwebjourney 11 месяцев назад

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 !

@ARitzCracker Год назад

You have combined graphics design and programming in a way that very few people I've seen do. Thank you for this.

@Chintanned Год назад

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!

@dopetag Год назад

This channel is a pure gem! Thanks for incredible content

@xenoliving3951 Год назад

This is the tutorial I have been waiting my whole life for. ♥

@khuramshahzad9089 Год назад

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. 🎉

@magisterumbrae Год назад

+1 to this

@j_u_d_y3041 Год назад

Wow~This is fantastic! Thank you for sharing the detailed steps of your thinking process~Very helpful!

@danascript 4 месяца назад

This video is amazing! Love the explanation, the visuals, the pace, wow! Brb doing some grainy textures ❤

@Eugensson Год назад

Interesting fact: the old iPhone skeumorphic UI used grainy backgrounds a lot to conceal the phone's bad screen resolution. It worked really well.

@Ma1ne2 Год назад

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 😊

@franksonjohnson Год назад

Yo your channel' gonna blow up this is one of the best videos bridging design and code I've ever seen.

@jameshskim Год назад

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 😅

@ellenripley4837 Год назад

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.

@dominikcygan2664 Год назад

This is literally my favourite look these days, I plan to remake my whole portfolio website with that style

@freeguy2418 Год назад

I found every video in this channel helpful. Even the small details are time consuming to learn, But this helped me here.

@kelshakes Год назад

Thank you! I've been thinking of how to do grainy designs for the past week and this was very helpful

@triplea128 Год назад

you explained this so accurately, genius!!!!

@xorlop Год назад

what a cool video! There is so much more to learn and play with on svg filters!

@erikagomez4372 Год назад

I recently found your channel and let me tell you: YOU'RE AMAZING! thank you soo much for this video

@halfbloodquince Год назад

Subscribed in the first 5 seconds. I love your style and look forward to watching this channel grow! Keep them coming :)

@charliecoppinger Год назад

Ditto! Thaks for such a great (and entertaining) video.

@cerulity32k Месяц назад

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!

@drewkantos Год назад

Love how easy to made this to grasp. I'm a noob but totally understood this. Cheers!

@fearlesshydra1346 Год назад

This is dope, really well put together video!

@bravefastrabbit770 Год назад

Incredibly underrated channel, can't believe you're only at 13.2k subs.

@Som3Won Год назад

what ai voice service do you use?

@luisalejandroacunalopez3662 Год назад

Just discovered your channel, and I love it, great work!

@valentinkrajzelman4649 11 месяцев назад

absolutely impressive work, thanks!

@InfinityFnatic Год назад

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!

@juxtopposed Год назад

That’s great! Glad to hear that!

@edwardwhatson6058 6 месяцев назад

Brilliantly put together video, well done

@bossysmaxx3327 4 месяца назад

I didn't want to subscribe your channel but I had to bow down to your skills madame, good stuff you creating there

@thraizz Год назад

This was a really cool video, thank you for sharing. Loved the style, subscribed

@malkythealky 7 месяцев назад

Love the video, exactly what I was looking for! Thank you

@jasonranalliheadshots6875 Год назад

Very interesting video! I love this intersection of design and code. Would like to see more videos.

@fitzgeraldbabiera2507 Год назад

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)

@passion__ Год назад

you got a new subscriber :) I must say your videos are very well-made and impressive.

@gokulram4523 Год назад

Very interesting and well structured video! Keep up the good work!

@juxtopposed Год назад

Thank you! ✨

@taku6157 Год назад

loving your channel

@jackpaice Год назад

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

@atalhlla Год назад

16 seconds in and you got me. That cat is a real spirit animal.

@ARC583 2 месяца назад

This was very helpful!

@olemai Год назад

Keep up the good work!

@ooogabooga5111 Год назад

Fireship mini with AI voice modulation. I love the quality of these videos. Thank you "mam"

@_briantravis Год назад

Really well done video! Subscribed!

@jabeztadesse Год назад

Your Voice Works.

@frontendtony Год назад

Great content! High level of expertise! Amazing narration! Concise! Subscribed!

@juxtopposed Год назад

Thank you! glad you liked it✨

@ohalbe55 Год назад

this video helped me a lot. thanks you!!

@kipchickensout 11 месяцев назад

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

@barristar9338 5 месяцев назад

What!!!! Thank you so much You blew my mind

@saeedbarari2207 Год назад

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

@andrew-burgess Год назад

Loved this! And loved your style! Subscribed.

@juxtopposed Год назад

Thank you so much! I'm glad you liked it ✨️

@keflatspiral4633 10 месяцев назад

great content + amazing voice i'd like to see the face of this great teacher!

@lawrencejob Год назад

I love this. Have you tried combining with blend modes?

@adri.progression 4 месяца назад

Wow! Thank you, I'm making my portfolio by learning Webflow!

@lemonline3719 9 месяцев назад

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 RU-vid captions already, and they block the interface. Better to give viewers the options to turn them on or off.

@ianxe Год назад

i have no clue what im watching but this is very cool WAAAA

@ridafkih Год назад

Love this content!

@Slipping_thru_the_Seams Год назад

pretty cool stuff!!!

@jo69123 7 месяцев назад

fucking brilliant way to make a video, you are on to something, thanks for sharing it

@Ked_gaming 8 месяцев назад

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

@devkit_ Год назад

Great vid! Keep it up

@ahumblerequest5222 Год назад

thank you. It ready helped.

@darrenfrancis8126 5 месяцев назад

the memes and sound effects make this 10x better 😂

@Eloii_Xia Год назад

Shaders is a nice way to do it :D

@nitishxo Год назад

You are so underrated

@garrettmandujano2996 11 месяцев назад

That is so cool!!

@JG-Chessmaster Год назад

Great video 🎉

@kozuma2510 Год назад

I love vidos like this ! Keep going please!

@rajat0610 Год назад

super content!!! i'm glad i found this channel!

@juxtopposed Год назад

glad you liked it!

@Gokulbalram 4 месяца назад

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

@randomzaping5516 Год назад

u can layer a video or a looping gif of the grainy effect on top of the page and lower the opacity

@karre00 3 месяца назад

i fucking love you, your channel is awesome!

@znatnodobre 10 месяцев назад

1:01 my alma mater on the bg!!! sick!!!

@kiryls1207 Год назад

this was a cool video

@theMadZakuPilot Год назад

great video. keep it up

@soumelee5661 Год назад

very good video !!!

@CryptonicLive Год назад

Do you use that adobe app that uses AI to remove background noise? In some parts of this video it just barely sounds like results I've heard from that where it gets a little messed up.

@rubenroyomarco5888 4 месяца назад

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 :)

@fictionplus Год назад

I like this creator lmaoo

@tennsummer Год назад

Good video! I would love to complete the steps and add grain in my own portfolios. Question tho... why would i ever need to use base 64 ???

@igrb Год назад

Banger

@Emeny Год назад

really cool, thank you :)

@ramasanjaya22 Год назад

thx it's help me a lot!

@kipchickensout 11 месяцев назад

gotta love the cat images:)

@adevikthur Год назад

Thanks much, you got a new sub!

@kualta Год назад

good video I enjoyed

@home1250 Год назад

You are a true hero for this one. If you need an editor or just have a commnuity of supporters Id love to join

@juxtopposed Год назад

Thank you! I'm glad you liked it! ✨

@DioArsya 11 месяцев назад

wow, subscribed! I'm curious how you edit the video like the code snippet, the coding part, etc. and what software do you use? hehe

@RedStone576 Год назад

really cool

@sankiago Год назад

amazinggg

@npip99 4 месяца назад

0:35 Still happens on new cameras, regardless of ISO it's just caused by not enough light entering the aperture.

@feelgoodmusic8722 10 месяцев назад

EPIC channel!

@miketkong2 10 месяцев назад

You rock. Ty!!!! 😊

@vkgsbr Год назад

In Figma, right click on your object > Copy/Paste as > Copy as svg

@majoralter Год назад

Great video. Just Subscribed!

@nurb2kea 4 месяца назад

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!