Photoshop’s ‘Generative Fill’ Can Fill In The Gaps On Website Header Images

First, The Familiar Issue

So before sharing the awesome solution, let’s first highlight the problem.

On many websites, banner or hero/header images will sit poorly or the focal point will be covered by text, as a standard image has been uploaded at a 4:3 ratio and left like that. It can really damage the visual impact and overall polish of a page.

Images that are stretched or cropped poorly, look amateurish, without changing the image focus points.

If you are creating digital display banners like leaderboards etc, you will no doubt find yourself placing an image and needing to fill the background with a colour, add a feathered gradient or just stretch the image and whack in a colour overlay.

This pain is real and shared by designers and marketers worldwide.

So, What Is This Magic Solution?

On a project this week we needed to create some banners for desktop, and the focus point was slightly off centre. When uploading a regular sized photo, it was centralising and being covered with the content box.

Usually, in Photoshop we would create the banner size, place the image and manually create the background using some of the methods above.

Each image could take 15 minutes or longer, depending on what was included in the image.

However, this time I set up my art board, dropped the image into the focal point, and explored using Generative Fill.

This created extensions to the images that were realistic and although not 100% in some cases, saved hours in a large batch of images. These images could be created in seconds, meaning that the time we’d usually spend in art working, could be used towards uploading and placing the images directly on the website.

Apply AI To Save Time

The term AI is being thrown round so much and it’s hard to actually determine what is actual intelligence and what is fluff. We got a brief sent to us recently that says ‘we want to use AI to do X Y Z’ and the expectation is that AI will magically just happen and there’s little work involved from us.

The reality is, there are some really powerful tools out-there which use AI (or more accurately, machine learning). But understanding how to use them, what will actually work and how to get the best of out those tools is the key.

With the rise of AI, this will doubtless save time on some of the lighter or time intensive tasks that we’d rather not do (clipping masks is another, Photoshop now does that fairly well, but still not as well as Remove.bg). Just as Photoshop saved the manual processing of graphic design in yesteryears (luckily before my time) the AI in Photoshop will no doubt be the next stage in evolution for design and marketing.

The AI used in Adobe Photoshop makes the software more relevant once again, where it was becoming a tool that was used less and less.

So What’s To Swipe & Deploy?

Today’s key takeaway is to have a play with Generative Fill in Adobe Photoshop 2024, it can perform wonders in some cases and will save you time if you are struggling to make a certain image fit a certain shape or space.

You can use it for far more than just filling gaps, but I will let you do your own exploration. For me today it’s a tool that is perfect for extending photos and images for website banners and images. Tomorrow, who knows?

That’s a wrap for Swipe & Deploy 057 this week. Join me next time where I will share another insight or inspiration piece from around the web. 

If you’d like to learn more about our WordPress & WooCommerce Support & Maintenance plans, drop us an email or give James a call.

Our plans provide a holistic solution to your website’s performance, reliability and security, and are inclusive of premium tools and services.