One of the most useful features in Photoshop’s new beta tool is “generative fill," which allows you to extend the background of an image using artificial intelligence. It’s a perfect tool for web design. I wanted to walk you through a case study to show how we’re starting to use it.
One of our clients, the Autodesk Foundation, provided us with a photograph for a new web page. It was a beautiful photo from one of the companies in their portfolio, Ampaire, a leader in hybrid electric aircrafts. Unfortunately, it was not the right aspect ratio for the wide web page banner.
We designed this page before the launch of Photoshop’s new AI tool. Given the constraints of the photo’s aspect ratio, we created a gradient that begins on the image and extends out to the outer edges of the banner, basically masking the fact that the image is the wrong aspect ratio. Here’s how the image looks with a gradient.
While this solution looks nice, as you can see it darkens part of the photo which reduces its visual impact. With Photoshop’s new tool, we experimented with extending the photo the entire width of the banner. We had to try a few different prompts, playing with things like the exact angle of the airplane. The result is stunning.
I believe an image like this on a web page has the potential to generate significantly more excitement over Ampaire’s green technology. And, what previously would have required a considerable amount of time and effort can now be done with a few clicks.
I would like to add, however, that there are still some important legal issues associated with AI photo editing that need to be resolved. The tool might alter something in a way that is deceptive, or it might leverage trademarked images in a recognizable way—even if it’s simply filling in the background. Imagine, for example, if it put a McDonald’s smack dab in the middle of the wind farm!