Now I'm going to demonstrate how to cut out only a small part of an image. 1
As always, the important part is choosing the right image. 2
You can't do this with any photo. You can stick out ends of the object like table corners, hands, legs, heads, 3
branches and so on. Any object that has a prominent tip. 4
First step in this process is to define the container of the image, the frame in which it sits. Because you're 5
sticking something out of that frame. 6
If you're going to use the photo as a full background photo, then edges off your frame are actually not 7
visible. 8
You can't stick anything out. 9
I'm going to work on this image in this tutorial. I have linked the same image so you can follow along. 10
We can easily stick out the ear of the dog. 11
That means our frame has to have a top border. 12
If you stretches from top to bottom of the screen, then this image won't work at all. 13
But if I use a frame like a circle, for example, then I can stick the ear out without a problem. 14
So let's frame the photo first. 15
Just like we do in Figma, we're going to create a mask. 16
We're going to use the same masking tool as we did previously in the cut out method. But this time instead 17
of selecting the dog from the background, we're going to select a circle 18
part of that dog. In the Marquee Tool, right-click on it and select the Elliptical Marquee Tool. 19
This is, in other words, select tool. I don't even know what marquee means. Now by dragging select the 20
face of the dog. Hold shift while you do this, so you can draw a perfect circle. To get a better handle 21
you can press on space bar to move the selection around. 22
You don't need to get this perfectly right now. 23
We can always resize and reposition the image of the dog later. As we did last time, 24
click Select and Mask up here. 25
You're already familiar with this mask editor, but we're not going to edit here anything actually, because 26
we need a perfect circle mask. 27
So right away go to Output options and select New Layer with Layer Mask, like we did last time. 28
There, now we have the same arrangement as in the cutout method. 29
If you need to reposition or rescale the image inside, we can do that similarly, like we do in Figma. 30
Select the move tool first. 31
By default, mask group is locked. So you can't move the image separately. It's moving an entire group. To 32
move just the image, or just the mask, click on this link icon here. 33
It will unlink the image from the mask and now you can move them separately, by selecting either the 34
image or the mask from the layers list. 35
You'll notice that mask and Photoshop is a defined space. As it was defined originally. 36
That's why we have these extra bits showing here. 37
If you end up with these extra bits after moving your image around, you can just crop this out with a 38
crop tool. 39
By the way, Photoshop has this very handy tool called History panel. 40
Instead of undoing on and on, you can go directly to the step, that you want to undo. 41
I love this history tool in Photoshop, makes undoing much easier. 42
OK, so repositioning image inside is easy. 43
Just drag the image around. But to rescale the image, select the image layer and then go to Edit and 44
Free Transform 45
Now you can grab the handles and resize it as you wish. 46
Hold Shift to lock the ratio. Here, in my head, 47
I'm imagining what parts I'm going to stick out, so I can position the image properly. 48
Now that we have prepared our mainframe in which our image sits, 49
we can now stick that ear out of it. To do this, 50
we're going to basically cut out a piece of the dog's ear as a separate layer and place it on top of 51
this existing layer. 52
So, right-click on this mass group and duplicate the layer. 53
Now right-click on the Mask itself, not the entire layer but just the Mask. And click delete layer mask. 54
Now we have the full image on top of it. 55
If we cut out a chunk of the ear from this full image and remove the rest, we will get the exact stick 56
out 57
effect we want. To do so, we do the usual cut out method, just like we did in the previous lesson. 58
Grab a quick selection tool, 59
set the right brush from the options from here. 60
Make sure you have selected the brush with the plus sign, not the minus. Set the hardness to 100%. 61
And set the right size so you can select that ear easily. 62
Turn the opacity down to see the edge of the frame and select accordingly. 63
You can select more of the image on the bottom, because it's not going to do us harm. 64
It's just going to be sitting on top of the existing photo anyways. That looks good, 65
now click Select and Mask. 66
We are seeing both of the layers here. 67
Our frame layer and just the ear layer. 68
Let's change the background to white, for now, so we can refine the edge of the ear. 69
Remember how to refine the edges? Select the Refine Edge Tool and go over the edges. 70
So it adds in any missing hair or any other missing pixels. As I mentioned before, with this tool we are 71
telling Photoshop to look beyond our selection and detect any missing pixels. 72
You don't have to refine the base of the ear, it will merge perfectly with the background image. 73
Now go to output settings and select New layer with layer mask. And hit 74
OK. There. 75
That's our ear sticking out. Let's put a white background on this, so we can see the results better. 76
Create new layer. 77
And click the New Fill icon here. 78
Select solid color and choose white. 79
Now drag that layer below everything. 80
If you're going to use a different color in your actual designs, 81
you can double click on the fill and change the color, so you can visualize this right here in Photoshop 82
before you export the final result. 83
For example, when I put this on a dark color, we can notice that there is some extra glare behind the 84
ear. 85
Too bad I didn't check this when refining the selection. But we can still do some work on this. 86
Even after the mask has been applied. The mask is still editable. 87
If we zoom in, on the mask layer, you'll see we have black and white parts. The white parts are visible 88
part of the mask. And black parts are hidden part. 89
That's why the white part has a shape of the ear. 90
If we paint white on this mask, we will show more of the image. 91
Let me demonstrate. 92
If I select a regular brush tool and draw on it with white paint, 93
it's going to show more of the image. 94
And if I draw with a black paint on it, it will hide whatever is already visible. 95
To switch between white and black brush, 96
click on this arrow icon on top of these black and white boxes. 97
Whatever is on top, is the current color of the brush. 98
There is also a shortcut. 99
You can hit X on your keyboard and that will switch between the two. 100
Okay, now we can remove the extra glare from behind the ear. 101
I'm going to adjust the brush to make it smooth and feathery, so I don't create any hard edges. 102
In this case, I'm going to decrease the hardness completely and even decrease the opacity to 50%. 103
This way I will brush over the parts and in a smooth and controlled manner. 104
And that's a better result. 105
It might not be ideal on a black background, but works quite well. 106
Best to refine this during the masking face. 107
And don't forget to check the view on the black background, 108
if you plan on using it on dark backgrounds. 109
The last step is to export the image. We're going to export in PNG with a transparent background. 110
That way you have more freedom to choose background directly 111
in Figma during actual design process. Hide the background. Crop out any extra space. 112
And under File, 113
Export click Quick export as PNG. 114
And there you have it. 115
This can be now important inside Figma and used on different backgrounds.