Blended page header images

A nice visual effect that blends a page header image into the rest of the page

Here is the effect

This is a simple-to-achieve effect that we have used extensively on our Training Mate website.

It gives a soft boundary between the main page content and the image, giving the effect of them being one continual element.

complete

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

To achieve this effect you only need

You can use any such tool to achieve this effect provided:

Our tool of choice is Paint.NET

Step 1 : Crop the image to the required size

This is the original image that we will work with:

original

The image size that we want for our page header is 563px wide by 197px high, so we will simply crop to that size with our image editing tool.

That will sit nicely at the top of our (mocked-up) page:

cropped

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

The result is that we have a very stark boundary between the image and the rest of the page, so we will use the effect to soften this boundary and allow the image and page to sit better together.

Step 2 : Choose an appropriate background colour for the page

We can select any colour for the main background of the page, but we would like it to be related (colour-wise) to the colours in the image.

For this example, we will use a good contrast from the main background colour of this page - the grey from the waves, highlighted by the red circle:

background select

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Our approach on the Training Mate website was to select a colour near the bottom of the image, that is a prevalent colour in the image as a whole.


Using our editing tools colour picker, this gives us an RGB combination of:

That translates to a hex code of C2D9CA so we can now set that as the page background:

background select

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

As you can see, the boundary is still stark, but at the point where we selected the background colour, it looks like the page is running into the image.

Step 3 : Add the fade

Using our editor, we can use the gradient tool to add in the fade effect:

Refer to the help for your image editing software if you are unsure how to do this.

Here is the fade layer by itself:

fade layer

Step 4 : Put it all together

Finally, save the main image + fade layer as a single image file.

Use that image in conjunction with the page background colour to complete the effect:

complete

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

The impact of colour selection

The colour you choose for the main background, and therefore the gradient layer, can impact the overall effect.

Here are some alternatives that illustrate different impacts:

Blue (from the ladys top):

complete

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Red (from the mans top):

complete

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

White:

complete

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.