<!-- fivemad.com, Markdown source of https://fivemad.com/docs/tools/script-thumbnail-creator -->
> Source: https://fivemad.com/docs/tools/script-thumbnail-creator
> Section: Tools
> Tags: thumbnail, release image, forum.cfx.re, Tebex, YouTube
> Tool: https://fivemad.com/tools/script-thumbnail-creator
> Last updated: 2026-09-22
> Site map for assistants: https://fivemad.com/llms.txt

# Script Thumbnail Creator

Make release thumbnails for forum.cfx.re, YouTube, Discord, Tebex and GitHub from your screenshots: nine templates, eight sizes, PNG or JPG export.

The Script Thumbnail Creator builds preview images for a script release from your own in-game screenshots. You type the name, a one-liner, frameworks and price once, pick one of nine templates, and export the image for the forum.cfx.re releases page, a YouTube video, a Discord post, a Tebex package or a GitHub repo, one size at a time or all eight in a zip.

## What it is for

A release topic, a store page and a showcase video all want a different image size, and redoing the layout in an image editor for each one is slow. Here the layout is rebuilt for every size from the same project, so the square post is as tidy as the 16:9 one. It is meant for script developers who want a clean, readable thumbnail without opening Photoshop.

## Quick start

1. Drop one to four in-game screenshots anywhere on the editor, or paste one with <kbd>Ctrl</kbd> + <kbd>V</kbd>. The sample pictures of Los Santos are replaced by your own.
2. On the **Text** tab, type the **Script name**, the **One-liner**, pick the **Frameworks** and set the **Price**.
3. Pick a size in the row above the preview (Forum, Link preview, YouTube and so on) and a template under **Templates**.
4. Drag a screenshot in the preview to move it. Click the preview once, then scroll over a screenshot to zoom.
5. Open **Export** and press **Download PNG**, **Copy**, or **All sizes** for a zip.

Click any text in the preview to jump to its field. <kbd>Ctrl</kbd> + <kbd>Z</kbd> undoes, <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> (or <kbd>Ctrl</kbd> + <kbd>Y</kbd>) redoes.

## Sizes

The size row sets the output. Each size shows a short note under the preview about where it is used, and **Safe zones** (on by default) draws what the platform covers or crops. Safe zones only show in the preview, never in the export.

| Button | Name | Size | What to know |
| --- | --- | --- | --- |
| Forum | Cfx.re forum post | 1920 x 1080 | The first image of a release topic becomes its preview on the releases page. Posts show it at 690 px wide, the composer shrinks wider images to 1920 px and recompresses files over 512 KB. Upload limit 15 MB. |
| Link preview | Link preview (Open Graph) | 1200 x 630 | The `og:image` for your store, docs or GitHub Pages site. Compact cards crop the middle square. X rejects card images over 5 MB. |
| YouTube | YouTube thumbnail | 1280 x 720 | Seen at about 360 px on phones. The length badge covers the bottom right corner and the progress bar runs along the bottom. 2 MB limit. |
| Discord | Discord post image | 1600 x 900 | Shown at about 550 px wide with rounded corners. Free upload limit 10 MB. |
| Server banner | Discord server banner | 960 x 540 | Needs Boost level 2. The server name is drawn over the top quarter. |
| Tebex | Tebex package image | 1280 x 720 | What most FiveM store themes use for package cards. Grid cards may trim the edges; some older templates cap the height at 165 px. |
| GitHub | GitHub social preview | 1280 x 640 | Set it under Settings, Social preview. Must be under 1 MB. |
| Square | Square post | 1080 x 1080 | Instagram, X and store grids. Instagram profile grids crop to 3:4. |

## Templates

Every template is drawn with your current content in the gallery, so you can compare them before picking one.

| Template | Layout | Screenshots used |
| --- | --- | --- |
| Showcase | Screenshot full bleed, title on a dark fade | 1 |
| Split | Text column, tilted screenshots on the right | 2 |
| Collage | Two to four screenshots with a title card | 4 |
| Spotlight | One UI screenshot framed on a blur of itself | 1 |
| Type | Big type, spec row, screenshot as a strip | 1 |
| Panel | Tall crop for phone, tablet and menu NUIs | 1 |
| Bold | YouTube style: huge words, hard contrast | 1 |
| Announcement | Discord release card with a header row | 1 |
| Changelog | Update post: version up front, changes listed | 1 |

Not every template shows every field. When a field is not used by the current template, its label says **Not shown in** followed by the template name. For example, only Split, Panel and Changelog draw the **Features** list, and Bold only uses the title, frameworks, price, author and logo.

## Text tab

| Field | What it does | Limit |
| --- | --- | --- |
| Script name | The title. Wrap a word in `*stars*` to colour it with the accent. <kbd>Enter</kbd> starts a new line. Titles shrink to fit. | 120 characters |
| One-liner | What the script does, in one sentence | 200 |
| Label | A small tag like "New release" or "Update" | 40 |
| Version | For example `v1.0.0` | 20 |
| Frameworks | Toggle QBCore, Qbox, ESX, ox_lib, ox_inventory, Standalone, vRP, ND Core. Type another one (like RSG Core) and press **Add**. Chips show in the order you click them; chips that do not fit are left out. | 24 per custom chip |
| Features | Up to four short lines | 60 each |
| Price | **Hidden**, **Free**, **Paid** (with a price field such as `$19.99`) or **Open source** | 16 for the price |
| Author or brand | Your studio name | 40 |
| Logo | **Upload** a PNG, JPG, WebP or SVG. A transparent PNG works best. | |

Framework names are plain text on purpose: the logos of QBCore, ESX and the others belong to those projects, so do not paste them in unless you have permission.

## Images tab

Up to four screenshot slots. Each slot shows the file name, its size and whether the current template uses it. Per slot you get:

- **Zoom** from 1x to 4x.
- **Left, right** and **Up, down** to move the crop.
- **Replace** to swap the picture, **Reset crop** to go back to 1x centred.
- Arrows to reorder and a bin to remove. In Collage the first screenshot gets the big tile.

**Add screenshots** adds more while there is room, and an empty slot has **Choose image**. You can also drop a file on the editor at any time.

In the preview, with a screenshot selected, the arrow keys move it (hold <kbd>Shift</kbd> for bigger steps) and <kbd>+</kbd> / <kbd>-</kbd> zoom.

## Style tab

| Setting | What it does | Default |
| --- | --- | --- |
| Palette | Eight presets: Signal orange, Lime, Cobalt, Crimson, Amber, Mint, Hot pink, Mono | Signal orange |
| Accent / Background | Your own hex colours; editing them switches the palette to custom | from the palette |
| Background | **Blurred screenshot**, **Gradient** or **Solid**. Templates with a full-bleed screenshot ignore it. | Blurred screenshot |
| Darken | How much the screenshot is darkened behind text | 55 % |
| Vignette | Darker corners | 35 % |
| Film grain | A fine noise layer that hides banding in dark gradients after JPG compression | on |
| Font | Geist, Inter Tight, Space Grotesk, Bricolage Grotesque, Archivo, Unbounded, Oswald, Anton | Geist |
| Title size | 60-140 %. Titles already shrink to fit; this sets the largest size they may grow to. | 100 % |
| Alignment | Left or Center, used by Showcase and Spotlight | Left |
| Uppercase title | Uppercase the title. Oswald and Anton switch it on when picked. | off |

## Export tab

| Control | What it does |
| --- | --- |
| Format | **PNG** keeps text crisp. **JPG** is 5 to 10 times smaller; use it when a limit bites. |
| JPG quality | 60-100, shown only for JPG. Default 90. |
| Size box | The current size with its live file size and a check against the platform limit: fine, close to the limit, or over it. It also warns when a screenshot slot the template uses is still empty. |
| Download PNG / JPG | Saves the current size. |
| Copy | Copies the current size to the clipboard as PNG, ready to paste into Discord or the forum composer. |
| All sizes | Renders all eight sizes into one zip. |

### File names

| Export | Name |
| --- | --- |
| One image | `<script-name>-<size>-<w>x<h>.png` or `.jpg`, for example `dockside-jobs-forum-1920x1080.png` or `dockside-jobs-discord-banner-960x540.jpg` |
| All sizes | `<script-name>-thumbnails.zip` |
| Project | `<script-name>.thumbnail.json` |

### Projects

Your work is saved in this browser as you go, and the **Project** box tells you how: in full, with smaller copies of your screenshots, text and settings only (when the screenshots are too big for browser storage), or not at all when the browser blocks storage.

- **Save file** writes a `.thumbnail.json` project with your text, settings and screenshots at full quality. Hand it to whoever makes the next update post.
- **Open file** loads one again. You can also drop the `.json` on the editor.
- **Start empty** clears the content but keeps the size and style.
- **Load sample** brings back the sample project.

## Tips

- Capture at 1920 x 1080 or higher, with the HUD, chat and other scripts' UI hidden.
- Crop to what your script adds. A readable menu at 70 % zoom beats the whole screen.
- For phone, tablet and menu NUIs use **Panel** and zoom into the UI. **Spotlight** suits a wide dashboard.
- Keep the name to 2-4 words. Framework, version and price are what people scan for on the releases page; "Ultimate" and "Advanced" take space and add nothing.
- Upload the forum image to the forum directly, not as an external link. The composer recompresses files over 512 KB, so exporting a JPG at 90 yourself keeps the quality in your hands.

> [!TIP]
> Watch the tile in the gallery at its small size: that is roughly how big your thumbnail looks on a phone or in the releases list.

## Limitations

- Everything is drawn in your browser. Screenshots never leave your computer.
- Up to four screenshots per project, and only Collage uses all four (Split uses two).
- **Copy** needs a browser that can write images to the clipboard. If it is blocked, click the page once and try again, or use **Download**.
- Fonts come from Google Fonts and are all under the SIL Open Font License, so the images you export are yours to use anywhere.

## Related tools

- [Generators](/docs/tools/generators) for a script idea or a server name to put on the thumbnail.
- [fxmanifest Generator](/docs/tools/fxmanifest-generator) to finish the resource before release.
- [Inventory Icons](/docs/tools/inventory-icons) for the item pictures your script ships with.
