It's always amazing to see what neat brushes are out there; being able to interface with a practically limitless assortment of different artistic mediums through a single universal method (simple and intuitive, no less) never ceases to amaze me. Kudos! I'll definitely give it a try!
Thank you! Last year there was a special breakthrough for Krita, because a contributor called Memileo figured out a way to bake light into the brushes using Blender. They made a beautiful Impasto set (https://krita-artists.org/t/rotating-light-brushtips-wip/649...), their work was a huge help for my own brushes :)
Each rendered image becomes 1 frame of the "animated brushtip", with the option that each frame matches "direction" rather then being "incremental", and thats how you get the faux-light!
Pretty neat tech - the RGBA brush engine in Krita is doing something fundamentally different from PS's basic alpha masks. Being able to encode directional data in the brush tip itself opens up some interesting rendering possibilities. Been messing with similar effects in PS using layer styles but this seems way more efficient.
On the right track but not quite! Every brush in art software uses an image (raster or auto-generated) to paint with, called a "brushtip". Usually, the brushtip only gives information about which bits are opaque, and which arent - the shape! However in Krita, theres another dimension you can define; value, or lightness.
So there's nothing being generated or created while drawing, its just that some very smart people have coded Krita for the "brushtips" to do more as a baseline.
Not every software works exactly the same ofcourse! This is just my beginner level understanding of it all, I hope that helps
Photoshop and other painting software had "intelligent" brushes for a while now. These try to simulate stuff like paint mixing (even watercolor), opacity and texture.
Could you give me an example? I'd love to know more about the watercolour paint mixing.
If you meant the "live tip" settings of Photoshop, you can do all that in Krita too, using the "texture", and "mask tip" features. RGBA seems to definitely be something Krita has over Photoshop, but I could well be wrong!
by the way, there are other softwares like Rebelle that try to truly simulate traditional mediums - bordering on a whole-ass physics engine that works completely different in the backend from PSD/Krita. Unfortunately its a paid software so yeah :s
Damn that really does look cool (｡•́︿•̀｡) it seems like I have my work cut out for me, I'd love to have that "animated feel" in a Krita brush. I do have some ideas - I might not get anywhere but who knows :D
Great work! I have been looking for an excuse to try out Krita. This just might be it.
Shameless plug: I am also a sucker for metallic aesthetics, and I made this FOSS library to enable realistic metal textures on the web (for buttons, cards, input elements, etc.): https://www.metallicss.com
Very nice, I approve of anything that goes against the Material Design hegemony.
One question though: there's a (relatively) large delay updating the demo when I change the convexity. Is this something that comes from the update script or is the effect itself slow? Because I don't think I've ever seen a CSS effect that takes a half second to update before.
I checked out the source, there's only a single canvas being used to render a base64 PNG. The PNG is just a 400x400 spherical reflection map, which is basically a required component of any metallic effect. I don't think that would cause a slowdown.
A very long time ago in the 90s I spent far too long creating gradients to make buttons in a software UI match those in the physical control panel. This was for a video editing research project. Both metallic and rubber buttons were used, and I wish I'd kept a screenshot somewhere, but NDAs and suchlike mean it has disappeared from the world.
This looks great, it'd be so nice to be able to just define buttons rather than painstakingly drawing them out (thank you for making it, and thanks for the nostalgia trip!)
When I get around to making my website I will now be able to create a big, shiny, beautiful gold "Download Here" button!! thank you so much for sharing \╭◜◝ ᵕ ◜◝╮/
My apologies Kroltan, I accidentally replied to the wrong comment earlier! It's a shame the project disapeared I would have loved to have seen that :D
Rubber is a hard thing to get right imo, I was trying to paint it for one of the brush thumbnails of a rubber stamp (https://www.mediafire.com/view/46tten5kkzh2i99/Stamp_Diamond...) - and it was really difficult, I still don't think I got it quite right xD So I can't imagine how tough it would have been to try and create that texture using only CSS and JS back then
Just a small favor please: in your README.md file, on the first mention of word Krita, make a link to Krita repository or website. Thanks.
Added! Thank you for pointing that out (´｡• ᵕ •｡`)
It's always amazing to see what neat brushes are out there; being able to interface with a practically limitless assortment of different artistic mediums through a single universal method (simple and intuitive, no less) never ceases to amaze me. Kudos! I'll definitely give it a try!
Thank you! Last year there was a special breakthrough for Krita, because a contributor called Memileo figured out a way to bake light into the brushes using Blender. They made a beautiful Impasto set (https://krita-artists.org/t/rotating-light-brushtips-wip/649...), their work was a huge help for my own brushes :)
Memileo's results and your own are both incredible. Wow.
How baked in is the light position? I'd imagine it's possible to rotate the light in editor but not change it's height (without some work in Blender).
Ah, you would need to ask them for a concrete answer, but my understanding is that it is completely baked in.
Long optional explanation:
I say that because I think Memileo sculpted the actual brushstroke in Blender (https://krita-artists.org/uploads/default/original/3X/5/7/57...) and rendered lighting at different angles, and exported each as an image.
Each rendered image becomes 1 frame of the "animated brushtip", with the option that each frame matches "direction" rather then being "incremental", and thats how you get the faux-light!
The cool thing is that you can extract and edit the animated brushtip in Krita e.g. this one "https://github.com/Draneria/Metallics-by-Draneria_Krita-Brus..."
Which means theoretically, you could use photo editing to change the height I think!
Great stuff, it's good to hear how brushes work in these programs, reminds me of a great chat with one of the MyPaint devs.
Coolest thing I've seen all day. Thanks!
Pretty neat tech - the RGBA brush engine in Krita is doing something fundamentally different from PS's basic alpha masks. Being able to encode directional data in the brush tip itself opens up some interesting rendering possibilities. Been messing with similar effects in PS using layer styles but this seems way more efficient.
Exactly! it is really incredible. I've not used Photoshop much, I'd be curious to know how the two face-off in the realm of brush features haha
So what does it do? Create a normal map while drawing?
On the right track but not quite! Every brush in art software uses an image (raster or auto-generated) to paint with, called a "brushtip". Usually, the brushtip only gives information about which bits are opaque, and which arent - the shape! However in Krita, theres another dimension you can define; value, or lightness.
So there's nothing being generated or created while drawing, its just that some very smart people have coded Krita for the "brushtips" to do more as a baseline.
Not every software works exactly the same ofcourse! This is just my beginner level understanding of it all, I hope that helps
Photoshop and other painting software had "intelligent" brushes for a while now. These try to simulate stuff like paint mixing (even watercolor), opacity and texture.
Could you give me an example? I'd love to know more about the watercolour paint mixing. If you meant the "live tip" settings of Photoshop, you can do all that in Krita too, using the "texture", and "mask tip" features. RGBA seems to definitely be something Krita has over Photoshop, but I could well be wrong!
by the way, there are other softwares like Rebelle that try to truly simulate traditional mediums - bordering on a whole-ass physics engine that works completely different in the backend from PSD/Krita. Unfortunately its a paid software so yeah :s
It's been a while, but a bit of googling turned up this: https://www.adobe.com/uk/learn/fresco/web/realistic-watercol...
Damn that really does look cool (｡•́︿•̀｡) it seems like I have my work cut out for me, I'd love to have that "animated feel" in a Krita brush. I do have some ideas - I might not get anywhere but who knows :D
Lovely textures, thank you for sharing. Will try them out in some generative art projects I'm working on!
Krita is fantastic, and these look gorgeous! Thank you so much for your work.
Thanks for sharing! These look amazing and I look forward to trying them out.
This is fantastic, the paint looks great, excellent job :)
That's cool! Great work!
Honestly, I’m most impressed by that fantastic demo gif.
Amazing. This motivates me to try Krita. Well done.
Great work! I have been looking for an excuse to try out Krita. This just might be it. Shameless plug: I am also a sucker for metallic aesthetics, and I made this FOSS library to enable realistic metal textures on the web (for buttons, cards, input elements, etc.): https://www.metallicss.com
Very nice, I approve of anything that goes against the Material Design hegemony.
One question though: there's a (relatively) large delay updating the demo when I change the convexity. Is this something that comes from the update script or is the effect itself slow? Because I don't think I've ever seen a CSS effect that takes a half second to update before.
There are a lot of canvas in there, I doubt CSS is involved much in drawing this effect.
I checked out the source, there's only a single canvas being used to render a base64 PNG. The PNG is just a 400x400 spherical reflection map, which is basically a required component of any metallic effect. I don't think that would cause a slowdown.
Very cool! It'd be fun to use the webcam to create live reflections.
A very long time ago in the 90s I spent far too long creating gradients to make buttons in a software UI match those in the physical control panel. This was for a video editing research project. Both metallic and rubber buttons were used, and I wish I'd kept a screenshot somewhere, but NDAs and suchlike mean it has disappeared from the world.
This looks great, it'd be so nice to be able to just define buttons rather than painstakingly drawing them out (thank you for making it, and thanks for the nostalgia trip!)
When I get around to making my website I will now be able to create a big, shiny, beautiful gold "Download Here" button!! thank you so much for sharing \╭◜◝ ᵕ ◜◝╮/
wow, that's amazing! I'm gobsmacked you can make something like this with CSS, that is so cool
Not just CSS, it's used to set parameters but looks like the actual rendering is done in a <canvas> element controlled by JS.
My apologies Kroltan, I accidentally replied to the wrong comment earlier! It's a shame the project disapeared I would have loved to have seen that :D
Rubber is a hard thing to get right imo, I was trying to paint it for one of the brush thumbnails of a rubber stamp (https://www.mediafire.com/view/46tten5kkzh2i99/Stamp_Diamond...) - and it was really difficult, I still don't think I got it quite right xD So I can't imagine how tough it would have been to try and create that texture using only CSS and JS back then