 Okay, so my task for today is actually to do some new shadows for breeze I This is actually the second time I do this I had already done some shadows, but then they were changed into this and I think that They're not good enough So I'll try to do something that's better both than what we had and what we have right now and to do that I've actually received this SVG from someone in Reddit awesome person and As you can see it's really interesting because it has this concept that instead of using a radial shadow That's all around the object. We have some kind of perspective in here It's a bit too strong for breeze if you give a look to this theme. It's very nice Let me fetch it again. I've just retweeted the sorry vigil The treat showing the screenshots. So let me pick it up. It's very nice But we could adapt it to breeze do some extent So let's try to see how to do that. So let's also pick up the the theme with no hurry in slow internet and We can also see that how this was done is a radial gradient here pretty normal stuff but in here you can see this object that changes its size and It's bigger and has a wider radius for the shadow here Which is a very cool concept that will try to replicate. So as you can see here It's this thing. It looks like this when you actually use it and it's very nice. I like it So Let's try to do something similar with place. So right now the shadow is too strong and Also fades out a bit Why is there a double node? What's this? Okay? It fades out too slowly. So we can First of all, let's see how the shadow was made like It goes from this which is 24 opacity to 9 opacity and Then to 0 opacity. Okay? So if we want to go in the shadow to go Faster to transparency we can Make this value lower and as you can see it becomes Not necessarily smaller, but it's just as dark here But we can also make it slightly dimmer here as well like this So this is a shorter software shadow that goes faster to Zero and if we'll give a look to this one this one goes from 10 To zero whereas our shadow right now goes from 20 to 0 Passing to 6. Okay So Let's do this all around so we're consistent So set 20 Let's go with rounded into integer. So it's sorry. So it's More clear 27 7 0 20 7 0 Okay, and 0 Actually, I think I'll keep old version of the shadow to have some kind of reference to what was the shadow 20 last one. So this is the new one Still quite strong. I think Compared to other kind of shadows, so let's just pick up the old one Shit, I just undid all the work I've done accidentally Nice Come on. I need to do all over again. Why is this one different? It's already 20 it should be 24 10 so 24 and here as well, okay Like this we have a direct comparison So this is going to have the idea. Where is it? Where is it? shadow button right and This is shadow bottom right for which is Which means this is a copy. So let's actually pick up some very light wallpaper to actually see the To better see the shadow Because darker wallpapers would be less picked up this one. I usually use And restarted plasmasha, it's still a very dark shadow, but I mean I couldn't live with it Still very dark though. Yeah, let's see. Okay. Now. Let's see If we managed to do some cool gradient stuff so we can As an example, let's try here at the bottom to make this one So this gradient goes from here Can we actually edit the gradient? How does this work? What happened revert, okay Okay, so let's make it this like let's make it like this We put it to this line and this one to this one This one to this one. Okay So one two three four one two three four. Okay, and here here in you. Okay, and now We should try to make this Okay But what the guy does is to actually make This one different from the other one. So you can see that You can Feed out a bit In this case, what are we going to do? The side should be the bottom should be should be darker. So let's actually make this one a bit Slimmer like this One two three one two three One two three. Okay, and here We should go from this one So one two three one two three To this one Which is going to be darker One two three four Okay, so here we go all the way to the bottom In here we do the same thing. So we go from this one To This one two pixels smaller like this in here We go like this Here we go one two Three and two Yeah, it looks good. And this is going to make the shadow smaller on all sides sides But bottom Which is the look that I'm going for because usually shadows are Casted from top to bottom. So the bottom is a bit darker It's hard to notice the difference. I think Let's try to see it in practice on a notification if there's any Difference that we can actually see Hello notification Notifies and ah yes I've Turned off notification gal like this Yeah, it's nothing that you can actually notice Can we actually do this trick? Going from different opacity is like What if we if we change this one that the one changes as well? So we cannot We have to rely on making on making stuff like this One two three This is just a test one two three One two three Was it different? This one should be it's still different. This goes from 20 This goes from okay. No, okay like this and like this. Okay. Okay, and This is just a test. Let's restart plasmash up not if I send Yeah, you can see that the bottom looks a bit darker So now instead of going on by trial. Let's actually try out And let's actually pick up Retro just shadows as a reference Let's edit the last one his one We should be fine with just one shadow, which is Don't remember which I had like tricked it a bit to my liking last time I tried it Maybe it was the other one. No, I think it's wasn't I mean looks nice. Maybe a bit lighter Yeah, so we can't quite do this exactly. I think But we can try to do something similar the card reduce, please give me five pixels. Thank you Now let's zoom in Okay, something like this Let's pick it up with a screenshot actually Yes, but on a white background, please. So it's easier to see the Shadow Let's throw it in the SVG as a reference Pick up the grid for a second, please Okay, thank you Okay, so something to notice that it goes The change is not quite On the corner, but after the corner it becomes darker Can we do something like that? I? Remember trying that out and ending up with a mess. So maybe not we can also try To replicate some a shadow like this one Inkscape Let's make an escape object Something a bit better than this thing Please Okay, okay It's a pity that we can't use this thing here. We need to play with guardians and stuff We tend to be bad to have something something like this even a bit lighter Here, this is how I do it. So what if we try to replicate this? So let's do this And this Is not going to work, right? Oh, it worked nice. Okay so Here we should have an object that's Let's make it this big With a gradient growing from bottom to top Like this Okay With let's make I don't know a couple of steps. Maybe now just one is going to be fine this one okay so let's start with the Starting shadow. Let's change the background to white. Otherwise because it's going to be Much more difficult Okay So this one starts off I mean we can just pick No, we can't pick the color. Okay, and can we have the gradient on the left side of it? Please. Thank you Okay, like this Let's start converting this into Um, okay. Yeah, similar Then where is the other? Gradient here. Okay Here it's much lighter Sorry, this one is going to be tough to actually find Yeah, okay, and then at the end It should become transparent, but here This one is the present But maybe it is a bit faster to become transparent. Let's pick our Okay, no It's not working And so here is darker You know what what we can do actually We could make this automatic. I could write a small python scripts that just starts from the center and then Tells me exactly how transparent is. Yes. Let's do this Why not? It's going to be more effective than doing this by hand for sure. Okay, so Do we like this shadow? I think I do Yeah, I like the shadow. So let's try to go with something like this duplicate bigger Red border Thin red border, please much thinner Okay, like this and then we export this as an image With a good quality Why isn't this a square should be a square? Shouldn't it? Yeah, never mind. Okay, so Let's pick this one and export in home sketches, what is it sketches? shadow generator tar dot no shadow one dot png Export And now we start working on the python script. I'm going to use by game because it's the one I know the most sketches shadow generator and we've got our pretty shadow. Okay So let's write the script dot by And it's going to be super simple stuff just getting the opacity of the shadow at Any point any point starting from the center and going in nine directions all around eight eight directions, sorry Okay So let's go with import pegging not found I know that there are some better libraries for managing images, but It's just a quick script. I'll just go with what I know works Okay, so Pigame Image open. It's not like this is Pigame open image Yeah, for now, I won't use you I mean if I write this script correctly, I can just take an image of a shadow on white and then generate their correct gradients So pigame dot image load shadow one dot png Shadow equals okay Sorry I'm a bit used to c++ at this point adding commas So now let's actually do Let's do The vertical axis for x in range shadow height I mean vertical y Range shadow high print y There's no height. Is it like surface? Return to surface by Pigame 400 book update, okay Thank you, but by game surface. I don't remember the high eyes get hide. I bet it's get hide Yep, okay And we can set x to shadow get width divided by two Like this nice And we can get the RGB transparency of And shadow get at x y and print those Very nice as you can see Why isn't it white? White white Should be white FC on come on. I got the color wrong Oops Okay Also, this doesn't seem white. Let's go back to the Okay, so first of all this one fill fff With 100% opacity and let's also make a background one I mean we already have this one white like this 100 Opacity like this. Okay. So let's export this again Pig as before To shadow one. Okay, go for it. Okay Okay, better So at this point we can just say if r equals g equals b Then We do our stuff which is Well, let's go with I mean we can use g to say gray Instead of green because in this case The color of gray is actually the same as the green. Okay So let's print g Okay And now the part that we're interested in Of course are those which are not white So let's print If And which is different to This one and we get this. Okay And let's also x tag y tag this So interesting stuff So you can see that the size of the shadow goes from here to here And this is our shadow it goes from on the top Okay, so Let's How do we do this? I don't know Let's use a dictionary vertical shadow those And you can say vertical shadows y equals g and then We can extrapolate like We calculate from the beginning to the end and we interpolate like 10 points in between Yeah, makes sense So we can actually check If the this thing then do this a leaf y minus 1 in vertical shadows, which means that a shadow has just ended Let's see Okay, so we've got two shadows. So the shadow ends two times correct and We can we now can interpolate here 10 points so We also need the start of the shadow So, okay, let's put start equals none if start is none. I mean we can do a start equals Start or y And here we reset the start print start Epsilon minus 1 is the end And then we reset the start and we've got the size of the shadows Let's actually do and equals Let's let's use python 3.8 yes Now let's interpolate 10 points Let's start with four actually so So four p and range four We can calculate this step. Actually, let's go with points equal equals four And Let we can go from start to end with the step start I mean and minus start divided by points Okay, like this These are the coordinates of the four points that we interpolate in equal I mean distances and we write the vertical shadow of that point as a percentage, please so um divided by multiplied by Okay, let's also round this value And let's save it somewhere gray Opacity actually nice Actually, it's one minus that Okay, so it goes from seven to four to two to one to zero So we can see that it's not linear linear. We can actually do more points. I mean 10 points zero zero zero one one two two Let's round two two figures Okay, so we've got our gradients A 10 point gradient. Can we actually draw this? with by game? I don't think so Can we actually generate a gradient? for escape Let me think I mean, let's do this for all direction first, I guess But I mean you can see that the bottom one is stronger It's actually almost double 16 opacity This is weird Looks wrong to me Maybe the first pixel is like or is it Melding it and yes, there's this 40 pixel. Okay, so we should probably avoid the very first one So start plus one Let's pick y minus one, okay minus two And start is going to be y plus one like this How is our we start? What's that? How is start none? Well, I don't know. Okay, so Okay, it looks better now And let's actually draw this on Desmos Not 3d the normal Desmos. Thank you I'm such a mathematician like let's draw it on Desmos. Let's make a graph of it Why well because we can So let's actually draw not p but middle p minus start Like this So we can see the bottom shadow Okay And where is it? Sorry. Okay, so How can we just copy paste the values? Can you? Ah, I need to create a table New table. I don't want to do them by hand, please Okay, so We need this And we've got the graph of our shadow It's weird that it doesn't end in zero, but I mean 1.57 Okay, so Can we actually draw the line of best fit I don't remember how it was Nope Better much better. Okay. So this is what The computer suggests for this shadow Whereas what we are doing with our shadow is Just start from 20 Then go to where is it? 10 Halfway and then zero so we can actually plot that one as well It's cool that it ends at 100 is it by accident or Yeah, it seems so Okay, so We can start a new table Which is uh, zero 20 50 10 100 zero Of a different color Which I mean makes sense but This shadow is bound to be prettier So Yeah And the top one is How do I say the top one is lighter? Okay So this one is the bottom one. I've picked it as an example But we also need to see the left and right ones and Of course, we also should also see How to transition to those Not easy But I mean as soon as I've done four borders I should be able to like Do the transition So let's do the borders now Let's actually Wrath in a Very ugly way just copy paste That thing Points I wanted to be on my vertical shadows It's going to be horizontal as well Now we just flip We have flipped this one And the rest should be the same So it goes It's kind of symmetric kind of The left side seemed to be weaker Why is that? I thought it was going to be symmetric on the left and right side Maybe it's so The same that it doesn't even pick up the difference A bit weird is my pattern script drunk or Probably speaking up the color just right next to it Annoying Which one of you is doing this? Not you Okay, I don't know So in our SVG now we can Take off this and this And we can just work on this one Let's turn up the grid again How many points can we have? I mean one two three four five six seven eight nine or more simply one two three four five. Let's go with five Where is it? Too many python around me too much python, sorry Okay, let's go with five Five points I said five points One two three four five, okay, so Let's pick this one So we can let's start off this one Let's make the gradient all until the end And let's work on Do I I said one What it is Two three four one two three four five One two three four five, okay, so yes, yes Okay We need more points. Thank you One two three Where did it disappear? I said Two Three Four Come on I can't count anymore One two three four five One Two three four five one two three four Five one two three four five. Okay. Yes. We've got all the points. This one goes here. This one goes here This one goes here. One two three four five. Okay So it goes from 12 two seven point eight seven point eight four point three one point nine two zero point four What happened? I said how much did I say? 12.16 This is the left shadow What? This is the left shadow Let's copy paste it for the right one like this We need to give it the right name It's shadow right right Shadow left shadow right. Okay. Now. Let's do shadow top and We need one more point here and one more point here This one here this one here this one Here Now this goes It's this one 5.88 three point What? three point five two point three five two zero point three nine two zero Okay top one bottom one goes from No, this one 17.6 No, I mean I didn't create all the points. Sorry New points here and here that are seven then Where is it? This one is 13.7 then 9.4 5.88 3.14 Why there are six of them one two three four five six Okay, so let's now try to sketch up the edges So here Okay, let's Okay, so let's make this one same at this one roughly So as we said before What is it? Starts from 11. No, we've done this one starts from 12.1 Then goes Why there are six of them? How did I not notice that there are six? Two I guess roughly Not roughly 5.3 4.3 okay two zero okay like this And then of course we need to make this one smaller to accommodate for the change of okay looks almost right almost Let's copy this one and give me the shadow top right ID. This is mostly at as I think top left ID I think I'll do a python script that reads it a bit better without those confusion of points and Also draws it and generates the svg automatically So let's make this one as well roughly Very roughly this goes from 17 like this kind of We kind of have the shadow that I wanted Could be worse It's not like I wanted it to be but could be worse really Is this the one we've drawn? It doesn't look bad A bit weird, but not bad. Okay, so I'll keep working On the python script and see if I can make it Even more perfect It's an interesting concept for sure. Okay, so I'll keep you updated