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.
Diese Doku ist vorerst auf Englisch.
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
- Drop one to four in-game screenshots anywhere on the editor, or paste one with Ctrl + V. The sample pictures of Los Santos are replaced by your own.
- On the Text tab, type the Script name, the One-liner, pick the Frameworks and set the Price.
- Pick a size in the row above the preview (Forum, Link preview, YouTube and so on) and a template under Templates.
- Drag a screenshot in the preview to move it. Click the preview once, then scroll over a screenshot to zoom.
- Open Export and press Download PNG, Copy, or All sizes for a zip.
Click any text in the preview to jump to its field. Ctrl + Z undoes, Ctrl + Shift + Z (or Ctrl + Y) 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. Enter 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 Shift for bigger steps) and + / - 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.jsonproject 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
.jsonon 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 for a script idea or a server name to put on the thumbnail.
- fxmanifest Generator to finish the resource before release.
- Inventory Icons for the item pictures your script ships with.