Hi, it's Sourany from Design+Code. welcome to my tutorial. So today we will learn how to create this. Too. This. I will show you how to turn the UI. To 3D perspective. Don't worry. It's going to be easy. So let's get started. First of all, you would need this plugin. It's named. SkewDat from unfold.co. This is going to help
you to skew your design. To make like a 3D perspective. So just go to the community. Plugin Search SkewDat. There you go. So install. Boom, your plugin is there. I actually always use this
plugin for most of my design. To make like a 3D effect like this. With SkewDat you can skew
anything you want at once. And your design with stay perspective. So let's create a new one. What do you need to do is group
everything together because we gonna skew that in the same time. So when your UI, your design. Whatever is ready. So group together. Command+G group. Right. Click. plugin. And then SkewDat. Change the position. for my design, I use a minus 44. Like this. Horizontal skew. When they move from
horizontally left to right. And for the vertical skew. I go at 32 is fine. Like that. So when you satisfy with
your position, Then applied. Boom. It's skewed next step you're going to do. We're going to create
this shape to make a body. To make like a 3D effect. we're going to duplicate this shape. But first of all, This UI is made inside. Of the frame and the frame. The corner radius is at 30. So we're going to put at zero first. So we can draw this rectangle. So P. For pen tool, or you can just
go in in the top for the. Tool.
Penn. So we're going to. Recreate this rectangle. you don't need to make these very perfect. Because . We gonna edit after. So just. Draw. The rectangle like this. So put any color you want for now. And then, take off this stroke. We don't need that. When you done. Click done. I can make sure this layer is. At the bottom. On this.
card. because. The edge should be In the bottom. Of the card when you put it down. We see this body you can name this later. body or edge, whatever you want. select the two layer together. And put the corner radius at at 30 degree. Boom It changed in the same time. Now. You need to flatten first. So right-click flatten this layer
because if you don't flatten the shape will stay rectangle. it's not that I want. So flatten. When you edit the shape. See It's round now. Next we're going to connect the body. To this card so enter. We're going to edit. All the corner. So I'm gonna put the corner. at the top a little bit like that. Like iPhone, you know? Same thing. Well, this one. So we can do manually. Bring everything on. the top corner. Like this. And done it should be like this. The body is created so we gonna
do the same thing for this card let's do the same thing for the
rest of the UI element here. So this one. there you go. So when you're done. Now let's create a gradient color. here on The body. We can put any color you want, but for my
design, For this card, I put a Different color right-click the body layer. click color on fill and instead
of solid I choose linear. Linear is the most common and wisely. Used gradient out there. In our linear gradient. The color of the gradient blend
from start color to e nd color in a straight line like this. So you can add. many. color you want. for this example, I tried to
follow the same background. So the first color should be the same. As this one. So take the dropper. Use this color. Add more gradient. do the same thing. add this second color. I would do the same thing. I try to follow this line. I gonna continue. For the rest of the card The final look like this
for the linear color. Now. Let's create something more. Beautiful more elegant. So I gonna pick up all of this. Card. I gonna take off from this frame. Okay. select Everything. And put outside. From this. Frame. Like this. now you can play a little bit. With. Them. Make like it's floating so
this one, I got to make more. from the top. But make sure the layer. is in order. So this one I want in top of this one on. Number three. So let's make on this top so follow the number. Something like this. Now. Is really look like. The card is floating. Let's make this one a little bit. Like that. Okay. Let's hide the rest. Now let's create this
screen shape with the glass. Effect. So how I did that. I take. A front mock-up from any devices. And take only the screen. Let me detachpatch instance first
keep only this screen you can delete. Everything. Keep only the screen. Ungrouped, this one. So we're going to do the
same step for the SkewDat. Bring it here. Right. Click. Plugin SkewDat. It should be the same. Number. As the preview. UI So it's minus 44. And for the vertical skew 32. Apply It should be like this. Now. I'm going to change the color. First of all, I think out the screen. I got to change only this
screen shape and I put white. 40 percent opacity. At background blur on effect let's say 40. Now. add the body of this screen shape. So you can delete all of this. Okay.
ungroup, delete keep this screen shape so you can do. duplicate. Command+D take the bottom lay er. Make a body like this. You can change the
color . So I'm going to red and then. group together. When the screen glass is done, let's
put together to make the design more. Nice. So I gonna bring this screen glass. at the top. Of the card explore. Something like this. Let's play a little bit. There you go, your design is done. So that's it for today. I hope you enjoyed this video and
don't forget to subscribe, comment and give me a big thumbs up. see you on the next video. Bye guys.
