Basics - Designing a 3D icon with Spline

hello there this is alejandro and today we are going to learn how to create a 3d icon with spline and then we are going to do something really cool at the end so let me start by showing you like what we're going to be doing which is actually this um icon right this is uh the app store icon in 3d all built on spline so obviously um i'm gonna have some advantage because i already built this icon but i'm going to show you how you can build something like this uh really quickly on a spline so all right let's just close this and now let's create a new file and let's start so the first thing that we're going to do is that we're going to import an image of the 2d icon and this is just like a screenshot that i took from the actual icon of uh the app store on big sword right um so i'm gonna place this on the right on the middle and then i'm going to lock this icon because i don't want to select it anymore um now i'm going to create a rectangle um so it's going to put this rectangle right over here and by the way if you notice that uh if you can occur of this something like this this is what is called c fighting and this is happening because the the plane is on the same position of the other plane so we can actually uh quickly fix this by moving the plane in the c direction um so now um i'm going to place this uh and change the size it's gonna be almost the same size here and let's just change the corner now make sure you're using the roundness on the smooth um so we can match the the kind of roundness that the ios icon use and now let's extrude this right we can use the extrusion feature here on the shape and if we change these uh shading to lamber or font um we can see the volume right so this is uh kind of okay let's use 64. that works and now let's change the best cell uh i'm sorry the bevel and let's change the amount of size something like 48 might work um so let's now make this smaller because we want to match the size and let's change back the um corners to match uh again the corners on the actual icon right so now we have something like this which is looking nicer and let's change the extrusion and now let's move back let's move this back right and let's just quickly give some color there maybe something like a blue to match uh the shading here um something like this i think it should work um i'm just looking at the bottom color here and now i'm gonna let's work on the color uh after i work on on this other change so let's block this as as well and hide it for now um so now let's focus on this this is like the most complex part of the icon right but it's actually like uh there is like an easier way of of implementing this which is with rectangles um i'm sorry with cylinders and we can use like a cylinder here and we can match kind of the width and and we can just add like round corners and then we we can try matching the the rotation if you press achieve while you are rotating you can snap to five degrees on each movement so i can see here that on the 30 degrees we are actually matching the the angle of this right and if we move this to here we can see that this is like about the same uh and if we move it a little more here so so yeah this is matching um very closely to the actual uh size and weight of this uh stick right now let's press command d to duplicate this and let's invert the angle it was 13 now it's minus 30 and let's move this right to the position where we want it and now let's duplicate again command d and let's use a 90 degrees angle on this one and we already know that we want to be on the center so this is on zero on the x and let's just move it to below now we have the chain that we want right um let's just let this and move it a little to the front um now in order to get this uh we already see that you know this this uh stick here is on top of this one so that's easy we just need to rotate these like this and now these should be on top of this one so we should rotate like this and now this should be on top on this one and below this one so it should rotate like this right um so maybe this can rotate a little more up like this and yeah actually it was okay um so maybe this one should be more like this so it doesn't have to be perfect i'm just trying to to make like a shape now we can see that um we already move it a little uh maybe too much uh let's try to actually kind of match the same rotations here um so if we press alt we can move uh symmetrically and sorry we can resize symmetrically um we can do the same here um let me just reset here and if i kind of try i'm going to disable snapping because i don't want to snap right now so i can disable it's not right there now i can change the sizes here and a little here as well um yeah that's uh that's working pretty much uh it's about the same right and obviously the colors uh are not bright this is uh this is white so let's change uh this to white as well right so let's change this to white actually more like the light gray because we want to use another number here and an overlay and now it looks a lot more whiter and let's use a very simple trick here to get the kind of uh shading at the edges uh which is like a fresh nail so what we can do is that we can do something like this right it's like a first nail and if we increase a little this we can actually get something that's very similar right um so let's um copy this material and paste um right here and we have all the same right also this is looking pretty interesting right now but we don't want this anymore because this is actually now in our way to um uh you know to design this icon so let's move this to the side and let's just enable our attribute shape the shading on this part is not good and actually let's just change the the background to y because um i think it's better if we see this on white um we want to overlay this as well again the overlay this is like a trick that i i like to use because it kind of make colors look uh intense um so now i can try changing this to a different blue and you can see already that now uh it kind of it's like a better um approximation of this icon here but we are still missing a bunch of things one is that we don't have any kind of shadow and the other one is that we kind of need like a light source that to come from the top kind of the top uh uh left in this case um so let's create a new light i'm going to be creating like a directional light and i'm going to move this light to the top i'm going to enable this helpers because i need to see where the light is placed and i also going to disable the default light because right now i had too much light in here uh so i'm going to disable a different light and i'm going to move this like a little uh here you can see already it's too much uh light and so it says is um two let's change it to seven five and that's much better um yeah i think i already knew that it's gonna be better of these uh 75.75 um so um let's now turn on the the shadows right so we can turn on the shadows um oh uh we have some tricky um some tricky uh shading here so what we need to do is that we need to say that we're gonna be rendering only the front this is like a trick um for a technical problem that we haven't saw basically but um don't worry it's like really easy to to remember um most likely at some point in the future we are not going to be needing uh to fix anything at all um so right now we have this uh we have this um icon but the channel is kind of like it's too hard uh we wanted channels to be softer so let's increase the size of the of the of the light right and also let's kind of move the light a little like more to these and so this kind of looks interesting already i wonder if we can make this a bit more yeah something like that right that's more interesting um so now what we can do is that we can create some other objects on the background right so let's copy command and drag to copy and then we select the scale and we can scale the shape and now command to drag and we can make some other copies and we can scale this again and now we have something like this which is looking interesting right uh maybe a little bit more um yeah something like this but it's all too blue so let's change this um you know to something like uh like this is like this oh you know what i think um yeah let's just do this i think we can add one little detail here which is uh we can have a first nail here um that is kind of like bluish this is uh yeah you can see that now it's looking like um more polish already it's like softer we can apply the same to you know to all these objects um i think this is good right um we don't have any animations but um what i wanted to show you is that um i want to export this um we already export and seen in the last video when on this time we're going to be using the embed code so if now if we copy this uh link uh for the embed link and and we go to notion we can um add here an embed and we can copy our url which is generated on the spline please and now we generate an embed code in notion so it is working there and look at this we have an embed let's make it bigger we have an embed in notion of a spline and this is working in real time and you can see there right so now you can use these um if you are collaborating with um your team and you want to show something on notion you can now import spline links on notion and so how cool is that right um yeah so that's it thanks a lot for watching

Channel: Spline

Views: 25,457

Rating: 4.9685454 out of 5

Keywords:

Id: aGe1c-HuAGM

Length: 13min 2sec (782 seconds)

Published: Mon Dec 07 2020