Drawing Shapes3:57 with Nick Pettit
Most designs in Adobe XD consist of simple shapes, so learning how to draw shapes is one of the most important paths to expression.
- Constrain from Center: Alt (Windows) / Option (Mac)
- Constrain Proportions: Shift
Get Adobe XD
Adobe XD Plans - Adobe XD is available as part of Adobe Creative Cloud in both free and paid memberships. Any edition of Adobe XD (including the free plan) will work with this course. Follow this link to review plans, create an Adobe Creative Cloud account, and download Adobe XD.
Image Files - These are the image files we'll use throughout this course. Download this file, unzip it, and look for the photos folder.
[MUSIC] 0:00 Below the top bar that we created previously, we're going to add four boxes 0:04 that will contain photos, labels, and prices for each trip that users can book. 0:09 But we want to do this by only creating the first box and then repeating it. 0:14 With the rectangle tool still selected, hover your mouse 0:21 cursor toward the middle of the art board and down a bit from the top. 0:26 You should see a smart guide appear that shows you the center of the art board. 0:32 Start to click and drag a box, but don't release your mouse cursor just yet. 0:39 While holding down the mouse button, 0:46 also hold down the Alt key on Windows, or the Option key on Mac. 0:50 This will constrain the rectangle so that it's centered on 0:56 the origin of your click rather than drawing it from the corner. 1:00 Now we're just going to leave the fill and 1:04 border on this for now because we'll adjust those settings later. 1:07 But let's draw out this box, maybe just like that. 1:12 Back in the left side toolbar, choose the selection tool at the top. 1:18 Using this tool, we can make adjustments to objects that are already created. 1:23 If you don't like the position of your box, 1:29 you can click and drag to reposition it. 1:32 And if you don't like the dimensions of it, you can click and 1:36 drag along the edges to resize it. 1:41 The smart guides can help you center things like this but 1:43 let's say you move something and it got a little bit off center like this. 1:49 We could just move it back and use the smart guides, but 1:56 with the rectangle still selected, 2:00 we can also use the alignment tools in the upper right corner. 2:03 On each of these icons, the bars and lines illustrate how 2:07 multiple elements might be aligned with one another. 2:12 To get this back to center, click the button that's third from 2:17 the right with the line going down the middle. 2:22 This will horizontally align any selected elements. 2:26 Finally, I'm going to add a little profile circle in the upper right corner. 2:30 We'll add the actual photo later, but for now, 2:37 let's just draw a circle as a placeholder for the profile image. 2:40 Select the ellipse tool on the left side tool bar. 2:45 And then in the upper right corner, start to click and 2:49 drag from the center where you want the circle to appear. 2:54 Without releasing the mouse button, hold down the Alt key on Windows, 2:58 and the Option key on Mac, to draw from the center. 3:03 This will place the origin of the circle in the middle, and 3:07 constrain the proportions. 3:11 But there's still a problem, 3:13 how do we know if a circle is perfectly circular and not an oval shape? 3:15 In addition to the Alt or Options key, you can also hold down 3:20 the shift key to make it a perfect 1:1 aspect ratio, so it's a circle. 3:25 So I'm just gonna make this a little smaller than the toolbar like that and 3:32 then release the mouse button. 3:36 And then if you need to, you can move it around with the selection tool. 3:38 Remember to save your work when you're done by hitting Ctrl+S on Windows or 3:44 Cmd+S on Mac. 3:50 This is a good start, next we'll add images, text and 3:51 adjust the shape properties. 3:55
You need to sign up for Treehouse in order to download course files.Sign up