In this assignment, you will practice cropping techniques that you have learned so far. Inside the assignment 1
file 2
you will see 3 frames. Each one has its own content and an image. 3
I want you to apply different crop for each frame. 4
I'll demonstrate how to apply these image cropping in a bit. On the first frame named Extreme Crop, 5
I want you to apply exactly that. Extreme Crop to the image of the boy. In terms of the layout, 6
you can do this in a split screen layout. Just like you did in previous assignments. 7
As usual, style the content accordingly, choose your fonts, sizes, colors and align elements to the grid. 8
On the second frame, I want you to apply a White Soft Crop. 9
I'll explain how this is done. And on the last frame, I want you to apply a Color Soft Crop. 10
Same as the white version, but using the color from the image to create that smooth transition. 11
I'll show you how to do this too. Alright, 12
let's start with an extreme crop. 13
Extreme crop is very simple, you can pretty much guess how this is going to work. Instead of actually 14
cropping the image, we're going to use masking inside Figma. 15
This is undestructive method. 16
The original image will still be there if we change our mind later. 17
I'm going to create a split screen and crop this image directly inside it. 18
Remember what we need to mask our image? 19
We need a shape. 20
In this case a rectangle. 21
Now, let's make this rectangle exactly half of the screen. 22
We can have Figma 23
do the math for us. The frame is 1152 pixels wide. Type 1152 divided 24
by 2. Align it to the right edge like this. 25
Do you remember how to create the Mask? 26
Select both of the layers. And in the toolbar above, the masking option will appear after you have them 27
selected. 28
Click on the Mask. Wait, something odd has happened. Our image has disappeared and it seems like 29
the rectangle is being masked instead. 30
If you look at the latest panel, you'll see that the photo is actually being used as the mask, instead 31
of the rectangle. But we actually needed it to be the opposite. 32
This happened because we had the rectangle on the top. Figma will use the bottom layer as the mask. 33
So we need to move the rectangle on the bottom. 34
We can do this either by directly dragging the layer, or using a shortcut. 35
Now when we hit this mask, we will have it masked correctly. 36
Here's another thing to watch out for when masking. 37
If you are applying mask to all objects on the frame, then Figma doesn't create a Mask Group in the layers 38
panel. 39
What this means is that, after you add more elements on the frame, they will be living under that mask. 40
So you will encounter an odd behavior where you try to look for something, but it has disappeared for 41
no apparent reason. 42
In moments like this. 43
Always always check your layers panel. 44
It usually holds the clues for any weird behavior you experience. 45
If you look here, you'll see that mask isn't part of a group. 46
It's just sitting on the frame. 47
That means it will mask everything that goes on the frame. The arrow clearly indicates that. To fix it 48
just select the mask and the image that you're masking, right click and click 49
Group Selection. 50
This way mask only works within the group and not outside of it. 51
Now that we got that figured out. Select the image inside the mask group. Not the entire group though. 52
If you click directly on it, the entire mask group will be selected. To select just the image you can 53
do that either from the layers panel, or my personal favorite way is by holding control (or command) and 54
clicking on the object directly. 55
Now, find the handles of that image and resize it, to create an Extreme Crop effect. And drag image around 56
to find your spot. 57
Here are a few tips when doing this crop: 58
You don't necessarily have to crop all sides evenly. You can hide only one side of the face or of an object. 59
The goal of the extreme crop is to create mystery, by hiding parts of the subject. Or picking a small 60
slice of the entire image, and tell the story only through that slice. 61
In this case, I prefer centering the lion's face. 62
This works better with split screen layouts like this. 63
If I was using a full-width layout, then maybe side crop would suit better. 64
Another tip, when you are cropping out a person or an image, 65
this has to happen on the edges of the frame. 66
If you crop an image and place it away from the edges, then this trick doesn't work. 67
You actually get a very odd result. 68
This is just an oddly cropped image that is placed on the canvas. 69
Remember, what I said before? An audience has to wonder what's beyond the borders. 70
The effect we're going for is actually like looking through a window. 71
So it's not that image is cropped up, but that's all we can see through the window. 72
When images cropped on the edges, an audience can feel that image is going beyond its borders. 73
And this is exactly the visual curiosity you're creating here. For different shapes of extreme cropping, 74
like we did in our horizontal example. 75
You just need to resize your mask. Select the mask layer in the layers panel. The Control/Command Click 76
isn't gonna work here, because the image is on the top. 77
So you have to directly select it in the panel. Now, just resize it to your shape. And position your image 78
wherever you want it. 79
OK. 80
Now for the soft Crop. This is quite simple as well. 81
What we need to do, is to put a white fading rectangle on the edge of the image, so it smoothens out that 82
final edge, left edge of the photo. 83
This is done using a gradient fill. Draw a rectangle. 84
Go to the fill of this rectangle. And on this dropdown option change Solid to a Linear. Linear, Radial 85
Angular and Diamond, 86
these are all gradient fills. For some reason, Figma decided to save space and drop the word "Gradient" 87
from it. 88
After you change it to linear. You'll notice that the fill of the rectangle starts from one color on top 89
and fades to transparent color on the bottom. 90
We want this to be white color. Inside the color picker, 91
we have two colors. Start and End Color. 92
We want start color to be white with 100 opacity. And the end to be white again, but with 0% 93
opacity, meaning transparent. 94
This will then create that fading effect. 95
This here, is a start color. On the color map, 96
drag the dog to the top left corner, because that's where the white is. 97
If you accidentally click on this gradient line, it will change the location of where colors start and 98
end. 99
Just drag them back to their corners. 100
Okay. 101
Do the same thing on end color. 102
Now we have a gradient fill with fading white. But this is a wrong direction. 103
We want it to start from left and fade on the right. To change the direction, 104
grab this handle here. 105
Be careful. Not the box, you want to grab the line. And then drag to anywhere on the left edge. 106
What happened here, is that we are telling you to start this color from this point, and then slowly Gradiet it 107
towards the end color. 108
Okay, let's do the same thing for the end color. These red lines are guides and indicate the position. 109
Vertical red line shows that we are exactly on the border. And the middle horizontal line, indicates 110
that we are right in the center of the rectangle. 111
That's exactly where we want to position it. 112
Now we position this fill right at the edge of the image. Where it meets with a white background. 113
And there. We have our Soft Crop. 114
You can also stretch this gradient fill to make the fade more smooth. As you can see the transition here 115
is a little sharp. 116
If you extend the gradient fill, then it spreads more evenly and makes the transition smoother and more 117
natural. 118
Now depending on the image, sometimes this will be enough, but sometimes you will still have a little 119
abrupt transition, like this one. In cases like this, 120
I duplicate the gradient fill 2 more times, so I have a total of 3 fills. 121
You can see how it already improved. But we can still do a little more. 122
You can take each rectangle and shrink or extend them. Basically creating 3 fills with 3 different 123
widths. 124
This gives you a bit more control on fixing any sharp transitions. 125
There is no exact rule here. 126
You basically play with their positioning and sizes until you find that sweet spot of the transition. 127
The choice of an image matters too. Some images work better than others. With white Soft Crop 128
you want to go for an image that has a lighter background. 129
For instance, a daylight sky in a background makes a good transition. On dark backgrounds. 130
the white fade isn't as effective. 131
You see here, it feels unnatural. And black background and black fade does much better job here, 132
as you can see. But the ideal solution on a background like this, would be to pick a color from the edge of 133
the image and use that as a background for that fade. Let's do that on this example. 134
Here is a cool Figma trick that can come in handy in the future. 135
Right click on the image and click Flip Horizontally. 136
It basically mirrors the image. 137
This comes in very handy often. 138
For example, when I want to put a content on the left side, but the image has a model on the left and 139
the empty space on the right. I can reverse it and done. 140
First, we have to sample a color from the sand and use it as our color for the background and the fade. 141
So select the frame, 142
click background and then sample the very last color pixel of the image. 143
Zoom in real close, to get a better handle and pay attention to the pixel zoom here. 144
This shows which pixel will be sampled 145
exactly. 146
Don't sample that lighter pixel, that is next to the edge. 147
The reason why we are selecting the last pixel is to create as smooth transition as possible, between 148
the image and the background, without the gradient fill. 149
Okay, now we are going to use this same exact color to create a gradient fill. 150
Copy the HEX code of the color from the background. And insert it as a Start and End color in the gradient 151
fill. 152
If your color picker shows HSB or other system. Just change that dropdown to HEX so you can paste 153
the code. 154
One thing to note. In case you sample the color from the background like this, 155
which is an alternative to doing this 156
pasting the color code. On the End color you will get this. A not really a gradient, but it just 100% 157
percent solid background. 158
This is because it copied all the parameters of that color including the opacity. It's using 159
100%, 160
that's why the fading effect disappeared. 161
To fix this, just grab this opacity handle right here and decrease it to 0%. 162
Now go ahead and apply those crops accordingly to each of the frames. And then submit your results in 163
the assignment after this. And I will have a look at them. As you noticed probably, I haven't included 164
the stretch crop and stretch photo tutorial in this video. But I have put a photoshop tutorial in the 165
advanced part of this action. Which you can learn how to do and practice 166
once you sort of finish this course, because you don't really need it right now it's not that necessary 167
to know it. But once you've finished the course and you kinda go through this main material, then definitely 168
have a look at it and give it a go.