Video Thumbnail Generator

Welcome to the WordPress video thumbnail generator. This tool is designed to help generate visuals for different types of video, audio, and event materials created by the WordPress community.

In this tool, you’ll find several branded templates, in a 16:9 aspect ratio. On the right you’ll see a quick view of all available visuals, including WP Briefing, Developer Hours, Online Workshops, and a generic one for WordPress events such as meetups.

What’s required to use the thumbnail generator

Top ↑

Video walkthrough

Video transcript

0:06 Hi.

0:06 This video is to show you step-by-step how the video thumbnail generator works.

0:12 If you don’t yet have a Figma account or if you’re not sure how to use Figma, there are some helpful resources linked from the intro page.

0:19 So let’s see how to generate the visuals to generate an image.

0:24 The first step is to decide which template works best for your video.

0:28 On the generator page you can see a preview of the four color palettes that each template has.

0:34 We have Pomegranate gradient, Light gradient, Blue, or Dark blue.

0:41 Most templates have text but some also have a main image and avatarAvatar An avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name. faces for speakers and guests.

0:49 The series templates were made for a very specific type of content and they only have one palette.

0:56 There is one template made for WordPress events that don’t have a brand identity or a way of creating special thumbnail images in general.

1:05 Try to avoid using templates that only have text.

1:08 Most index pages also show the video title next to the thumbnail images.

1:12 So showing the same text twice might not look good to start using a template.

1:18 You first need to pick the color, select the template.

1:21 And on the design panel on the right hand side, click on the dropdown to select one for the text.

1:28 And depending on the template, you can have one or multiple fields, click on the template and replace the text areas on the right side to replace the horizontal or vertical image.

2:00 Expand the Figma component by clicking on the arrow on the left-hand panel, click on the image layer itself and then on the right-hand side, click on image and replace it with one from your computer for the faces.

2:27 Some templates allow you to change how many you want to see.

2:30 So you can select the number you want.

2:32 While in other templates, you can hide the faces completely to replace an image.

2:42 Expand the Figma component on the left-hand panel and replace the image as in the previous step and finally select your template or multiple templates by keeping the shift key pressed and click on “Export.”

3:39 That’s it.

3:40 I hope this generator is useful if you have any questions or suggestions, drop them in the #design channel on SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

3:47 Thanks for watching.

Top ↑

Figma resources

If you’re new to Figma, we take a look at the learning resources listed below before diving in this file. If you’ve used Figma before, skip to the next section and learn how to generate your thumbnail images ✨

If you have any questions about using this file, don’t hesitate to ask in the #design channel in Slack.

Learn more about WordPress design in the Design Team Handbook and find out how to join the WordPress community Slack.

Top ↑

How to use the thumbnail generator

To use this generator, replace the sample info – text and images – in the templates you want to use. The generator then automatically updates the visuals ready to be exported.

Top ↑

Step 1: Determine which template best fits your needs

If your video is not part of one of an existing series – such as WP Briefing, Developer Hours, or Online Workshops – take a look at the set of templates displayed on the intro page and decide which you’d like to use.

Each of the general templates has four color palette variants: Pomegranate gradient, Light gradient, Blue, and Dark blue. You can apply your desired color variation while editing the template. Consider where your video will be submitted and select a template that makes the index page more dynamic in terms of color and text content. Also keep in mind that not all videos need to have the title included in the thumbnail.

Top ↑

Step 2: Replace the placeholder text and images

On the Generator page, select your desired template and replace the sample info with your own text and images:

Top ↑

Color palette

Color palette selector

In the design panel on the right, find the Color dropdown menu and select one of the four color palettes.

Top ↑

Text

Text field

In the design panel on the right, replace the sample text in your template.

Top ↑

Main Image

Selecting the Image Figma component

In the list of templates in the left column, click the image by expanding the arrow of its Figma component.

Selecting 'Image' in the Fill section of the design panel

In the design panel on the right, select “Image” in the Fill section.

'Choose image' button

Replace the image by placing your cursor over the image.

Top ↑

Faces (avatars):

Selecting the number of faces (avatars) from the dropdown menu

In the design panel on the right, select the number of faces (avatars) you want to display by selecting the quantity from the dropdown menu.

Selecting the Image Figma component

Next to the templates, click the image by expanding the arrow on the Figma component.

Selecting 'Image' in the Fill section of the design panel

In the design panel on the right, select “Image” in the Fill section.

Clicking 'Choose image' button

Replace the image by placing your cursor over the image.

Top ↑

Step 3: Export the visuals

Selected template with purple border around it

If the template you edited looks correct, select it and click the “Export” button in the design panel on the right.

Clicking 'Export Circle image' button

You can export several templates at once by selecting each, while keeping the shift key (⇧) pressed, and then clicking the “Export” button in the design panel on the right.

Last updated: