Skip to main content
Back to Blog
||
F1 ToolsTutorialChampionship

Making a championship standings graphic in the browser

A walkthrough of the F1 Tools championship generator: driver and constructor modes, editing rows, headshots, paging and the 1080 × 1350 PNG export.

Standings graphics are mostly repetition: a title, a column of rows, a points cell and a footer that explains the numbers. The Championship generator builds that table for you. The work is choosing the mode, fixing the rows and exporting the page you need.

Choose driver or constructor mode

The Details tab has a Standings switch between Drivers and Constructors. The mode changes the whole table:

  • Driver mode shows a surname, headshot, team logo, points and a movement indicator. Movement can be Same, Up or Down, with a places value.
  • Constructor mode shows 11 team rows. Each row uses the team display name, the team logo and the points. The driver select, headshots and movement controls are hidden.

Switching modes only changes the title if it is still one of the default titles, so a custom title stays.

Set the title and footer

The title holds up to 28 characters and is forced to uppercase. The footer has two fields: a lead (up to 24 characters, default POINTS AFTER THE) and an event label (up to 30 characters). You can also tap the title or footer on the preview to open the matching field.

While you learn the tool, use a placeholder such as EXAMPLE GP in the event field.

Edit the rows

The default driver list has 22 rows. Tap a row on the preview or open it in the Standings tab to edit:

  • Position (1 to 99) and points (0 to 9999)
  • Driver display name (up to 40 characters)
  • Team preset, which sets the gradient start, gradient end and text ink colours
  • Team display name (up to 28 characters)

Picking a driver from the 2026 driver list clears any custom headshot and resets its zoom and position. Use the up and down arrows beside each row to reorder. The position numbers stay fixed to their slots while the rows swap their contents, so check the numbers after each move.

Headshots and logos

In driver mode, drag the headshot on the preview to move it, and pinch or scroll to zoom. The Driver fields add a headshot zoom slider from 20% to 200%, a position pad with nudge and centre controls, and upload buttons for a custom photo. The editor suggests a transparent PNG for photos.

Team logos can be uploaded in either mode. Use "Use team logo" to go back to the preset mark.

Pages and export

The Standings tab has a Layout control for driver mode: Official (10 rows) or Compact (11 rows). With the default 22 drivers, the Official layout gives three pages (1 to 10, 11 to 20 and 21 to 22). The Positions control moves between them. Constructor mode fits on one page.

Export saves the page you are viewing as a 1080 × 1350 PNG. The filename is built from the event label, so EXAMPLE GP produces f1-driver-standings-example-gp.png. Constructor exports use the f1-constructor-standings- prefix. Repeat the export for each driver page.

What you still edit manually

The tool does not fetch results. You type every position, point total and movement, and you write the footer text. Check those numbers against your source before exporting. You also choose the headshots and any custom logos.

The Style tab holds the palette: background, diagonal pattern, red rails, points cells, global text, and the moved up and moved down colours. Adjust those if you want a different scheme.

For the full control reference, see the guide section for championship graphics.

Related Tutorials