In this video we're going to practice applying overlays to our images, so fire up your Figma 1
and let's get crack'n! In this Figma file, 2
I have prepared 3 frames. The content is all designed and ready. 3
Your task is, to find photos for each frame and apply image overlays, so the content is well visible. 4
Let me demonstrate the first one. 5
So we have this hero section. For a meditation app or something like that, 6
not sure exactly. I grabbed this content from random websites. 7
First, we need to find a photo. 8
So go to Unsplash.com. And let's try searching for meditation photos. 9
It doesn't need to be the exactly meditation, 10
you can search for whatever you think is suitable. So perhaps calm lakes, waters, 11
nature, sky. Basically soothing and calming images. When looking for photos we don't need to go too literally 12
and have the image describe everything in action. 13
More about techniques of finding photos later. 14
This photo works just fine for me. 15
You can use the same or something else, up to you. 16
All right. 17
Download from here. 18
And now let's place the image in Figma. You can drag the image directly in Figma, if you want 19
or you can use a Place Image option from here. 20
Select your file and then once you get this thumbnail on your cursor, click somewhere on the frame and 21
it will place the image. 22
The image has been inserted in its original dimensions, so it's super zoomed in. 23
Let's shrink it. Zoom out so we can see the handles of the image. And then just grab the handles to 24
reseize the photo. You'll see Figma doesn't distort the photo, if you shrink it weirdly. Which is really 25
nice. 26
You don't get this in most other design software, or any other software usually. 27
But this means some parts are being cropped. 28
If you don't want any of the parts to get cropped, then hold shift while you shrink the image that's going 29
to lock the aspect ratio. 30
Okay, now we need to send the image layer back, so it's behind the content. 31
Two options: either use a keyboard shortcut of Control or Command+a Square bracket. The left square 32
brackets sends it backward, and the right bracket brings it forward. 33
One little thing you might get stuck with: when you click on the image, 34
Figma selects the whole frame instead of the image, 35
so use Control or Command-click to select the photo directly. And second option, 36
Right-click the image then select Send to Back and that's going to put it behind in one single move. 37
Same goes here, you gotta select image first with a control-click and then press right-click. 38
Control+right click is not going to work. 39
I really got lucky with the image, 40
looks great, but as you can see, the content is very hard to read. 41
So let's apply our overlay. So select the image layer and under fill options, 42
add another fill, by clicking the + icon. 43
Make sure you have that image layer selected and not the frame, or it won't do the job. By default, it's going 44
to add this white gradient. 45
We need to change this. So click on that new fill and change Linear to Solid. 46
That's changing the fill from gradient to a regular solid fill. Move the handle on the color map, to make 47
the color black. And then start playing with the opacity control. How much transparency we need is 48
going to depend on the image itself. 49
Ideally, we want as transparent, as we can get, until the point when any of the content becomes hard to 50
read. 51
I think somewhere around 30% is working fine with this photo. And that's all you need to do for 52
each frame. 53
Now I'm going to show you the tinting option, so you can use it on one of the frames. 54
So first step in tinting, 55
we need to make the photo black and white. 56
This is super simple to do in Figma, just click on the image fill and decrease saturation all the 57
way down. 58
Remember from the color lessons? Saturation is the amount of hue in the color. 0% means the hue 59
is completely gone. 60
So no colors. 61
That's what's happening here. 62
The next step is to add a color tint. That's going to be added to that overlay fill. We will change black 63
color to something else. 64
You can play with opacity too, so you get the best result. 65
You can also adjust other content on the page, if they are not working well. For example, that sign up button 66
on top is too pale, so I'd increase the opacity a little bit. 67
Also on tinted overlays like that, 68
a common practice is to use brand colors. 69
That's where tinting really comes in play. 70
Otherwise, there is really no point and it's better to use the original photo with its vibrant colors. 71
For example, whatever the brand colors are, 72
we would use them as a tint and as a button color maybe. 73
If you need to move the content around on the page, on those frames, you can do that. Because sometimes 74
you have something on the background image that is sort of in interacting with the content, right? 75
So if you need to, let's say, take that content and make a center alignment, you can do that. 76
Or if you need to like shrink a line or make it bigger, or smaller, you can do that. 77
It's up to you. 78
Definitely. 79
Now, finish the job with other 2 frames. And submit your results of all the 3 frames in the assignment. 80
After this.