0
1
00:00:00,200 --> 00:00:05,070
In this assignment, you will practice cropping techniques that you have learned so far. Inside the assignment
1

2
00:00:05,070 --> 00:00:05,490
file
2

3
00:00:05,520 --> 00:00:09,800
you will see 3 frames. Each one has its own content and an image.
3

4
00:00:09,840 --> 00:00:12,690
I want you to apply different crop for each frame.
4

5
00:00:12,750 --> 00:00:17,760
I'll demonstrate how to apply these image cropping in a bit. On the first frame named Extreme Crop,
5

6
00:00:17,760 --> 00:00:23,240
I want you to apply exactly that. Extreme Crop to the image of the boy. In terms of the layout,
6

7
00:00:23,250 --> 00:00:27,570
you can do this in a split screen layout. Just like you did in previous assignments.
7

8
00:00:27,570 --> 00:00:33,630
As usual, style the content accordingly, choose your fonts, sizes, colors and align elements to the grid.
8

9
00:00:33,690 --> 00:00:36,870
On the second frame, I want you to apply a White Soft Crop.
9

10
00:00:36,900 --> 00:00:42,170
I'll explain how this is done. And on the last frame, I want you to apply a Color Soft Crop.
10

11
00:00:42,180 --> 00:00:47,330
Same as the white version, but using the color from the image to create that smooth transition.
11

12
00:00:47,340 --> 00:00:51,760
I'll show you how to do this too. Alright,
12

13
00:00:51,770 --> 00:00:53,400
let's start with an extreme crop.
13

14
00:00:53,570 --> 00:00:58,220
Extreme crop is very simple, you can pretty much guess how this is going to work. Instead of actually
14

15
00:00:58,220 --> 00:01:01,450
cropping the image, we're going to use masking inside Figma.
15

16
00:01:01,460 --> 00:01:03,260
This is undestructive method.
16

17
00:01:03,260 --> 00:01:06,560
The original image will still be there if we change our mind later.
17

18
00:01:06,560 --> 00:01:10,270
I'm going to create a split screen and crop this image directly inside it.
18

19
00:01:10,280 --> 00:01:12,500
Remember what we need to mask our image?
19

20
00:01:12,500 --> 00:01:13,580
We need a shape.
20

21
00:01:13,670 --> 00:01:18,150
In this case a rectangle.
21

22
00:01:18,180 --> 00:01:20,790
Now, let's make this rectangle exactly half of the screen.
22

23
00:01:20,790 --> 00:01:21,900
We can have Figma
23

24
00:01:21,920 --> 00:01:28,590
do the math for us. The frame is 1152 pixels wide. Type 1152 divided
24

25
00:01:28,590 --> 00:01:31,830
by 2. Align it to the right edge like this.
25

26
00:01:31,890 --> 00:01:33,720
Do you remember how to create the Mask?
26

27
00:01:33,720 --> 00:01:39,420
Select both of the layers. And in the toolbar above, the masking option will appear after you have them
27

28
00:01:39,420 --> 00:01:40,410
selected.
28

29
00:01:40,530 --> 00:01:45,210
Click on the Mask. Wait, something odd has happened. Our image has disappeared and it seems like
29

30
00:01:45,210 --> 00:01:47,450
the rectangle is being masked instead.
30

31
00:01:47,520 --> 00:01:52,050
If you look at the latest panel, you'll see that the photo is actually being used as the mask, instead
31

32
00:01:52,050 --> 00:01:55,050
of the rectangle. But we actually needed it to be the opposite.
32

33
00:01:55,050 --> 00:02:00,000
This happened because we had the rectangle on the top. Figma will use the bottom layer as the mask.
33

34
00:02:00,000 --> 00:02:02,400
So we need to move the rectangle on the bottom.
34

35
00:02:02,400 --> 00:02:07,670
We can do this either by directly dragging the layer, or using a shortcut.
35

36
00:02:07,700 --> 00:02:12,120
Now when we hit this mask, we will have it masked correctly.
36

37
00:02:12,140 --> 00:02:14,260
Here's another thing to watch out for when masking.
37

38
00:02:14,270 --> 00:02:19,850
If you are applying mask to all objects on the frame, then Figma doesn't create a Mask Group in the layers
38

39
00:02:19,850 --> 00:02:20,390
panel.
39

40
00:02:20,390 --> 00:02:25,910
What this means is that, after you add more elements on the frame, they will be living under that mask.
40

41
00:02:25,930 --> 00:02:30,830
So you will encounter an odd behavior where you try to look for something, but it has disappeared for
41

42
00:02:30,830 --> 00:02:31,790
no apparent reason.
42

43
00:02:31,820 --> 00:02:32,570
In moments like this.
43

44
00:02:32,570 --> 00:02:34,450
Always always check your layers panel.
44

45
00:02:34,460 --> 00:02:38,500
It usually holds the clues for any weird behavior you experience.
45

46
00:02:38,510 --> 00:02:41,890
If you look here, you'll see that mask isn't part of a group.
46

47
00:02:42,020 --> 00:02:43,390
It's just sitting on the frame.
47

48
00:02:43,410 --> 00:02:48,650
That means it will mask everything that goes on the frame. The arrow clearly indicates that. To fix it
48

49
00:02:48,650 --> 00:02:53,600
just select the mask and the image that you're masking, right click and click
49

50
00:02:53,600 --> 00:02:54,650
Group Selection.
50

51
00:02:57,700 --> 00:03:01,090
This way mask only works within the group and not outside of it.
51

52
00:03:01,090 --> 00:03:06,330
Now that we got that figured out. Select the image inside the mask group. Not the entire group though.
52

53
00:03:06,430 --> 00:03:11,860
If you click directly on it, the entire mask group will be selected. To select just the image you can
53

54
00:03:11,860 --> 00:03:18,640
do that either from the layers panel, or my personal favorite way is by holding control (or command) and
54

55
00:03:18,640 --> 00:03:21,310
clicking on the object directly.
55

56
00:03:21,310 --> 00:03:27,670
Now, find the handles of that image and resize it, to create an Extreme Crop effect. And drag image around
56

57
00:03:27,670 --> 00:03:28,810
to find your spot.
57

58
00:03:28,810 --> 00:03:31,050
Here are a few tips when doing this crop:
58

59
00:03:31,060 --> 00:03:37,030
You don't necessarily have to crop all sides evenly. You can hide only one side of the face or of an object.
59

60
00:03:37,030 --> 00:03:43,390
The goal of the extreme crop is to create mystery, by hiding parts of the subject. Or picking a small
60

61
00:03:43,390 --> 00:03:48,070
slice of the entire image, and tell the story only through that slice.
61

62
00:03:48,070 --> 00:03:51,080
In this case, I prefer centering the lion's face.
62

63
00:03:51,130 --> 00:03:54,260
This works better with split screen layouts like this.
63

64
00:03:54,280 --> 00:03:58,720
If I was using a full-width layout, then maybe side crop would suit better.
64

65
00:03:58,720 --> 00:04:01,960
Another tip, when you are cropping out a person or an image,
65

66
00:04:01,960 --> 00:04:04,160
this has to happen on the edges of the frame.
66

67
00:04:04,180 --> 00:04:10,110
If you crop an image and place it away from the edges, then this trick doesn't work.
67

68
00:04:10,120 --> 00:04:12,100
You actually get a very odd result.
68

69
00:04:12,100 --> 00:04:15,640
This is just an oddly cropped image that is placed on the canvas.
69

70
00:04:15,640 --> 00:04:19,650
Remember, what I said before? An audience has to wonder what's beyond the borders.
70

71
00:04:19,670 --> 00:04:23,150
The effect we're going for is actually like looking through a window.
71

72
00:04:23,320 --> 00:04:27,500
So it's not that image is cropped up, but that's all we can see through the window.
72

73
00:04:27,580 --> 00:04:33,230
When images cropped on the edges, an audience can feel that image is going beyond its borders.
73

74
00:04:33,280 --> 00:04:39,190
And this is exactly the visual curiosity you're creating here. For different shapes of extreme cropping,
74

75
00:04:39,190 --> 00:04:41,320
like we did in our horizontal example.
75

76
00:04:41,320 --> 00:04:46,900
You just need to resize your mask. Select the mask layer in the layers panel. The Control/Command Click
76

77
00:04:46,900 --> 00:04:49,990
isn't gonna work here, because the image is on the top.
77

78
00:04:50,110 --> 00:04:55,960
So you have to directly select it in the panel. Now, just resize it to your shape. And position your image
78

79
00:04:55,960 --> 00:04:56,680
wherever you want it.
79

80
00:05:04,260 --> 00:05:04,710
OK.
80

81
00:05:04,720 --> 00:05:07,430
Now for the soft Crop. This is quite simple as well.
81

82
00:05:07,450 --> 00:05:15,160
What we need to do, is to put a white fading rectangle on the edge of the image, so it smoothens out that
82

83
00:05:15,160 --> 00:05:18,280
final edge, left edge of the photo.
83

84
00:05:18,280 --> 00:05:21,100
This is done using a gradient fill. Draw a rectangle.
84

85
00:05:24,180 --> 00:05:31,680
Go to the fill of this rectangle. And on this dropdown option change Solid to a Linear. Linear, Radial
85

86
00:05:31,710 --> 00:05:32,910
Angular and Diamond,
86

87
00:05:32,910 --> 00:05:37,890
these are all gradient fills. For some reason, Figma decided to save space and drop the word "Gradient"
87

88
00:05:37,890 --> 00:05:38,690
from it.
88

89
00:05:38,790 --> 00:05:44,670
After you change it to linear. You'll notice that the fill of the rectangle starts from one color on top
89

90
00:05:44,700 --> 00:05:46,880
and fades to transparent color on the bottom.
90

91
00:05:46,890 --> 00:05:49,590
We want this to be white color. Inside the color picker,
91

92
00:05:49,590 --> 00:05:52,900
we have two colors. Start and End Color.
92

93
00:05:53,010 --> 00:05:59,700
We want start color to be white with 100 opacity. And the end to be white again, but with 0%
93

94
00:05:59,700 --> 00:06:01,680
opacity, meaning transparent.
94

95
00:06:01,680 --> 00:06:04,020
This will then create that fading effect.
95

96
00:06:04,020 --> 00:06:06,390
This here, is a start color. On the color map,
96

97
00:06:06,420 --> 00:06:10,310
drag the dog to the top left corner, because that's where the white is.
97

98
00:06:10,320 --> 00:06:15,410
If you accidentally click on this gradient line, it will change the location of where colors start and
98

99
00:06:15,410 --> 00:06:15,850
end.
99

100
00:06:15,960 --> 00:06:17,820
Just drag them back to their corners.
100

101
00:06:18,280 --> 00:06:18,860
Okay.
101

102
00:06:18,960 --> 00:06:21,000
Do the same thing on end color.
102

103
00:06:21,000 --> 00:06:25,080
Now we have a gradient fill with fading white. But this is a wrong direction.
103

104
00:06:25,080 --> 00:06:29,850
We want it to start from left and fade on the right. To change the direction,
104

105
00:06:29,850 --> 00:06:32,010
grab this handle here.
105

106
00:06:32,010 --> 00:06:37,650
Be careful. Not the box, you want to grab the line. And then drag to anywhere on the left edge.
106

107
00:06:37,650 --> 00:06:43,230
What happened here, is that we are telling you to start this color from this point, and then slowly Gradiet it
107

108
00:06:43,230 --> 00:06:44,670
towards the end color.
108

109
00:06:44,700 --> 00:06:50,620
Okay, let's do the same thing for the end color. These red lines are guides and indicate the position.
109

110
00:06:50,630 --> 00:06:56,420
Vertical red line shows that we are exactly on the border. And the middle horizontal line, indicates
110

111
00:06:56,420 --> 00:06:58,910
that we are right in the center of the rectangle.
111

112
00:06:58,910 --> 00:07:01,410
That's exactly where we want to position it.
112

113
00:07:01,430 --> 00:07:09,690
Now we position this fill right at the edge of the image. Where it meets with a white background.
113

114
00:07:09,690 --> 00:07:11,100
And there. We have our Soft Crop.
114

115
00:07:11,100 --> 00:07:17,070
You can also stretch this gradient fill to make the fade more smooth. As you can see the transition here
115

116
00:07:17,070 --> 00:07:18,370
is a little sharp.
116

117
00:07:18,510 --> 00:07:24,390
If you extend the gradient fill, then it spreads more evenly and makes the transition smoother and more
117

118
00:07:24,390 --> 00:07:25,050
natural.
118

119
00:07:25,050 --> 00:07:29,070
Now depending on the image, sometimes this will be enough, but sometimes you will still have a little
119

120
00:07:29,070 --> 00:07:32,780
abrupt transition, like this one. In cases like this,
120

121
00:07:32,850 --> 00:07:37,770
I duplicate the gradient fill 2 more times, so I have a total of 3 fills.
121

122
00:07:37,800 --> 00:07:41,690
You can see how it already improved. But we can still do a little more.
122

123
00:07:41,730 --> 00:07:47,580
You can take each rectangle and shrink or extend them. Basically creating 3 fills with 3 different
123

124
00:07:47,580 --> 00:07:48,240
widths.
124

125
00:07:48,240 --> 00:07:52,190
This gives you a bit more control on fixing any sharp transitions.
125

126
00:07:52,200 --> 00:07:53,340
There is no exact rule here.
126

127
00:07:53,340 --> 00:07:58,850
You basically play with their positioning and sizes until you find that sweet spot of the transition.
127

128
00:07:58,860 --> 00:08:02,890
The choice of an image matters too. Some images work better than others. With white Soft Crop
128

129
00:08:02,900 --> 00:08:05,390
you want to go for an image that has a lighter background.
129

130
00:08:05,400 --> 00:08:10,020
For instance, a daylight sky in a background makes a good transition. On dark backgrounds.
130

131
00:08:10,020 --> 00:08:12,160
the white fade isn't as effective.
131

132
00:08:12,180 --> 00:08:17,260
You see here, it feels unnatural. And black background and black fade does much better job here,
132

133
00:08:17,280 --> 00:08:23,100
as you can see. But the ideal solution on a background like this, would be to pick a color from the edge of
133

134
00:08:23,100 --> 00:08:29,990
the image and use that as a background for that fade. Let's do that on this example.
134

135
00:08:29,990 --> 00:08:33,230
Here is a cool Figma trick that can come in handy in the future.
135

136
00:08:33,350 --> 00:08:36,950
Right click on the image and click Flip Horizontally.
136

137
00:08:36,950 --> 00:08:38,730
It basically mirrors the image.
137

138
00:08:38,780 --> 00:08:40,220
This comes in very handy often.
138

139
00:08:40,220 --> 00:08:44,800
For example, when I want to put a content on the left side, but the image has a model on the left and
139

140
00:08:44,810 --> 00:08:47,890
the empty space on the right. I can reverse it and done.
140

141
00:08:47,900 --> 00:08:53,630
First, we have to sample a color from the sand and use it as our color for the background and the fade.
141

142
00:08:53,690 --> 00:08:54,940
So select the frame,
142

143
00:08:55,950 --> 00:09:00,810
click background and then sample the very last color pixel of the image.
143

144
00:09:00,810 --> 00:09:05,190
Zoom in real close, to get a better handle and pay attention to the pixel zoom here.
144

145
00:09:05,190 --> 00:09:07,350
This shows which pixel will be sampled
145

146
00:09:07,350 --> 00:09:08,120
exactly.
146

147
00:09:08,160 --> 00:09:11,050
Don't sample that lighter pixel, that is next to the edge.
147

148
00:09:11,070 --> 00:09:16,950
The reason why we are selecting the last pixel is to create as smooth transition as possible, between
148

149
00:09:16,950 --> 00:09:20,320
the image and the background, without the gradient fill.
149

150
00:09:20,370 --> 00:09:24,570
Okay, now we are going to use this same exact color to create a gradient fill.
150

151
00:09:24,570 --> 00:09:31,710
Copy the HEX code of the color from the background. And insert it as a Start and End color in the gradient
151

152
00:09:31,710 --> 00:09:32,070
fill.
152

153
00:09:40,960 --> 00:09:46,210
If your color picker shows HSB or other system. Just change that dropdown to HEX so you can paste
153

154
00:09:46,210 --> 00:09:46,660
the code.
154

155
00:10:03,340 --> 00:10:07,380
One thing to note. In case you sample the color from the background like this,
155

156
00:10:07,390 --> 00:10:10,150
which is an alternative to doing this
156

157
00:10:10,270 --> 00:10:16,360
pasting the color code. On the End color you will get this. A not really a gradient, but it just 100%
157

158
00:10:16,360 --> 00:10:18,100
percent solid background.
158

159
00:10:18,100 --> 00:10:23,830
This is because it copied all the parameters of that color including the opacity. It's using 
159

160
00:10:23,830 --> 00:10:24,640
100%,
160

161
00:10:24,790 --> 00:10:27,220
that's why the fading effect disappeared.
161

162
00:10:27,250 --> 00:10:35,110
To fix this, just grab this opacity handle right here and decrease it to 0%.
162

163
00:10:35,160 --> 00:10:40,560
Now go ahead and apply those crops accordingly to each of the frames. And then submit your results in
163

164
00:10:40,560 --> 00:10:46,230
the assignment after this. And I will have a look at them. As you noticed probably, I haven't included
164

165
00:10:46,230 --> 00:10:55,110
the stretch crop and stretch photo tutorial in this video. But I have put a photoshop tutorial in the
165

166
00:10:55,110 --> 00:10:58,710
advanced part of this action. Which you can learn how to do and practice
166

167
00:10:58,710 --> 00:11:03,930
once you sort of finish this course, because you don't really need it right now it's not that necessary
167

168
00:11:04,140 --> 00:11:08,760
to know it. But once you've finished the course and you kinda go through this main material, then definitely
168

169
00:11:08,760 --> 00:11:10,170
have a look at it and give it a go.