Original subtitles

1 1

These days big and beautiful images 2

2

are everywhere in web design. 3

3

In fact, using large background images 4

4

can make your website look more attractive 5

5

and create more user engagement. 6

6

It has actually been found that 7

7

image heavy websites convert better. 8

8

So that's great news. 9

9

So you totally have to know how to work with images. 10

10

And with that, I mean that you should learn 11

11

how to effectively put text over images. 12

12

There are a few techniques for doing this, 13

13

and we are going to go through the most important 14

14

of them in this lecture. 15

15

First, the easiest way is to put text directly on an image. 16

16

The problem is that this only works if the image 17

17

is quite dark and your text is white. 18

18

Otherwise you will not have enough contrast 19

19

between your image and your text. 20

20

And that is exactly what happens in this website. 21

21

I mean I like the design, 22

22

but the white text in the headline 23

23

is quite difficult to read 24

24

because the image is also quite bright. 25

25

So I wouldn't encourage you to use this method 26

26

because it can make text very difficult to read 27

27

if you don't make it right. 28

28

The easiest solution to this problem we saw before 29

29

is to overlay the image with a color. 30

30

The most usual and over course simple to use color is black. 31

31

Which simply turns the image darker, 32

32

as in these two beautiful websites. 33

33

But we can also use other colors as well, 34

34

and create some beautiful effects with them. 35

35

And we can do even more. 36

36

We can use color gradients to achieve stunning effects, 37

37

like these websites do. 38

38

You can find a link to some beautiful color gradients 39

39

in the course e-book. 40

40

However it is important to keep in mind 41

41

what we've learned about colors. 42

42

Which means that you shouldn't just use some random colors. 43

43

But you already know this by now, right? 44

44

So please use image overlay with colors, 45

45

other than black or white very carefully. 46

46

Next, simply putting the text in a box 47

47

is another easy way to make your text stand out 48

48

and easy to read. 49

49

Like the designer of this website div. 50

50

The box should be opaque 51

51

so that you can still see the image beneath it. 52

52

In this case a white color with some transparency was used. 53

53

You can also make the box black 54

54

or go with some other color 55

55

that you selected for your design. 56

56

Just be creative and you will be fine. 57

57

Yet another solution to put text on an images is image blur. 58

58

And this is very powerful and 59

59

also very good looking in my opinion. 60

60

You can either blur the whole image 61

61

like these two websites do. 62

62

Or you can use an out-of-focus area of a photo as the blur, 63

63

like the first of these two websites do. 64

64

You see that? 65

65

Now in this case we need to make sure 66

66

that the text stays on the blurred image part 67

67

on all screen resolutions. 68

68

This is particularly important for responsive web design. 69

69

And now the last method I want to show you 70

70

is the so called floor fade. 71

71

The floor fade is a technique 72

72

where an image subtly fades towards black at the bottom. 73

73

With white text written over it. 74

74

This is the profile page of 500px.com 75

75

and this uses the floor fade extremely well. 76

76

So it is almost unnoticeable 77

77

but still improving readability, 78

78

which is exactly what we want. 79

79

And this would be the same website 80

80

but without the floor fade. 81

81

And in this case we have a hard time 82

82

reading some of the small white text down there. 83

83

So the floor fade increases the 84

84

text readability dramatically. 85

85

This means that in situations like this 86

86

where we want text at the bottom of an image, 87

87

this is the perfect solution to go for. 88

88

Now you may ask 89

89

where do I get amazing images 90

90

like the ones we saw in this lecture for my website? 91

91

Well you either already took some great photos 92

92

for some website you are planning 93

93

or you can get a lot of super cool free images 94

94

on the internet. 95

95

There are images for everything you can imagine. 96

96

As always I share the best resources with you 97

97

in the course e-book. 98

98

And this closes our lecture on working with images. 99

99

In this lecture you saw a lot of great websites. 100

100

And those can actually be a good inspiration 101

101

for you and your websites.