Voiceover: 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.