1 00:00:00,980 --> 00:00:01,550 ‫Hey, there. 2 00:00:01,640 --> 00:00:02,330 ‫Welcome back. 3 00:00:02,510 --> 00:00:06,300 ‫Now in this lecture, again, we are going to work with shapes. 4 00:00:06,950 --> 00:00:11,600 ‫So basically, we are going to understand how analyze different properties to better differentiate. 5 00:00:12,230 --> 00:00:15,770 ‫Now again, I'm reminding you these are optional lecture. 6 00:00:15,800 --> 00:00:21,860 ‫You can skip them, since these type of topics are not utilized by everyone on day to day basis. 7 00:00:22,250 --> 00:00:27,080 ‫So you can just watch them do a good practice session and then move forward. 8 00:00:27,740 --> 00:00:34,700 ‫And even if you are not able to remember them, don't worry, you can always refer to different guides 9 00:00:34,700 --> 00:00:36,020 ‫that are available online. 10 00:00:36,650 --> 00:00:41,840 ‫So in this one, we are going to draw our shape in the form of art, or maybe something else. 11 00:00:42,320 --> 00:00:48,260 ‫So at this point of time, I hope how you can design Asoka, how you can walk with after before. 12 00:00:48,380 --> 00:00:50,270 ‫I hope you have this basic idea. 13 00:00:50,690 --> 00:00:57,620 ‫Now let me try to define a simple ship in the form of square width and height of 200 pixels. 14 00:00:57,650 --> 00:00:58,970 ‫Then we have some margin. 15 00:00:59,600 --> 00:01:00,470 ‫We don't need color. 16 00:01:00,470 --> 00:01:04,610 ‫Actually save this one, and we have a border and background. 17 00:01:04,910 --> 00:01:09,140 ‫So border is basically that meeting this color to make you understand again. 18 00:01:10,130 --> 00:01:15,560 ‫So our current border is this one, and this is the space for content which is remaining. 19 00:01:15,560 --> 00:01:18,740 ‫So I'm using background color to fill this one. 20 00:01:18,800 --> 00:01:19,670 ‫So that's it. 21 00:01:20,240 --> 00:01:26,710 ‫If I want to create this in the form of circle, what I can do is I can utilize border radius. 22 00:01:27,050 --> 00:01:29,930 ‫And if I say 50 percent, save this one. 23 00:01:30,410 --> 00:01:36,770 ‫That means it will cover 50 percent from here, here, here, here and all the other sites. 24 00:01:37,280 --> 00:01:39,800 ‫So not quite this value is important. 25 00:01:40,460 --> 00:01:48,260 ‫Now, if you remember, we can pass on multiple values, total different values to control all the individual 26 00:01:48,260 --> 00:01:48,680 ‫sites. 27 00:01:49,220 --> 00:01:51,200 ‫OK, that's quick revision. 28 00:01:51,200 --> 00:01:53,930 ‫And now we understand about how to dos OK. 29 00:01:54,770 --> 00:02:00,560 ‫Now let me also decrease the size here a bit so we can have more space to draw things. 30 00:02:00,980 --> 00:02:04,160 ‫And I'm going to remove this so we can have a square. 31 00:02:04,970 --> 00:02:06,560 ‫OK, this looks great. 32 00:02:07,950 --> 00:02:14,790 ‫So how we can control more parts if we remember we can add content after as well as before with the 33 00:02:14,790 --> 00:02:16,290 ‫help of different properties. 34 00:02:16,920 --> 00:02:24,350 ‫Now here, if I utilize this Deb, and if I utilize this after, I can create or differentiate in Tyler, 35 00:02:24,360 --> 00:02:27,720 ‫David, Sir, for example, let me add content first. 36 00:02:28,530 --> 00:02:29,940 ‫Remember, this is important. 37 00:02:30,630 --> 00:02:32,490 ‫And here I can define another shape. 38 00:02:32,490 --> 00:02:39,120 ‫Maybe if I say width and height, same, maybe a bit smaller 70 pixels. 39 00:02:41,450 --> 00:02:46,250 ‫Looks good and let me try to use margin as shifted percent. 40 00:02:48,580 --> 00:02:51,760 ‫And something similar for Border Canada has well as background. 41 00:02:52,210 --> 00:02:55,480 ‫And if I save this one, you can see we have our shape yet. 42 00:02:56,920 --> 00:03:03,160 ‫Now we can control a lot of things, so if I say increase due care itself, save. 43 00:03:05,470 --> 00:03:11,140 ‫See, it's not visible properly, so what I can do is I can see position. 44 00:03:12,230 --> 00:03:20,600 ‫And I can say absolute and from what I can say, one that if I save this one, OK, this is working 45 00:03:20,600 --> 00:03:26,960 ‫well, let me remove this marginal save this one, OK, now it's position one pixel. 46 00:03:27,680 --> 00:03:32,330 ‫I can also see from left it is going to be one pixel saved. 47 00:03:32,900 --> 00:03:33,440 ‫OK. 48 00:03:33,470 --> 00:03:34,250 ‫This is great. 49 00:03:34,670 --> 00:03:38,000 ‫So this is one pixel from left as it is from the top. 50 00:03:38,190 --> 00:03:41,390 ‫Now let me change the color of on a line. 51 00:03:41,900 --> 00:03:43,820 ‫So let me go with some more green. 52 00:03:45,780 --> 00:03:46,380 ‫OK, great. 53 00:03:46,410 --> 00:03:51,090 ‫Let me try to copy this one as well as for you to save this one. 54 00:03:51,450 --> 00:03:53,400 ‫So this is the whole box. 55 00:03:53,910 --> 00:03:56,640 ‫And what I need to do is I need to change the size. 56 00:03:56,640 --> 00:03:58,890 ‫I need to change it to maybe 50 bucks in. 57 00:04:01,010 --> 00:04:03,200 ‫Now here you can see how this is working. 58 00:04:03,240 --> 00:04:06,380 ‫Now the basic problem with this content is. 59 00:04:09,790 --> 00:04:15,310 ‫About the condensates we just drove, deep excel as well as the border is also very typical. 60 00:04:15,670 --> 00:04:20,360 ‫So this is why you can observe even renovated, highly disruptive excel. 61 00:04:20,380 --> 00:04:21,220 ‫This is bigger. 62 00:04:21,910 --> 00:04:29,570 ‫OK, so what we can do is we can also add a property which is known as bulk sizing here and say it bought 63 00:04:29,590 --> 00:04:30,070 ‫a box. 64 00:04:30,430 --> 00:04:34,720 ‫In this way, we are combining content plus padding in this box. 65 00:04:35,020 --> 00:04:39,370 ‫Now here, let me try to add some border radius or let's say, 50 percent. 66 00:04:39,730 --> 00:04:40,660 ‫This looks great. 67 00:04:41,200 --> 00:04:43,270 ‫And let me copy something similar here. 68 00:04:44,050 --> 00:04:48,130 ‫Again, this is going to be ordered before save this one. 69 00:04:48,490 --> 00:04:49,030 ‫Not here. 70 00:04:49,030 --> 00:04:50,710 ‫Currently, we have two circles. 71 00:04:51,070 --> 00:04:52,240 ‫And let me move it. 72 00:04:52,720 --> 00:04:55,440 ‫So what I'm going to do is what I'm going to rotate. 73 00:04:55,450 --> 00:04:58,000 ‫This will be organized transform. 74 00:04:59,210 --> 00:05:04,160 ‫And then I'm going to you rotated maybe four, 45 degrees, save this one. 75 00:05:04,640 --> 00:05:05,110 ‫OK. 76 00:05:05,180 --> 00:05:06,440 ‫Things changed. 77 00:05:07,250 --> 00:05:10,670 ‫But what I need now is to shift one of them here. 78 00:05:10,820 --> 00:05:12,140 ‫And one of them here. 79 00:05:13,010 --> 00:05:17,300 ‫So if I say this as maybe minus 50 percent. 80 00:05:19,970 --> 00:05:21,230 ‫OK, this is moving. 81 00:05:21,890 --> 00:05:26,150 ‫Let me try to take this one at the top and let me try to take this one at here. 82 00:05:26,860 --> 00:05:30,830 ‫So let me move this or minus 50 and then minus 100. 83 00:05:33,610 --> 00:05:35,350 ‫Let me move on this direction. 84 00:05:38,770 --> 00:05:39,790 ‫This looks great. 85 00:05:40,410 --> 00:05:42,850 ‫And let me move here on this direction. 86 00:05:43,050 --> 00:05:45,160 ‫So I go with minus 100. 87 00:05:45,910 --> 00:05:52,050 ‫Now remember, we are rotated by 45 degrees, so if you go over top, it will move had it been moved 88 00:05:52,420 --> 00:05:54,690 ‫or left and right will move here. 89 00:05:54,820 --> 00:05:55,900 ‫Remember this point? 90 00:05:56,380 --> 00:06:00,340 ‫So if I say left handed, this will move here. 91 00:06:00,750 --> 00:06:02,920 ‫See if you can see this is moving out. 92 00:06:03,220 --> 00:06:05,410 ‫If I need to move this side, I need two degrees. 93 00:06:05,410 --> 00:06:07,600 ‫That's maybe go at 50. 94 00:06:07,600 --> 00:06:08,380 ‫Save this one. 95 00:06:08,770 --> 00:06:10,270 ‫I hope you got the idea. 96 00:06:11,140 --> 00:06:15,760 ‫So now I can change the color, maybe same color for all the angles. 97 00:06:16,120 --> 00:06:17,590 ‫So if I copied this one? 98 00:06:19,000 --> 00:06:20,890 ‫And simply a better. 99 00:06:25,440 --> 00:06:28,410 ‫Here you can see we got our heart. 100 00:06:29,280 --> 00:06:34,990 ‫Now remember, you don't need to complicated all of this because all of these kind of content can be 101 00:06:35,010 --> 00:06:39,210 ‫applied through images and then image can be utilized at the background. 102 00:06:39,780 --> 00:06:47,070 ‫The only organized deceased, whenever we want to draw a specific structure by any chance, I hope you 103 00:06:47,070 --> 00:06:48,990 ‫got the idea what we recently did. 104 00:06:49,200 --> 00:06:53,910 ‫Now you can utilize one other method and start off using this transform at the beginning. 105 00:06:54,120 --> 00:07:00,960 ‫You can just create a square, add a circle and another circle, and then rotated, so you are going 106 00:07:00,960 --> 00:07:02,280 ‫to get this same result. 107 00:07:02,460 --> 00:07:04,200 ‫But it will be much easier. 108 00:07:04,320 --> 00:07:10,770 ‫I really wanted to discuss the part of how to move on top and left when you are rotated. 109 00:07:11,310 --> 00:07:17,610 ‫So that said, that's all about how we are going to utilize the after and before while drawing any specific 110 00:07:17,610 --> 00:07:17,970 ‫shape. 111 00:07:18,690 --> 00:07:22,290 ‫Thank you for following this lecture and I see you guys in the next one.