1
00:00:00.05 --> 00:00:02.05
- [Instructor] You can
also use the repeat grid

2
00:00:02.05 --> 00:00:04.09
to repeat horizontally and vertically,

3
00:00:04.09 --> 00:00:06.02
making rows and columns.

4
00:00:06.02 --> 00:00:07.04
And that's what I want to do now.

5
00:00:07.04 --> 00:00:09.05
So this is kind of leave the peaks page.

6
00:00:09.05 --> 00:00:11.02
So I'm going to change this from content

7
00:00:11.02 --> 00:00:13.07
to peaks just by double clicking on it.

8
00:00:13.07 --> 00:00:14.05
And I'm going to do this

9
00:00:14.05 --> 00:00:15.09
for the hikers page.

10
00:00:15.09 --> 00:00:18.01
So there's going to be many hikers.

11
00:00:18.01 --> 00:00:19.06
The photos are going to be square

12
00:00:19.06 --> 00:00:21.06
so I need to adjust that
content accordingly.

13
00:00:21.06 --> 00:00:24.04
So selecting the peaks title right here,

14
00:00:24.04 --> 00:00:26.07
Command + D will duplicate it.

15
00:00:26.07 --> 00:00:28.04
Now instead of it being called peaks one,

16
00:00:28.04 --> 00:00:31.06
I can call it hikers,

17
00:00:31.06 --> 00:00:33.09
like that changing the title on the side

18
00:00:33.09 --> 00:00:37.08
to hikers, like that.

19
00:00:37.08 --> 00:00:39.07
And then I'm going to
delete this repeat grid

20
00:00:39.07 --> 00:00:41.06
'cause I'm going to
make some new elements.

21
00:00:41.06 --> 00:00:43.08
So using the rectangle tool,

22
00:00:43.08 --> 00:00:46.00
I'm just going to draw out a rectangle.

23
00:00:46.00 --> 00:00:47.04
I'm going to hold down the shift key

24
00:00:47.04 --> 00:00:50.07
'cause I know all of the
photos are going to be square

25
00:00:50.07 --> 00:00:55.01
just like pretty much any
social media icon these days.

26
00:00:55.01 --> 00:00:59.05
In fact, I want to make
it specifically 450

27
00:00:59.05 --> 00:01:01.09
by 450.

28
00:01:01.09 --> 00:01:06.00
And I'm going to just drop
the opacity down as well.

29
00:01:06.00 --> 00:01:07.07
And I'm going to turn off the border.

30
00:01:07.07 --> 00:01:10.02
So this is really where
my image is going to go.

31
00:01:10.02 --> 00:01:12.05
On top of that, I want to
have the person's name,

32
00:01:12.05 --> 00:01:17.03
both their first name
and last name, like that.

33
00:01:17.03 --> 00:01:21.03
And it's also going to
have the number of peaks

34
00:01:21.03 --> 00:01:22.02
that they've hiked.

35
00:01:22.02 --> 00:01:23.05
So these are all the hikers,

36
00:01:23.05 --> 00:01:25.02
and the number of hikes they've done.

37
00:01:25.02 --> 00:01:28.04
It's set to about 26, I can
make that smaller or larger.

38
00:01:28.04 --> 00:01:32.00
Ultimately the number of
peaks will be like, 52 peaks,

39
00:01:32.00 --> 00:01:33.02
or something like that.

40
00:01:33.02 --> 00:01:35.01
So that's what it's going to look like.

41
00:01:35.01 --> 00:01:38.07
I would say, let me just
drop this down a little bit,

42
00:01:38.07 --> 00:01:40.05
about 22 is pretty good.

43
00:01:40.05 --> 00:01:44.04
And I want to make sure
it's going to be flush left.

44
00:01:44.04 --> 00:01:45.02
So that's what I'm doing.

45
00:01:45.02 --> 00:01:46.09
I'm just setting up this element.

46
00:01:46.09 --> 00:01:48.05
But let's get a real image in here

47
00:01:48.05 --> 00:01:50.01
'cause I want to see what
this really looks like

48
00:01:50.01 --> 00:01:51.04
for an image.

49
00:01:51.04 --> 00:01:55.01
Going out into my assets folder,

50
00:01:55.01 --> 00:01:58.04
I will select profile1.jpg.

51
00:01:58.04 --> 00:02:00.00
Use any image you want.

52
00:02:00.00 --> 00:02:01.07
Dropping that in, you
can see how that looks.

53
00:02:01.07 --> 00:02:04.05
It takes on the transparency

54
00:02:04.05 --> 00:02:06.07
and all of those appearance properties.

55
00:02:06.07 --> 00:02:08.02
Now let's go ahead and duplicate this

56
00:02:08.02 --> 00:02:09.01
and see what we get.

57
00:02:09.01 --> 00:02:11.07
With those two selected,

58
00:02:11.07 --> 00:02:13.04
selecting repeat grid,

59
00:02:13.04 --> 00:02:16.04
it's going to expand down a number of rows

60
00:02:16.04 --> 00:02:20.02
and then a number of columns as well.

61
00:02:20.02 --> 00:02:22.07
So looks pretty good so far.

62
00:02:22.07 --> 00:02:26.08
Let's just decrease the
spacing down to zero,

63
00:02:26.08 --> 00:02:29.01
just like our other page,

64
00:02:29.01 --> 00:02:30.01
our peaks page.

65
00:02:30.01 --> 00:02:34.04
And then decrease the padding
in between each column

66
00:02:34.04 --> 00:02:36.06
down to zero as well.

67
00:02:36.06 --> 00:02:40.02
So that's what I have, I
can expand this out further,

68
00:02:40.02 --> 00:02:41.02
something like that.

69
00:02:41.02 --> 00:02:45.05
In fact, I want to make this
exactly 1800, like that.

70
00:02:45.05 --> 00:02:48.02
And then I'll just move this over.

71
00:02:48.02 --> 00:02:50.09
Going to expand this down
just a touch, like that.

72
00:02:50.09 --> 00:02:52.07
Because I want to give an indication

73
00:02:52.07 --> 00:02:55.03
that there are more hikers on this page.

74
00:02:55.03 --> 00:02:57.00
But I don't want to show the same hiker.

75
00:02:57.00 --> 00:02:59.04
In fact, I want to fill in that content

76
00:02:59.04 --> 00:03:00.09
with more realistic content

77
00:03:00.09 --> 00:03:03.03
by grabbing a number of photos.

78
00:03:03.03 --> 00:03:06.07
So right over here,
selecting one through nine

79
00:03:06.07 --> 00:03:08.05
by holding down the shift key.

80
00:03:08.05 --> 00:03:11.03
And you can actually drop
them anywhere you want.

81
00:03:11.03 --> 00:03:12.03
So I'll drop 'em right here.

82
00:03:12.03 --> 00:03:13.05
It really doesn't matter.

83
00:03:13.05 --> 00:03:16.08
It fills them all in.

84
00:03:16.08 --> 00:03:18.00
So far so good.

85
00:03:18.00 --> 00:03:19.09
Since this is a repeat grid, I can come

86
00:03:19.09 --> 00:03:21.05
to any one of these images,

87
00:03:21.05 --> 00:03:23.01
just by, say, double clicking,

88
00:03:23.01 --> 00:03:25.04
selecting this image right here,

89
00:03:25.04 --> 00:03:29.02
and adjusting the transparency

90
00:03:29.02 --> 00:03:31.08
'cause I really want to show these images.

91
00:03:31.08 --> 00:03:32.09
It's really almost too dark.

92
00:03:32.09 --> 00:03:34.05
But I also don't want to lose the names.

93
00:03:34.05 --> 00:03:35.05
So as I select the name,

94
00:03:35.05 --> 00:03:38.01
we can add a shadow right down here.

95
00:03:38.01 --> 00:03:41.05
Just make sure the alpha is set to 100,

96
00:03:41.05 --> 00:03:43.01
so making it opaque

97
00:03:43.01 --> 00:03:46.02
and just making sure that gets
set off a little bit more.

98
00:03:46.02 --> 00:03:48.03
And now, what about the names

99
00:03:48.03 --> 00:03:49.05
and the number of peaks?

100
00:03:49.05 --> 00:03:51.01
Well, I can change that as well,

101
00:03:51.01 --> 00:03:54.01
by using a text file.

102
00:03:54.01 --> 00:03:56.08
You could see it right here.

103
00:03:56.08 --> 00:03:58.03
Just taking that text field,

104
00:03:58.03 --> 00:04:00.05
dropping it on any one of those

105
00:04:00.05 --> 00:04:02.05
and you can see how it lays it out.

106
00:04:02.05 --> 00:04:06.00
And I'd say that looks pretty good

107
00:04:06.00 --> 00:04:08.07
for the hikers page.

108
00:04:08.07 --> 00:04:09.05
Just keep in mind,

109
00:04:09.05 --> 00:04:11.02
you could do this for a
number a number of elements.

110
00:04:11.02 --> 00:04:12.00
It doesn't really matter.

111
00:04:12.00 --> 00:04:14.05
If I wanted to have four
or five star ratings,

112
00:04:14.05 --> 00:04:16.02
I could do that using the repeat grid.

113
00:04:16.02 --> 00:04:17.01
But I'm just showing you

114
00:04:17.01 --> 00:04:19.06
how you can not only expand things down

115
00:04:19.06 --> 00:04:22.05
but also horizontally and vertically

116
00:04:22.05 --> 00:04:24.05
to really make any page you want

117
00:04:24.05 --> 00:04:26.06
for any content that you want.