Hero images make or break a landing page's first impression. Midjourney has become the go-to tool for designers who need unique, high-quality visuals without stock photo limitations or expensive photo shoots. This comprehensive guide will teach you how to create professional hero images that perfectly complement your UI designs.
1. Set Up Your Midjourney Account and Understand Parameters
Before creating hero images, you need to understand Midjourney's setup and key parameters.
Getting Started
Join the Midjourney Discord server and subscribe to a plan. The Basic plan ($10/month) is sufficient for most designers, but Standard ($30/month) offers unlimited relaxed generations.
Key Parameters to Know
--ar (aspect ratio): Use --ar 16:9 for standard hero images, --ar 21:9 for ultra-wide designs. --v 6 (version): Use the latest version for best quality. --s (stylize): Range 0-1000, higher values = more artistic, lower = more literal. --q (quality): 0.25, 0.5, 1, or 2. Use 1 for most hero images.
Understanding Prompt Weight
Use :: to separate prompt parts and add weights. For example: 'modern office::2 natural lighting::1' emphasizes the office twice as much as the lighting.
2. Craft Prompts Specifically for Hero Images
Hero images have specific requirements different from general AI art. Here's how to prompt for them:
Focus on Negative Space
Include 'with copy space' or 'left side clear for text' in your prompts. Example: 'modern workspace, natural lighting, minimalist desk setup, right third composition with left side clear for headline text --ar 16:9'
Specify Lighting and Mood
Lighting dramatically affects mood. Use: 'golden hour lighting,' 'soft natural light,' 'dramatic side lighting,' 'bright and airy,' or 'moody and atmospheric.'
Consider Brand Alignment
Include brand-relevant elements: 'tech startup aesthetic,' 'corporate professional,' 'creative agency vibe,' 'wellness brand feeling,' 'eco-friendly sustainable.'
Avoid Complexity
Hero images should be clean and not compete with UI elements. Use 'minimal composition,' 'clean background,' 'uncluttered scene,' 'simple elegant.'
3. Use Aspect Ratios and Style References Effectively
Technical control over output format and style is crucial for hero images that work in UI contexts.
Aspect Ratio Strategy
--ar 16:9 for standard desktop hero sections, --ar 21:9 for ultra-wide hero banners, --ar 3:2 for flexible responsive designs, --ar 4:5 for mobile-first hero images.
Style References (--sref)
Upload reference images to guide the aesthetic. Use existing brand photos or designs you like: '/imagine prompt: [your prompt] --sref [image URL]'
Character References (--cref)
Maintain consistent people or products across multiple generations using character references. Perfect for brand mascots or recurring visual elements.
Chaos Parameter
Use --chaos 0-10 to control variety. Lower chaos (0-20) for consistent brand imagery, higher chaos (50-100) for exploring creative options.
4. Upscale and Refine Your Generated Images
Initial generations are starting points. Here's how to polish them for production use:
Selective Upscaling
Generate 4 variations (default), then upscale only the best ones. Use 'Upscale (2x)' or 'Upscale (4x)' for maximum quality hero images.
Variation and Remix
Found an image that's 90% there? Use 'Vary (Region)' to regenerate specific parts while keeping the rest. Perfect for adjusting problematic areas.
Subtle and Strong Variations
'Vary (Subtle)' for small tweaks preserving the original. 'Vary (Strong)' for significant changes while maintaining the core composition.
Zoom Out for Context
If your hero image feels cropped, use 'Zoom Out 1.5x' or 'Zoom Out 2x' to expand the canvas while maintaining the subject.
5. Integrate AI Images into Your Design Workflow
Getting great images is only half the battle. Here's how to use them effectively in UI designs:
Post-Processing in Figma
Import into Figma and add gradient overlays for better text readability. Use blend modes (multiply, overlay) to integrate with your color scheme. Apply subtle blur or noise for texture.
Responsive Considerations
Generate multiple aspect ratios of the same concept for different breakpoints. Ensure important elements aren't cropped on mobile. Test how the image works at various viewport sizes.
Accessibility
Ensure sufficient contrast between hero image and text overlays (4.5:1 minimum). Provide descriptive alt text for all hero images. Consider reduced motion alternatives for animated hero sections.
File Optimization
Export as WebP for best compression and quality balance. Use progressive JPEGs for faster perceived loading. Implement lazy loading for below-the-fold hero images.
Key Takeaways
- Use aspect ratios that match your target viewport: --ar 16:9 for desktop, --ar 4:5 for mobile
- Always specify negative space in prompts for text overlay areas
- Leverage style references (--sref) to maintain brand consistency
- Upscale selectively and use variation tools to refine results
- Post-process in design tools with overlays and blend modes for UI integration
- Generate multiple versions for responsive designs and A/B testing