Let's do a fun exercise on sampling colors from images. 1
I've prepared the Figma file for this assignment. 2
It has 3 frames with the same layout. 3
This is a very common web layout, having a sort of split screen, 50% of the screen is image and 4
then 50% is for the content. 5
It's a very simple layout to make and can be quite effective and beautiful. And will be good for you 6
to practice this layout as we practice our color sampling. 7
There are 3 frames in this file. On 2 of them, 8
I have prepared images for you. 9
And 1 is empty. 10
I want you to sample colors from these images for each frame and paint the left side of the frame with 11
a color palette. On the empty one, 12
I want you to pick your own photo. 13
You might discover that not all photos are a good pick for the color palette. 14
Also, I want you to use what you have learned so far and apply that to the left side of the frame. The 15
hierarchy and every thing about the typography. 16
Let me do one as a demonstration. 17
I'm going to use an empty frame. 18
First, let's go to Unsplash.com and find a good photo. Unsplash is a great source for free photos. 19
They are free for commercial use, not just personal and they have a wide variety of different photos. 20
They're not very... 21
They don't look like stock, so they're quite natural and nice looking. Although because they're free in 22
designs they are used a lot. But more about the photography later. 23
All right so I love mountains, 24
so I'm going to pick a nice photo with a mountain view. 25
This one is a good choice. 26
It has a lot of colors in it, so will be fun to work with. 27
First, I'm going to create a placeholder for the image. I'm going to draw a rectangle. To make this exactly 28
half of the frame. 29
Let's check the size of our frame, it's 1152 pixels. 30
And now, I'll make the rectangle the half of that size. 31
Here's a cool Figma trick. 32
I'm going to type in 1152 divided by 2 and then hit Enter. And Figma will do the math for me. 33
It's exactly the half of the frame. 34
Now, I'm going to place my image. You can directly drag your image in Figma 35
or you can choose Place Image option from the shape tool. 36
Here are a few things to look out for when working with the images in Figma. The photos that you get from 37
Unsplash or other stock sites will be quite large in size. 38
So give it a little time for a Figma to think, because it's uploading the image to its servers before 39
you can place it. The image will be placed in its original dimensions since this image is very large 40
it looks super zoomed in, like this. But because it's part of the frame only this is visible. As it's 41
huge, we need to resize it. When you select an image, that is filling the entire space of the frame, instead 42
of selecting that image layer, it selects the entire frame. 43
I find this a little annoying, but it's not a big deal. To select a photo layer, 44
the obvious option is to select it in the layers panel. 45
But the better way is to click on the image while holding a Control (or Command) key. 46
This a very handy trick. 47
Keep it in mind. To resize the photo to some useful dimensions, 48
let's zoom out, so we can see the borders of the image. 49
You see those blue lines? 50
Those are the borders of the image. 51
The image is really big in comparison to the frame. 52
That's why the borders are so far from the frame. 53
We can grab the handles and resize our image. Hold SHIFT while you do this, to keep the proportions of 54
the image. An image element in Figma is basically a clear rectangle with an image as the background fill. 55
You don't have to hold the SHIFT, 56
it's not going to disturb the image. But in this case, I want to see the original image so I can choose 57
exactly what part of the image to display. If you place an image on a rectangle, 58
it's going to become a fill of that rectangle instead of being an independent image. 59
Since it's a background fill off the recktangle, you won't have a full control over what portions of the 60
original image to show and where. 61
One last thing to look out for when you place an image or anything for that matter. 62
Make sure that that layer lives on that frame you are working on. Because besides that frame it may 63
be accidentally placed on other frames that are close by. 64
Or it can be placed on the canvas independent of all the frames. 65
If it's not on your frame, it will not behave the way you expect it to, it might drive you crazy until 66
you figure this out. 67
This is why I want to cover all the possible ways, that something might go wrong and not behave the way 68
you expect it. 69
This is usually, what causes the biggest frustration in learning anything new. Not understanding why something 70
isn't behaving the way it's supposed to. 71
So if it's acting weird, have a look at the layers panel and make sure it's on your frame. To drag 72
it on the frame, your cursor, the mouse has to be on the frame overlapping the frame. Then it's kind of, 73
drag it inside, and if it's kinda goes outside of the frame, then it's going to drag it outside of the 74
frame and putting on the canvas or somewhere else. 75
All right after we have placed our image, we want it to show only on that grey place holder that we 76
have already set up. This is best done with a feature called Masking. This is a cool feature that has a lot 77
of other uses too. Masking works like this: you have a shape that is a mask and anything that is on top 78
of that shape will be visible only within boundaries of that mask. 79
In our case, we'll use this rectangle as a mask and we will use our image as a child of this mask. 80
This will hide portions of the image that is outside of this rectangle. To apply a mask to an object, 81
we need at least 2 elements. Select the layers. Once you select, these options will appear in the tool 82
box. 83
This one that looks like a moon is the masking tool. Click on it. 84
Let's see what happened to our layers. 85
Figma took our selection and created a new group out of it. Within the group 86
the rectangle has turned into our mask. 87
This arrow means, that everything that we've placed above the mask inside this group, will only be visible 88
within the boundaries of the mask. 89
For example, let's make a circle. 90
If we drag this circle inside the mask group, 91
this will happen. 92
Keep this in mind when some layer you're looking for disappears out of nowhere. 93
It might be "hiding behind the mask". 94
Get it? For a mask to work, the rectangle has to be behind your photo. 95
If it's in front, and you mask it, 96
this will happen. 97
Look at the layers panel. 98
It shows that the image has turned into a mask. And the rectangle above it is being masked around it. 99
That's not what we want obviously. To disable masking from something: select the layer, that is being used 100
as a mask, and click that mask icon one more time. 101
It shows that mask is applied to it, 102
So deselect it. Now it's back to normal. 103
OK, back to our image. 104
I want to size it to my liking and show the parts that I feel are the best. 105
Basically to crop the image. Keep in mind, if you select the mask group, it will select the whole thing and 106
moving it around, 107
will just move the whole thing. To position your image perfectly you will need to select directly the 108
image layer from the layers panel, or as I previously mentioned with Control+Click (or Command on Mac). 109
Excellent. 110
Our image is ready, now I'm going to style my text a little. 111
You can place your own text in the headline when you pick your image. 112
You don't have to worry about the paragraph. 113
I've used a dummy text the – infamous Lorem Ipsum. 114
I already have the fonts in mind, 115
I'm not choosing them based on images, but you can if you'd like to. The PlayFair Display is a beautiful 116
typeface in modern serif style. Gives a lot of class to the page. 117
And Lato is an excellent sans serif type for any general kind of use. 118
Alright, now that we have prepared our frame, 119
we can start sampling our color palette. To sample a color from our image, 120
first we need to blur our image. 121
What this does, is that it averages out the adjecent pixels and gives you a more accurate color palette. 122
Close to what our eyes are perceiving. 123
Because we don't actually see those independent pixels, in real life we see an average all, with its shadows 124
and gradients and all that. 125
The color picker tool on a computer is super precise, so it grabs the color of individual pixels. And 126
individual pixel is not the most accurate representation of the overall picture. 127
Select the image, or the entire Mask Group. In the properties panel you will see Effects option. Add a new 128
Effect by clicking the plus icon. By default, this will add a drop shadow. 129
Click on the dropdown to see other effect types and select Layer Blur. By default 130
this is usually not enough blurred. 131
We need a bit heavier. To increase the blur, click on the Sun icon. And then start increasing, and stop 132
before color start to mix too much. 133
24 is pretty good in this case. Although this isn't an exact science. Sometimes you will need much less 134
blur, sometimes more. Especially if you want to sample a color from something small like a blue eyes, red 135
lipstick then you will need smaller blur value, otherwise, the color will mix too much. 136
Notice how the color palette is very noticeable. 137
We have the blue, this light brown colors and the dark brown. Figma can pick out these colors for us 138
with an eyedropper tool. 139
Draw a rectangle and then click on this field, to change the color of the rectangle. 140
Then select the Eyedropper tool. As you hover over the image, it will pick the color from that exact 141
pixel and paint the rectangle in that color. 142
Repeat the process for all the other colors. 143
How many colors you will pick, will depend on the image and on you. You want to pick the dominant colors. 144
Those that are undeniably visible and make up the most of the image. And any smaller colors that are 145
quite prominent. Include some neutral tones as well, like greys. 146
Now that we have our color palette, disable the blur effect on the image and start painting the left 147
side content in these colors, and see what works and what doesn't. 148
Let's add another rectangle on the left side as our background fill. 149
Remember why is this covering our elements? Because the layer is higher in the list. 150
Just move it down below, so it's arranged as a background. 151
If you select Send Backward instead, that will send it one layer at a time. 152
Now, let's try some background colors. 153
Let's try these neutral colors. 154
And let's see the color that goes the best with this dark brown. 155
The blue does contrast very well, and it can be useful for some exciting design. 156
This bright sandy color is not bad either. 157
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
This one is called Tumbleweed. As for a paragraph, 159
I can pick white color. Although, it's popping too much and competing for the attention with the headline. 160
In such cases, what I do is that I decrease the opacity of the white text to around 80%. 161
This will decrease the intensity of all of that white color and also the background color will permeate 162
a little, since it has some transparency. And that will suit the background quite handsomely. 163
We can also try that same tumbleweed on the text, which is not a bad result at all. 164
Although I would never do something like this. 165
That just creates a mess out of colors instead of intentional and natural-looking color combinations. 166
Let's check other color backgrounds. 167
Oh yeah. 168
This looks gorgeous as well. 169
OK. 170
So this one feels the most organic to me. And lets the beauty of the landscape really stand out. 171
Plus the color is quite suitable for outdoorsy theme. 172
All right, very fun exercise to get you started with colors and play around with them. After you 173
submit your work in the assignments. 174
After this, you'll find a link to a file that has a solution to it. 175
Don't worry if the solution isn't exactly same as yours, there isn't just one solution to this exercise.