- [Instructor] When it comes to creating
graphics in Adobe XD, it's done pretty easily,
just using these tools right over here in the tool bar.
In fact, what I want to do, is I want to create like,
a navigation bar and then draw a magnifying glass.
So I'm going to use the rectangle tool right here.
And I'm just going to click and drag and go from edge to edge,
and you'll start to feel it snap into place.
And I want to have it about 90 pixels high,
and the length of this art board.
But I didn't get it exactly right.
Well you can always use your selection tool
and have it snap into place,
but as for the height, what you could do,
is you could go right over here with it selected,
and change the height to 90.
So you get all of the various coordinates
and then all the specifics of
anything selected right over here.
In fact, I don't want it to have a border,
so I'm going to uncheck that and I'm going to give it a fill color
of black, and notice how I can change the transparency too.
So I can kind of drop that down a little bit, about 78%,
no big deal, looks pretty good to me.
I like it, so far so good.
And now I'm going to zoom in really close,
because I actually want to draw a magnifying glass.
So I'm going to use an ellipse, okay?
And I'm going to just click and hold on the shift key to drag,
and that will constrain it.
Otherwise it's going to get all distorted,
and I want it to be a perfect circle.
In fact, you can hold down the alt key,
and it will draw out from the
center from wherever you click.
And again, this is just like Photoshop and Illustrator.
So I'm going to draw it about this size, like that.
This is a magnifying glass,
so I don't want it to have the fill color,
otherwise it wouldn't be that good of a magnifying glass.
And I want to change the border to white, okay?
So the border's going to be white,
and I want to increase the size,
so let's just go, you know,
I can type in two or I can use the arrow key.
So I'm pressing the up arrow key to kind of
visually change this so I can kind of look at
the graphic and get this to where I want it.
I kind of like five, that looks pretty good.
Now let's draw the handle,
for the handle I'm going to use the rectangle tool.
So selecting rectangle tool, click and drag,
I still get those snapping points that I see,
you'll see them come up, those pink guides is what they are,
but I'm going to draw that out, just like that,
and I'm going to zoom in closer.
To zoom it's just command plus control,
plus if you're on a PC.
Now I'm not sure if I get this exactly right,
so I can use my selection tool and just make sure
I get that pink guide right there, and that looks good.
Let's turn off the border.
Now I want to round the corners,
well you can do that by using these control points.
So let's zoom in a little further.
I can click and drag, and it will round all of them.
That's pretty cool, but actually I just
want to round the bottom portion.
So what you can do is just hold down the alt key,
and then click and drag or option key,
whatever you want to call it, I'm actually on a Mac.
So click and drag that in, kind of like that,
what about this side?
Holding down the alt key, click and dragging it in,
or option key, and I think I got that exactly right,
I'm not sure.
Well, we can check the coordinates over here,
we can see three and three, that is good to go.
Alright, now what I can do is I can hold on the shift key
to select both of these and angle it,
because as I look and move this to any corner,
I can rotate this and hold down the shift key,
and then I can constrain it to about 45 degrees,
about that angle, like that, okay.
Now let's create the highlight.
I'm going to make the highlight using the pen tool.
So selecting the pen right over here,
I can click and then I can do another click and drag,
and I get BZA points in XD, okay.
So I can drag that out, like that, okay?
And I can hit escape once I'm done with that line.
Alright, notice it's actually still selected,
and I can grab this point right here, I can move it over,
maybe adjust this BZA point very easily like that.
I want to change the color of the border to white,
to make sure it matches, and clicking right over here,
using the up arrow I can change the thickness.
Five, six, even looks pretty good.
But check this out,
what if I don't want this to be as a smooth curve?
Well I can change it to a straight line,
just by clicking on it, right?
So we go from straight to giving it a BZA point,
so then I can curve it out just like this.
Want even more control?
Well, you can add a point just by clicking
on any segment of the line, and adjusting accordingly.
So there's no need to have an add anchor point tool,
a remove anchor point tool,
because what if I want to remove this?
I just hit delete, just make sure it's selected,
and hit delete and that's good to go there.
So that' technically all you really need to do,
just get this the way you want it to be,
and again I can double-click to give this a BZA point,
and it's really just a matter of giving this
kind of a nice curve is what I'm going for.
Something nice and elegant to create a highlight,
that looks pretty good.
Alright, that looks good, I will zoom out,
in fact, I can do command zero.
And I'm back out and this fits it within my current view,
and everything looks good.
But I'm going to do one more thing,
because I actually want to move it off to the side.
So zooming in, selecting this line,
holding down the shift key, selecting the circle,
holding down the shift key, clicking again,
these are all of my items,
I actually have them all selected now.
Now what I want to do is I want to group them together, okay?
So, with them selected, we can go to object, group.
Now if you're on windows,
you can actually just right-click
on the objects and select group.
Then it will be one grouped object.
Then just command zero,
we'll fit everything within my viewable area,
and then I can just grab it and move it to the left,
just like that.
So using the tools on the left,
you can see how easy it is to create graphics in Adobe XD.