Awesome Animating Pictures On Your Website!

good morning my gorgeous friends on the internet you know how pictures give identity to a website that make up the whole thing well too bad because we're not gonna use any picture as Steve Jobs once said that a picture is worth a thousand words and the video is worth more so another big hobby besides programming for me is editing filming and taking pictures is a huge part and there's a cool thing that's called a cinema graph which is kind of like a static picture and then you can animate a certain part of it and I thought hey why does it I never think of adding this to a website so let's make it I also want to thank today's sponsor this shoe it's called it just says fashion on here nothing else hey buy yourself a pair fashioned be cool like me so buy yourself a pair the link will not be in the description so I'm sorry magic there we go I appear that unaware Wow amazing okay so for this effect we're gonna need a few things we're gonna need a video editor now fear no more if you don't have money that's perfectly fine because I used the venturi resolve which is free so you can go to the Vinci resolve 16 let's google it right here all right click on this and you can scroll all the way down and just download the free version it's gonna be perfectly fine perfectly good okay so once we have our Video Editor we need a video and for the video this effect is called a cinema graph and what you need to do is kind of have a subject that is gonna be kind of static and then you can kind of animate everything else in the background so let me show you a few examples on what kind of videos would fit and would work really well to achieve this effect so cinemagraph calm here is a perfect example so as you can see this shot right here with the lady and you want a video that's very still right you want it on the tripod you don't want a shaky camera or something because that's just not gonna work or you're gonna have a very hard time playing around with it so what's happening here is that this camera is on a tripod and it's filming her and then she's trying to stand still but the wind is kind of blowing her hair so it's gonna be very easy for us to animate this part and so that's kind of the thing you're looking for is a static kind of still video and just other things moving around so I found one and I can I'm gonna show you what I mean more exactly with this one because we're gonna have a bit of trouble with this one I love this shot I'm gonna link this down below but here I kind of just want to animate the flowers right and I want her to be let's say here I want this shot so I want everything here to be still so like a picture and only the flowers to move around the problem I'm gonna have is that she's kind of moving a lot around and shifting her body which is gonna cause a bit of an issue but I'll kind of show you how you can get around that a bit so make sure to download this after you download this you can open up da Vinci you resolve and I want you to go on the edit page so down here in the corner click on edit okay now we can drag in our video so I'm gonna drag it in here and then we're gonna drag it down here into the timeline so there we go okay so now I'm just gonna look for the shot that I want to be statics with the picture which is gonna be around here alright so I'm just gonna move my mouse around up here and here okay so that's good so now I'm gonna cut this there is multiple ways you can do this you can just go to the razor tool here the blade edit tool I have my shortcuts here say I don't want to confuse you and so I can just cut here like that and then go back to the selection tool I can grab this and hit delete it's gonna get rid of it so this shot till here kind of like just a few milliseconds all right till she kind of starts tilting her body too much so here and then you can cut this again here and just delete this part all right so this is all we have so she's not really moving that much around but again I want to show you kind of exactly how this effect works so you're gonna see what kind of videos you can mess around with now that we have this shot I cannot like to change my shot to the way I wanted to look so for that we can go here to the color tab and I'll just do some minor adjustments like I want this to be a bit brighter and more contrast so we can go here to the this tool right here the color wheel and this kind of represents what you have in your image so up here is all the highlights the bright spots like this and here are like the mid-tones and here are the shadows so as you can see there's a lot of information here in the shadows and if we take a look at the image it's kind of true like most of this image is kind of dark so what I like to do is kind of push up the mid-tones so we can go here to the gamma and these are kind of the middle ground and I just go to this scroll wheel and just push it up a bit so we can see more of the image okay then I'll go to the gain and just push this up to add a bit more contrast and pull the shadows down to give it a bit more contrast okay so that's kind of it and this is a node so you can kind of Majan it as a layer and you can apply different effects to it so if I click the zero one here that's what I had before and this is what we have now okay so the this is optional now you don't need to do this and I can also just the color is so of the highlights I don't like this green look so I can kind of drag it towards the blue a bit to make this bluer okay anyway that doesn't really matter but I like to adjust my things before I do my things okay so this is what we have and now what I like to do is kind of duplicate this I'm gonna hold alt and drag this out like this alright so we have two of these I'm gonna kind of snap it together and what I want to do is take this shot and can freeze it make it a picture so I can right-click on it and I can go to change clip speed and we can do freeze-frame change and as you can see now we just have an image so now we can drag this moving flower on top of it okay so now what I want to do is go here to the color again and what I want to do is actually create another node here this is gonna be for our color and the other one's gonna be for our crop so you can right click here and you can add note corrector like this okay and then you can kind of link it if you hover over it like that boom okay so this one we're kind of just kind of cut out the moving part of this image so we can go here to the pen tool right here on the window so window pen tool and then we can just kind of scroll in and hold down the middle button to move around and just click click and kind of just mask this around now I don't want her hands to move just the flower so I'm gonna go around here I'm gonna get the whole flower to kind of show you what issue this causes that she's moving around too much so there we go cut her out right there and now what I want to do is kind of output only this part of the image so we can right-click here on the empty space and we can add the add alpha output and then I can drag this blue thing into the other blue tang so there we go so now if we hit play space you're gonna see that only bad part boobs right because this is the only part showing up here right this part see it's gonna cut out and this one's just a static image so again here's the problem that she's kind of moving around the plan moves nicely but her body also shifts and moves around so we're gonna get this weird effect here alright so optimally she wouldn't move that much around and you can maybe just shake the plant a bit or the wind kind of shakes it which gives it a way better effect but anyway to kind of fix this I mean you can make this kind of smaller but then you're gonna cut off the flowers in this case so it's kind of tricky to mess around what you can do is just go here and maybe add a softness to it on the inside so I can just raise this up and that's gonna soften everything I'm gonna blur it out so there we go that's not too terrible you can kind of just move this around and see how you can get away with this all right let's yeah that's not too bad if we scroll out like that now the problem is we still have that moving that boom as soon as it gets back to the first frame it just jumps around so to fix that what we can do is go back here we can grab everything and hold down alt and just duplicate this okay so we can just put this together play it as you can see there's that jump so we can click on this video up here right click on it and we can go to change clip speed again and then we can do reverse speed and hit change so now it perfectly loops back around okay and then we're gonna duplicate everything again and that's gonna be our whole video there we go take a look so again optimally you would want to have something like maybe a subject standing still and maybe have some rain pouring down on her so that would be really cool and then you can just cut her out freeze her and then have everything around her animate another option that you have is to stabilize the footage so you can go here if you have a video and you can click on this one and go to stabilizer and stabilize but I don't want to get too too much into the venturi result because that that's not what this tutorial is about but there we go that's what we have so now we can export this we can go here to the last tab which is deliverer and then we can name it send them a graph or whatever we want I'm gonna do video and we can do mp4 or QuickTime or yeah let's just do mp4 h.264 is fine you can leave these settings if you have Nvidia you can add that as well and then just hit add to render queue and start render and you should have the video so from now on it's very simple you just open up a index.html and what you need to do is just drag that final output in here you're gonna add a video what is source and then you just need to add how to play and loop so since this is super short it's very cool because you're gonna have this nice animation the file size is gonna be not large at all and yeah it's very interesting see there's it's kind of messed up so again this is more about searching for cool videos or maybe you can shoot your own videos with the mentality of creating one of these effects which is gonna make it more easy you're gonna find a bunch of them on pixels so let's kind of take a look at some and I'll take you kind of through the thought process of creating these so let's take a look cinemagraph right here let's see okay so this one's perfect right you just have these kids kind of just staying not moving and this is moving so you would just mask this out so you would do a mask around like that okay let's this is very simple again so she's just kind of standing still and you would just mask around here to make this part move all right here's another interesting one you can do it with water so here again everything's kind of frozen and she just he or she just masks out this part of the frame actually only this part so that's cool so just kind of look at these turds a lot of them you can create some very cool effects I felt like this kind of fits into like a flower shop site so yeah there you go hope you enjoyed watching this episode thank you so much for watching I hope to see this effect use more because I barely saw it in like the programming world in the design world and I think it's pretty cool so drop a like if you enjoy this episode it helps a lot and a sub if you haven't already and until next time make sure to animate yourself out why do I do these things somebody should stop me okay we're done here you want to kiss what what do you want from me I'll give you a kiss you want you want it there oh my goodness [Music]

Channel: Dev Ed

Views: 65,600

Rating: 4.9756036 out of 5

Keywords: dev ed, websites, cinemagraph, animating pictures, cinemagraph tutorial

Id: 24XmuumJ4cA

Length: 13min 10sec (790 seconds)

Published: Fri Feb 14 2020