Lessons

Lesson Info

How to Create Graphics

The graphic part of things. If we need to draw in here, if we need to create things like vector shapes, all that kinda thing, I'm not gonna bore you, I'm sure a lot of us have already created a shape in Illustrator or Design or Photoshop. You know how to draw a square probably so what I'm gonna do is I'm gonna show you some of the really cool things that Adobe XD can do and you're gonna wish that these were in the other programs by the time we're done. So, I wanna start by adding a button. We'll keep it simple. So what I'm gonna do is I'm gonna click on the name Home for the artboard and press Command + 3 on Mac or Control + on Windows to zoom into it. Remember that's the zoom to fit. And then we're gonna add a button. So if you look on the left, you're gonna see the tools bar. Now, we have a rectangle, we've got a circle, we've got a line and we've got a pen tool. If you're used to the pen tool, this one's a little different, it's actually pretty awesome. We're gonna create a rectang...

le. Just keep it simple. So why don't you click on rectangle and it'll come out. I have, if you look, I've got that grid, the layout grid setup and that's great because I can now snap to it. If you don't have it, you can always set it up like we did. I'm gonna go in and create a rectangle here, just click and drag. Just make a rectangle, pretty simple. I'm filling out, you can see it snap over to that guide which is pretty great. Now once you draw in here, it's sorta like Illustrator, you actually have what are called live shapes, they're kind like that. Once you draw it, you can keep editing it so you don't have to switch tools. If you look in here, you're gonna see we have these corner radius points. Just click and drag to round the corners that's great if you wanna do just specific points you can use the Option key on Mac or Alt key on Windows and do just certain radius points if you wanna do that. Let's just round the corners a little bit, don't get crazy. And then if you look in the property inspector over on the right, you'll see that you've got the corner radius over there so you can say I wanna do them all the same or I want them to be different and you can type in values over there. So you've got a couple different ways to do this. Now we're gonna go in and I'm gonna show you how to draw something in minute here and show you how to take this further but what we're gonna do is just let's do this, let's just turn off the border. You gonna see the XD actually has a fill and a border so the fill's inside, the border's the stroke or the outside. You can just turn it off if you don't want it, so turn off border. You can go in and do the fill, do all kinds of things if you want to, I'm gonna leave it at white for right now and what we're gonna do is we're just gonna copy that. So what I want you to do is press Escape and what you're gonna do is you're actually gonna deselect. You're gonna be doing a lot of Escape, it's kinda crazy. Go to the select tool and what we're gonna do is just duplicate that object. So what I wanna do is you can just Option on Mac, Alt on Windows, drag straight down, release the mouse and then the key. And we're just gonna do a color change here, this is just another button body we're gonna create. So come over to the right. This time turn off the fill and turn on the border so you can totally remove the fill just by turning it off which is great. And then come to that border color and click on the fill color or the border color rather and you're gonna see we have a bunch of different ways here to make colors. We have Hex to start, we have RGB, and we have HSB. You can do it however you want. I'm gonna go in and just kinda pick a color, we'll go with a little bit lighter color. Maybe like a light red or something like that. You'll see that you have the hue saturation and brightness, you also have the alpha slider and if you decide that you make a color you can save it by clicking on this plus right down here. That's just gonna save it in this document so you can use it again and again. You can kinda think of that as a swatch going forward that you can reuse. Alright now we're gonna go in and we're gonna start to create a little bit more, take it a little further talk a little bit about the pen tool and just editing shapes a little bit, kinda give you an idea. So what I wanna do is move over. I'm gonna press the hand tool here or the space bar to get to the hand tool. And we're gonna come above this categories art board and I wanna create a little icon, okay. And we're not gonna go nuts. You know how to do a lot of stuff already as drawing I'm sure but let's do this, let's talk about how to edit shapes. Just beyond resizing. So come to the rectangle tool, and we'll make this a little bigger first and scale it down. And just draw a rectangle that's kinda like that, that's great. Okay. Now if I wanna go in and I wanna edit the actual points on the rectangle. I wanna maybe remove one, I wanna drag it around, do things like that, look at the tool bar. You notice how in just about every other Adobe application, we usually have two arrows, we've got the black arrow and we've got the white arrow. In here we only have one and the reason for that is, you'll see. So go to the select tool, come to this shape and double-click on it. When you double-click on a shape, you actually enter into this editing mode. You can now access all the anchor points. You don't need the switch tools. When you're editing in here, you're gonna be doing a lot of double-clicking and then to get out of editing, we'll see in a minute, you're gonna press Escape. Now I can get to the points if I want to, I can come to let's say, a corner point, or something like that. So I can come to maybe like, actually the top left point's fine. Come to the top left point here and just press Delete and you can see, you can actually delete it which is pretty cool. Now if you did that in Illustrator, you'd actually create what's called an open path and here it doesn't matter. Now what if I made a mistake, I'm like, oh. I needed that point back. Yes you can undo, okay. But you can also do this, check this out. Come over the shape. I'm not holding anything down, I didn't switch tools just move the pointer over the shape to sneak up on it and you suddenly have the pen tool. Click to add a point and drag the point. You're gonna see the smart guides are gonna kick in here and it's gonna align it perfectly with those two points again. It's pretty easy, okay, you're gonna, I guarantee you, when you draw in here and work in here, you're gonna overthink stuff. I guarantee it. Now what I wanna do is this, I wanna just take this bottom point here and we're gonna drag it over to the left. So go ahead and click on it just to select it, you'll see it's selected, and then just drag over to the left. You'll see that you have smart guides that will help you align these. So we're gonna do just a little bit, I'll do something like that and it's not aligned, there we go. Now I wanna go in and take this whole shape and I wanna just resize it, okay? So, right now we're in editing mode. Okay, I wanna press Escape to get outta that. So press Escape. You can also click away and then click on it again. And now you've got the bonding box. So what I can do now, is I can go in and actually just do something like this. I'll make it a little bit smaller, there we go, not too bad. Alright, now we're making a pin body here so what I wanna to with this is I wanna actually copy it, flip it, and join it together to make a single shape, okay? So I'm gonna zoom in on that shape a little bit. I'm using my Command + or Option scroll wheel or pinch zoom. And just copy paste, okay, right-click, however you do it. Command + C, Command + V, Control + C, Control + V. And when you paste inside of XD, it pastes in place on top of the old one or the other one. We're gonna flip it now, so just come to a side and drag. You're just gonna drag. And what you're gonna do is hold down the Option key on Mac or Alt key on Windows. Its gonna rip from the center, flip it across, let go of the mouse, let go of the key, there we go, drag it over. You're gonna see in here when you actually create things, the smart guide's gonna help you a lot. Okay, so we're gonna do something like that, that looks pretty good. Now we're gonna combine them. We're gonna use what are called, path finders to do this, okay. So go ahead and select these two objects, and if you look over on the right, you're gonna see that we have four path finder operations. These are ways for us to be able to take shapes and combine them, punch them, do different things like that. And if you've worked in Illustrator, in Design or other programs you've probably used something like these and you do what I do and you hover over the icon to make sure you know what it does. Cause the tool tip. Well we only have four so it makes it a little easier. Why don't you click on add to combine them together. There we go, it's not too bad. I wanna make this a little shorter, go down. Now the great thing about these path finder operations is they're live, we'll call it that. You can undo, they're a toggle. So if you look ever there right now with that shape selected, you could actually just click on that to toggle it off again. Doesn't matter how many you have deep, if you have a whole bunch of shapes, one punched, one's added, they're all combined in different ways. All of those operations, you can go back out of. Which is really great. Now you can also double-click on the shape if you wanna get in there and edit each individual shape, you can keep editing if you wanna do that. Once you're done editing it, press Escape. You get back out, or just click away, okay? Now if you wanna double-click and access those anchor points for the whole shape as a combined object, what you can do is you can either right-click on it or you can go to object, path, convert to path. Now on Windows we don't have the menus up there so you're gonna wanna right-click and see this. Convert to path, it just means do it, permanently, make sure it happens. So I can double-click on it now and access the points that are available. There we go. Alright now, we're just gonna create the top, the bottom, and finish this up to make the icon. So, go to the rectangle tool, just draw a little rectangle up top, that's way too big, that's gonna look dumb, that's fine. Alright, I'm gonna move it down, I'm gonna press the V key. We're gonna go to the select tool, just move it down, and we're just gonna use the smart guide's to align and you're gonna see it should do something like that. And then round the corners, just round them a little bit. There you go. Its the end of the pin. Now we're gonna copy it straight down. So you can Option drag, Alt drag in Windows, and if you notice, all I need is that one key and it will keep it lined up with smart guide's usually. You can do it, there we go. Release the mouse, the key, and then just scale it. Drag a side, press the Option key on Mac, or Alt key on Windows. You can make it a little bigger, there we go. In this case, what I wanna do is I wanna make sure that the bottom here is actually solid, so it's set like this, not rounded. So press Option on Mac or Alt on Windows and drag the lower right corner. You can let go of the key, then go to the lower left, Option or Alt on Windows, drag, and there we go. Alright this doesn't look too bad. We're getting there. Now I just wanna make the pin part. We're gonna just do this kinda quickly to kinda get it over with. So go to the rectangle tool, we could just put a line but that would look kinda dumb, so I want you to just come out here and just draw a rectangle, just kind of a squat little rectangle. And then we're gonna go in and delete one of the points and just pull it down. So to edit this, to get into edit mode, we're gonna double-click. so double-click, click on one of the points down here, just press delete, I know that goes against your nature if you've used Illustrator but yes we can do that. Grab that point and just drag it down. Now what I tend to do is this, I tend to bring it up, there's no alignment guides here unfortunately, so you either create half and flip it and join them or you can bring it up on this and then use your arrow keys down to bring it straight down. I'm just gonna eye-ball this right now, so I'm gonna bring it down like that, that looks pretty good. Alright. Now we're gonna combine all of this together, so I'm gonna zoom out a bit, just drag across and we're gonna combine all of this eventually here but let me drag across all this content here. And make sure you're on the select tool by the way. (laughs) There we go. And just move it up here for a second, okay. We'll get to it in just a minute. Now if you want to, you can go in to the fill on the right, the stroke, change the colors, do different things like that, so I could actually go in and say, I wanna change the fill of this pin to that pink or red color or something like that and remove the border for instance. So just turn off the border. And just do what you need to do here. Try some different things, see what it looks like. Add a little bit different color, there we go. We're gonna group that in a little bit here but why don't you go ahead and save your file for right now. Alright, now the last thing I kinda want to just talk about here is we have the ability, like I said, to work with the UI kit to bring in content like vector content, to draw content, do things like that. We also have the pen tool. Now I'm not gonna go crazy with the pen tool because we could take a whole bunch of time on this. I just wanna show you something that's a little different from, let's say, Illustrator, or Photoshop, okay. What we're gonna do is go to the log in screen over here. I'm gonna press the Space bar, move it over, and we're just gonna draw a little V. I know it's not gonna be perfectly symmetrical to do it, we would copy and flip and all that stuff but just come in there and click once and let go and move away with the pen tool. You're gonna see that this actually has a little pen tool preview so you can see what you're about to create. Come over to the left and just click and then come over to the right again and you're gonna see that the thing I love about this is, sorta like Illustrator, you're gonna see alignment guides show up. These are actually part of smart guides. So I can just click to set another point there. Now with the pen tool if you want to, if you wanna just edit right now, just stay on the pen tool, you don't have to hold keys down or anything like that. Click on a point, drag it. Double-click on a point and it converts it to a smooth or rounded point. If you double-click again, you're back to a corner point. Alright, there's a lot of ways you can work with this and if you wanna finish drawing or if you wanna draw a curve, you're gonna click and drag, it's very much like other programs. To stop drawing, you can press Escape, that kinda gets it back to, okay, we're not gonna draw this anymore. We're also on the black arrow, the select tool, and what I wanna do is I just wanna select that by dragging across and just change the stroke weight. If you look over there you can see the stroke weight. I'll make it something like maybe four, actually go bigger than that, let's go like 10. Change the color. Border. Maybe like a light light gray, that way we can still see it. And make it a little smaller. I'm just gonna drag a corner. Now when you're dragging things that you've drawn, you wanna hold the shift key down in the corner and notice what's happening here to the stroke weight. The stroke weight is not scaling, so it's staying pretty much the same. So I'm gonna change that a little bit here to a little bit smaller. There we go. Alright. So we've got a lot of things that we can create as far as working with vector, drawing shapes, all that type of thing. You can also create things in Illustrator if you're comfortable. Copy paste, bring that over and work that way too.