Create a full-width website hero image with strategic text zones, brand-aligned visuals, and responsive-friendly composition.
๐ The Prompt
Generate a high-impact website hero image for a [INDUSTRY/NICHE, e.g., SaaS startup, luxury real estate, organic skincare brand] website with the following detailed specifications:
1. **Page Context**: This hero image will appear at the top of the [PAGE TYPE, e.g., homepage, landing page, about us page, product page]. It will span the full width of the browser viewport and should feel immersive and immediately engaging.
2. **Visual Narrative**: The image should tell the story of [NARRATIVE, e.g., innovation and possibility, natural beauty and wellness, teamwork and collaboration, adventure and exploration]. The viewer should instantly understand that this brand is about [CORE VALUE PROPOSITION, e.g., simplifying complex workflows, empowering creative professionals, sustainable living].
3. **Subject & Scene**: Depict [SCENE DESCRIPTION, e.g., a diverse team collaborating in a modern open office, a serene landscape with rolling hills at sunrise, a close-up of hands crafting artisanal products, an abstract futuristic data visualization]. The composition should feel [COMPOSITION STYLE, e.g., cinematic and widescreen, intimate and personal, expansive and aspirational].
4. **Text Overlay Readiness**: Reserve a prominent area โ preferably the [LEFT/CENTER/RIGHT] portion of the image โ with lower visual complexity (darker tones, subtle gradients, or soft bokeh) so that a white or light-colored headline and call-to-action button can be placed on top with excellent readability.
5. **Color Temperature & Grading**: Apply a [COLOR TREATMENT, e.g., warm golden tones, cool blue-steel corporate palette, earthy muted naturals, vibrant saturated pop-art colors] color grade that aligns with the brand identity of [BRAND COLOR DESCRIPTION].
6. **Depth & Dimension**: Include foreground, midground, and background layers to create a sense of depth. Use [DEPTH TECHNIQUE, e.g., shallow depth of field with bokeh, atmospheric haze, leading lines, layered parallax-friendly elements] to add visual interest.
7. **Lighting**: Use [LIGHTING DESCRIPTION, e.g., soft diffused natural light from the left, dramatic backlight with lens flare, overhead flat studio lighting, moody low-key side lighting] to establish the emotional tone.
8. **Aspect Ratio & Format**: Widescreen format approximately 16:9 or wider, suitable for a full-bleed hero section. The image should remain visually coherent when cropped for tablet (4:3) and mobile (1:1 or 9:16) viewports.
๐ก Tips for Better Results
Always specify where the headline and CTA button will go so the AI generates a low-complexity zone in that area for text legibility.
Mention responsive considerations โ request a composition where the focal point works even when cropped to mobile aspect ratios.
Describe the emotional response you want visitors to have within the first 3 seconds of seeing the page to guide the AI's creative direction.
๐ฏ Use Cases
Best suited for web designers, UX teams, and startup founders who need compelling above-the-fold hero visuals for websites and landing pages during design sprints or rapid prototyping.