Editorial template

How-To Open Graph image template

A numbered step-by-step tutorial card: an eyebrow, a title, and up to four numbered steps in a vertical list, with an optional footer.

It's built for the standard 1200×630 (1.91:1) share card and exports at 2× (2400×1260) for high-DPI screens. Customize the text, colors, fonts, and logo in your browser, then download a PNG — free, no signup, nothing uploaded.

Customize this template More editorial templates

3 ready-made presets

Each preset is a one-click starting look for the How-To template — a different color and type combination you can still fully edit.

Cobalt“Deploy a Next.js app in 4 steps”Install the CLI Connect your repo Set your env vars Click deployOpen this preset →Sunrise“Bake sourdough bread from scratch”Feed your starter Mix and autolyse Fold and proof overnight Score and bake hotOpen this preset →Slate“Set up your dev environment”Install the runtime Clone the starter repo Run the setup script Start the dev serverOpen this preset →

What you can edit

The How-To template has 4 editable content fields. Recommended lengths keep your copy inside the safe area so nothing clips when the card is cropped.

Field	Type	Max length	Example
Eyebrow	Single line	24 chars	Tutorial
Title*	Multi-line	64 chars	Deploy a Next.js app in 4 steps
Steps	Multi-line	200 chars	Install the CLI Connect your repo Set your env vars Click deploy
Footer	Single line	40 chars	freeogimage.com/guides

* required field. Tip: keep your “Title” short and punchy — the shorter the copy, the larger and more legible it renders in the feed.

Styling you control

Beyond the words, the How-To template lets you tune:

Background color & style
Gradient fills
Grid & pattern overlays
Fonts, size & alignment
Logo placement
Platform size switching
Film-grain / noise
Vignette

When to use it

The How-To template lives in the editorial collection — articles and features with magazine-grade typography. Reach for it specifically when one of these fits:

A long-form article or essay
A magazine-style feature
A breaking-news or press card
A listicle or guide

See the full editorial template collection.

More editorial templates

Art DecoA 1920s Art Deco card with a thin gold double-line frame, symmetrical sunburst ornaments, and a centered high-contrast serif title over an eyebrow, subtitle, and footer line.Article CardA clean blog/article share card with a category tag, a big headline, an optional excerpt, and an author row (avatar, name, read time).ChecklistA 'the X checklist' editorial OG card: an eyebrow, a bold title and subtitle, then up to six checklist rows whose checkbox is filled or empty based on each row's state word, with an optional computed progress line and a source.ConstructivistA Russian-constructivist poster card: bold red/black diagonal bands and hard geometric shapes around a heavy condensed uppercase headline set in a strong asymmetric block.EditorialA magazine split layout with a kicker, big headline and byline beside a featured photo.FAQA clean FAQ / Q&A card: an eyebrow and title over up to three question-and-answer rows, each with a circled accent Q mark, a bold question, and a muted answer, plus a footer line.

Make your how-to card now

Free, private, and 100% in your browser — no signup, no watermark, nothing uploaded.

Open in the editor