1
00:00:00,970 --> 00:00:03,040
First, let's add in our links.

2
00:00:03,040 --> 00:00:08,110
We know that our navigation area
is sort of is designated as here.

3
00:00:08,110 --> 00:00:11,330
We also have this area here.

4
00:00:11,330 --> 00:00:15,620
I'm gonna delete this for now,
because I don't think I want a darker

5
00:00:15,620 --> 00:00:20,560
colored bar after all, but I do want
all of this real estate for my links.

6
00:00:20,560 --> 00:00:26,400
So there's plenty of room for someone
with a touchscreen to allow that to work,

7
00:00:26,400 --> 00:00:31,000
so I will start typing here.

8
00:00:32,030 --> 00:00:37,461
And I do have the name, so

9
00:00:37,461 --> 00:00:42,906
it's events and about.

10
00:00:45,936 --> 00:00:46,880
And vendors.

11
00:00:46,880 --> 00:00:51,490
Put about five spaces in
between each word for now.

12
00:00:51,490 --> 00:00:53,428
Just for it to be even.

13
00:00:53,428 --> 00:00:59,690
And I'm gonna keep with my trend
of using Lato as the font.

14
00:01:01,140 --> 00:01:06,010
And generally, you would probably
have a different font in your wire

15
00:01:06,010 --> 00:01:11,300
frame as you would in the finished
design that almost always would happen.

16
00:01:11,300 --> 00:01:15,692
But for me, I ended up really liking this
one font, so I happened to stick with it.

17
00:01:15,692 --> 00:01:16,694
I got lucky.

18
00:01:20,973 --> 00:01:28,010
I do want to center this up, so make sure
it's aligned to artboard, and great.

19
00:01:28,010 --> 00:01:30,100
Okay, there we go.

20
00:01:30,100 --> 00:01:31,460
It's nice and centered.

21
00:01:31,460 --> 00:01:36,460
I would like to change this color,

22
00:01:36,460 --> 00:01:40,810
so rather than it being black,
I think I would rather it be red.

23
00:01:42,840 --> 00:01:45,350
I'm going to come back to that.

24
00:01:45,350 --> 00:01:51,790
Let's go ahead and take this text, copy.

25
00:01:51,790 --> 00:01:55,516
And then we're gonna go to
the correct layer in our Layers bar,

26
00:01:55,516 --> 00:01:57,284
make sure that's selected.

27
00:01:57,284 --> 00:02:01,124
I will paste my links here.

28
00:02:01,124 --> 00:02:03,022
I want it to line up.

29
00:02:03,022 --> 00:02:07,865
This is our 50-pixel padding here,
so I want that to line up.

30
00:02:13,057 --> 00:02:16,730
Okay, I'll delete our reference.

31
00:02:19,160 --> 00:02:21,100
Okay, that's not centered.

32
00:02:21,100 --> 00:02:23,870
Think it'd be nice for it to sort
of be centered with this pencil.

33
00:02:23,870 --> 00:02:29,780
So, I'm gonna select eb in the header, and
the header one more time is my target.

34
00:02:31,600 --> 00:02:34,150
And do vertical distribute.

35
00:02:34,150 --> 00:02:35,654
Great.

36
00:02:35,654 --> 00:02:40,789
And this could also Grooves
this way a little bit more.

37
00:02:40,789 --> 00:02:42,944
Then I get the 12 more breathing room.

38
00:02:46,038 --> 00:02:47,724
Okay, much nicer.

39
00:02:50,374 --> 00:02:54,692
Illustrator allows us to save
character on paragraph attributes so

40
00:02:54,692 --> 00:02:57,140
we can quickly format text.

41
00:02:57,140 --> 00:03:01,700
This helps for making changes after you've
finished your design because you can

42
00:03:01,700 --> 00:03:07,220
update and change all instances of that
style within the document and make changes

43
00:03:07,220 --> 00:03:13,320
globally rather than having to click on
each individual text box and change it.

44
00:03:13,320 --> 00:03:17,150
It's gonna to change all of
them that have a designation.

45
00:03:17,150 --> 00:03:21,680
So let's go ahead and
go to Window > Type > Character Styles.

46
00:03:21,680 --> 00:03:26,307
And when you pull up this window
we'll have Character Styles and

47
00:03:26,307 --> 00:03:27,770
Paragraph Styles.

48
00:03:28,980 --> 00:03:31,210
I'm gonna drag it down like this.

49
00:03:32,570 --> 00:03:34,300
Tighter swatches for now.

50
00:03:36,270 --> 00:03:37,595
Make a little room.

51
00:03:37,595 --> 00:03:38,491
Okay.

52
00:03:40,390 --> 00:03:44,592
Looks like I was making this earlier,
so I'll delete that.

53
00:03:44,592 --> 00:03:46,085
Yes.

54
00:03:46,085 --> 00:03:49,063
If you just open this and
you haven't done anything,

55
00:03:49,063 --> 00:03:53,231
it should just say Normal Character Style
and Normal Paragraph Style, and

56
00:03:53,231 --> 00:03:55,176
that's preset in Illustrator.

57
00:03:55,176 --> 00:04:01,900
It's probably Myriad Pro, and you don't
wanna assign that to anything here.

58
00:04:01,900 --> 00:04:05,840
So, we're gonna start using
the character styles.

59
00:04:05,840 --> 00:04:11,910
And a character style is a collection of
character formatting attributes such as

60
00:04:11,910 --> 00:04:17,760
font, size, color, and it's going to
save all those different attributes,

61
00:04:17,760 --> 00:04:20,750
and we can change the options,
which I'll show you how to do.

62
00:04:20,750 --> 00:04:24,210
So, let's select our links.

63
00:04:25,420 --> 00:04:26,660
This is going to be.

64
00:04:26,660 --> 00:04:29,960
Well, we'll call it Links.

65
00:04:29,960 --> 00:04:35,108
And to create a new paragraph style,
oops we want a new character style,

66
00:04:45,300 --> 00:04:45,898
Okay.

67
00:04:45,898 --> 00:04:51,069
And to create a new character
style we can go right here and

68
00:04:51,069 --> 00:04:57,121
Create New Style, to change
the name we just double-click here.

69
00:04:57,121 --> 00:04:58,636
We'll call it Links.

70
00:05:01,940 --> 00:05:03,071
Click off.

71
00:05:03,071 --> 00:05:10,260
And then if I double-click on it,
it's going to give me the information.

72
00:05:10,260 --> 00:05:14,710
So the font type, Lato, Regular, the Size.

73
00:05:16,640 --> 00:05:21,740
It also has other attributes,
such as Character Color.

74
00:05:23,000 --> 00:05:23,818
I'll hit OK.

75
00:05:26,044 --> 00:05:29,564
And I want to assign this text here also,

76
00:05:29,564 --> 00:05:35,379
I wanna give it the same designation and
character style as Links.

77
00:05:37,910 --> 00:05:42,610
So what will happen now is when I change,

78
00:05:42,610 --> 00:05:46,880
so when I double click in here and
change these settings,

79
00:05:48,230 --> 00:05:52,690
it's going to change everything
with that designation of links.

80
00:05:52,690 --> 00:05:55,910
So as I was saying earlier,
I really wanted this to be red.

81
00:05:57,190 --> 00:06:00,360
And trying that out and
that looks great and

82
00:06:00,360 --> 00:06:03,540
I'm able to make that change
globally to both of them at once.

83
00:06:03,540 --> 00:06:05,920
I don't have to do it individually.

84
00:06:05,920 --> 00:06:08,245
So you can see what a huge
time saver this would be.

85
00:06:11,093 --> 00:06:14,928
In terms of size if I wanted to do sizing.

86
00:06:14,928 --> 00:06:17,930
Which I don't at this point,
so I'm gonna take it back.

87
00:06:17,930 --> 00:06:20,170
I think I'm gonna make it 24.

88
00:06:20,170 --> 00:06:21,172
Hit OK.

89
00:06:22,452 --> 00:06:27,487
Yeah, it's looking nice.

90
00:06:27,487 --> 00:06:28,800
Center this again.

91
00:06:33,040 --> 00:06:34,350
And put this over here.

92
00:06:36,450 --> 00:06:38,830
We can do the same thing for headings.

93
00:06:40,450 --> 00:06:43,770
So, just as an example,
I'm gonna select this.

94
00:06:44,870 --> 00:06:49,670
And a really great trick you can use is,
if you option+click

95
00:06:49,670 --> 00:06:54,470
when you click new style, it
automatically brings up this option box,

96
00:06:55,860 --> 00:06:59,379
and then you can say Heading 2.

97
00:07:01,200 --> 00:07:05,790
Or actually let's shorten it to H2.

98
00:07:05,790 --> 00:07:06,290
Hit OK.

99
00:07:08,580 --> 00:07:11,420
Let´s give the use the same designation.

100
00:07:11,420 --> 00:07:14,470
So I'll select them and hit this.

101
00:07:14,470 --> 00:07:17,390
And I wanna change all of
these right now to white, so

102
00:07:17,390 --> 00:07:20,590
I´m gonna double click Character Color.

103
00:07:20,590 --> 00:07:21,440
White.

104
00:07:21,440 --> 00:07:22,770
OK.

105
00:07:22,770 --> 00:07:27,018
It looks like for
some reason this one didn't carry over, so

106
00:07:27,018 --> 00:07:29,948
I'll select it, and I'll select this.

107
00:07:29,948 --> 00:07:34,290
And you'll see when that happens
a plus sign appears, and

108
00:07:34,290 --> 00:07:39,354
it's telling me that this setting
is different than the H2 style.

109
00:07:39,354 --> 00:07:42,610
And so it's asking me,
do you really wanna convert it over?

110
00:07:42,610 --> 00:07:43,860
And I do.

111
00:07:43,860 --> 00:07:48,170
And the way you do that
is you Shift+click on it.

112
00:07:48,170 --> 00:07:49,610
It makes this like the others.

113
00:07:51,330 --> 00:07:54,240
So you can see this is really cool,
really helpful.