9 Ways to Style the Hero Image for Your Website

Hero images are a staple of modern web design. Large, captivating photos when somebody visits your website are a great way to capture their attention. With increasingly fast internet and higher screen resolutions, there are tons of possibilities. One of the greatest challenges with these images is readability.

Without any overlay treatment, the text is virtually unreadable.

You can have the most beautiful photo, but if your messaging is lost then the hero image isn’t effective.
Here are 9 ways to make your hero image sections pop.
 

Black Overlay

This is the most simple and straightforward way to create a hero section for your website. Here we have a pure black at 65% opacity. It’s hard to go wrong with this method.

One problem with using black or other dark colors is that it makes the colors of your photo seem dull. Increasing the saturation of the photo is a great way to counteract the dulling effect of the black overlay and keep readability great.

 

 

Dark-Medium Gray Overlay

This overlay is a #555555 gray at 80% opacity. This is really effective if you want to keep the feel of your site lighter and more delicate. With these dark to medium grays, you can increase the opacity of the overlay significantly more, maintaining readability while still keeping the feel pretty light.

 

 

Color Pick Overlay

Another option is to use a color overlay instead of a black or neutral gray. I picked some of the blue color from the laptop screen and overlaid it at 80%. This works best if you pick a dominant color from the photo you’re using. It makes the overlay blend in more naturally.

 

Multiply Layers

Photoshop and other photo editing software often have what is called a “multiply” layer mode. There are a couple of steps involved in this more advanced method.

  1. Take your photo and make it black and white (desaturate)
  2. Make a layer of solid color below the photo layer
  3. Set your photo layer to multiply

In the most simple terms, the multiply mode takes the lightest tones of your photo and makes them transparent.

  • Pure white = fully transparent
  • Pure Black = fully opaque
  • Everything in-between will vary in transparency, depending on the lightness or darkness of the tone

For this one, I set the photo layer to 30% opacity. It’s more subtle and lets more of the color show through.

For this one, the photo layer is at 100% opacity, allowing more of the blacks of the photo to show through. This one is far more bold and dark.

 

 

Gradient Overlays

This one is quite simply just a gradient at 90% opacity over your standard photo. Gradients are making a bit of a comeback, so this is a trendy one. Choose your gradient color wisely, as it’s easy to overdo the effect and make it look cheap.

It also works really well with the multiply treatment we covered earlier. Just use your gradient instead of a solid color and the process is the same.

 

 

Half-Gradient Overlays

Sometimes you simply want the beauty of your photo to show through. The full overlay treatment doesn’t always work with every aesthetic. This is simply a black-to-transparent gradient from the bottom. The top half of the photo maintains it’s natural look, and you get the readability of the text due to the gradient. If you move the text lower on the image, you can afford to have the gradient fade out lower on the hero image and show more of the photo. You have many possibilities for this style, figure out the best by trying out a variety of options.

 

 

Boxed Text

This is one isn’t the most versatile solution, but it can work well with many aesthetics. The benefits of this are that a large portion of the photo is clear and untouched, while the text is extremely readable. I’ve seen this work well on many sporting goods or outdoor activity websites. It seems to work best with bold styles and where the image is just as compelling as your messaging.

The more opaque you get with the box color, the better the readability will be. Make sure there is enough padding between the edges of your box and your text. Otherwise, you run the risk of it looking poorly executed and like mouse-selected text.

 

 

Drop Shadow Text

Sometimes all you need to make your text readable is a drop shadow. It’s not the most readable option, but it keeps the photo untouched better than most of these other options. I generally use a pretty high blur for text shadows. A harsh-edged shadow is going to look cheap and poorly executed. A soft shadow around the edges will blend into your photo subtly and increase readability.

 

 

Shape Backgrounds

One final option is to take the boxed text style to another level and use shape backgrounds for your text. You have a ton of options as far as color and opacity go. This won’t work for a lot of aesthetics, but can create a really fun or bold effect.

I hope these examples sparked some creativity for your web design concepts!

Leave a Reply

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