1
00:00:00.07 --> 00:00:01.05
- [Instructor] When it comes to creating

2
00:00:01.05 --> 00:00:03.07
graphics in Adobe XD,
it's done pretty easily,

3
00:00:03.07 --> 00:00:06.06
just using these tools right
over here in the tool bar.

4
00:00:06.06 --> 00:00:08.03
In fact, what I want to do,
is I want to create like,

5
00:00:08.03 --> 00:00:12.00
a navigation bar and then
draw a magnifying glass.

6
00:00:12.00 --> 00:00:14.09
So I'm going to use the
rectangle tool right here.

7
00:00:14.09 --> 00:00:17.08
And I'm just going to click and
drag and go from edge to edge,

8
00:00:17.08 --> 00:00:20.00
and you'll start to
feel it snap into place.

9
00:00:20.00 --> 00:00:23.03
And I want to have it
about 90 pixels high,

10
00:00:23.03 --> 00:00:26.04
and the length of this art board.

11
00:00:26.04 --> 00:00:28.06
But I didn't get it exactly right.

12
00:00:28.06 --> 00:00:30.06
Well you can always
use your selection tool

13
00:00:30.06 --> 00:00:32.04
and have it snap into place,

14
00:00:32.04 --> 00:00:34.01
but as for the height, what you could do,

15
00:00:34.01 --> 00:00:36.03
is you could go right over
here with it selected,

16
00:00:36.03 --> 00:00:38.00
and change the height to 90.

17
00:00:38.00 --> 00:00:40.03
So you get all of the various coordinates

18
00:00:40.03 --> 00:00:41.04
and then all the specifics of

19
00:00:41.04 --> 00:00:43.02
anything selected right over here.

20
00:00:43.02 --> 00:00:45.04
In fact, I don't want it to have a border,

21
00:00:45.04 --> 00:00:48.01
so I'm going to uncheck that and
I'm going to give it a fill color

22
00:00:48.01 --> 00:00:53.04
of black, and notice how I can
change the transparency too.

23
00:00:53.04 --> 00:00:57.03
So I can kind of drop that
down a little bit, about 78%,

24
00:00:57.03 --> 00:01:00.00
no big deal, looks pretty good to me.

25
00:01:00.00 --> 00:01:02.03
I like it, so far so good.

26
00:01:02.03 --> 00:01:05.08
And now I'm going to zoom in really close,

27
00:01:05.08 --> 00:01:09.01
because I actually want to
draw a magnifying glass.

28
00:01:09.01 --> 00:01:11.05
So I'm going to use an ellipse, okay?

29
00:01:11.05 --> 00:01:15.05
And I'm going to just click and
hold on the shift key to drag,

30
00:01:15.05 --> 00:01:16.09
and that will constrain it.

31
00:01:16.09 --> 00:01:19.06
Otherwise it's going to get all distorted,

32
00:01:19.06 --> 00:01:21.02
and I want it to be a perfect circle.

33
00:01:21.02 --> 00:01:23.06
In fact, you can hold down the alt key,

34
00:01:23.06 --> 00:01:24.09
and it will draw out from the

35
00:01:24.09 --> 00:01:26.04
center from wherever you click.

36
00:01:26.04 --> 00:01:29.05
And again, this is just like
Photoshop and Illustrator.

37
00:01:29.05 --> 00:01:32.03
So I'm going to draw it
about this size, like that.

38
00:01:32.03 --> 00:01:33.08
This is a magnifying glass,

39
00:01:33.08 --> 00:01:35.04
so I don't want it to have the fill color,

40
00:01:35.04 --> 00:01:38.03
otherwise it wouldn't be that
good of a magnifying glass.

41
00:01:38.03 --> 00:01:40.05
And I want to change the
border to white, okay?

42
00:01:40.05 --> 00:01:41.08
So the border's going to be white,

43
00:01:41.08 --> 00:01:43.03
and I want to increase the size,

44
00:01:43.03 --> 00:01:45.04
so let's just go, you know,

45
00:01:45.04 --> 00:01:47.02
I can type in two or I
can use the arrow key.

46
00:01:47.02 --> 00:01:49.07
So I'm pressing the up
arrow key to kind of

47
00:01:49.07 --> 00:01:52.07
visually change this so
I can kind of look at

48
00:01:52.07 --> 00:01:55.01
the graphic and get
this to where I want it.

49
00:01:55.01 --> 00:01:57.07
I kind of like five,
that looks pretty good.

50
00:01:57.07 --> 00:01:58.08
Now let's draw the handle,

51
00:01:58.08 --> 00:02:00.06
for the handle I'm going
to use the rectangle tool.

52
00:02:00.06 --> 00:02:02.06
So selecting rectangle
tool, click and drag,

53
00:02:02.06 --> 00:02:05.09
I still get those snapping
points that I see,

54
00:02:05.09 --> 00:02:09.02
you'll see them come up, those
pink guides is what they are,

55
00:02:09.02 --> 00:02:11.00
but I'm going to draw
that out, just like that,

56
00:02:11.00 --> 00:02:12.04
and I'm going to zoom in closer.

57
00:02:12.04 --> 00:02:15.03
To zoom it's just command plus control,

58
00:02:15.03 --> 00:02:17.08
plus if you're on a PC.

59
00:02:17.08 --> 00:02:19.06
Now I'm not sure if I
get this exactly right,

60
00:02:19.06 --> 00:02:22.08
so I can use my selection
tool and just make sure

61
00:02:22.08 --> 00:02:26.05
I get that pink guide right
there, and that looks good.

62
00:02:26.05 --> 00:02:28.00
Let's turn off the border.

63
00:02:28.00 --> 00:02:30.03
Now I want to round the corners,

64
00:02:30.03 --> 00:02:32.07
well you can do that by
using these control points.

65
00:02:32.07 --> 00:02:34.06
So let's zoom in a little further.

66
00:02:34.06 --> 00:02:37.07
I can click and drag, and
it will round all of them.

67
00:02:37.07 --> 00:02:39.06
That's pretty cool, but actually I just

68
00:02:39.06 --> 00:02:41.07
want to round the bottom portion.

69
00:02:41.07 --> 00:02:45.02
So what you can do is just
hold down the alt key,

70
00:02:45.02 --> 00:02:47.06
and then click and drag or option key,

71
00:02:47.06 --> 00:02:49.08
whatever you want to call
it, I'm actually on a Mac.

72
00:02:49.08 --> 00:02:51.09
So click and drag that
in, kind of like that,

73
00:02:51.09 --> 00:02:52.07
what about this side?

74
00:02:52.07 --> 00:02:55.00
Holding down the alt key,
click and dragging it in,

75
00:02:55.00 --> 00:02:59.01
or option key, and I think
I got that exactly right,

76
00:02:59.01 --> 00:02:59.09
I'm not sure.

77
00:02:59.09 --> 00:03:01.08
Well, we can check the
coordinates over here,

78
00:03:01.08 --> 00:03:05.04
we can see three and
three, that is good to go.

79
00:03:05.04 --> 00:03:08.05
Alright, now what I can do is
I can hold on the shift key

80
00:03:08.05 --> 00:03:11.02
to select both of these and angle it,

81
00:03:11.02 --> 00:03:14.07
because as I look and
move this to any corner,

82
00:03:14.07 --> 00:03:18.02
I can rotate this and
hold down the shift key,

83
00:03:18.02 --> 00:03:22.06
and then I can constrain
it to about 45 degrees,

84
00:03:22.06 --> 00:03:25.05
about that angle, like that, okay.

85
00:03:25.05 --> 00:03:27.03
Now let's create the highlight.

86
00:03:27.03 --> 00:03:30.01
I'm going to make the
highlight using the pen tool.

87
00:03:30.01 --> 00:03:32.00
So selecting the pen right over here,

88
00:03:32.00 --> 00:03:36.05
I can click and then I can
do another click and drag,

89
00:03:36.05 --> 00:03:40.01
and I get BZA points in XD, okay.

90
00:03:40.01 --> 00:03:44.06
So I can drag that out, like that, okay?

91
00:03:44.06 --> 00:03:48.06
And I can hit escape once
I'm done with that line.

92
00:03:48.06 --> 00:03:51.06
Alright, notice it's
actually still selected,

93
00:03:51.06 --> 00:03:55.01
and I can grab this point
right here, I can move it over,

94
00:03:55.01 --> 00:03:59.04
maybe adjust this BZA point
very easily like that.

95
00:03:59.04 --> 00:04:02.09
I want to change the color
of the border to white,

96
00:04:02.09 --> 00:04:06.01
to make sure it matches, and
clicking right over here,

97
00:04:06.01 --> 00:04:09.02
using the up arrow I can
change the thickness.

98
00:04:09.02 --> 00:04:12.03
Five, six, even looks pretty good.

99
00:04:12.03 --> 00:04:13.02
But check this out,

100
00:04:13.02 --> 00:04:16.08
what if I don't want this
to be as a smooth curve?

101
00:04:16.08 --> 00:04:18.07
Well I can change it to a straight line,

102
00:04:18.07 --> 00:04:20.04
just by clicking on it, right?

103
00:04:20.04 --> 00:04:23.07
So we go from straight
to giving it a BZA point,

104
00:04:23.07 --> 00:04:26.03
so then I can curve it out just like this.

105
00:04:26.03 --> 00:04:27.07
Want even more control?

106
00:04:27.07 --> 00:04:30.06
Well, you can add a point just by clicking

107
00:04:30.06 --> 00:04:34.03
on any segment of the line,
and adjusting accordingly.

108
00:04:34.03 --> 00:04:36.08
So there's no need to have
an add anchor point tool,

109
00:04:36.08 --> 00:04:38.03
a remove anchor point tool,

110
00:04:38.03 --> 00:04:39.05
because what if I want to remove this?

111
00:04:39.05 --> 00:04:41.09
I just hit delete, just
make sure it's selected,

112
00:04:41.09 --> 00:04:45.03
and hit delete and
that's good to go there.

113
00:04:45.03 --> 00:04:48.05
So that' technically all
you really need to do,

114
00:04:48.05 --> 00:04:50.01
just get this the way you want it to be,

115
00:04:50.01 --> 00:04:52.07
and again I can double-click
to give this a BZA point,

116
00:04:52.07 --> 00:04:54.07
and it's really just a
matter of giving this

117
00:04:54.07 --> 00:04:57.08
kind of a nice curve
is what I'm going for.

118
00:04:57.08 --> 00:05:00.08
Something nice and elegant
to create a highlight,

119
00:05:00.08 --> 00:05:02.04
that looks pretty good.

120
00:05:02.04 --> 00:05:05.07
Alright, that looks good, I will zoom out,

121
00:05:05.07 --> 00:05:08.06
in fact, I can do command zero.

122
00:05:08.06 --> 00:05:13.02
And I'm back out and this fits
it within my current view,

123
00:05:13.02 --> 00:05:14.09
and everything looks good.

124
00:05:14.09 --> 00:05:16.05
But I'm going to do one more thing,

125
00:05:16.05 --> 00:05:18.09
because I actually want to
move it off to the side.

126
00:05:18.09 --> 00:05:22.02
So zooming in, selecting this line,

127
00:05:22.02 --> 00:05:25.03
holding down the shift
key, selecting the circle,

128
00:05:25.03 --> 00:05:27.08
holding down the shift
key, clicking again,

129
00:05:27.08 --> 00:05:29.02
these are all of my items,

130
00:05:29.02 --> 00:05:31.06
I actually have them all selected now.

131
00:05:31.06 --> 00:05:35.01
Now what I want to do is I want
to group them together, okay?

132
00:05:35.01 --> 00:05:40.00
So, with them selected, we
can go to object, group.

133
00:05:40.00 --> 00:05:40.09
Now if you're on windows,

134
00:05:40.09 --> 00:05:42.06
you can actually just right-click

135
00:05:42.06 --> 00:05:44.09
on the objects and select group.

136
00:05:44.09 --> 00:05:47.00
Then it will be one grouped object.

137
00:05:47.00 --> 00:05:48.03
Then just command zero,

138
00:05:48.03 --> 00:05:51.02
we'll fit everything
within my viewable area,

139
00:05:51.02 --> 00:05:53.04
and then I can just grab
it and move it to the left,

140
00:05:53.04 --> 00:05:55.03
just like that.

141
00:05:55.03 --> 00:05:56.07
So using the tools on the left,

142
00:05:56.07 --> 00:06:00.01
you can see how easy it is to
create graphics in Adobe XD.