0
1
00:00:02,710 --> 00:00:08,440
Cutting out an object from its background is best done in Photoshop. Or Affinity photo, or any other similar
1

2
00:00:08,440 --> 00:00:10,900
software which is for photo manipulation.
2

3
00:00:13,570 --> 00:00:14,400
Let's begin.
3

4
00:00:14,470 --> 00:00:19,840
The most important part of successfully cutting out a subject is actually picking the right photo.
4

5
00:00:19,870 --> 00:00:24,790
2 things that we need to pay attention to, are the background and the position of the subject.
5

6
00:00:24,790 --> 00:00:30,250
Ideally, we want a background that is plain and contrasts really well with the subject.
6

7
00:00:30,250 --> 00:00:35,080
Cutting out subjects from difficult backgrounds can be tedious work. And the last thing you want is to
7

8
00:00:35,080 --> 00:00:37,930
spend half an hour to cut out a model.
8

9
00:00:37,960 --> 00:00:41,870
Apply it into your designs and realize that the model is not a good fit.
9

10
00:00:41,890 --> 00:00:44,830
Good design is usually a result of a lot of iterations.
10

11
00:00:44,830 --> 00:00:49,890
Imagine, iterating between 3 cut out subjects. Sending the final version to your client for their
11

12
00:00:49,890 --> 00:00:56,050
review and then client comes back saying that the model isn't really their target audience and they
12

13
00:00:56,050 --> 00:00:59,890
want someone a little older and dressed a little fancier.
13

14
00:01:00,020 --> 00:01:04,630
That's going to drive you crazy, if cutting out subject is not a quick and straightforward job.
14

15
00:01:04,630 --> 00:01:08,310
The second important fact is the position of the subject in the photo.
15

16
00:01:08,320 --> 00:01:11,990
Cutting out a model who is sitting, wouldn't make a lot of sense.
16

17
00:01:12,010 --> 00:01:17,650
We would have to recreate the same position in our design, so we would have to, you know, make the model sit down
17

18
00:01:17,650 --> 00:01:22,880
on something, which is very similar size and shape in our designs as well.
18

19
00:01:22,930 --> 00:01:25,220
And that's too much needless work.
19

20
00:01:25,330 --> 00:01:31,840
Standing, front-facing positions are the best for cut-outs. And odd camera angles like these, are just
20

21
00:01:31,900 --> 00:01:37,540
asking for a lot of trouble during the design process. Because camera is facing her from sideways from
21

22
00:01:37,540 --> 00:01:42,080
the top. Then the space in which you will put her, has to reflect that too.
22

23
00:01:42,190 --> 00:01:46,660
It's doable, but you will bump into obstacles and limitations for your designs.
23

24
00:01:46,660 --> 00:01:50,000
This photo, even though on a plain background, is still a bad choice.
24

25
00:01:50,050 --> 00:01:56,800
Ignoring the part when she is, you know, facing away from the camera. Because she's wearing a white top and in front
25

26
00:01:56,800 --> 00:02:01,720
of a white background. Photoshop will have hard time detecting the edges between the background and the
26

27
00:02:01,720 --> 00:02:05,440
sweater. Unsplash usually is not the great place to find such photos.
27

28
00:02:05,440 --> 00:02:11,470
Most of the photos here are taken in real life scenarios outside of the studio. Which is not a bad thing.
28

29
00:02:11,470 --> 00:02:17,680
It offers a good selection of stock photos, that don't look like stock. But for isolated images the best
29

30
00:02:17,680 --> 00:02:19,440
place are paid stock sites.
30

31
00:02:19,570 --> 00:02:21,420
For example bigstock.com.
31

32
00:02:21,520 --> 00:02:27,250
If you add a keyword "isolated" to whatever you are looking for, it will give you a mainly studio shots
32

33
00:02:27,250 --> 00:02:28,770
on plane backgrounds.
33

34
00:02:28,780 --> 00:02:33,880
These photos will work the best for cutting out. The photoshop process will be super simple and the camera
34

35
00:02:33,910 --> 00:02:36,900
angle and position of the subject will be excellent for your work.
35

36
00:02:43,520 --> 00:02:47,940
This is another paid stock site: photos.icons8.com
36

37
00:02:48,020 --> 00:02:51,360
They offer a selection of photos mainly on plain backgrounds.
37

38
00:02:51,440 --> 00:02:54,580
It's free for personal use, so I'm going to pick a photo from here.
38

39
00:02:59,390 --> 00:03:02,930
This is an excellent photo to work with for a full subject cut outs.
39

40
00:03:02,960 --> 00:03:07,850
The background is plain, in single color and there is a clear separation between the subject and the
40

41
00:03:07,850 --> 00:03:08,750
background.
41

42
00:03:08,750 --> 00:03:09,820
It's an easy work.
42

43
00:03:09,830 --> 00:03:12,940
You can pick this exact photo to follow along or choose something else.
43

44
00:03:12,950 --> 00:03:14,770
I'll link the image in the resources.
44

45
00:03:14,780 --> 00:03:17,700
I'm not going to demonstrate background removal on difficult photos.
45

46
00:03:17,720 --> 00:03:21,440
I don't even want you to learn how to work with difficult backgrounds.
46

47
00:03:21,470 --> 00:03:26,720
This way, we will make sure you get into the habit of looking for the right photos when it comes to isolating
47

48
00:03:26,720 --> 00:03:28,520
the subject. For difficult photos,
48

49
00:03:28,520 --> 00:03:29,450
I do something else.
49

50
00:03:29,450 --> 00:03:32,230
I only cut out a small part of the image.
50

51
00:03:32,270 --> 00:03:36,310
I will demonstrate this later.
51

52
00:03:36,590 --> 00:03:37,430
Ok, so let's open our
52

53
00:03:37,430 --> 00:03:37,930
image.
53

54
00:03:41,300 --> 00:03:48,260
Unlock the layer by clicking this lock icon. From the toolbox, on the left choose quick selection tool.
54

55
00:03:48,440 --> 00:03:50,720
Hovering over a tool will tell you what it is.
55

56
00:03:50,720 --> 00:03:55,610
This is the tool we will use to select the model and isolate her from the background.
56

57
00:03:55,610 --> 00:04:01,670
Now select the brush options. Choose the size that is not too big or not too small, so we can easily select
57

58
00:04:01,670 --> 00:04:05,240
the model. And set the hardness to 100%.
58

59
00:04:05,240 --> 00:04:10,300
Now start selecting the model from the center and slowly cover her entire shape.
59

60
00:04:10,340 --> 00:04:15,250
Make sure that those animated lines are surrounding her edges and nothing else.
60

61
00:04:18,280 --> 00:04:24,910
To select more precisely, zoom in very closely by pinching your touchpad, or hold on ALT or Option key
61

62
00:04:24,910 --> 00:04:30,430
while using your mouse wheel. To get a better control over your selection, increase or decrease your brush
62

63
00:04:30,430 --> 00:04:31,330
size.
63

64
00:04:31,330 --> 00:04:35,560
There is a shortcut to this, so you don't have to go to the brush settings panel all the time.
64

65
00:04:35,620 --> 00:04:41,080
Just click square brackets key. Left one decreases the brush size and the right one increases it.
65

66
00:04:44,960 --> 00:04:51,740
If you select something extra, hold ALT or Option key and you'll see your selection tool now has a minus
66

67
00:04:51,740 --> 00:04:52,310
on it.
67

68
00:04:52,370 --> 00:04:54,690
When you release Alt, it goes back to plus.
68

69
00:04:54,800 --> 00:05:01,620
So plus adds to the selection and minus subtracts. Hold Alt and start removing areas that you over selected.
69

70
00:05:04,230 --> 00:05:09,490
If you make a mistake and you want to go back, undo action in Photoshop actually works a little weird.
70

71
00:05:09,510 --> 00:05:11,980
I remember it was very annoying for me in the beginning.
71

72
00:05:12,000 --> 00:05:14,610
It still is, because it doesn't work like you would expect it.
72

73
00:05:14,760 --> 00:05:20,790
So the regular  CTRL+Z, or CMD+Z on Mac, goes back and forth on your last action.
73

74
00:05:20,820 --> 00:05:27,090
So, if you want to undo the last action, then it works as you would expect. But if you press on it again,
74

75
00:05:27,420 --> 00:05:32,880
it will redo the last action. So pressing on it a lot of times just goes back and forth.
75

76
00:05:32,910 --> 00:05:38,370
Drove me nuts first time I was messing around in Photoshop. The actual undo, see here in the edit options,
76

77
00:05:38,400 --> 00:05:43,170
is called Step Backward and has a shortcut with an Alt (Option) in it.
77

78
00:05:43,170 --> 00:05:48,420
This is your usual undo and behaves as you would expect it to behave. In windows, it probably should
78

79
00:05:48,420 --> 00:05:51,860
be Ctrl + Alt + C, but just in case double check.
79

80
00:05:51,900 --> 00:05:56,930
And just go into the edit and then go to a Step Backwards and see what's the shortcut next to it.
80

81
00:05:57,000 --> 00:06:03,530
Check your edges and make sure you didn't miss any spots.
81

82
00:06:03,610 --> 00:06:08,830
Don't worry too much about the loose hair, just select the main line and then we will fix the hair later.
82

83
00:06:11,570 --> 00:06:15,500
After you're done selecting, click Select and Mask, right here.
83

84
00:06:15,500 --> 00:06:18,860
This is actually available on the newer Photoshop releases.
84

85
00:06:18,860 --> 00:06:22,190
If your version doesn't have this, then look for Refine Edge.
85

86
00:06:22,190 --> 00:06:26,900
It works almost the same way, but this new Select and Mask feature is more superior.
86

87
00:06:26,900 --> 00:06:31,610
In here, we are going to clean up our selection, so we can get the perfect result.
87

88
00:06:31,610 --> 00:06:33,570
Here is another important Photoshop tip.
88

89
00:06:33,710 --> 00:06:36,420
Make sure you have a correct layer selected.
89

90
00:06:36,470 --> 00:06:38,840
This is the layers panel, just like Figma.
90

91
00:06:38,930 --> 00:06:43,480
If you have more than one layer, make sure to select the one with a photo on it.
91

92
00:06:44,200 --> 00:06:47,990
OK. So in here by default the transparency is decreased.
92

93
00:06:48,030 --> 00:06:52,870
It's a transparency of our background and everything we haven't selected. Sliding
93

94
00:06:52,870 --> 00:06:57,170
this doesn't affect how our cut out will look like, it's a guide for us.
94

95
00:06:57,190 --> 00:07:02,450
0% shows the original image. And full 100% hides everything we have not selected.
95

96
00:07:02,500 --> 00:07:05,070
It's helpful to see if we've missed any details.
96

97
00:07:05,260 --> 00:07:07,020
Let's increase it to 100%.
97

98
00:07:07,030 --> 00:07:09,590
As you can see, there are some imperfections on her hair.
98

99
00:07:09,640 --> 00:07:12,680
The pink background is passing through her hair.
99

100
00:07:12,970 --> 00:07:16,660
Let's put her on a white background from here to better see the details
100

101
00:07:19,920 --> 00:07:22,880
Change the opacity to 100% here as well.
101

102
00:07:22,890 --> 00:07:28,290
This time, it says opacity instead of transparency, because the white background is on top of the original
102

103
00:07:28,290 --> 00:07:33,060
background. So 100% opacity means it's 100% visible.
103

104
00:07:33,060 --> 00:07:34,350
Don't worry about this too much.
104

105
00:07:34,440 --> 00:07:36,060
The hair needs some fixing.
105

106
00:07:36,060 --> 00:07:41,510
Also if we zoom in closely on her skin, the edges are jagged and unnatural.
106

107
00:07:41,520 --> 00:07:44,080
This is not a good standard to use in any design.
107

108
00:07:44,160 --> 00:07:47,600
Good design looks perfect, when it comes to small details like this.
108

109
00:07:47,610 --> 00:07:52,350
No odd discolourations. And the cutout should look smooth and natural. Like
109

110
00:07:52,360 --> 00:07:54,810
that's exactly the background she was taken on.
110

111
00:07:54,840 --> 00:08:00,690
The ugliness of most cut-outs comes out from the edges. When edges aren't well-defined, it's noticeable.
111

112
00:08:00,750 --> 00:08:06,570
It looks like as if someone actually took a real paper magazine and then with scissors cut out the model
112

113
00:08:06,570 --> 00:08:07,440
from there.
113

114
00:08:07,440 --> 00:08:15,160
Luckily, photoshop is absolutely incredible at fixing this. To fix the edges of our cut out,
114

115
00:08:15,160 --> 00:08:18,510
we need to select a Refine Edge brush tool from here.
115

116
00:08:18,520 --> 00:08:19,580
It's the second one.
116

117
00:08:19,600 --> 00:08:24,610
Keep your mouse over it, for a second and it will tell you which one it is. Because these three looks quite
117

118
00:08:24,610 --> 00:08:25,390
similar.
118

119
00:08:25,390 --> 00:08:30,910
Just like we did with the other brush, size the brush from the options panel, or by using square brackets.
119

120
00:08:31,150 --> 00:08:35,610
And slowly start brushing over the edges of her hair and look at this.
120

121
00:08:35,650 --> 00:08:40,660
What is actually happening here is that we are telling Photoshop to look beyond the edges of our original
121

122
00:08:40,660 --> 00:08:46,810
selection and see if there are any parts that look like they belong to our selection. And at the same
122

123
00:08:46,810 --> 00:08:51,210
time to remove pixels that look like they are part of the background.
123

124
00:08:51,220 --> 00:08:53,460
That's why that Pink has disappeared.
124

125
00:08:55,520 --> 00:09:03,130
Using the opacity slider, check other parts that have been missed. In case you remove a little extra, just
125

126
00:09:03,130 --> 00:09:04,020
like other tool,
126

127
00:09:04,020 --> 00:09:05,970
press on Alt or Option.
127

128
00:09:06,010 --> 00:09:07,910
You'll see it's a minus sign.
128

129
00:09:07,930 --> 00:09:13,810
This will restore the original edge. And then brush it over again while you keep holding on the Alt key.
129

130
00:09:13,810 --> 00:09:16,830
Don't worry, it's not going to subtract from the original selection.
130

131
00:09:16,840 --> 00:09:18,970
It's basically undoing what we just added.
131

132
00:09:21,710 --> 00:09:26,460
Her hair looks decent, but there is still some pink color falling on her edges.
132

133
00:09:26,540 --> 00:09:27,580
We will remove this later.
133

134
00:09:27,590 --> 00:09:29,270
Let's check the rest of her edges now.
134

135
00:09:29,630 --> 00:09:35,060
We can of course go around on her entire body with this refined edge tool, but there is a quicker way
135

136
00:09:35,060 --> 00:09:35,720
to do that.
136

137
00:09:35,720 --> 00:09:40,910
On skin and parts that are quite simple and uniform, unlike hair. That's done through here.
137

138
00:09:40,910 --> 00:09:44,920
Edge detection. It's the same concept as the Refine Edge tool.
138

139
00:09:44,930 --> 00:09:50,380
With this, we can tell Photoshop to look beyond our selection and see if we have missed any parts.
139

140
00:09:50,450 --> 00:09:56,120
It's in pixels, so 1 pixel means look 1 pixel after the selection and add any missing parts.
140

141
00:09:56,150 --> 00:09:59,690
Pay attention to how the edge smoothens out as we increase.
141

142
00:10:03,620 --> 00:10:05,710
2 pixels seem decent in this case.
142

143
00:10:05,780 --> 00:10:11,840
Smart radius means, instead of using a uniform 2 pixel radius everywhere, it will use custom value depending
143

144
00:10:11,840 --> 00:10:14,920
on the edge. It's useful if you are using large values,
144

145
00:10:14,930 --> 00:10:18,620
but I like to fix odd edges manually with Refine Edge tool.
145

146
00:10:21,360 --> 00:10:26,340
Sometimes you'll notice that you have some extra patches. Like this, when you were making the selection,
146

147
00:10:26,880 --> 00:10:32,220
or you have actually missed some spots. Going back and fixing the selection after putting so much work
147

148
00:10:32,240 --> 00:10:34,110
is going to be heartbreaking.
148

149
00:10:34,110 --> 00:10:38,180
Luckily we can add or remove these spots, right here with the brush tool.
149

150
00:10:38,370 --> 00:10:43,590
As usual, plus sign will add in any pixels you click on. You will feel this works a little different,
150

151
00:10:43,620 --> 00:10:46,840
than the previous tools that we used. Other 2 tools,
151

152
00:10:46,860 --> 00:10:52,740
they do calculations in places where you press. This one doesn't. It obeys to whatever you press.
152

153
00:10:56,660 --> 00:10:57,690
And one final step
153

154
00:10:57,700 --> 00:11:01,140
we need to make, is to remove that pink glare from her hair.
154

155
00:11:04,280 --> 00:11:06,460
That can be done automatically from here.
155

156
00:11:06,500 --> 00:11:11,830
Select Decontaminate Colors. Give it a moment. And voila.
156

157
00:11:11,840 --> 00:11:14,480
Now most of the pink from her hair is gone.
157

158
00:11:14,480 --> 00:11:18,130
What an amazing job it did. Do this step as very last.
158

159
00:11:18,130 --> 00:11:24,140
Because if you have this selected, after every click you make, this will recalculate again and again.
159

160
00:11:24,230 --> 00:11:25,600
Will make things much slower.
160

161
00:11:26,810 --> 00:11:28,700
Although something funny happened here.
161

162
00:11:28,700 --> 00:11:31,200
Let's see if we can fix it with a Refine Edge tool.
162

163
00:11:36,820 --> 00:11:37,490
OK, gone.
163

164
00:11:37,740 --> 00:11:39,910
I actually still chose a little tricky photo.
164

165
00:11:39,960 --> 00:11:45,660
Ideally, choose a photo that has a white or grey plain backgrounds. Colored backgrounds do end up mixing
165

166
00:11:45,660 --> 00:11:46,430
with the edges.
166

167
00:11:50,370 --> 00:11:52,420
Alright, now let's Output our cutout.
167

168
00:11:52,490 --> 00:11:53,840
We have a few options here.
168

169
00:11:53,840 --> 00:11:56,660
The best is to choose New Layer with Layer Mask.
169

170
00:11:56,660 --> 00:12:02,180
What this does, instead of cutting the whole thing out, it will copy the original photo and apply a mask
170

171
00:12:02,180 --> 00:12:02,720
to it.
171

172
00:12:02,720 --> 00:12:05,510
This mask will hide the background and everything we did.
172

173
00:12:05,510 --> 00:12:10,910
This is the best option. Because if we notice something else and want to make any changes, we will be
173

174
00:12:10,910 --> 00:12:12,920
able to. With a new layer option
174

175
00:12:12,920 --> 00:12:16,660
we won't. The background will be gone forever. Inside the layers,
175

176
00:12:16,670 --> 00:12:22,250
you will see also the original photo is still there. And it's below, but disabled so it's not visible.
176

177
00:12:22,250 --> 00:12:27,320
Above is our copy with a mask applied to it. That black and white silhouette is a mask.
177

178
00:12:30,370 --> 00:12:30,720
Okay.
178

179
00:12:30,770 --> 00:12:33,040
So, final step is to save our file. First,
179

180
00:12:33,080 --> 00:12:35,930
let's save this as a Photoshop file for any future edits.
180

181
00:12:43,150 --> 00:12:47,740
The rest of the design we will be doing in Figma. The Photoshop file can't be imported in Figma,
181

182
00:12:47,750 --> 00:12:53,210
So we have to use PNG file. PNG is the one that will keep the transparency of our cutout.
182

183
00:12:53,230 --> 00:12:58,720
JPEG isn't going to work, because it will fill the background with white color. When we export this into
183

184
00:12:58,720 --> 00:12:59,810
PNG,
184

185
00:12:59,860 --> 00:13:03,260
any layer that is hidden, will not be included in the export.
185

186
00:13:03,280 --> 00:13:06,270
So, you don't have to delete this layer. Just hide it.
186

187
00:13:06,280 --> 00:13:10,740
Also, I would like to crop the extra space. Select the crop tool and drag the edges.
187

188
00:13:22,150 --> 00:13:30,140
Go to file, Export and Quick Export as PNG.
188

189
00:13:30,210 --> 00:13:33,930
Now we can place this image in Figma and pick any background we want.
189

190
00:13:54,710 --> 00:13:56,810
And that's how you do cut outs in Photoshop.