How to create a hero image for your app website.

A hero image has one job: communicate what your product does in under 3 seconds. It needs to work at every screen size — from a 6-inch phone to a 32-inch monitor — and convey professionalism and polish.

The best hero images share three qualities: a single clear focal point (the device with your app), enough context to understand what the app does, and visual polish that signals quality.

Browse successful app websites in your category. Notice how the most effective heroes use a 3D device mockup as the centerpiece, with text either beside, below, or overlaid on the image.

The hero section is usually full-width with a fixed height. Design for the widest expected container — 1920 × 1080 px (16:9) is a safe target that covers most screen sizes.

Inside the canvas, decide where the device goes. Three common compositions:

• Centered — device in the middle, text below it. Works well for simple, bold messaging.
• Split — device on one side, text on the other. Best for conveying more information.
• Offset — device positioned off-center with text wrapping around it. Creates a dynamic, modern feel.

Pick the device model that matches your primary platform. For a mobile app, use the latest iPhone. For a desktop app, use the MacBook Pro.

Import your most impactful app screen — the one that shows your product's core value. Adjust the camera angle to show the screen clearly. A slight 3/4 angle (not straight-on) looks more natural and professional.

Choose a background that makes the device stand out. A mesh gradient (like Apple's marketing style) adds depth without distracting. If your brand has a signature color, use it as a solid background or the starting color of a gradient.

If your page layout places text directly on the hero image (not beside it), add your headline and CTA as text overlays inside Protato. This keeps the hero image self-contained and easier to implement.

Keep the headline short — 3-6 words that state the core benefit. Use a bold font weight and large size so it's readable at thumbnail scale. Position the text below or beside the device, not overlapping the screen area.

Add a subtle CTA button text like "Get Started" or "Try Free" below the headline. Use the Layout tab to adjust spacing. A gradient fill on the CTA text or a stroke outline can make it stand out.

The Dramatic lighting preset creates contrast that makes the device pop against the background — ideal for hero images where you want the device to be the focal point.

If your background has strong colors, switch to the Flat preset to avoid color conflicts. The Flat preset diffuses light evenly and keeps the focus on the device and text.

Adjust the shadow Opacity to around 60-70% and Radius to a medium setting. A visible but soft shadow anchors the device in the scene and adds a premium feel.

Export your hero image at 2x resolution for retina displays. If your hero container is 1440 × 600 px, export at 2880 × 1200 px for sharp display on high-DPI screens.

JPEG at 85% quality is usually the best balance of quality and file size for hero images. If you need a transparent background (to overlay on a gradient or pattern), use PNG instead.

Test your hero image at three sizes: full desktop (1920px wide), tablet (768px), and mobile (375px). The device and text should be clearly visible at all sizes. If the text becomes too small to read at mobile sizes, consider a separate mobile composition.