Another type of cropping is called a Soft Crop. Soft Crop doesn't have a hard edge. 1
The image gradually fades away. 2
This is usually done by adding a fading overlay on top of the image. 3
When it's the same color as the canvas, especially white, it looks like the image is just fading away. 4
It feels natural. 5
Now we have an excellent space on the left, where we can add our content. 6
The result looks fantastic. 7
The content is laid out on the white part of the composition. 8
This gives it a healthy amount of breathing space. 9
The content is airy and free. 10
It's naturally merging with a background image, without blocking it and creating extra noise. 11
Are we using the design concepts that we've learned so far? 12
You bet we are. 13
There is a clear focal point, which is the mountain peak emerging from the clouds. 14
The rest of the content is arranged with a proper visual hierarchy. Starting with a large and bold headline 15
and there is a clear grid and alignment. 16
This is a very simple yet super powerful trick. 17
It's one of my favorite go to techniques when I'm working with images. Desktop and laptop screens are 18
quite wide. 19
Yet sometimes you find the perfect image, but it's vertical. Not a good solution to use it as a background 20
for a wide screen section like this. 21
Most of the image is oddly cropped and loses its meaning. It's too confusing and busy to look at. And there 22
is practically no space to layout our content. 23
Nearly never ever you want to place a vertical image as a background for a full-width section. With a 24
soft crop, 25
we have a totally different result. 26
The photo maintains all its important aspects. And we have a perfect space to place the content on. 27
This layout has a clear focal point, which is the guy obviously. And the content has great readability, 28
because it's on a white background. 29
If I use a vertical image as a full-width background, I'd get a very chaotic result. 30
The content is merging with a focal point of the image, 31
there is not enough visibility for the text, it's hard to read and the whole thing is just very noisy. 32
With a soft crop on the other hand, we give 33
each piece of this composition, its own space. Giving us a nice clean look, with high readability. Photos 34
that I have a uniform black background, is even easier to work with. Just sample the color from the very 35
very last pixel on the edge of the image. Fill the space with that color. Arrange the image in 36
the position that is the most suitable. And you get easy layout, with a lot of space to place your content 37
beautifully. Extending the edge of this image like this, can work on other colors besides black, but it 38
needs an extra fix. On an image like this. If we fill the space, 39
using this method, we'll get a result like this. 40
There is a strict separation between the image and the background. Which is an evident flaw. And we never 41
want to have a design with evident flaws like this. 42
Hopefully, you can see that hard edge between the sand and the background color. Maybe on your computer, 43
because of the video compression, it might be blurring out that hard edge. But it's there. 44
This happens because real life objects are never a single color. Not even uniform objects like sand. 45
So when we sample a single color from the object, it's only that, one single color. 46
One way to fix this is by applying that same gradient fade. 47
And in this case instead of using white, we will sample this exact color from that image. 48
And done. 49
Now the sand is smoothly and naturaly merging with the background color. On the green side, 50
though, there is a lot of texture and more color mix, so the result doesn't look as natural. 51
It's not bad at all. 52
It can be used just fine. Although unlike other 3 examples, here the green appears as a gradient overlay 53
over the image. 54
It's more like a fading curtain on top of the image. Which is perfectly fine thing to do and you can 55
definitely use it. 56
However, there is one trick that I use in such cases, which gives us more pleasing look. 57
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
image that is simple, without any complicated shapes and stretch it to fill the remaining space. 59
It's important to stretch only the part of the image instead of stretching the whole thing. A part 60
that is simple, doesn't have a lot of details, and isn't in focus. This way 61
the important and part of the image is crisp, with its original proportions. 62
You can't do this with all photos. Only if the photo has already blurry background, that can afford extra 63
stretch. Add the copy. And we have a very good looking section, that feels natural and the content is easy 64
to read and the whole section is really well balanced. 65
This is how simple and fun design can be, small tricks that give you great results. 66
The knowledge of these tricks is what designers get paid good money for. 67
My clients usually refer to this as "magic". And they will tell me, 68
"Oh, Vako, we need a new design for this page, 69
can you do your magic?" 70
But it's not magic, it's science!