Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,580 --> 00:00:04,041
These days big and beautiful images
2
2
00:00:04,041 --> 00:00:06,781
are everywhere in web design.
3
3
00:00:06,781 --> 00:00:09,266
In fact, using large background images
4
4
00:00:09,266 --> 00:00:12,308
can make your website look more attractive
5
5
00:00:12,308 --> 00:00:15,141
and create more user engagement.
6
6
00:00:15,141 --> 00:00:16,952
It has actually been found that
7
7
00:00:16,952 --> 00:00:19,576
image heavy websites convert better.
8
8
00:00:19,576 --> 00:00:21,921
So that's great news.
9
9
00:00:21,921 --> 00:00:25,265
So you totally have to know how to work with images.
10
10
00:00:25,265 --> 00:00:27,842
And with that, I mean that you should learn
11
11
00:00:27,842 --> 00:00:31,093
how to effectively put text over images.
12
12
00:00:31,093 --> 00:00:33,775
There are a few techniques for doing this,
13
13
00:00:33,775 --> 00:00:36,248
and we are going to go through the most important
14
14
00:00:36,248 --> 00:00:38,248
of them in this lecture.
15
15
00:00:39,313 --> 00:00:44,003
First, the easiest way is to put text directly on an image.
16
16
00:00:44,003 --> 00:00:47,138
The problem is that this only works if the image
17
17
00:00:47,138 --> 00:00:50,342
is quite dark and your text is white.
18
18
00:00:50,342 --> 00:00:52,850
Otherwise you will not have enough contrast
19
19
00:00:52,850 --> 00:00:56,170
between your image and your text.
20
20
00:00:56,170 --> 00:00:58,771
And that is exactly what happens in this website.
21
21
00:00:58,771 --> 00:01:01,046
I mean I like the design,
22
22
00:01:01,046 --> 00:01:02,184
but the white text in the headline
23
23
00:01:02,184 --> 00:01:03,926
is quite difficult to read
24
24
00:01:03,926 --> 00:01:07,293
because the image is also quite bright.
25
25
00:01:07,293 --> 00:01:09,963
So I wouldn't encourage you to use this method
26
26
00:01:09,963 --> 00:01:12,633
because it can make text very difficult to read
27
27
00:01:12,633 --> 00:01:15,396
if you don't make it right.
28
28
00:01:15,396 --> 00:01:18,787
The easiest solution to this problem we saw before
29
29
00:01:18,787 --> 00:01:21,550
is to overlay the image with a color.
30
30
00:01:21,550 --> 00:01:25,729
The most usual and over course simple to use color is black.
31
31
00:01:25,729 --> 00:01:27,494
Which simply turns the image darker,
32
32
00:01:27,494 --> 00:01:31,093
as in these two beautiful websites.
33
33
00:01:31,093 --> 00:01:33,972
But we can also use other colors as well,
34
34
00:01:33,972 --> 00:01:36,968
and create some beautiful effects with them.
35
35
00:01:36,968 --> 00:01:39,011
And we can do even more.
36
36
00:01:39,011 --> 00:01:42,401
We can use color gradients to achieve stunning effects,
37
37
00:01:42,401 --> 00:01:45,002
like these websites do.
38
38
00:01:45,002 --> 00:01:48,160
You can find a link to some beautiful color gradients
39
39
00:01:48,160 --> 00:01:50,459
in the course e-book.
40
40
00:01:50,459 --> 00:01:53,013
However it is important to keep in mind
41
41
00:01:53,013 --> 00:01:55,358
what we've learned about colors.
42
42
00:01:55,358 --> 00:01:59,514
Which means that you shouldn't just use some random colors.
43
43
00:01:59,514 --> 00:02:02,556
But you already know this by now, right?
44
44
00:02:02,556 --> 00:02:05,598
So please use image overlay with colors,
45
45
00:02:05,598 --> 00:02:09,615
other than black or white very carefully.
46
46
00:02:09,615 --> 00:02:12,332
Next, simply putting the text in a box
47
47
00:02:12,332 --> 00:02:15,095
is another easy way to make your text stand out
48
48
00:02:15,095 --> 00:02:16,697
and easy to read.
49
49
00:02:16,697 --> 00:02:19,716
Like the designer of this website div.
50
50
00:02:19,716 --> 00:02:21,922
The box should be opaque
51
51
00:02:21,922 --> 00:02:25,219
so that you can still see the image beneath it.
52
52
00:02:25,219 --> 00:02:29,386
In this case a white color with some transparency was used.
53
53
00:02:31,001 --> 00:02:33,044
You can also make the box black
54
54
00:02:33,044 --> 00:02:34,832
or go with some other color
55
55
00:02:34,832 --> 00:02:37,084
that you selected for your design.
56
56
00:02:37,084 --> 00:02:40,251
Just be creative and you will be fine.
57
57
00:02:42,310 --> 00:02:46,976
Yet another solution to put text on an images is image blur.
58
58
00:02:46,976 --> 00:02:48,950
And this is very powerful and
59
59
00:02:48,950 --> 00:02:51,643
also very good looking in my opinion.
60
60
00:02:51,643 --> 00:02:54,569
You can either blur the whole image
61
61
00:02:54,569 --> 00:02:56,032
like these two websites do.
62
62
00:02:56,032 --> 00:03:00,304
Or you can use an out-of-focus area of a photo as the blur,
63
63
00:03:00,304 --> 00:03:02,998
like the first of these two websites do.
64
64
00:03:02,998 --> 00:03:04,135
You see that?
65
65
00:03:04,135 --> 00:03:06,156
Now in this case we need to make sure
66
66
00:03:06,156 --> 00:03:08,594
that the text stays on the blurred image part
67
67
00:03:08,594 --> 00:03:11,403
on all screen resolutions.
68
68
00:03:11,403 --> 00:03:16,024
This is particularly important for responsive web design.
69
69
00:03:16,024 --> 00:03:18,369
And now the last method I want to show you
70
70
00:03:18,369 --> 00:03:20,807
is the so called floor fade.
71
71
00:03:20,807 --> 00:03:22,967
The floor fade is a technique
72
72
00:03:22,967 --> 00:03:26,914
where an image subtly fades towards black at the bottom.
73
73
00:03:26,914 --> 00:03:30,002
With white text written over it.
74
74
00:03:30,002 --> 00:03:33,602
This is the profile page of 500px.com
75
75
00:03:33,602 --> 00:03:37,085
and this uses the floor fade extremely well.
76
76
00:03:37,085 --> 00:03:39,151
So it is almost unnoticeable
77
77
00:03:39,151 --> 00:03:41,589
but still improving readability,
78
78
00:03:41,589 --> 00:03:44,469
which is exactly what we want.
79
79
00:03:44,469 --> 00:03:46,280
And this would be the same website
80
80
00:03:46,280 --> 00:03:48,578
but without the floor fade.
81
81
00:03:48,578 --> 00:03:51,272
And in this case we have a hard time
82
82
00:03:51,272 --> 00:03:54,848
reading some of the small white text down there.
83
83
00:03:54,848 --> 00:03:56,589
So the floor fade increases the
84
84
00:03:56,589 --> 00:03:59,840
text readability dramatically.
85
85
00:03:59,840 --> 00:04:02,255
This means that in situations like this
86
86
00:04:02,255 --> 00:04:05,970
where we want text at the bottom of an image,
87
87
00:04:05,970 --> 00:04:09,220
this is the perfect solution to go for.
88
88
00:04:10,103 --> 00:04:12,007
Now you may ask
89
89
00:04:12,007 --> 00:04:13,633
where do I get amazing images
90
90
00:04:13,633 --> 00:04:17,464
like the ones we saw in this lecture for my website?
91
91
00:04:17,464 --> 00:04:20,274
Well you either already took some great photos
92
92
00:04:20,274 --> 00:04:22,363
for some website you are planning
93
93
00:04:22,363 --> 00:04:25,521
or you can get a lot of super cool free images
94
94
00:04:25,521 --> 00:04:26,854
on the internet.
95
95
00:04:27,704 --> 00:04:31,212
There are images for everything you can imagine.
96
96
00:04:31,212 --> 00:04:34,230
As always I share the best resources with you
97
97
00:04:34,230 --> 00:04:35,980
in the course e-book.
98
98
00:04:36,877 --> 00:04:39,896
And this closes our lecture on working with images.
99
99
00:04:39,896 --> 00:04:43,518
In this lecture you saw a lot of great websites.
100
100
00:04:43,518 --> 00:04:46,003
And those can actually be a good inspiration
101
101
00:04:46,003 --> 00:04:48,253
for you and your websites.
8577
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.