Cutting out an object from its background is best done in Photoshop. Or Affinity photo, or any other similar 1
software which is for photo manipulation. 2
Let's begin. 3
The most important part of successfully cutting out a subject is actually picking the right photo. 4
2 things that we need to pay attention to, are the background and the position of the subject. 5
Ideally, we want a background that is plain and contrasts really well with the subject. 6
Cutting out subjects from difficult backgrounds can be tedious work. And the last thing you want is to 7
spend half an hour to cut out a model. 8
Apply it into your designs and realize that the model is not a good fit. 9
Good design is usually a result of a lot of iterations. 10
Imagine, iterating between 3 cut out subjects. Sending the final version to your client for their 11
review and then client comes back saying that the model isn't really their target audience and they 12
want someone a little older and dressed a little fancier. 13
That's going to drive you crazy, if cutting out subject is not a quick and straightforward job. 14
The second important fact is the position of the subject in the photo. 15
Cutting out a model who is sitting, wouldn't make a lot of sense. 16
We would have to recreate the same position in our design, so we would have to, you know, make the model sit down 17
on something, which is very similar size and shape in our designs as well. 18
And that's too much needless work. 19
Standing, front-facing positions are the best for cut-outs. And odd camera angles like these, are just 20
asking for a lot of trouble during the design process. Because camera is facing her from sideways from 21
the top. Then the space in which you will put her, has to reflect that too. 22
It's doable, but you will bump into obstacles and limitations for your designs. 23
This photo, even though on a plain background, is still a bad choice. 24
Ignoring the part when she is, you know, facing away from the camera. Because she's wearing a white top and in front 25
of a white background. Photoshop will have hard time detecting the edges between the background and the 26
sweater. Unsplash usually is not the great place to find such photos. 27
Most of the photos here are taken in real life scenarios outside of the studio. Which is not a bad thing. 28
It offers a good selection of stock photos, that don't look like stock. But for isolated images the best 29
place are paid stock sites. 30
For example bigstock.com. 31
If you add a keyword "isolated" to whatever you are looking for, it will give you a mainly studio shots 32
on plane backgrounds. 33
These photos will work the best for cutting out. The photoshop process will be super simple and the camera 34
angle and position of the subject will be excellent for your work. 35
This is another paid stock site: photos.icons8.com 36
They offer a selection of photos mainly on plain backgrounds. 37
It's free for personal use, so I'm going to pick a photo from here. 38
This is an excellent photo to work with for a full subject cut outs. 39
The background is plain, in single color and there is a clear separation between the subject and the 40
background. 41
It's an easy work. 42
You can pick this exact photo to follow along or choose something else. 43
I'll link the image in the resources. 44
I'm not going to demonstrate background removal on difficult photos. 45
I don't even want you to learn how to work with difficult backgrounds. 46
This way, we will make sure you get into the habit of looking for the right photos when it comes to isolating 47
the subject. For difficult photos, 48
I do something else. 49
I only cut out a small part of the image. 50
I will demonstrate this later. 51
Ok, so let's open our 52
image. 53
Unlock the layer by clicking this lock icon. From the toolbox, on the left choose quick selection tool. 54
Hovering over a tool will tell you what it is. 55
This is the tool we will use to select the model and isolate her from the background. 56
Now select the brush options. Choose the size that is not too big or not too small, so we can easily select 57
the model. And set the hardness to 100%. 58
Now start selecting the model from the center and slowly cover her entire shape. 59
Make sure that those animated lines are surrounding her edges and nothing else. 60
To select more precisely, zoom in very closely by pinching your touchpad, or hold on ALT or Option key 61
while using your mouse wheel. To get a better control over your selection, increase or decrease your brush 62
size. 63
There is a shortcut to this, so you don't have to go to the brush settings panel all the time. 64
Just click square brackets key. Left one decreases the brush size and the right one increases it. 65
If you select something extra, hold ALT or Option key and you'll see your selection tool now has a minus 66
on it. 67
When you release Alt, it goes back to plus. 68
So plus adds to the selection and minus subtracts. Hold Alt and start removing areas that you over selected. 69
If you make a mistake and you want to go back, undo action in Photoshop actually works a little weird. 70
I remember it was very annoying for me in the beginning. 71
It still is, because it doesn't work like you would expect it. 72
So the regular CTRL+Z, or CMD+Z on Mac, goes back and forth on your last action. 73
So, if you want to undo the last action, then it works as you would expect. But if you press on it again, 74
it will redo the last action. So pressing on it a lot of times just goes back and forth. 75
Drove me nuts first time I was messing around in Photoshop. The actual undo, see here in the edit options, 76
is called Step Backward and has a shortcut with an Alt (Option) in it. 77
This is your usual undo and behaves as you would expect it to behave. In windows, it probably should 78
be Ctrl + Alt + C, but just in case double check. 79
And just go into the edit and then go to a Step Backwards and see what's the shortcut next to it. 80
Check your edges and make sure you didn't miss any spots. 81
Don't worry too much about the loose hair, just select the main line and then we will fix the hair later. 82
After you're done selecting, click Select and Mask, right here. 83
This is actually available on the newer Photoshop releases. 84
If your version doesn't have this, then look for Refine Edge. 85
It works almost the same way, but this new Select and Mask feature is more superior. 86
In here, we are going to clean up our selection, so we can get the perfect result. 87
Here is another important Photoshop tip. 88
Make sure you have a correct layer selected. 89
This is the layers panel, just like Figma. 90
If you have more than one layer, make sure to select the one with a photo on it. 91
OK. So in here by default the transparency is decreased. 92
It's a transparency of our background and everything we haven't selected. Sliding 93
this doesn't affect how our cut out will look like, it's a guide for us. 94
0% shows the original image. And full 100% hides everything we have not selected. 95
It's helpful to see if we've missed any details. 96
Let's increase it to 100%. 97
As you can see, there are some imperfections on her hair. 98
The pink background is passing through her hair. 99
Let's put her on a white background from here to better see the details 100
Change the opacity to 100% here as well. 101
This time, it says opacity instead of transparency, because the white background is on top of the original 102
background. So 100% opacity means it's 100% visible. 103
Don't worry about this too much. 104
The hair needs some fixing. 105
Also if we zoom in closely on her skin, the edges are jagged and unnatural. 106
This is not a good standard to use in any design. 107
Good design looks perfect, when it comes to small details like this. 108
No odd discolourations. And the cutout should look smooth and natural. Like 109
that's exactly the background she was taken on. 110
The ugliness of most cut-outs comes out from the edges. When edges aren't well-defined, it's noticeable. 111
It looks like as if someone actually took a real paper magazine and then with scissors cut out the model 112
from there. 113
Luckily, photoshop is absolutely incredible at fixing this. To fix the edges of our cut out, 114
we need to select a Refine Edge brush tool from here. 115
It's the second one. 116
Keep your mouse over it, for a second and it will tell you which one it is. Because these three looks quite 117
similar. 118
Just like we did with the other brush, size the brush from the options panel, or by using square brackets. 119
And slowly start brushing over the edges of her hair and look at this. 120
What is actually happening here is that we are telling Photoshop to look beyond the edges of our original 121
selection and see if there are any parts that look like they belong to our selection. And at the same 122
time to remove pixels that look like they are part of the background. 123
That's why that Pink has disappeared. 124
Using the opacity slider, check other parts that have been missed. In case you remove a little extra, just 125
like other tool, 126
press on Alt or Option. 127
You'll see it's a minus sign. 128
This will restore the original edge. And then brush it over again while you keep holding on the Alt key. 129
Don't worry, it's not going to subtract from the original selection. 130
It's basically undoing what we just added. 131
Her hair looks decent, but there is still some pink color falling on her edges. 132
We will remove this later. 133
Let's check the rest of her edges now. 134
We can of course go around on her entire body with this refined edge tool, but there is a quicker way 135
to do that. 136
On skin and parts that are quite simple and uniform, unlike hair. That's done through here. 137
Edge detection. It's the same concept as the Refine Edge tool. 138
With this, we can tell Photoshop to look beyond our selection and see if we have missed any parts. 139
It's in pixels, so 1 pixel means look 1 pixel after the selection and add any missing parts. 140
Pay attention to how the edge smoothens out as we increase. 141
2 pixels seem decent in this case. 142
Smart radius means, instead of using a uniform 2 pixel radius everywhere, it will use custom value depending 143
on the edge. It's useful if you are using large values, 144
but I like to fix odd edges manually with Refine Edge tool. 145
Sometimes you'll notice that you have some extra patches. Like this, when you were making the selection, 146
or you have actually missed some spots. Going back and fixing the selection after putting so much work 147
is going to be heartbreaking. 148
Luckily we can add or remove these spots, right here with the brush tool. 149
As usual, plus sign will add in any pixels you click on. You will feel this works a little different, 150
than the previous tools that we used. Other 2 tools, 151
they do calculations in places where you press. This one doesn't. It obeys to whatever you press. 152
And one final step 153
we need to make, is to remove that pink glare from her hair. 154
That can be done automatically from here. 155
Select Decontaminate Colors. Give it a moment. And voila. 156
Now most of the pink from her hair is gone. 157
What an amazing job it did. Do this step as very last. 158
Because if you have this selected, after every click you make, this will recalculate again and again. 159
Will make things much slower. 160
Although something funny happened here. 161
Let's see if we can fix it with a Refine Edge tool. 162
OK, gone. 163
I actually still chose a little tricky photo. 164
Ideally, choose a photo that has a white or grey plain backgrounds. Colored backgrounds do end up mixing 165
with the edges. 166
Alright, now let's Output our cutout. 167
We have a few options here. 168
The best is to choose New Layer with Layer Mask. 169
What this does, instead of cutting the whole thing out, it will copy the original photo and apply a mask 170
to it. 171
This mask will hide the background and everything we did. 172
This is the best option. Because if we notice something else and want to make any changes, we will be 173
able to. With a new layer option 174
we won't. The background will be gone forever. Inside the layers, 175
you will see also the original photo is still there. And it's below, but disabled so it's not visible. 176
Above is our copy with a mask applied to it. That black and white silhouette is a mask. 177
Okay. 178
So, final step is to save our file. First, 179
let's save this as a Photoshop file for any future edits. 180
The rest of the design we will be doing in Figma. The Photoshop file can't be imported in Figma, 181
So we have to use PNG file. PNG is the one that will keep the transparency of our cutout. 182
JPEG isn't going to work, because it will fill the background with white color. When we export this into 183
PNG, 184
any layer that is hidden, will not be included in the export. 185
So, you don't have to delete this layer. Just hide it. 186
Also, I would like to crop the extra space. Select the crop tool and drag the edges. 187
Go to file, Export and Quick Export as PNG. 188
Now we can place this image in Figma and pick any background we want. 189
And that's how you do cut outs in Photoshop.