How to make a landing page hero image from a screenshot

The hero image is the first picture of your product most visitors see. Usually it’s a screenshot. Usually it could be better.

Here’s how to turn one flat screen into a hero that does its job in a glance.

One job only

The hero has to make the headline believable. That’s it.

Not every feature. Not the settings. One screen, next to the line that says what the product does.

If your headline is “Send an invoice in a minute”, the hero shows an invoice, nearly done. If it’s “Every order in one place”, it shows the order list, full and tidy.

So write the headline first. Then pick the screen.

Pick the screen

Good hero screens share a few traits:

• Busy, not crowded. Real-looking content, a few items, clear structure.
• Recognisable at a glance. A dashboard, a chat, a calendar. Shapes people already know.
• Good-looking when small. Not always the most powerful view. The one that still reads at thumbnail size.

Skip empty states, login pages and pop-ups. They say nothing about the product.

Stage it

Before you capture, tidy up.

• Swap test data for believable names, dates and amounts. For example, ₹4,860 reads better than ₹1 or ₹99,99,999.
• Close banners, badges and half-finished features.
• Use a clean demo account. Never a real customer’s.

Capture large, as a PNG, and scale down later. That keeps edges crisp.

Choose a frame

Four good options for a hero:

Frame	What it says	Suits
Browser window	“It’s a web app”	SaaS tools, dashboards
Laptop	“You work in this”	Desk-based software
Phone	“It’s in your pocket”	Mobile apps, mobile-first sites
Laptop and phone	“It works everywhere”	Products with both

Keep the frame simple. A minimal browser bar beats a realistic one full of tabs and bookmarks. The frame is the stage, not the show. For window sizes and crops, see browser mockups for web apps and SaaS.

Crop for the layout

Look at the page before you crop.

Image beside the headline

Text left, image right. A square or landscape image fits. Let the device bleed slightly off the right edge for a bit of energy.

Image below the headline

Headline centred on top, image underneath. Go wide. A browser or laptop shot, cropped so the top part of the screen shows. A cut-off bottom invites the scroll.

Image behind the headline

Rarely works with screenshots. Text over an interface fights it. If you must, dim or blur the image heavily.

Set the background

The background should make the device pop, then disappear.

• A soft gradient from your brand colours.
• A flat colour, one step lighter or darker than the page.
• A gentle scene, like a desk or a soft surface, if you want warmth.

Avoid patterns behind detailed screens. Two busy things cancel each other out.

Add a soft shadow under the device. Wide blur, low contrast. A hard dark shadow looks dated.

Angle: a little goes a long way

A slight tilt adds life. A dramatic 3D angle makes the screen hard to read.

A simple rule. If visitors need to read the screen, keep it flat or nearly flat. If the screen is mostly there for shape and colour, you can tilt more.

Check it small

Plenty of visitors will meet your hero on a phone. There, it shrinks to the width of a thumb.

Open the page on your own phone and ask:

• Can I tell what kind of product this is?
• Is the device still the main thing in the picture?
• Does the image push the headline or button too far down?

If the screen turns to mush, try a separate, tighter crop for small screens. One card or panel, big, often beats the full interface, tiny.

Keep the file light

The hero loads first, so weight matters.

• Export at around twice its display size for sharp high-density screens. Not ten times.
• Use a format your site handles well, compressed sensibly.
• Write short alt text that says what’s shown, such as “Invoice editor with a nearly finished invoice”.

Before and after

Before: a full-window grab. Browser toolbar, three open tabs, a sidebar of test projects, a cookie bar. Dropped flat on a white page.

After: the same screen, staged with five tidy projects, cropped to the main panel, set in a minimal browser frame on a soft blue gradient with a wide, gentle shadow.

Same product. Very different first impression.

Make it travel

A good hero rarely stays on the homepage. It ends up in the launch post, the deck cover and the email header.

Build the scene with some extra background around the device. Then you can crop it square, tall or wide without starting again. For the shapes to plan for, see mockup sizes for social posts.

Hero checklist

• Headline written first?
• One screen that proves it?
• Data staged, nothing private?
• Simple frame that matches the page?
• Calm background, soft shadow?
• Readable on a phone?
• Light enough to load quickly?

All ticked? Ship it. When you want to try a few frames and backgrounds side by side, Mockups can place your screenshot into the scene for you.