1
00:00:00.05 --> 00:00:02.01
- [Instructor] Even though
you can create graphics

2
00:00:02.01 --> 00:00:05.03
in Adobe XD, chances are
you're probably going to want

3
00:00:05.03 --> 00:00:07.00
to import some vector graphics.

4
00:00:07.00 --> 00:00:11.02
Maybe logos or social media
icons, like I'm going to do.

5
00:00:11.02 --> 00:00:14.01
To do that, just go to file, import.

6
00:00:14.01 --> 00:00:16.08
From there just go to the assets folder.

7
00:00:16.08 --> 00:00:18.00
If you have access to it,

8
00:00:18.00 --> 00:00:19.08
it really could be any graphics,

9
00:00:19.08 --> 00:00:22.07
as long as they're SVG,
I can select them here.

10
00:00:22.07 --> 00:00:24.06
In fact, I can hold down the command key

11
00:00:24.06 --> 00:00:25.08
and select more.

12
00:00:25.08 --> 00:00:29.04
So I want to select these
three, Twitter, Instagram

13
00:00:29.04 --> 00:00:31.04
and Facebook and then this logo white,

14
00:00:31.04 --> 00:00:33.03
just by holding down the
command key or control key

15
00:00:33.03 --> 00:00:36.08
if you want to multiple select items.

16
00:00:36.08 --> 00:00:38.02
All this logo white is

17
00:00:38.02 --> 00:00:40.08
is a white version of this
black logo right here.

18
00:00:40.08 --> 00:00:42.02
So that's what I want.

19
00:00:42.02 --> 00:00:43.06
I'm going to select import.

20
00:00:43.06 --> 00:00:46.03
It's going to bring them all in, okay,

21
00:00:46.03 --> 00:00:48.05
and now I'm squared away.

22
00:00:48.05 --> 00:00:49.05
I can grab this item.

23
00:00:49.05 --> 00:00:50.08
I can kind of move it around.

24
00:00:50.08 --> 00:00:52.01
I can move these items around

25
00:00:52.01 --> 00:00:53.01
and this is what will happen

26
00:00:53.01 --> 00:00:56.08
is you'll accidentally maybe
select that background bar.

27
00:00:56.08 --> 00:00:59.05
So I'll just do a Command
+ Z to move that back

28
00:00:59.05 --> 00:01:01.09
and now what I want to do
is I want to introduce you

29
00:01:01.09 --> 00:01:03.08
to the layers panel.

30
00:01:03.08 --> 00:01:06.02
This is essential as you
start stacking graphics.

31
00:01:06.02 --> 00:01:09.04
Right over here, down lower left,

32
00:01:09.04 --> 00:01:11.04
opening up the layers panel.

33
00:01:11.04 --> 00:01:14.01
See sure enough, there's
my rectangle again.

34
00:01:14.01 --> 00:01:15.08
If I select off of it and I select it,

35
00:01:15.08 --> 00:01:17.05
I can see that it highlights it.

36
00:01:17.05 --> 00:01:18.07
So what do I want to do in this case?

37
00:01:18.07 --> 00:01:20.03
I want to lock it down,

38
00:01:20.03 --> 00:01:21.01
just like that.

39
00:01:21.01 --> 00:01:22.06
Gives me this little lock icon.

40
00:01:22.06 --> 00:01:25.00
I can always turn it on
and off that way as well.

41
00:01:25.00 --> 00:01:28.09
There we go and now I'm not
going to accidentally select it.

42
00:01:28.09 --> 00:01:30.09
But now look what also is in here.

43
00:01:30.09 --> 00:01:33.03
All of these various folders.

44
00:01:33.03 --> 00:01:37.07
So these are grouped
objects that get brought in.

45
00:01:37.07 --> 00:01:39.08
But from there I can zoom in

46
00:01:39.08 --> 00:01:42.00
and I can start to kind
of position things.

47
00:01:42.00 --> 00:01:43.09
I can move these over, for instance.

48
00:01:43.09 --> 00:01:46.09
I'm going to move these
graphics over a little bit.

49
00:01:46.09 --> 00:01:48.03
Maybe I'll zoom out a touch.

50
00:01:48.03 --> 00:01:51.06
Basically I want this kind
of off-center over here

51
00:01:51.06 --> 00:01:54.03
because I'm going to have
my different menu items

52
00:01:54.03 --> 00:01:55.02
off on that side.

53
00:01:55.02 --> 00:01:59.02
So I'll move these social
media icons over here.

54
00:01:59.02 --> 00:02:01.09
Zooming in when necessary.

55
00:02:01.09 --> 00:02:02.08
Move them over here

56
00:02:02.08 --> 00:02:04.05
and I want to show you what's happening.

57
00:02:04.05 --> 00:02:05.04
I love this.

58
00:02:05.04 --> 00:02:06.09
I'll zoom in a little bit more.

59
00:02:06.09 --> 00:02:08.03
Is the fact that I have guides

60
00:02:08.03 --> 00:02:10.00
when I start positioning items.

61
00:02:10.00 --> 00:02:11.09
See, as I position this,
move this over here,

62
00:02:11.09 --> 00:02:13.07
oh I guess I can make sure they're all,

63
00:02:13.07 --> 00:02:16.09
say, 51 pixels apart, just like that.

64
00:02:16.09 --> 00:02:18.04
So I love having these guides

65
00:02:18.04 --> 00:02:20.04
and they work out fantastic

66
00:02:20.04 --> 00:02:22.05
and they're easy to work with, right.

67
00:02:22.05 --> 00:02:25.01
So, let's take a look
at this graphic as well.

68
00:02:25.01 --> 00:02:27.05
So this is a vector graphic.

69
00:02:27.05 --> 00:02:29.00
It's the logo white.

70
00:02:29.00 --> 00:02:30.00
So check this out.

71
00:02:30.00 --> 00:02:31.05
I'm noticing that
there's this kind of like

72
00:02:31.05 --> 00:02:34.05
this bump here and I would kind
of like to make this straight.

73
00:02:34.05 --> 00:02:36.06
Well, does that mean I
have to re-import it?

74
00:02:36.06 --> 00:02:37.04
I don't need to.

75
00:02:37.04 --> 00:02:39.01
I can just double click
and look what happens.

76
00:02:39.01 --> 00:02:41.02
I can start to dig into
these different groups.

77
00:02:41.02 --> 00:02:43.05
Different groups, digging, double click,

78
00:02:43.05 --> 00:02:45.04
double click, double click

79
00:02:45.04 --> 00:02:48.07
and sure enough, I can start to access

80
00:02:48.07 --> 00:02:53.06
these individual points right here.

81
00:02:53.06 --> 00:02:54.08
There we are.

82
00:02:54.08 --> 00:02:59.07
Notice how I'm clear down
here to this path right here.

83
00:02:59.07 --> 00:03:01.01
Double clicking again.

84
00:03:01.01 --> 00:03:03.02
Now look, this is what
I wanted to show you

85
00:03:03.02 --> 00:03:05.06
is the fact that I have
all these bza points.

86
00:03:05.06 --> 00:03:07.04
So when I import vector graphics,

87
00:03:07.04 --> 00:03:10.01
I don't need to go back out to
another program to edit them,

88
00:03:10.01 --> 00:03:12.07
I can actually edit
them right in Adobe XD,

89
00:03:12.07 --> 00:03:15.01
so I can line that up, I
get those alignment tools.

90
00:03:15.01 --> 00:03:16.06
Make that nice and straight.

91
00:03:16.06 --> 00:03:18.07
I have an issue with this
little part right over here.

92
00:03:18.07 --> 00:03:21.01
If I zoom in, I definitely screwed this up

93
00:03:21.01 --> 00:03:22.01
in making this logo.

94
00:03:22.01 --> 00:03:25.08
I can just delete those
extraneous points there

95
00:03:25.08 --> 00:03:27.03
and that looks good.

96
00:03:27.03 --> 00:03:29.02
Keep in mind, it's all still grouped.

97
00:03:29.02 --> 00:03:31.01
I could do a Command + 0.

98
00:03:31.01 --> 00:03:33.02
That looks fantastic.

99
00:03:33.02 --> 00:03:34.03
In fact, what I'm going to do

100
00:03:34.03 --> 00:03:35.06
is I'm just going to re-size this.

101
00:03:35.06 --> 00:03:39.09
Maybe a touch larger, just like that.

102
00:03:39.09 --> 00:03:41.08
51.

103
00:03:41.08 --> 00:03:43.03
There we are, all right.

104
00:03:43.03 --> 00:03:46.00
All I did was hold down
the alt key or option key,

105
00:03:46.00 --> 00:03:47.07
and I was able to scale that up

106
00:03:47.07 --> 00:03:49.08
and scale up from the center.

107
00:03:49.08 --> 00:03:53.01
So, super easy, importing graphics.

108
00:03:53.01 --> 00:03:54.08
Just make sure they're in SVG.

109
00:03:54.08 --> 00:03:57.07
Even if you have, say fonts in them,

110
00:03:57.07 --> 00:03:59.04
or even bitmap data,

111
00:03:59.04 --> 00:04:02.03
you can import that information as well

112
00:04:02.03 --> 00:04:05.00
because those can be
inside of an SVG as well.

113
00:04:05.00 --> 00:04:06.01
But super easy to work with

114
00:04:06.01 --> 00:04:07.08
once they're in Adobe XD.