Hero images Web Design

Hero images are everywhere these days. You’ve probably seen them front and center in websites for apps, magazines, stores and pretty much every other product category. And with good reason: these large background images are often successful at capturing a visitor’s attention. Many designers have explored even more ways to serve hero images differently. Rotating banners, hero videos and parallax effects are some interesting variations.

Hero images are impactful, eye-catching and visually stimulating. When used well, they can make the difference between a longer visit and a bounce. If you’ve ever stared at any of these wondering how to create your own, this 5-minute guide is for you.

1. Find a striking image in high resolution.

Make sure you own the rights to this image, and that the elements in the photo do not contrast harshly against each other. Creative Market has a stock photography section with nearly to choose from. If you are planning on overlaying copy afterwards, make sure that there is space to accommodate it. Note: To create the scene for overlay text you could also add darker, semi-transparent layers or play with contrast and opacity (see steps 2 and 3).

Smooth Touch Interface by .

2. Create a new Photoshop file with the proper size to fit your hero banner space.

Determine the exact pixel measurements for the container where you’ll insert the hero image. Open a new file and place the image that you found in step 1.

3. Decide how crisp you want it to be. Blur if necessary.

Open your image in Photoshop and use the blur filter to de-emphasize the entire photo or specific areas, as needed.

4. Decide how dark you want it to be. Add color layers if necessary.

There are a couple of techniques that you can use to achieve a more toned down look. One is to edit the image directly in Photoshop by adding a dark layer below it and assigning it a blend mode like Overlay or simply reducing opacity. The opposite also works (dark layer over photo), as do many other photography edits that you can experiment with.

Another popular technique is to create a container div that has both a dark background color and a background image with reduced opacity. In this case, the browser will render your hero image on top of the background color, adding whatever level of transparency you prefer. This approach helps preserve the integrity of the original photo, and makes future opacity changes easier to make.