It is not uncommon for UX designers to have a couple of sites where they can download icons for their projects. XD's drawing tool make this practice a thing of the past. Learn how to use the drawing tools and the properties panel to create a camera icon.
- [Instructor] In this exercise, what we are going to do is we are going to use the drawing tools to create a camera icon. And I've never quite understood the compulsion that some have to go out into the internet and find just the perfect icon from a variety of sites and use it when you've got the drawing tools inside of XD that will allow you to create some pretty interesting stuff. In this case, a camera, so, let's get started. And to get yourself started, open the camera file that's located in your chapter four download. And when it opens, just see, I've got a little camera up here.
All right, so, the first step in the process, just draw the camera body, and that's a rectangle. So, I'm just going to select the rectangle here, and I want to round off the corners. So, we just pull in this little handle here, you know, so, it pulls all four in. And if you're looking for a little bit more precision than dragging, you can come over here and change the value of the roundness. And in this case, I'm going to make it 30 pixels. And there we go. So, now that we've got the camera body drawn, let's do the viewfinder.
And that's drawn with the pen tool. So, I'm just going to hold down the shift key, click, click. And I'll just come up here, click, click, click. And deselect, and now what I want to do is just change this angle right here, so, I just double click. Click that handle and using the right arrow key, just move it in. So, it looks like it's somewhat of a match, there we go. And now I've got my viewfinder in, and I'm just going to drop it in on top of the camera.
So, I just click on it and just drop it on just like that. There we go. And now what I want to do is turn this into a single shape, rather than two shapes. So, what you do is, with the selection tools, select both shapes and then come over here, and these are the Boolean options, right up here beside the repeat grid and the properties panel. And you can add up shapes together, which is what we want to do. You can subtract, you can just show intersection, and you can exclude overlap. We're going to add it. So, we just select and, if you notice, we've now got a single shape.
Okay, so, let's add the camera lens, and that's the ellipse tool right here. And I'm just going to put it right in the middle. And you can see that the smart guides show me where the center point is, so, I'm going to hold down the option. And you guys on the PC, that would be the Alt key. Shift, click, drag, and I'm going to draw a lens. Now that I've got my shapes done, I can now fill it with a color. And turn off the border for the body. And I'm just going to fill it with this color by using the eyedropper tool.
And then I'm going to select the circle, and I'm going to turn off the fill, but I'm going to give it a white border. And I'm just going to take stroke with two by 10 pixels. And what I've done is I have created a camera icon. Now I can group this and I can resize it however I see fit. Just notice, though, that the camera will distort. So, just be aware of that. Okay, so there's the camera icon done, and the other thing you might want to do is if you want to reuse it at this size, just select it, click the symbols button, and just click the plus sign and the camera is added.
So, there you go, that's how you can create a simple icon using the drawing tools inside of XD. In this case, it was just two shapes, a rectangle and an ellipse. And we used the pen tool to draw the viewfinder, and then we came up here and used these tools to pull it together, and then turned it into a symbol. How easy was that?
- Navigating the XD interface
- Using artboards and grids
- Adding content to layers
- Using the Repeat Grid feature
- Adding interactivity to a project
- Exporting content
- Sharing your work
Skill Level Beginner
Q: This course was updated on 11/29/2017. What changed?
A: New videos were added that cover the XD Assets panel, Experience Design symbols, Creative Cloud Libraries, and pinning comments.