0
1
00:00:00,900 --> 00:00:04,920
Now next we're going to talk about a particular pet peeve of mine.
1

2
00:00:04,950 --> 00:00:10,510
So this is something that I've seen done wrong a lot of times by user interface designers.
2

3
00:00:10,560 --> 00:00:15,710
And fundamentally it's actually a problem that you have to solve rather than a design issue.
3

4
00:00:15,960 --> 00:00:24,180
So this is when you have text showing up on images especially images that change. If that text does not
4

5
00:00:24,180 --> 00:00:30,840
have enough contrast with the background image such as over here with the 'us', you can't see it.
5

6
00:00:30,840 --> 00:00:35,760
And something that can't be seen no matter how beautiful it is nobody will be able to appreciate what
6

7
00:00:35,760 --> 00:00:40,340
you're writing, what you're saying, what you're trying to convey because they can't see it.
7

8
00:00:40,350 --> 00:00:44,040
So how do you make text visible on your images?
8

9
00:00:44,040 --> 00:00:51,330
Well the easiest option is obviously using a block background so using a high opacity background just
9

10
00:00:51,420 --> 00:00:52,710
for the text.
10

11
00:00:52,770 --> 00:00:59,970
So such as in black or in color or whatever it is, it makes the text stand out from the background image.
11

12
00:00:59,970 --> 00:01:02,500
Now some of you might think "It's kind of ugly.
12

13
00:01:02,510 --> 00:01:04,070
You know, what are the other ways?"
13

14
00:01:04,080 --> 00:01:06,120
Well there's actually quite a few clever ways.
14

15
00:01:06,150 --> 00:01:12,780
Now obviously the easiest way is that if you can control the background image i.e. if it's never going
15

16
00:01:12,780 --> 00:01:21,540
to change then you can adjust the color of the text as well as the color of the image background to
16

17
00:01:21,540 --> 00:01:22,890
make it stand out.
17

18
00:01:22,890 --> 00:01:27,100
I mean this is a single design case because your image is not changing.
18

19
00:01:27,270 --> 00:01:30,240
But what do you do if that image has to change?
19

20
00:01:30,300 --> 00:01:37,770
Well you can have a colored overlay to your image that sits between your text and your image.
20

21
00:01:37,770 --> 00:01:44,100
It's almost like putting a veil on that image to make it stand out a bit better from the text. And you
21

22
00:01:44,100 --> 00:01:50,610
can do that quite easily whether in Photoshop, Sketch or in code by simply applying a single blank overlay
22

23
00:01:50,880 --> 00:01:56,950
with say 20% opacity. Just enough for your text to stand out without obscuring the image behind.
23

24
00:01:57,000 --> 00:02:02,910
And Google does this in the Android apps by applying a colored overlay that just gives enough contrast
24

25
00:02:02,910 --> 00:02:05,250
to the text for it to stand up from the image.
25

26
00:02:05,250 --> 00:02:12,210
Now you can also go for a gaussian blur that provides contrast between the blurry image and the sharp
26

27
00:02:12,240 --> 00:02:15,590
text that can also make your text stand out.
27

28
00:02:15,630 --> 00:02:21,510
But a really clever way that I've seen designers do it is like this where you apply an overlay to the
28

29
00:02:21,510 --> 00:02:27,580
image that starts off with 0% opacity at the center midline.
29

30
00:02:28,200 --> 00:02:36,660
And then as you move downwards through the image there's a graded opacity so i.e. the overlay gets more
30

31
00:02:36,690 --> 00:02:37,820
and more opaque
31

32
00:02:37,830 --> 00:02:39,210
the further you go down.
32

33
00:02:39,360 --> 00:02:46,410
So this is especially useful if you know that your text is going to be placed in a fixed position relative
33

34
00:02:46,410 --> 00:02:47,400
to your image.
34

35
00:02:47,460 --> 00:02:53,520
So if it's always going to be at the bottom of your image, you can make the overlay super opaque at the
35

36
00:02:53,520 --> 00:03:00,210
bottom say 20% and then 0% opaque at the middle so that you don't obscure or change the
36

37
00:03:00,210 --> 00:03:05,790
image while making your text appear sharp. So those are some of the simple ways to do it.
37

38
00:03:05,820 --> 00:03:09,820
But the thing that's really important in this situation is testing testing testing.
38

39
00:03:09,840 --> 00:03:15,270
Make sure you try out many different images that could possibly pop up, you know, a really white image
39

40
00:03:15,270 --> 00:03:20,570
or a really black image and make sure that it looks good and it does the job each time.