0
1
00:00:02,660 --> 00:00:06,420
Now I'm going to demonstrate how to cut out only a small part of an image.
1

2
00:00:06,520 --> 00:00:09,730
As always, the important part is choosing the right image.
2

3
00:00:09,740 --> 00:00:16,310
You can't do this with any photo. You can stick out ends of the object like table corners, hands, legs, heads,
3

4
00:00:16,640 --> 00:00:20,210
branches and so on. Any object that has a prominent tip.
4

5
00:00:22,990 --> 00:00:28,500
First step in this process is to define the container of the image, the frame in which it sits. Because you're
5

6
00:00:28,510 --> 00:00:30,670
sticking something out of that frame.
6

7
00:00:30,670 --> 00:00:35,860
If you're going to use the photo as a full background photo, then edges off your frame are actually not
7

8
00:00:35,860 --> 00:00:36,670
visible.
8

9
00:00:36,700 --> 00:00:38,310
You can't stick anything out.
9

10
00:00:38,380 --> 00:00:43,560
I'm going to work on this image in this tutorial. I have linked the same image so you can follow along.
10

11
00:00:43,660 --> 00:00:45,970
We can easily stick out the ear of the dog.
11

12
00:00:45,970 --> 00:00:48,760
That means our frame has to have a top border.
12

13
00:00:48,760 --> 00:00:52,710
If you stretches from top to bottom of the screen, then this image won't work at all.
13

14
00:00:52,930 --> 00:00:58,690
But if I use a frame like a circle, for example, then I can stick the ear out without a problem.
14

15
00:00:58,930 --> 00:01:00,550
So let's frame the photo first.
15

16
00:01:03,270 --> 00:01:05,920
Just like we do in Figma, we're going to create a mask.
16

17
00:01:05,970 --> 00:01:11,100
We're going to use the same masking tool as we did previously in the cut out method. But this time instead
17

18
00:01:11,100 --> 00:01:14,570
of selecting the dog from the background, we're going to select a circle
18

19
00:01:14,570 --> 00:01:20,300
part of that dog. In the Marquee Tool, right-click on it and select the Elliptical Marquee Tool.
19

20
00:01:20,310 --> 00:01:25,410
This is, in other words, select tool. I don't even know what marquee means. Now by dragging select the
20

21
00:01:25,410 --> 00:01:31,080
face of the dog. Hold shift while you do this, so you can draw a perfect circle. To get a better handle
21

22
00:01:31,090 --> 00:01:34,320
you can press on space bar to move the selection around.
22

23
00:01:34,420 --> 00:01:36,180
You don't need to get this perfectly right now.
23

24
00:01:36,200 --> 00:01:40,740
We can always resize and reposition the image of the dog later. As we did last time,
24

25
00:01:40,740 --> 00:01:42,820
click Select and Mask up here.
25

26
00:01:42,870 --> 00:01:47,970
You're already familiar with this mask editor, but we're not going to edit here anything actually, because
26

27
00:01:47,970 --> 00:01:49,680
we need a perfect circle mask.
27

28
00:01:49,740 --> 00:01:54,930
So right away go to Output options and select New Layer with Layer Mask, like we did last time.
28

29
00:01:57,110 --> 00:02:00,240
There, now we have the same arrangement as in the cutout method.
29

30
00:02:02,980 --> 00:02:08,500
If you need to reposition or rescale the image inside, we can do that similarly, like we do in Figma.
30

31
00:02:08,830 --> 00:02:10,630
Select the move tool first.
31

32
00:02:11,930 --> 00:02:18,140
By default, mask group is locked. So you can't move the image separately. It's moving an entire group. To
32

33
00:02:18,140 --> 00:02:22,830
move just the image, or just the mask, click on this link icon here.
33

34
00:02:23,030 --> 00:02:28,130
It will unlink the image from the mask and now you can move them separately, by selecting either the
34

35
00:02:28,130 --> 00:02:30,560
image or the mask from the layers list.
35

36
00:02:33,920 --> 00:02:38,900
You'll notice that mask and Photoshop is a defined space. As it was defined originally.
36

37
00:02:38,990 --> 00:02:41,660
That's why we have these extra bits showing here.
37

38
00:02:41,660 --> 00:02:46,400
If you end up with these extra bits after moving your image around, you can just crop this out with a
38

39
00:02:46,400 --> 00:02:56,750
crop tool.
39

40
00:02:56,930 --> 00:03:00,740
By the way, Photoshop has this very handy tool called History panel.
40

41
00:03:00,740 --> 00:03:05,930
Instead of undoing on and on, you can go directly to the step, that you want to undo.
41

42
00:03:05,930 --> 00:03:09,300
I love this history tool in Photoshop, makes undoing much easier.
42

43
00:03:12,590 --> 00:03:15,220
OK, so repositioning image inside is easy.
43

44
00:03:15,230 --> 00:03:21,320
Just drag the image around. But to rescale the image, select the image layer and then go to Edit and
44

45
00:03:21,320 --> 00:03:26,600
Free Transform
45

46
00:03:26,610 --> 00:03:29,690
Now you can grab the handles and resize it as you wish.
46

47
00:03:29,760 --> 00:03:33,110
Hold Shift to lock the ratio. Here, in my head,
47

48
00:03:33,120 --> 00:03:37,530
I'm imagining what parts I'm going to stick out, so I can position the image properly.
48

49
00:03:50,130 --> 00:03:53,480
Now that we have prepared our mainframe in which our image sits,
49

50
00:03:53,580 --> 00:03:56,580
we can now stick that ear out of it. To do this,
50

51
00:03:56,580 --> 00:04:03,090
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

52
00:04:03,090 --> 00:04:04,490
this existing layer.
52

53
00:04:04,560 --> 00:04:07,490
So, right-click on this mass group and duplicate the layer.
53

54
00:04:12,500 --> 00:04:18,800
Now right-click on the Mask itself, not the entire layer but just the Mask. And click delete layer mask.
54

55
00:04:19,930 --> 00:04:22,410
Now we have the full image on top of it.
55

56
00:04:25,240 --> 00:04:30,820
If we cut out a chunk of the ear from this full image and remove the rest, we will get the exact stick
56

57
00:04:30,820 --> 00:04:31,060
out
57

58
00:04:31,070 --> 00:04:37,140
effect we want. To do so, we do the usual cut out method, just like we did in the previous lesson.
58

59
00:04:37,180 --> 00:04:38,760
Grab a quick selection tool,
59

60
00:04:42,220 --> 00:04:44,670
set the right brush from the options from here.
60

61
00:04:44,680 --> 00:04:50,350
Make sure you have selected the brush with the plus sign, not the minus. Set the hardness to 100%.
61

62
00:04:50,440 --> 00:04:53,110
And set the right size so you can select that ear easily.
62

63
00:04:59,940 --> 00:05:04,140
Turn the opacity down to see the edge of the frame and select accordingly.
63

64
00:05:14,790 --> 00:05:19,460
You can select more of the image on the bottom, because it's not going to do us harm.
64

65
00:05:19,500 --> 00:05:24,240
It's just going to be sitting on top of the existing photo anyways. That looks good,
65

66
00:05:24,240 --> 00:05:33,680
now click Select and Mask.
66

67
00:05:33,750 --> 00:05:35,810
We are seeing both of the layers here.
67

68
00:05:35,900 --> 00:05:37,900
Our frame layer and just the ear layer.
68

69
00:05:38,270 --> 00:05:42,440
Let's change the background to white, for now, so we can refine the edge of the ear.
69

70
00:05:46,020 --> 00:05:50,210
Remember how to refine the edges? Select the Refine Edge Tool and go over the edges.
70

71
00:05:50,220 --> 00:05:57,960
So it adds in any missing hair or any other missing pixels. As I mentioned before, with this tool we are
71

72
00:05:57,960 --> 00:06:02,450
telling Photoshop to look beyond our selection and detect any missing pixels.
72

73
00:06:02,460 --> 00:06:12,950
You don't have to refine the base of the ear, it will merge perfectly with the background image.
73

74
00:06:12,990 --> 00:06:18,740
Now go to output settings and select New layer with layer mask. And hit
74

75
00:06:18,740 --> 00:06:21,410
OK. There.
75

76
00:06:21,430 --> 00:06:28,150
That's our ear sticking out. Let's put a white background on this, so we can see the results better.
76

77
00:06:28,240 --> 00:06:29,260
Create new layer.
77

78
00:06:32,330 --> 00:06:34,920
And click the New Fill icon here.
78

79
00:06:34,920 --> 00:06:37,050
Select solid color and choose white.
79

80
00:06:43,100 --> 00:06:44,940
Now drag that layer below everything.
80

81
00:07:04,610 --> 00:07:07,800
If you're going to use a different color in your actual designs,
81

82
00:07:07,850 --> 00:07:13,730
you can double click on the fill and change the color, so you can visualize this right here in Photoshop
82

83
00:07:13,740 --> 00:07:16,010
before you export the final result.
83

84
00:07:16,010 --> 00:07:20,960
For example, when I put this on a dark color, we can notice that there is some extra glare behind the
84

85
00:07:20,960 --> 00:07:21,710
ear.
85

86
00:07:21,710 --> 00:07:26,410
Too bad I didn't check this when refining the selection. But we can still do some work on this.
86

87
00:07:26,540 --> 00:07:30,320
Even after the mask has been applied. The mask is still editable.
87

88
00:07:30,350 --> 00:07:36,470
If we zoom in, on the mask layer, you'll see we have black and white parts. The white parts are visible
88

89
00:07:36,470 --> 00:07:39,200
part of the mask. And black parts are hidden part.
89

90
00:07:39,230 --> 00:07:42,140
That's why the white part has a shape of the ear.
90

91
00:07:42,170 --> 00:07:46,070
If we paint white on this mask, we will show more of the image.
91

92
00:07:46,070 --> 00:07:46,790
Let me demonstrate.
92

93
00:07:50,390 --> 00:07:53,970
If I select a regular brush tool and draw on it with white paint,
93

94
00:07:54,020 --> 00:07:55,760
it's going to show more of the image.
94

95
00:08:02,440 --> 00:08:06,550
And if I draw with a black paint on it, it will hide whatever is already visible.
95

96
00:08:13,050 --> 00:08:15,090
To switch between white and black brush,
96

97
00:08:15,090 --> 00:08:18,640
click on this arrow icon on top of these black and white boxes.
97

98
00:08:18,720 --> 00:08:26,140
Whatever is on top, is the current color of the brush.
98

99
00:08:26,150 --> 00:08:27,320
There is also a shortcut.
99

100
00:08:27,320 --> 00:08:30,860
You can hit X on your keyboard and that will switch between the two.
100

101
00:08:34,180 --> 00:08:37,470
Okay, now we can remove the extra glare from behind the ear.
101

102
00:08:37,480 --> 00:08:42,760
I'm going to adjust the brush to make it smooth and feathery, so I don't create any hard edges.
102

103
00:08:42,790 --> 00:08:48,110
In this case, I'm going to decrease the hardness completely and even decrease the opacity to 50%.
103

104
00:08:48,130 --> 00:08:52,360
This way I will brush over the parts and in a smooth and controlled manner.
104

105
00:09:20,130 --> 00:09:21,480
And that's a better result.
105

106
00:09:21,490 --> 00:09:24,750
It might not be ideal on a black background, but works quite well.
106

107
00:09:24,760 --> 00:09:27,240
Best to refine this during the masking face.
107

108
00:09:27,250 --> 00:09:29,710
And don't forget to check the view on the black background,
108

109
00:09:29,710 --> 00:09:32,440
if you plan on using it on dark backgrounds.
109

110
00:09:35,270 --> 00:09:39,860
The last step is to export the image. We're going to export in PNG with a transparent background.
110

111
00:09:39,860 --> 00:09:42,640
That way you have more freedom to choose background directly
111

112
00:09:42,650 --> 00:09:47,690
in Figma during actual design process. Hide the background. Crop out any extra space.
112

113
00:09:59,600 --> 00:10:01,320
And under File,
113

114
00:10:01,330 --> 00:10:03,080
Export click Quick export as PNG.
114

115
00:10:07,720 --> 00:10:08,340
And there you have it.
115

116
00:10:08,350 --> 00:10:11,920
This can be now important inside Figma and used on different backgrounds.