[Case] How Splice makes cover images look consistent | The Humane Club Made with Humane Club
Hi 👋 I'm Dhara, the founder of Humane Club. We are now selectively onboarding.
Software & training to maintain your web presence
Humane replaces workarounds, messy plugins, and daily frustrations with built-in workflows, effortless organization, and clever features that levels-up WordPress in meaningful ways. Also, get insights on how to write copy and run your site.
Start a conversation
Contact Us
Start a conversation
Humane replaces workarounds, messy plugins, and daily frustrations with built-in workflows, effortless organization, and clever features that levels-up WordPress in meaningful ways. Also, get insights on how to write copy and run your site.

[Case] How Splice makes cover images look consistent

Published May 29, 2020
Updated Jun 05, 2021

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.

Screenshot from splicemedia.com

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.

Email me at dhara.shah@pykih.com to get the Figma template

By
Published
Updated