Blender 3D UI Switch Animation Tutorial ｜ Polygon Runway

Hey everyone, welcome to my new tutorial. Today we are going to create this cool UI switch 3D element and I really hope you will enjoy this one and if you do, please don't forget to leave that like and if you're new around here and want to learn more, hit that subscribe. Now let's jump right into Empty Blender file and let's select the light and the cube, press X and choose Delete. We will leave the camera in place and now let's start by adding a plane, so let's press Shift A, Mesh and a Plane and we need the basic shape for the switch UI element, so let's press 7 on an armpit for a top view. Now tap into the edit mode and press S then Y and just scale it down like this. I think this will be enough and now press Ctrl Shift B to enable vertex bevel and do a bevel like this and create an overlap and just confirm with the left click but now expand this option right here and enable clamp overlap. That will basically clamp it here in the corners and now you can increase number of segments and let's do hefty numbers so it's nice and smooth, so something like 16 should be okay, so this will be our basic shape and now we can press A to select all and press E to extrude, press A again to select all and Shift N to recalculate normals. That's really important step when you're extruding something from, you know, just a planar geometry and now press G then Z and move it down like this. If you look from the side by pressing 3 on an armpit it should look like this. Now we'll tab out and let's press Shift A and we'll add a plane, now tab into the edit mode and let's scale this up like 10 times, so press S and 10 and confirm and now let's give this some volume, so if you look from the front by pressing 1 on an armpit and press E you should be able to extrude it like this and again since we extruded from the planar geometry we'll press A and Shift N to recalculate normals and now tab out and now before we do the next step we'll need the bool tool add-on active so let's go edit preferences and now I have it here in the add-on section because I already have it installed if I search for bool you will see it right here but if you don't have it there you need to go get extensions and search for it here, so just search for bool tool, I can see it's installed but I'm able to update it, you should have the install button right here and then you will be able to see it in your add-ons and just make sure the box is checked that it's active and close the preferences and now select this piece right here, hold Shift, select the background and you can use the bool tool shortcut Ctrl and minus on an armpit to create a boolean cutout like this. Now let's select the background object and let's go to the modifiers and let's add the modifier, let's increase segments to something like four and we'll reduce the amount so we have that nice smooth corner there and now let's select this boolean object, right click and shade smooth and you will see it will make the inside smooth. If you feel like this is too fast for you or you don't understand some core concepts make sure to check out my courses, I carefully design them to take you from beginner skills through low poly illustration all the way to full character illustration, textured environments and much more and I build the courses as creative projects each with its own style and every time there's a new technique or something needs explaining we stop for a while and you get an in-depth explanation but in the end you still get a full project result so if you're interested please check out the link in the description and now select the background object and shade it smooth as well but in the bevel let's go into the shading section and enable harden normals because you can see there's some shading issues and if you enable harden normals you will get rid of those so now we have this cut out we can work on our switch so let's press shift a let's add another plane now let's look from the top by pressing 7 on an armpit tab into the edit mode and let's press s then y and scale it on y axis something like this so there's some kind of overlap here and then press s then x and scale it like this for example and now let's look from the front by pressing one on an armpit let's enable x-ray view and let's press e and extrude this down like this and again press a and shift n to recalculate normals and we can now tab out and then press g then z and move it down so it goes underneath like this it can go a little bit lower because we need to leave some space for the text as well and this is what we should get let's disable the x-ray view and now let's press shift a and let's add a circle and i think 32 vertices will be okay so let's tab in let's look from the top by pressing 7 on an armpit and let's press s and scale it down like this and now press e then z and extrude and then press f to fill and now press ctrl b to create the bevel here let's reduce the number of cuts with the mouse wheel to something like four i think that will be okay like this and now alt click the bottom loop press e but release with the right click and just press s to scale it up and now alt click this inside loop and press ctrl b again to create bevel here as well maybe we can make it a little bit sharper here like that and to give the top a little bit geometry we can now press 3 for face select or click right here select the top face and press i to inset and we can do that few times like here now let's step out and let's go and add subdivision surface modifier let's increase the levels to 2 right click and shade smooth and now we'll move it closer down so let's press g then z and start moving it down until it touches you can see here it goes down so let's move it a little bit higher up so it barely touches if you look from the front this is what you should have right here and now we'll connect it without actually connecting the geometry so first of all let's set up some render settings so let's go to render settings and eevee you can use the ray tracing but i'm interested in cycles right now i will switch to gpu enable the noising and enable gpu for the render the noising as well and for the sample since i want to render this out this animation i think something like 128 will be okay and i think we can modify the viewport samples as well and now let's add some basic light so let's press shift a and let's add an area light like this press g then z move it up and let's make it larger and now let's hold z and go to rendered preview to see what's happening here and in the light settings we can increase the power to something like 150 and for the basic light this will be enough and will allow us to see how this connects to the background you can see there's this gap here and we want to get rid of that so let's select this object right here let's go to the modifiers and let's add a shrink wrap modifier so let's go to the form and shrink wrap but before we pick our object let's tab into the edit mode you can enable x-ray view go for the edge select or press 2 and alt click this bottom loop and let's go to the object data properties and create a vertex group and hit assign here okay and now if you go back to the modifiers you can tab out here and let's use the eyedropper to pick the underlying object right here you can see now the whole object is shrink wrap but if you choose only the group that we assigned so the outer rim it will only take that outer rim and align it with the underlying surface so if you now move this object up and down you can see the outer rim stays in place and to make the shading perfect we can actually use the data transfer here so let's go add modifier and edit and data transfer and here we're going to pick the underlying object as a we're gonna pick the same vertex group and here we're interested in face corner data and enable custom normals and we're gonna pick the nearest face interpolated and now move this up and down a little bit you now have a nice flat surface and this connects perfectly it looks like a single object so now let's hold shift select the underlying background press ctrl p and choose parent and now we're able to move this big part and slide it left and right which is exactly what we want to do so let's figure out our animation um let's do the quick blockout so at the frame one let's look from the top by pressing seven on numpad and we can press g then x and move it right here and we're looking at this alignment right there and just press n for the side panel and for the x location right click and insert single keyframe and let's go to frame 30 let's press g then x move it right here and again we're looking for that alignment on the left side and right click and insert single keyframe on the x-axis so now we have this motion right there and we need to add some text so let's shift and right here in the middle approximately and it should snap the cursor on the surface down there so we can now press shift a and let's add the text and let's go into the text settings and choose center alignment and middle alignment for vertical press s to scale it down and we can tab into the edit mode delete everything and enter light and scale it down even further and then reposition it tiny bit like this and now to give this some volume we can go ahead and in the geometry section let's add some bevel right here something like this not too much and you can see we'll create this kind of geometry right there and now we can hold shift select the bottom object press ctrl p and parent and now we can select this text again press shift d press x and move it over here and now just slide over to frame 30 i will move you know with your object so now if we just press 7 on an armpit we can just realign this on x-axis tab into the edit mode and write dark just like that and again let's realign this a little bit and now let's press zero on an armpit for camera view and in the view settings here let's check the camera to view and now using the viewport controls we can just rotate the camera and reposition it somewhere here i really like this angle now let's modify the timeline to something like 120 and in the output settings let's modify the frame rate to 30 so this is what we got here but i wanted to go back so let's give it the rest for another 30 frames edit frame 60 we'll select this and basically we can just select this keyframe right here press shift d and duplicate it over here and now we can select the first one press shift d and duplicate it over to frame 90 so this will go back so that's our basic animation blockout and this will loop seamlessly again and again and now don't forget to disable camera to view so you can freely rotate and the camera stays in place and to make this a little bit easier on the viewport we can press ctrl b and limit the preview only to camera bounce like this so only the part in the camera will be rendered and now let's set up some material and some lighting but before we do that i think i would like to see this a little bit higher so tap into the edit mode and we're still in the x-ray view if you don't just enable it right here and just select the top geometry right here press g move it up like this now tap out and let's select the light and move it a little bit to the side so if you look from the camera and then press g then shift z you should be able to move it away somewhere here so you get you know more shadows inside this and we can increase the strength to something like 500 okay and now we select the objects and create a new material and let's give this like really low roughness like 0.1 so it's nice and glossy and let's give the same material to the background as well and to the underlying object too so now for the text we can create a material and let's increase the transmission so it can be you know a little bit translucent and we can select this one here i just knew it was there if you click twice through the objects you should be able to select it or you can do it right here in the outliner and just apply the same text material now i want to make this transition between the light mode and the dark mode and i want the materials and the lighting and the whole scene to you know follow the transition so let's continue our animation and first of all let's add some emission to our text so here let's scroll down a little bit and find the emission section of our principal shader and on the frame one it should be like fully emissive so let's do something like 10 maybe the 5 will be enough we'll see how it goes and change the color to something blue and now you'll see how much reflection you want so maybe something like 15 will be even better and let's give this more saturated blue color like that and now i will just hover over the string press i to insert the keyframe there and now move to frame 15 and i want the light you know to go down here so let's modify this to zero you will see go back to the translucent form so we can press i here to insert the keyframe so you get something like this and now here i want something opposite to happen i want this to light up so on the frame 30 and with the same material there we can duplicate this and change the color but first let's increase the strength to 15 and press i to insert keyframe there and let's select the first keyframe press x and delete so here we have this lighting up and here this is this is powering down okay and now we're able since this is duplicate we can just change the color to something orange and you have something like this here now i want to change the whole scene a little bit so i want this light to go dark so let's select it and on the frame one let's insert keyframe on the power here and on the frame 30 we want it to go down to like 15 very subtle and press i to insert keyframe and i can still see the reflection so let's change our light settings a first of all let's find a new position for it if you press g then z and move it up you will see the reflection goes away a little bit and then if you press g then y it should be moved so let's do even more but here this now needs to be much stronger on the frame one so let's modify this to 1500 and let's press i to insert okay i like this and while we're still at frame one we can select our objects and with our base background material we can press i to insert keyframe on the color there and now on the frame 30 we can just make it a little bit darker so we help our lights a little bit artificially by you know modifying the material itself and just press i to insert and here's your transition and now this is a little bit still too dim so let's go to the settings and let's increase the world color here to something like this but again we'll insert keyframe make sure you're on the frame one and now if you're on the frame 30 we can just modify this make it darker and press i to insert the keyframe and now we can play a little bit with additional lights and reflections so if you go to frame one we can press shift a and let's add a light and a spotlight and now press g and z move it up let's switch the pivot to 3d cursor and now let's look from the front view by pressing one and press r to rotate it but we need to rotate it so the bottom here of the cone is flat on the ground and then press g and z and move it up like this so we don't touch the ground there as you can see here but it only shines here on the knob like this and now we're able to press r then z and rotate it and then g then shift z to move it around and should shed the light only here but it's too weak so let's go to the light settings and let's do something like 1500 and now you can see this reflection right there and if you press you can you know move the cone around to add additional reflections so we can even duplicate this and do another angle here something like this but now if you go to frame 30 you can see we don't have those additional reflections so let's press g then shift z and let's place the a little bit further away so it gets both of those here and there as well and we can choose this one as well and move it away a little bit so we get these reflections okay looks quite nice here okay and finally we can add another area light move it up here and press g then shift z to move it away to the background there there'll be like a little of an additional backlight and let's make it a little bit stronger something like 150 maybe even more maybe 500 and let's look here and i really like the reflection it creates here on the dark mode so with the lights in place now let's finish our animation because as you know we only animated this part to loop 120 frames so we need to finish with the other parts as well so let's press a twice to deselect everything and let's go to world settings now let's expand the summary here if you don't see it there you can just drag this little arrow to expand it you can see there's a world setting there that has you know some key frames so we basically just need to select these on frame 30 duplicate them to frame 60 and select the ones on frame 1 and duplicate them over to frame 90 so now we get that world light change as well okay so that's the first one then we're modifying this light in the back i will zoom out this is the area light we need to animate and here if you select it you can still see the world keyframes so don't let these you know mess you up here because the world keyframes exist outside of any object so no matter what you select you will see them there probably so let's just focus on our material there and let's select this keyframe right there press shift d duplicate it over to frame 60 and now this one and let's move it to frame 90 so now we can see the lights are doing the same thing so we can focus on our text animation so let's select the light here and let's select this keyframe right there let's let's move it over to frame 75 let's select this one press shift d and let's move it to frame 90 so this will again light up when we go back and now let's select the dark text and we'll do the same thing so let's select this one here we'll press shift d move it over to frame 60 and this one to frame 75 so again it will go dark again when it slides back so now the final thing to do is to add you know a little bit of action maybe animating the camera a little bit if you want to do that it's very easy just select the camera frame right here and let's press k and insert location keyframe and now you can select the keyframe right there press shift d and duplicate it to the other side on frame 120 or 121 if you want the perfect loop and now just enable recording let's move for example like few frames press g and hold shift and just move the camera slightly and then move a few more frames and just do another slight movement to the opposite direction and just add some random keyframes and random movements like this now don't forget to disable this because it can mess up a lot of things when you start moving things around and now if you play back the animation you will see the camera is moving a little bit it will add a little bit more dynamics to the whole animation and finally we can play you know with some contrast and exposure settings here in the render tab so let's go to color management and maybe choose like a higher contrast setting and increase the exposure a little bit so it's a little bit brighter it will help with our dark mode as well you kind of need to balance between those two so i think this will look really nice and before we render it don't forget to enable motion blur and now in the output settings just change the png to ffmpeg choose the mp4 encoding choose your folder here and go render render animation and wait out your frames so that's it for today's you know quick 3d ui effect tutorial and i really hope you enjoyed this one and again if you did please leave that like and if you want to learn more and you're new around here hit that subscribe thank you all for watching and have a wonderful day