Last Updated on

They don’t wear capes.

They don’t have superpowers.

Heck, I don’t even think they could fly!

But what hero images do makes it an absolute savior in the world of design – it pleases the eye in so many different levels that no one would even stop and wonder what you have to offer. They just automatically know that you’re here to offer something great.

What are hero images?


Hero Image by Myles kedrowski

You know how the hero always manages to get everyone’s attention without really even trying?

That’s exactly what a hero image does.

It’s a kind of web banner that’s meant to catch everyone’s eye. It is large and prominently placed, usually found up front and center. But no, it does not, in any way, distract people from the real message. When you think about it, it’s actually that one element that could bat that message out into a homerun.

It’s basically a large background image that holds so much power, it can make all the difference between a conversion and a bounce. And you, whether you’re aware of it or not, have actually stared into a few of these images yourself. That’s how captivating they are. They draw you in without you even knowing it. Before you realize what’s happening, BAM! You’re buying whatever they’re selling.

Simply put, a hero image is a larger and more attractive version of your regular, boring header. Of course, the image used here should ideally relate directly to the content.

Three Elements Your Hero Image Can’t Do Without

Considering all the work that goes into creating your hero image and allowing it to make your pages pop out, you have to at least make sure that all of it is worth it. Yes, creating a hero image that works with your site may take you five minutes or less to do, and you may feel that those five minutes aren’t really a big loss. But hey, you already tried, so might as well go all out, right?

For your hero image to work, there are three elements that you should never miss out on.

The Image

The Modern House

Duh? How do you create a hero image without an actual image?

Sure, sure. It’s very obvious. But remember that this should not just be any image – it should be THE ultimate image that would mark what the page is all about. It cannot be just any image, of course. Remember that you’re going to use this as your site’s hero, so you can’t afford to set it up for failure.

Choose an image that conveys the message you want to share on the page. You can’t just pick any random attractive photo you see. It may be attractive to you, but what about your audience?

Think about what interests your audience the most. Think about what would draw them in. Depending on how you want the page to look, you can either choose a photo or create your own illustration.

The Copy


I’m sure you’re expecting one of those usual clichés to come in any moment now. Something about how a picture can actually speak a thousand words.

In this case however, a picture alone won’t be able to do it. Otherwise, you’ll leave your audience staring at a picture, not knowing what they’re trying to look for here. And once they get tired of that picture, trust me. Instead of snooping around, they’d rather leave and try elsewhere.

This is why no matter how fabulous your chosen image is, you should always partner it up with amazing copy as well. After all, it would be such a huge waste if you were to feature the kind of photo that mesmerizes people, only to turn them off with boring, uninspired content.

If you’re not an expert with words (we get it, you’re just the design expert), then trust someone else to do it for you. Make sure that the copy is just as catchy as the image, and will captivate the reader’s minds just as much as the image captivates their eyes.

The Call to Action

Ride Social Cycling Landing page concept by Simon Deighton

Ride Social Concept by Simon Deighton

You’ve caught your audiences’ attention with your image.

They now agree to what you have to say as they read your content.

Now what?

This is where the call to action comes in.

Your call to action will be the bait that they bite off the hook. It could be a button that leads to another page within your site where they can purchase your product, or a form that allows them to connect with you. Regardless of what your chosen call to action is, it should be brief and precise, something that they don’t have to think about too much.

Shop now. Read more. Get a quote. These are the kinds of call-to-action lines that are easy to click. As for the button where your call to action will be placed, make sure that it stands out. You can use a color that contrasts nicely with your background image, with just the right size that makes it stand out without covering too much up. Make sure you use the right font as well, something easy to read and complements the rest of your design.

Remember that these three elements can make or break the effect of your hero image, so make the most out of them. Plan how these elements work together well because it would be such a huge waste if two of them work out great, but one gets left out in the dust. A formula like that still wouldn’t give you the clicks and conversion you’re looking for, and what’s the attention for if not for those numbers?

Hero Images in Less Than Five Minutes

Won’t something that powerful take such a long time to develop?

As surprising as it may seem, creating a page or a website’s hero image isn’t rocket science. It shouldn’t take longer than five minutes, if you just want the basics.

1. Get an image.

Kyoto Japan

Choose a striking image in high resolution. I used an image from Fancycrave.comAnd though I know it’s a given, it still should be put out there – please make sure you own the image rights, okay?

When we say striking however, it has to be in a pleasing-to-the-eye way, and not in a shocking-colors-all-over-the-place kind of way. Make sure the contrast among the different elements in the photo you choose are far from harsh – they should all blend nicely together.

You should also think ahead. Would you be adding copy over this image later on? Because if you plan on doing just that, make sure you can imagine text going over that photo.

2. Open it on Photoshop.

Screen Shot 2016-01-12 at 4.16.57 AM

Open a new file on Photoshop with the exact size you need for the entire banner space where you hero image is going. Now place the image you chose for your banner.

3. Adjust accordingly.

Screen Shot 2016-01-12 at 4.22.46 AM

Using the blur filter, try to lessen the emphasis on some areas where it is necessary. You may also find the need to make a few other areas crisper. This is the best time for you to do it.

Now that you’re happy with how crisp or blurred out each point is, decide on how dark or light you want the image to be. The idea here is to tone the image down.

One way to do it is by adding a dark layer below the actual image and reducing its opacity. You could also do it the other way around, with the dark layer over the photo and the opacity of the layer being adjusted this time. It all depends on what you’re most comfortable with.

If you’re hoping to make room for further opacity adjustments later on, then might as well go for another technique.

You can try creating a container div that combines a background image whose opacity has been reduced and a dark background color. The browser will then render the image you chose over the background color, with the right level of transparency that you need. Through this approach, not only will future changes in terms of opacity be easier, the original photo will also maintain its integrity.

4. Plan your copy.


Now that your image is all set, you can start planning for your copy. However, it is not time to add them just yet.

As a designer, one of your primary goals should be to maintain the responsiveness of your entire design, and adding your copy directly onto this image will only sacrifice the integrity of the type and its legibility as the image is resized. Because of this, text should ideally be added directly onto the HTML file, and not rasterized along with the image.

For now, keep yourself busy by choosing the right fonts that would complement your hero image well. Might as well plan your layout while you’re at it.

Of course, others may want to add a bit more to their hero images. Some settle for hero videos for example, while some use parallax effects or rotating banners. It would all depend on how much work you’re willing to put into it and what final results you’re after.

Awesome Tips to Make Your Hero Image Work

Are you sold on the idea of using hero images for your design?

Here are a few tips that would make you feel its benefits even more:

Use directional cues.

Did you know that humans have a natural instinct to follow the gaze of other humans? Just try standing in the middle of the road and looking up in the skies. You’d be amazed how many other people would look up just to see what you’re looking at.

This is something you can use when choosing a hero image.

You can choose an image of a person that’s looking at your call-to-action button, or you can be more obvious about it by using a picture of a person who’s actually pointing at your copy. Trust me. The moment people land on this page, their eyes would automatically take these directional cues and follow the yellow brick road towards conversion.

Use emotions.

Imagine how people would feel when they land on a page asking for donations and the first thing they see is a pair of sad eyes on the face of an innocent child, with tears streaming down the child’s face. If that doesn’t get you, then I have no idea what kind of human being you are.

Use your audience’s emotions to ensure that they go along with the message that you’re trying to impart. Your image may have awesome resolution, but if it lacks the emotions that make us human, then you can’t expect people to relate with it as effectively.

Don’t worry, it doesn’t always have to be heartbreaking. You can make people feel happiness through an image of the sun, balloons, rainbows or laughing children, or you could make people all pumped up by showing a person who’s sweating it out, with the details so amazing you can almost feel your shirt getting drenched.

Don’t be afraid of using color.

Hero images don’t always have to be dark and brooding. Be bold enough to experiment with different colors. Of course, you also have to exercise some control here, as you might get carried away and come across as being too over the top.

Make sure that it’s the right balance of interesting and aesthetically-pleasing.

Be relatable.

I’ve said this before, but I’m saying it again now. This is not just about you, it is also about your audience. So while it’s okay to idolize the product or service that you’re offering through your hero image, make sure it does not come across as being too self-absorbed.

Think about who your audience is and what they are looking for. When you portray this in your design, that’s the only time they can relate to it. And when they start relating to it, that’s when the magic begins.

Ready to get started on those hero images?

Take in all these tips given above and start applying them to your designs. You’ll see. You’ll notice the huge difference almost instantly.

Posted by Igor Ovsyannykov

I'm a digital nomad and entrepreneur bouncing around South East Asia. When I'm not working here, I'm out taking photos for Follow me on Instagram: @igorovsyannykov

Leave a reply

Your email address will not be published. Required fields are marked *