0
1
00:00:00,160 --> 00:00:04,380
Another type of cropping is called a Soft Crop. Soft Crop doesn't have a hard edge.
1

2
00:00:04,380 --> 00:00:06,780
The image gradually fades away.
2

3
00:00:06,780 --> 00:00:10,820
This is usually done by adding a fading overlay on top of the image.
3

4
00:00:10,840 --> 00:00:16,560
When it's the same color as the canvas, especially white, it looks like the image is just fading away.
4

5
00:00:16,560 --> 00:00:17,580
It feels natural.
5

6
00:00:17,610 --> 00:00:21,290
Now we have an excellent space on the left, where we can add our content.
6

7
00:00:21,300 --> 00:00:22,850
The result looks fantastic.
7

8
00:00:22,860 --> 00:00:26,130
The content is laid out on the white part of the composition.
8

9
00:00:26,130 --> 00:00:29,650
This gives it a healthy amount of breathing space.
9

10
00:00:29,700 --> 00:00:31,560
The content is airy and free.
10

11
00:00:31,560 --> 00:00:37,220
It's naturally merging with a background image, without blocking it and creating extra noise.
11

12
00:00:37,230 --> 00:00:39,750
Are we using the design concepts that we've learned so far?
12

13
00:00:39,870 --> 00:00:41,020
You bet we are.
13

14
00:00:41,040 --> 00:00:45,420
There is a clear focal point, which is the mountain peak emerging from the clouds.
14

15
00:00:45,420 --> 00:00:50,970
The rest of the content is arranged with a proper visual hierarchy. Starting with a large and bold headline
15

16
00:00:51,120 --> 00:00:53,280
and there is a clear grid and alignment.
16

17
00:00:53,280 --> 00:00:55,970
This is a very simple yet super powerful trick.
17

18
00:00:56,040 --> 00:01:00,750
It's one of my favorite go to techniques when I'm working with images. Desktop and laptop screens are
18

19
00:01:00,750 --> 00:01:01,650
quite wide.
19

20
00:01:01,650 --> 00:01:06,420
Yet sometimes you find the perfect image, but it's vertical. Not a good solution to use it as a background
20

21
00:01:06,420 --> 00:01:08,540
for a wide screen section like this.
21

22
00:01:08,550 --> 00:01:14,520
Most of the image is oddly cropped and loses its meaning. It's too confusing and busy to look at. And there
22

23
00:01:14,520 --> 00:01:17,450
is practically no space to layout our content.
23

24
00:01:17,490 --> 00:01:24,570
Nearly never ever you want to place a vertical image as a background for a full-width section. With a
24

25
00:01:24,570 --> 00:01:25,230
soft crop,
25

26
00:01:25,230 --> 00:01:27,000
we have a totally different result.
26

27
00:01:27,030 --> 00:01:32,400
The photo maintains all its important aspects. And we have a perfect space to place the content on.
27

28
00:01:32,610 --> 00:01:39,210
This layout has a clear focal point, which is the guy obviously. And the content has great readability,
28

29
00:01:39,240 --> 00:01:40,950
because it's on a white background.
29

30
00:01:40,950 --> 00:01:46,090
If I use a vertical image as a full-width background, I'd get a very chaotic result.
30

31
00:01:46,200 --> 00:01:49,140
The content is merging with a focal point of the image,
31

32
00:01:49,140 --> 00:01:54,450
there is not enough visibility for the text, it's hard to read and the whole thing is just very noisy.
32

33
00:01:54,570 --> 00:01:56,940
With a soft crop on the other hand, we give
33

34
00:01:57,030 --> 00:02:03,300
each piece of this composition, its own space. Giving us a nice clean look, with high readability. Photos
34

35
00:02:03,300 --> 00:02:08,700
that I have a uniform black background, is even easier to work with. Just sample the color from the very
35

36
00:02:08,700 --> 00:02:14,010
very last pixel on the edge of the image. Fill the space with that color. Arrange the image in
36

37
00:02:14,010 --> 00:02:19,260
the position that is the most suitable. And you get easy layout, with a lot of space to place your content
37

38
00:02:19,290 --> 00:02:24,790
beautifully. Extending the edge of this image like this, can work on other colors besides black, but it
38

39
00:02:24,820 --> 00:02:28,700
needs an extra fix. On an image like this. If we fill the space,
39

40
00:02:28,710 --> 00:02:31,710
using this method, we'll get a result like this.
40

41
00:02:31,710 --> 00:02:38,160
There is a strict separation between the image and the background. Which is an evident flaw. And we never
41

42
00:02:38,160 --> 00:02:41,720
want to have a design with evident flaws like this.
42

43
00:02:41,730 --> 00:02:47,040
Hopefully, you can see that hard edge between the sand and the background color. Maybe on your computer,
43

44
00:02:47,070 --> 00:02:51,400
because of the video compression, it might be blurring out that hard edge. But it's there.
44

45
00:02:51,420 --> 00:02:56,430
This happens because real life objects are never a single color. Not even uniform objects like sand.
45

46
00:02:56,430 --> 00:03:01,520
So when we sample a single color from the object, it's only that, one single color.
46

47
00:03:01,550 --> 00:03:04,800
One way to fix this is by applying that same gradient fade.
47

48
00:03:04,830 --> 00:03:09,230
And in this case instead of using white, we will sample this exact color from that image.
48

49
00:03:09,270 --> 00:03:09,900
And done.
49

50
00:03:09,900 --> 00:03:14,790
Now the sand is smoothly and naturaly merging with the background color. On the green side,
50

51
00:03:14,820 --> 00:03:19,160
though, there is a lot of texture and more color mix, so the result doesn't look as natural.
51

52
00:03:19,170 --> 00:03:20,130
It's not bad at all.
52

53
00:03:20,130 --> 00:03:26,190
It can be used just fine. Although unlike other 3 examples, here the green appears as a gradient overlay
53

54
00:03:26,190 --> 00:03:27,480
over the image.
54

55
00:03:27,540 --> 00:03:33,150
It's more like a fading curtain on top of the image. Which is perfectly fine thing to do and you can
55

56
00:03:33,150 --> 00:03:33,960
definitely use it.
56

57
00:03:34,080 --> 00:03:38,400
However, there is one trick that I use in such cases, which gives us more pleasing look.
57

58
00:03:38,550 --> 00:03:43,860
Let me show you. If our image isn't wide enough to fill in the entire frame, we can take the part of the
58

59
00:03:43,860 --> 00:03:50,120
image that is simple, without any complicated shapes and stretch it to fill the remaining space.
59

60
00:03:50,130 --> 00:03:55,130
It's important to stretch only the part of the image instead of stretching the whole thing. A part
60

61
00:03:55,140 --> 00:03:59,430
that is simple, doesn't have a lot of details, and isn't in focus. This way
61

62
00:03:59,430 --> 00:04:03,480
the important and part of the image is crisp, with its original proportions.
62

63
00:04:03,480 --> 00:04:09,180
You can't do this with all photos. Only if the photo has already blurry background, that can afford extra
63

64
00:04:09,180 --> 00:04:15,540
stretch. Add the copy. And we have a very good looking section, that feels natural and the content is easy
64

65
00:04:15,540 --> 00:04:18,390
to read and the whole section is really well balanced.
65

66
00:04:18,390 --> 00:04:23,770
This is how simple and fun design can be, small tricks that give you great results.
66

67
00:04:23,790 --> 00:04:27,550
The knowledge of these tricks is what designers get paid good money for.
67

68
00:04:27,600 --> 00:04:32,150
My clients usually refer to this as "magic". And they will tell me,
68

69
00:04:32,190 --> 00:04:34,860
"Oh, Vako, we need a new design for this page,
69

70
00:04:34,860 --> 00:04:35,910
can you do your magic?"
70

71
00:04:36,150 --> 00:04:37,800
But it's not magic, it's science!