1
00:00:00.05 --> 00:00:02.06
- [Instructor] Now,
typically, as you dive into

2
00:00:02.06 --> 00:00:05.01
screen design or website design,

3
00:00:05.01 --> 00:00:07.04
you often find yourself
repeating multiple elements.

4
00:00:07.04 --> 00:00:09.02
And that's what I want to show you

5
00:00:09.02 --> 00:00:10.01
how to do very easily.

6
00:00:10.01 --> 00:00:11.05
So first off, I'm going to actually just

7
00:00:11.05 --> 00:00:14.04
close this side panel
here in my Assets panel

8
00:00:14.04 --> 00:00:16.03
so we have a little bit more room.

9
00:00:16.03 --> 00:00:18.06
So if that's open, feel
free to close that.

10
00:00:18.06 --> 00:00:21.04
Zooming in, and what I want
to do is I want to create

11
00:00:21.04 --> 00:00:25.00
my first peak, since
I'm on the Peaks page.

12
00:00:25.00 --> 00:00:28.05
Technically, there's somewhere
around 52 here in Colorado,

13
00:00:28.05 --> 00:00:31.01
but I'm going to click right
here, and the first one

14
00:00:31.01 --> 00:00:36.07
is going to be Mount Bierstadt, okay.

15
00:00:36.07 --> 00:00:40.08
So this is my first element,
and what I'm doing is

16
00:00:40.08 --> 00:00:42.08
I'm basically setting this up.

17
00:00:42.08 --> 00:00:44.03
It's actually using the properties

18
00:00:44.03 --> 00:00:46.05
from the last element that I worked with,

19
00:00:46.05 --> 00:00:49.00
and notice how the spacing
between the letters

20
00:00:49.00 --> 00:00:51.06
is pretty high, I'm going
to take that down to zero.

21
00:00:51.06 --> 00:00:54.03
And then from there I can
even grab this circle,

22
00:00:54.03 --> 00:00:56.06
that actually gives me
the ability to make this

23
00:00:56.06 --> 00:00:58.07
a little larger, something like that,

24
00:00:58.07 --> 00:01:01.08
and lastly, I'm going to
give it a shadow to make sure

25
00:01:01.08 --> 00:01:05.08
it sort of stands out
from the background, okay?

26
00:01:05.08 --> 00:01:08.09
So here's my shadow, I can
make it even more dark,

27
00:01:08.09 --> 00:01:11.07
something like that, and from there,

28
00:01:11.07 --> 00:01:14.07
I'm going to take this
image and shrink it up.

29
00:01:14.07 --> 00:01:18.09
So this is going to be my first peak.

30
00:01:18.09 --> 00:01:23.00
Okay, and I'm thinking
about one, maybe about 200.

31
00:01:23.00 --> 00:01:26.03
I can always select this element
and type in 200 right here.

32
00:01:26.03 --> 00:01:28.07
I can worry about that later,
I do want to kind of just

33
00:01:28.07 --> 00:01:30.02
make sure that's centered right in there,

34
00:01:30.02 --> 00:01:33.02
so I'm making sure those guides pop up.

35
00:01:33.02 --> 00:01:35.02
And lastly, I'm going to
select this background

36
00:01:35.02 --> 00:01:37.09
and I'm going to make it
a little more transparent.

37
00:01:37.09 --> 00:01:41.03
So I'm going to drop
down the transparency.

38
00:01:41.03 --> 00:01:44.04
I'm starting to notice this gray border,

39
00:01:44.04 --> 00:01:46.02
I'm going to turn that off as well.

40
00:01:46.02 --> 00:01:48.04
And this is the element that I want, okay?

41
00:01:48.04 --> 00:01:52.00
So this looks good, the picture
or image will stand out,

42
00:01:52.00 --> 00:01:53.05
and typically what you'll do is maybe

43
00:01:53.05 --> 00:01:56.02
you'll select both of these and, you know,

44
00:01:56.02 --> 00:01:58.06
duplicate it by holding down the shift key

45
00:01:58.06 --> 00:02:00.07
and alt key and dragging it down

46
00:02:00.07 --> 00:02:03.02
so that duplicates items, right?

47
00:02:03.02 --> 00:02:05.04
And you'll duplicate it
again, but what happens

48
00:02:05.04 --> 00:02:08.04
if you decide to move this
text over to the side?

49
00:02:08.04 --> 00:02:10.00
It's going to get really annoying,

50
00:02:10.00 --> 00:02:12.02
because you have to change
it everywhere, okay?

51
00:02:12.02 --> 00:02:13.05
So that's why I'm going to undo that

52
00:02:13.05 --> 00:02:15.02
and I'm going to delete these
two and introduce you to

53
00:02:15.02 --> 00:02:19.05
by selecting both of these
items, the repeat grid.

54
00:02:19.05 --> 00:02:23.02
Right over here, selecting
Repeat Grid will repeat

55
00:02:23.02 --> 00:02:25.00
whatever you have selected, okay?

56
00:02:25.00 --> 00:02:28.07
With that done, notice how
I have these control points

57
00:02:28.07 --> 00:02:31.01
right here, I can click
and drag that down,

58
00:02:31.01 --> 00:02:33.09
you can see that it
repeats for all of them.

59
00:02:33.09 --> 00:02:36.09
Not only that, look, I have
this nice little gap there.

60
00:02:36.09 --> 00:02:39.06
I can increase it or, in my case actually,

61
00:02:39.06 --> 00:02:41.04
I want to decrease it, and
I can watch the numbers

62
00:02:41.04 --> 00:02:43.09
off to the side, bring that down to

63
00:02:43.09 --> 00:02:47.09
sort of three two one zero, like that,

64
00:02:47.09 --> 00:02:51.04
and then extend this down
further, something like that.

65
00:02:51.04 --> 00:02:55.04
So now I can see one, two,
three, four, five elements,

66
00:02:55.04 --> 00:02:58.01
and I can always adjust this content.

67
00:02:58.01 --> 00:03:00.05
If I double click in the
side, notice how I can

68
00:03:00.05 --> 00:03:02.06
change this or I can change this text,

69
00:03:02.06 --> 00:03:05.09
maybe move it over here,
I have full control now.

70
00:03:05.09 --> 00:03:08.03
In this case I want to make
this maybe a little smaller,

71
00:03:08.03 --> 00:03:12.07
so take this down to maybe 150.

72
00:03:12.07 --> 00:03:16.01
Type in 150 right over
here, because ultimately,

73
00:03:16.01 --> 00:03:19.08
I want to fit more on the
screen, shrinking that like so.

74
00:03:19.08 --> 00:03:24.07
And remember, if I click
back on the repeat grid,

75
00:03:24.07 --> 00:03:26.04
I get this green line, okay?

76
00:03:26.04 --> 00:03:29.01
So you might have to click
off and then click back on

77
00:03:29.01 --> 00:03:33.09
to be able to adjust the
spacing in between each element.

78
00:03:33.09 --> 00:03:36.08
There we go, taking this
down, and you can see

79
00:03:36.08 --> 00:03:38.01
I have many more elements.

80
00:03:38.01 --> 00:03:41.03
I have one, two, three, five, six, seven,

81
00:03:41.03 --> 00:03:43.06
seven elements, that
works out pretty well.

82
00:03:43.06 --> 00:03:45.02
What do I do for imagery?

83
00:03:45.02 --> 00:03:47.02
Well, I need to change the imagery,

84
00:03:47.02 --> 00:03:49.06
and I need to change the
text, 'cause right in here,

85
00:03:49.06 --> 00:03:51.01
check this out.

86
00:03:51.01 --> 00:03:53.07
I can change this to
Pikes Peak, for instance.

87
00:03:53.07 --> 00:03:55.02
This is great.

88
00:03:55.02 --> 00:03:58.00
So the content is going to
be different than the style.

89
00:03:58.00 --> 00:04:00.06
The style's controlled globally,

90
00:04:00.06 --> 00:04:04.01
but the content is going to be different,

91
00:04:04.01 --> 00:04:05.07
which is fantastic.

92
00:04:05.07 --> 00:04:07.07
But I'm going to go beyond
this, 'cause check this out.

93
00:04:07.07 --> 00:04:09.00
I'm going to go out to my desktop.

94
00:04:09.00 --> 00:04:13.02
Inside of my Assets folder,

95
00:04:13.02 --> 00:04:15.01
if I take a look right down here,

96
00:04:15.01 --> 00:04:17.02
here's the Bierstadt image, right?

97
00:04:17.02 --> 00:04:19.07
So what I can do is I can
drop that on right there.

98
00:04:19.07 --> 00:04:22.05
So I've changed it, I
changed it for all of them.

99
00:04:22.05 --> 00:04:24.09
But what happens if I select all of these?

100
00:04:24.09 --> 00:04:27.06
So I've held down the Shift key,

101
00:04:27.06 --> 00:04:30.00
I've selected all these peak photos.

102
00:04:30.00 --> 00:04:31.07
If you have access to them
in your Assets folder,

103
00:04:31.07 --> 00:04:34.03
and I'll just drag and drop,

104
00:04:34.03 --> 00:04:37.01
and it changes it for all of them.

105
00:04:37.01 --> 00:04:41.07
This is fantastic, except all
the names are different now.

106
00:04:41.07 --> 00:04:43.03
At least they need to be,

107
00:04:43.03 --> 00:04:45.00
so that's what I want to change next.

108
00:04:45.00 --> 00:04:48.05
I can type those in, or
I can use a TXT file,

109
00:04:48.05 --> 00:04:50.09
a text file that has them all laid out.

110
00:04:50.09 --> 00:04:53.02
So I can just drag that right here.

111
00:04:53.02 --> 00:04:54.09
Notice how it highlights that text field,

112
00:04:54.09 --> 00:04:58.02
and now we're good to go there.

113
00:04:58.02 --> 00:04:59.06
So pretty fantastic.

114
00:04:59.06 --> 00:05:02.07
Notice how I can still
adjust this content,

115
00:05:02.07 --> 00:05:05.00
decide to move it any way I want,

116
00:05:05.00 --> 00:05:07.05
or maybe even adjust the transparency

117
00:05:07.05 --> 00:05:10.04
if I feel like the images
are sort of too bright

118
00:05:10.04 --> 00:05:11.08
or whatever the case may be.

119
00:05:11.08 --> 00:05:14.05
But I think about 60 is
pretty good, around there.

120
00:05:14.05 --> 00:05:16.04
Okay, but really awesome what you can do

121
00:05:16.04 --> 00:05:19.02
with the repeat grid right up here,

122
00:05:19.02 --> 00:05:22.07
and you can use it for really any element.

123
00:05:22.07 --> 00:05:26.00
If you can select it, you can
turn it into a repeat grid.