1
00:00:01,170 --> 00:00:01,890
Welcome back.

2
00:00:01,920 --> 00:00:08,940
So we learned how to make images much more dynamic, and sometimes they don't necessarily fit like that.

3
00:00:08,940 --> 00:00:14,490
And you may want to overlay text over imagery like we have over here, certain ways we can actually

4
00:00:14,490 --> 00:00:19,930
do that and provide better contrast and make this much more of a successful composition.

5
00:00:20,640 --> 00:00:25,320
So, like I said, run a scenario where we need to place text over imagery.

6
00:00:25,740 --> 00:00:31,670
A lot of times there's some issues with this particular scenario because of the lack of contrast.

7
00:00:31,980 --> 00:00:33,620
So let's zoom in here now.

8
00:00:33,630 --> 00:00:38,900
In this image, there's enough contrast here between the white text and the darker background.

9
00:00:39,270 --> 00:00:44,870
But if we look at this portrait over here of this man, there is just not enough contrast.

10
00:00:44,880 --> 00:00:51,390
And if we look and we zoom right in, we notice that we start losing things like the the edge of the

11
00:00:51,390 --> 00:00:52,790
D over here in the end.

12
00:00:53,370 --> 00:01:00,330
So there are ways we can kind of combat that and just make our composition much more better and much

13
00:01:00,330 --> 00:01:00,960
more legible.

14
00:01:01,980 --> 00:01:06,000
One of the ways we can actually do that is with gradients.

15
00:01:07,360 --> 00:01:09,910
So let's copy this composition.

16
00:01:12,510 --> 00:01:18,660
So just remember, you can use the file that we have for you and you can come along for this ride.

17
00:01:19,750 --> 00:01:23,140
So I'm going to select this image, this is a perfect example.

18
00:01:24,800 --> 00:01:30,800
And over here, like we did prior, I'm going to add an actual gradient to the image, you can do it

19
00:01:30,800 --> 00:01:31,670
other ways.

20
00:01:31,670 --> 00:01:36,770
You can actually add a rectangle with a gradient, but we can do this as well.

21
00:01:45,420 --> 00:01:48,900
So here we go, we're going to switch those around.

22
00:01:50,110 --> 00:01:52,690
And now for the greedy, we'll just use a a darker colour.

23
00:01:54,060 --> 00:02:02,310
Like all black and we'll transition to a black, but there will be a zero capacity, so we'll be able

24
00:02:02,310 --> 00:02:08,640
to actually see the net so we can do something like this, which is totally fine, and we can read the

25
00:02:08,640 --> 00:02:11,280
text properly, but we start to lose.

26
00:02:11,280 --> 00:02:13,980
What makes this image so good, like the contrast, the colors.

27
00:02:13,980 --> 00:02:16,650
We start to lose that with gradients so we can do.

28
00:02:16,680 --> 00:02:17,910
There's a couple of things we can do here.

29
00:02:18,300 --> 00:02:19,290
We can actually.

30
00:02:20,440 --> 00:02:23,590
Decrease the opacity because you don't necessarily need that much.

31
00:02:24,810 --> 00:02:31,080
So you can decrease it and that would be enough for you to actually read that we could do the same over

32
00:02:31,080 --> 00:02:31,410
here.

33
00:02:32,050 --> 00:02:35,280
Actually, this one has a little bit more happening around this image.

34
00:02:36,310 --> 00:02:37,650
You see a lot of the foliage.

35
00:02:37,830 --> 00:02:41,190
There's a lot more textures, which makes it a little bit more harder to read when there's much more

36
00:02:41,190 --> 00:02:41,820
activity.

37
00:02:42,300 --> 00:02:43,970
If you look at here, there's not much activity.

38
00:02:43,980 --> 00:02:46,770
There's a lot of darkness behind the text.

39
00:02:47,190 --> 00:02:48,060
Let's do that over here.

40
00:02:49,980 --> 00:02:52,440
So same concept this time.

41
00:02:52,440 --> 00:02:55,860
Instead of flipping it around, we're just going to.

42
00:03:00,440 --> 00:03:05,690
And perfect, so we can start doing this.

43
00:03:06,690 --> 00:03:12,230
So there's consistency, so we have the same color, we have the block that's going right through now,

44
00:03:12,240 --> 00:03:13,250
this is another issue.

45
00:03:13,260 --> 00:03:21,660
So like I said before, when you are applying like color or like a gradient on your photography in order

46
00:03:21,660 --> 00:03:28,920
to, like, allow for enough contrast between text, you run into the issue where sometimes you lose,

47
00:03:28,920 --> 00:03:34,380
like what makes that photograph or that image really great, the colors, details.

48
00:03:34,860 --> 00:03:38,540
So what we can do is we can remove this one or delete that.

49
00:03:38,580 --> 00:03:39,240
There we go.

50
00:03:39,390 --> 00:03:44,250
And we can bring this down and we can kind of like keep it just.

51
00:03:45,280 --> 00:03:52,540
To the bottom, so it's kind of cropped and we still get that gradual darkness to lightness and we can

52
00:03:52,540 --> 00:03:54,700
easily read this in comparison to what it was before.

53
00:03:54,730 --> 00:03:57,270
So let's take a look at what we had for over here.

54
00:03:57,280 --> 00:03:58,620
We can easily read that.

55
00:03:58,630 --> 00:03:59,680
Let's just remove that.

56
00:04:00,340 --> 00:04:02,620
And over here, it's a little bit harder.

57
00:04:03,070 --> 00:04:08,020
So gradients are one way that you can make text over imagery work.

58
00:04:08,710 --> 00:04:13,120
If there's a brand color you want to work with, you can display that as well within your gradient.

59
00:04:13,130 --> 00:04:16,270
So if it's something like a Navy or like a teal.

60
00:04:17,340 --> 00:04:21,720
Like, you can do something like that, so it isn't just like a pure black, there's a little bit more

61
00:04:21,720 --> 00:04:23,700
color, you still get great results.

62
00:04:24,480 --> 00:04:25,830
So it's something else you can do.

63
00:04:26,850 --> 00:04:33,090
Another thing you can do is let's just copy that and we're going to option shift and we're going to

64
00:04:33,090 --> 00:04:35,970
just drag that to the other side of our frame.

65
00:04:37,140 --> 00:04:42,490
Another thing you can do to create enough contrast in these situations is use a solid color.

66
00:04:43,830 --> 00:04:46,620
This can be done in a variety of ways.

67
00:04:47,370 --> 00:04:54,300
One way I like doing it is you can select the image like before add a fill on top.

68
00:04:55,140 --> 00:04:58,970
And instead of a linear gradient, we're just going to go with a solid fill.

69
00:04:59,670 --> 00:05:00,610
We're not going to do that.

70
00:05:01,110 --> 00:05:07,780
But like I said before, if we can just grab with a color like that, which is like a dark green foresty

71
00:05:07,800 --> 00:05:15,030
like color, maybe not suitable for that image, but if we grab some like that and then we start decreasing

72
00:05:15,030 --> 00:05:15,960
the opacity.

73
00:05:17,370 --> 00:05:23,280
You can do something like this and, you know, it may not suit the style or the tone of the brand,

74
00:05:23,280 --> 00:05:24,650
and that's totally fine.

75
00:05:25,020 --> 00:05:31,410
You got to find out what works for you, works for your client and apply that visual style so you could

76
00:05:31,410 --> 00:05:32,280
do something like this.

77
00:05:34,870 --> 00:05:42,400
Well, it can be a little darker and decrease the opacity and there you go, you get a little more visual

78
00:05:42,400 --> 00:05:43,540
contrast that way.

79
00:05:44,960 --> 00:05:51,150
Now, what I like to do, and this really depends on your imagery and how the composition works, so

80
00:05:51,170 --> 00:05:53,370
may not work on this one, but I'm going to show you what it looks like.

81
00:05:53,870 --> 00:05:59,840
So what I like to do is I like to grab a rectangle, so I'll select my rectangle with ah, grab it there.

82
00:06:00,650 --> 00:06:02,270
Just drag it across your image.

83
00:06:03,980 --> 00:06:04,760
Like that.

84
00:06:08,840 --> 00:06:16,550
And click the image shift, click the rectangle, hold, shift, click the image right, click and send

85
00:06:16,550 --> 00:06:17,250
it to the back.

86
00:06:18,020 --> 00:06:21,170
You can also shift command, open bracket.

87
00:06:22,590 --> 00:06:29,240
So now we have that now that doesn't look too good, but we can do something really subtle.

88
00:06:29,250 --> 00:06:37,590
So I like usually doing like a gray or dark black and then decreasing your capacity just a bit.

89
00:06:38,130 --> 00:06:40,810
So we're like 25 percent capacity.

90
00:06:41,850 --> 00:06:46,380
It's very interesting in terms of like the actual composition now, like it's a little more dynamic.

91
00:06:46,860 --> 00:06:48,660
It's much more readable, legible.

92
00:06:49,920 --> 00:06:54,930
And the only thing I would recommend is in this scenario to be consistent.

93
00:06:55,860 --> 00:06:57,900
So if you're going to apply this to one image.

94
00:06:58,990 --> 00:07:04,960
You should apply to every other image, so let me bring out the front shift, click with that background

95
00:07:04,960 --> 00:07:06,580
image and send that right to the back.

96
00:07:07,960 --> 00:07:12,150
The sizes could vary depending on the size of your typography that you have here.

97
00:07:13,210 --> 00:07:19,300
But this is another way to do it, so I'm going to shift quick, bring that over.

98
00:07:23,310 --> 00:07:24,870
And like I said before.

99
00:07:25,960 --> 00:07:31,960
You know, it may not work with an image like this where the focal point is right in the foreground,

100
00:07:31,960 --> 00:07:34,000
right in the middle, and it may cover that.

101
00:07:34,960 --> 00:07:36,010
And that's unfortunate.

102
00:07:37,480 --> 00:07:40,630
So, like I said before, figure out what works for you.

103
00:07:41,680 --> 00:07:49,750
There isn't like a right and wrong, but this doesn't necessarily look as good as having maybe like

104
00:07:49,750 --> 00:07:54,700
a gradient, a gradient, maybe like a better application for these for these images, because it's

105
00:07:54,700 --> 00:07:55,590
much more softer.

106
00:07:56,170 --> 00:07:57,310
You can apply some color there.

107
00:07:57,790 --> 00:08:01,390
And it's not a harsh line that's going right through like a person's face.

108
00:08:02,420 --> 00:08:08,330
But similarly to what we saw with the gradients, we can actually pick a color out a brand color and

109
00:08:08,330 --> 00:08:09,020
work with that.

110
00:08:11,630 --> 00:08:16,100
That just reinforces your brand identity, reinforces your color palette.

111
00:08:18,150 --> 00:08:22,070
We can do the same with this, so I'm just going to grab a color like that.

112
00:08:24,430 --> 00:08:29,140
And there you go, they look a little less static with the black black's kind of harsh, even grays

113
00:08:29,140 --> 00:08:29,710
are kind of harsh.

114
00:08:30,160 --> 00:08:35,380
So you can reinforce your your brand identity, your brand's tone just with adding some colors.

115
00:08:35,380 --> 00:08:42,490
And it's a really subtle way of actually making sure that your typography is legible while a person

116
00:08:42,490 --> 00:08:44,410
is reading it through these images.

117
00:08:45,580 --> 00:08:46,570
So that's it for this.

118
00:08:46,570 --> 00:08:48,820
And we're going to move on to illustrations next.