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