Splicemedia.com cover media startups in Asia. Most of their content is probably interviews and originals that talk about product and business of media. The topic does not lend itself well to good cover images.

splicemedia solved this issue by treating its cover images.

A particular shade of pink is their brand colour. It is unique and stands out. They have gone ahead and owned it fully. To mask the average quality of cover images, they are overlaying their cover images with gradient.

We tried replicating their gradient effect in Figma.com and it was not as straight forward as linear gradient.

Step 1: Create a Frame and put your image in it

Create a Frame in Figma.

In the left sidebar, Figma shows you show the final image is layered.

Within this Frame, drag and drop your cover image.

You can see in the left sidebar that the image is inside the frame.

Step 2: Make your cover image black and white

To make the image black and white, double click on the image. The window to your right will open. Then pull the Saturation slider towards the left most end. This will make the image black and white.

Step 3: Apply gradient layer 1

Next, we created a rectangle of the same size and built our first linear gradient on it. Notice in the left sidebar how the Rectangle 3 is outside Frame 1.

Drag and overlay Rectangle 3 inside Frame 1. Ensure it is on top of the original image.

Step 4: Apply gradient layer 2

Next, we created another rectangle of the same height and width and created another gradient within it.

Drag and drop the Rectangle 4 inside Frame 1 on top of all other layers.

Step 5: Export

That’s it. Click on Frame 1 and then scroll down in the right sidebar and press Export to save the new cover image.

That’s it.