0
1
00:00:00,240 --> 00:00:03,740
Let's do a fun exercise on sampling colors from images.
1

2
00:00:03,780 --> 00:00:06,410
I've prepared the Figma file for this assignment.
2

3
00:00:06,420 --> 00:00:09,080
It has 3 frames with the same layout.
3

4
00:00:09,090 --> 00:00:14,350
This is a very common web layout, having a sort of split screen, 50% of the screen is image and
4

5
00:00:14,350 --> 00:00:16,740
then 50% is for the content.
5

6
00:00:16,740 --> 00:00:21,300
It's a very simple layout to make and can be quite effective and beautiful. And will be good for you
6

7
00:00:21,300 --> 00:00:24,590
to practice this layout as we practice our color sampling.
7

8
00:00:24,630 --> 00:00:27,810
There are 3 frames in this file. On 2 of them,
8

9
00:00:27,810 --> 00:00:30,840
I have prepared images for you.
9

10
00:00:30,840 --> 00:00:32,120
And 1 is empty.
10

11
00:00:32,130 --> 00:00:38,010
I want you to sample colors from these images for each frame and paint the left side of the frame with
11

12
00:00:38,010 --> 00:00:40,050
a color palette. On the empty one,
12

13
00:00:40,050 --> 00:00:41,700
I want you to pick your own photo.
13

14
00:00:41,730 --> 00:00:45,300
You might discover that not all photos are a good pick for the color palette.
14

15
00:00:45,300 --> 00:00:51,490
Also, I want you to use what you have learned so far and apply that to the left side of the frame. The
15

16
00:00:51,510 --> 00:00:55,650
hierarchy and every thing about the typography.
16

17
00:00:55,650 --> 00:00:57,000
Let me do one as a demonstration.
17

18
00:00:57,000 --> 00:00:58,770
I'm going to use an empty frame.
18

19
00:00:58,770 --> 00:01:06,870
First, let's go to Unsplash.com and find a good photo. Unsplash is a great source for free photos.
19

20
00:01:06,870 --> 00:01:14,120
They are free for commercial use, not just personal and they have a wide variety of different photos.
20

21
00:01:14,210 --> 00:01:15,480
They're not very...
21

22
00:01:15,570 --> 00:01:20,670
They don't look like stock, so they're quite natural and nice looking. Although because they're free in
22

23
00:01:20,700 --> 00:01:26,810
designs they are used a lot. But more about the photography later.
23

24
00:01:26,820 --> 00:01:28,590
All right so I love mountains,
24

25
00:01:28,710 --> 00:01:39,480
so I'm going to pick a nice photo with a mountain view.
25

26
00:01:39,500 --> 00:01:40,920
This one is a good choice.
26

27
00:01:40,940 --> 00:01:49,740
It has a lot of colors in it, so will be fun to work with.
27

28
00:01:49,830 --> 00:01:56,970
First, I'm going to create a placeholder for the image. I'm going to draw a rectangle. To make this exactly
28

29
00:01:56,970 --> 00:01:58,410
half of the frame.
29

30
00:01:58,440 --> 00:02:04,580
Let's check the size of our frame, it's 1152 pixels.
30

31
00:02:04,590 --> 00:02:07,600
And now, I'll make the rectangle the half of that size.
31

32
00:02:07,750 --> 00:02:08,920
Here's a cool Figma trick.
32

33
00:02:09,000 --> 00:02:17,400
I'm going to type in 1152 divided by 2 and then hit Enter. And Figma will do the math for me.
33

34
00:02:17,400 --> 00:02:19,210
It's exactly the half of the frame.
34

35
00:02:19,230 --> 00:02:23,040
Now, I'm going to place my image. You can directly drag your image in Figma
35

36
00:02:23,070 --> 00:02:26,370
or you can choose Place Image option from the shape tool.
36

37
00:02:26,370 --> 00:02:31,320
Here are a few things to look out for when working with the images in Figma. The photos that you get from
37

38
00:02:31,320 --> 00:02:34,450
Unsplash or other stock sites will be quite large in size.
38

39
00:02:34,560 --> 00:02:39,810
So give it a little time for a Figma to think, because it's uploading the image to its servers before
39

40
00:02:39,810 --> 00:02:44,490
you can place it. The image will be placed in its original dimensions since this image is very large
40

41
00:02:44,490 --> 00:02:49,980
it looks super zoomed in, like this. But because it's part of the frame only this is visible. As it's
41

42
00:02:49,980 --> 00:02:56,580
huge, we need to resize it. When you select an image, that is filling the entire space of the frame, instead
42

43
00:02:56,580 --> 00:03:00,170
of selecting that image layer, it selects the entire frame.
43

44
00:03:00,270 --> 00:03:04,560
I find this a little annoying, but it's not a big deal. To select a photo layer,
44

45
00:03:04,560 --> 00:03:07,170
the obvious option is to select it in the layers panel.
45

46
00:03:07,320 --> 00:03:12,590
But the better way is to click on the image while holding a Control (or Command) key.
46

47
00:03:12,780 --> 00:03:13,950
This a very handy trick.
47

48
00:03:13,950 --> 00:03:17,370
Keep it in mind. To resize the photo to some useful dimensions,
48

49
00:03:17,370 --> 00:03:20,960
let's zoom out, so we can see the borders of the image.
49

50
00:03:21,000 --> 00:03:21,960
You see those blue lines?
50

51
00:03:21,960 --> 00:03:23,390
Those are the borders of the image.
51

52
00:03:23,400 --> 00:03:25,980
The image is really big in comparison to the frame.
52

53
00:03:25,980 --> 00:03:29,010
That's why the borders are so far from the frame.
53

54
00:03:29,010 --> 00:03:35,470
We can grab the handles and resize our image. Hold SHIFT while you do this, to keep the proportions of
54

55
00:03:35,610 --> 00:03:40,630
the image. An image element in Figma is basically a clear rectangle with an image as the background fill.
55

56
00:03:40,650 --> 00:03:41,830
You don't have to hold the SHIFT,
56

57
00:03:41,850 --> 00:03:47,190
it's not going to disturb the image. But in this case, I want to see the original image so I can choose
57

58
00:03:47,190 --> 00:03:54,720
exactly what part of the image to display. If you place an image on a rectangle,
58

59
00:03:54,720 --> 00:03:59,580
it's going to become a fill of that rectangle instead of being an independent image.
59

60
00:04:08,110 --> 00:04:13,510
Since it's a background fill off the recktangle, you won't have a full control over what portions of the
60

61
00:04:13,510 --> 00:04:15,160
original image to show and where.
61

62
00:04:23,570 --> 00:04:28,440
One last thing to look out for when you place an image or anything for that matter.
62

63
00:04:28,460 --> 00:04:33,940
Make sure that that layer lives on that frame you are working on. Because besides that frame it may
63

64
00:04:33,940 --> 00:04:36,860
be accidentally placed on other frames that are close by.
64

65
00:04:41,660 --> 00:04:45,320
Or it can be placed on the canvas independent of all the frames.
65

66
00:04:45,320 --> 00:04:49,640
If it's not on your frame, it will not behave the way you expect it to, it might drive you crazy until
66

67
00:04:49,640 --> 00:04:50,740
you figure this out.
67

68
00:04:50,750 --> 00:04:55,130
This is why I want to cover all the possible ways, that something might go wrong and not behave the way
68

69
00:04:55,130 --> 00:04:55,850
you expect it.
69

70
00:04:56,210 --> 00:05:02,090
This is usually, what causes the biggest frustration in learning anything new. Not understanding why something
70

71
00:05:02,090 --> 00:05:04,010
isn't behaving the way it's supposed to.
71

72
00:05:04,010 --> 00:05:09,170
So if it's acting weird, have a look at the layers panel and make sure it's on your frame. To drag
72

73
00:05:09,170 --> 00:05:15,290
it on the frame, your cursor, the mouse has to be on the frame overlapping the frame. Then it's kind of,
73

74
00:05:15,290 --> 00:05:21,060
drag it inside, and if it's kinda goes outside of the frame, then it's going to drag it outside of the
74

75
00:05:21,530 --> 00:05:23,890
frame and putting on the canvas or somewhere else.
75

76
00:05:23,900 --> 00:05:29,030
All right after we have placed our image, we want it to show only on that grey place holder that we
76

77
00:05:29,030 --> 00:05:35,210
have already set up. This is best done with a feature called Masking. This is a cool feature that has a lot
77

78
00:05:35,210 --> 00:05:41,120
of other uses too. Masking works like this: you have a shape that is a mask and anything that is on top
78

79
00:05:41,120 --> 00:05:44,720
of that shape will be visible only within boundaries of that mask.
79

80
00:05:44,720 --> 00:05:51,050
In our case, we'll use this rectangle as a mask and we will use our image as a child of this mask.
80

81
00:05:51,050 --> 00:05:57,260
This will hide portions of the image that is outside of this rectangle. To apply a mask to an object,
81

82
00:05:57,290 --> 00:06:03,470
we need at least 2 elements. Select the layers. Once you select, these options will appear in the tool
82

83
00:06:03,470 --> 00:06:04,070
box.
83

84
00:06:04,070 --> 00:06:07,980
This one that looks like a moon is the masking tool. Click on it.
84

85
00:06:08,150 --> 00:06:10,080
Let's see what happened to our layers.
85

86
00:06:10,090 --> 00:06:13,880
Figma took our selection and created a new group out of it. Within the group
86

87
00:06:13,890 --> 00:06:16,510
the rectangle has turned into our mask.
87

88
00:06:16,520 --> 00:06:21,860
This arrow means, that everything that we've placed above the mask inside this group, will only be visible
88

89
00:06:22,220 --> 00:06:23,840
within the boundaries of the mask.
89

90
00:06:23,840 --> 00:06:25,400
For example, let's make a circle.
90

91
00:06:25,400 --> 00:06:27,350
If we drag this circle inside the mask group,
91

92
00:06:27,380 --> 00:06:28,130
this will happen.
92

93
00:06:31,190 --> 00:06:34,850
Keep this in mind when some layer you're looking for disappears out of nowhere.
93

94
00:06:34,850 --> 00:06:37,340
It might be "hiding behind the mask".
94

95
00:06:37,430 --> 00:06:41,630
Get it? For a mask to work, the rectangle has to be behind your photo.
95

96
00:06:46,910 --> 00:06:48,610
If it's in front, and you mask it,
96

97
00:06:48,620 --> 00:06:49,310
this will happen.
97

98
00:06:52,590 --> 00:06:53,530
Look at the layers panel.
98

99
00:06:53,540 --> 00:06:59,670
It shows that the image has turned into a mask. And the rectangle above it is being masked around it.
99

100
00:06:59,700 --> 00:07:05,940
That's not what we want obviously. To disable masking from something: select the layer, that is being used
100

101
00:07:05,940 --> 00:07:10,170
as a mask, and click that mask icon one more time.
101

102
00:07:10,200 --> 00:07:12,110
It shows that mask is applied to it,
102

103
00:07:12,140 --> 00:07:16,590
So deselect it. Now it's back to normal.
103

104
00:07:16,660 --> 00:07:17,820
OK, back to our image.
104

105
00:07:17,860 --> 00:07:23,190
I want to size it to my liking and show the parts that I feel are the best.
105

106
00:07:23,380 --> 00:07:28,840
Basically to crop the image. Keep in mind, if you select the mask group, it will select the whole thing and
106

107
00:07:28,840 --> 00:07:29,830
moving it around,
107

108
00:07:29,830 --> 00:07:34,720
will just move the whole thing. To position your image perfectly you will need to select directly the
108

109
00:07:34,720 --> 00:07:40,690
image layer from the layers panel, or as I previously mentioned with Control+Click (or Command on Mac).
109

110
00:07:48,760 --> 00:07:49,210
Excellent.
110

111
00:07:49,210 --> 00:07:53,190
Our image is ready, now I'm going to style my text a little.
111

112
00:07:53,200 --> 00:07:56,040
You can place your own text in the headline when you pick your image.
112

113
00:07:56,050 --> 00:07:57,760
You don't have to worry about the paragraph.
113

114
00:07:57,760 --> 00:08:01,280
I've used a dummy text the – infamous Lorem Ipsum.
114

115
00:08:01,330 --> 00:08:03,280
I already have the fonts in mind,
115

116
00:08:03,280 --> 00:08:08,890
I'm not choosing them based on images, but you can if you'd like to. The PlayFair Display is a beautiful
116

117
00:08:08,890 --> 00:08:12,700
typeface in modern serif style. Gives a lot of class to the page.
117

118
00:08:12,820 --> 00:08:17,530
And Lato is an excellent sans serif type for any general kind of use.
118

119
00:08:27,930 --> 00:08:30,310
Alright, now that we have prepared our frame,
119

120
00:08:30,430 --> 00:08:35,080
we can start sampling our color palette. To sample a color from our image,
120

121
00:08:35,080 --> 00:08:37,060
first we need to blur our image.
121

122
00:08:37,060 --> 00:08:44,290
What this does, is that it averages out the adjecent pixels and gives you a more accurate color palette.
122

123
00:08:44,680 --> 00:08:46,870
Close to what our eyes are perceiving.
123

124
00:08:46,870 --> 00:08:54,490
Because we don't actually see those independent pixels, in real life we see an average all, with its shadows
124

125
00:08:54,520 --> 00:08:57,010
and gradients and all that.
125

126
00:08:57,010 --> 00:09:03,600
The color picker tool on a computer is super precise, so it grabs the color of individual pixels. And
126

127
00:09:03,670 --> 00:09:08,030
individual pixel is not the most accurate representation of the overall picture.
127

128
00:09:08,050 --> 00:09:12,830
Select the image, or the entire Mask Group. In the properties panel you will see Effects option. Add a new
128

129
00:09:13,030 --> 00:09:17,640
Effect by clicking the plus icon. By default, this will add a drop shadow.
129

130
00:09:17,650 --> 00:09:22,540
Click on the dropdown to see other effect types and select Layer Blur. By default
130

131
00:09:22,540 --> 00:09:24,160
this is usually not enough blurred.
131

132
00:09:24,160 --> 00:09:30,400
We need a bit heavier. To increase the blur, click on the Sun icon. And then start increasing, and stop
132

133
00:09:30,400 --> 00:09:32,410
before color start to mix too much.
133

134
00:09:35,320 --> 00:09:40,780
24 is pretty good in this case. Although this isn't an exact science. Sometimes you will need much less
134

135
00:09:40,780 --> 00:09:46,150
blur, sometimes more. Especially if you want to sample a color from something small like a blue eyes, red
135

136
00:09:46,150 --> 00:09:50,320
lipstick then you will need smaller blur value, otherwise, the color will mix too much.
136

137
00:09:50,320 --> 00:09:52,960
Notice how the color palette is very noticeable.
137

138
00:09:52,960 --> 00:09:58,870
We have the blue, this light brown colors and the dark brown. Figma can pick out these colors for us
138

139
00:09:58,870 --> 00:10:00,520
with an eyedropper tool.
139

140
00:10:00,550 --> 00:10:06,150
Draw a rectangle and then click on this field, to change the color of the rectangle.
140

141
00:10:06,250 --> 00:10:12,340
Then select the Eyedropper tool. As you hover over the image, it will pick the color from that exact
141

142
00:10:12,340 --> 00:10:15,340
pixel and paint the rectangle in that color.
142

143
00:10:15,340 --> 00:10:17,770
Repeat the process for all the other colors.
143

144
00:10:17,770 --> 00:10:23,050
How many colors you will pick, will depend on the image and on you. You want to pick the dominant colors.
144

145
00:10:23,050 --> 00:10:28,660
Those that are undeniably visible and make up the most of the image. And any smaller colors that are
145

146
00:10:28,660 --> 00:10:32,770
quite prominent. Include some neutral tones as well, like greys.
146

147
00:10:52,510 --> 00:10:58,330
Now that we have our color palette, disable the blur effect on the image and start painting the left
147

148
00:10:58,330 --> 00:11:02,620
side content in these colors, and see what works and what doesn't.
148

149
00:11:02,620 --> 00:11:06,040
Let's add another rectangle on the left side as our background fill.
149

150
00:11:06,070 --> 00:11:10,350
Remember why is this covering our elements? Because the layer is higher in the list.
150

151
00:11:10,360 --> 00:11:13,880
Just move it down below, so it's arranged as a background.
151

152
00:11:13,930 --> 00:11:17,730
If you select Send Backward instead, that will send it one layer at a time.
152

153
00:11:22,160 --> 00:11:23,900
Now, let's try some background colors.
153

154
00:11:27,050 --> 00:11:28,460
Let's try these neutral colors.
154

155
00:11:35,640 --> 00:11:38,550
And let's see the color that goes the best with this dark brown.
155

156
00:11:41,930 --> 00:11:46,010
The blue does contrast very well, and it can be useful for some exciting design.
156

157
00:11:51,280 --> 00:11:53,450
This bright sandy color is not bad either.
157

158
00:11:54,990 --> 00:12:00,930
There, I think this one is the best. I'm really bad at color names, so I usually look it up on color sites.
158

159
00:12:00,930 --> 00:12:03,890
This one is called Tumbleweed. As for a paragraph,
159

160
00:12:03,900 --> 00:12:09,480
I can pick white color. Although, it's popping too much and competing for the attention with the headline.
160

161
00:12:09,480 --> 00:12:15,150
In such cases, what I do is that I decrease the opacity of the white text to around 80%.
161

162
00:12:15,180 --> 00:12:21,900
This will decrease the intensity of all of that white color and also the background color will permeate
162

163
00:12:21,930 --> 00:12:27,660
a little, since it has some transparency. And that will suit the background quite handsomely.
163

164
00:12:27,660 --> 00:12:32,640
We can also try that same tumbleweed on the text, which is not a bad result at all.
164

165
00:12:35,810 --> 00:12:37,640
Although I would never do something like this.
165

166
00:12:41,890 --> 00:12:47,260
That just creates a mess out of colors instead of intentional and natural-looking color combinations.
166

167
00:12:47,260 --> 00:12:49,620
Let's check other color backgrounds.
167

168
00:12:54,700 --> 00:12:55,000
Oh yeah.
168

169
00:12:55,010 --> 00:12:56,350
This looks gorgeous as well.
169

170
00:13:05,070 --> 00:13:05,490
OK.
170

171
00:13:05,520 --> 00:13:10,500
So this one feels the most organic to me. And lets the beauty of the landscape really stand out.
171

172
00:13:10,800 --> 00:13:13,740
Plus the color is quite suitable for outdoorsy theme.
172

173
00:13:13,770 --> 00:13:18,360
All right, very fun exercise to get you started with colors and play around with them. After you
173

174
00:13:18,360 --> 00:13:20,700
submit your work in the assignments.
174

175
00:13:20,700 --> 00:13:24,630
After this, you'll find a link to a file that has a solution to it.
175

176
00:13:24,840 --> 00:13:30,960
Don't worry if the solution isn't exactly same as yours, there isn't just one solution to this exercise.