Adobe / User research, Product design, Prototyping / 2021, 2018

Introduction

Content-aware Fill is an iconic Photoshop feature that seamlessly fills selected portions of an image with content sampled from other parts of the image. First introduced in Photoshop CS5 (2010), it has since undergone significant improvements in 2018 and 2021, with a focus on enhancing user experience and achieving product goals.

Target Customers

The primary users of Content-aware Fill are image retouchers who need to remove unnecessary objects from images.

Project Overview

The main issue with the traditional Content-aware Fill was that it often produced unwanted content due to the lack of a user-defined sampling area and preview capability. Users had to apply the feature multiple times to the same region, hoping to achieve the desired results. Our goal was to eliminate this tedious approach and improve the overall experience.

Process and Challenges

Discovery and Research

In collaboration with Product Manager Meredith Payne Stortzner, we conducted surveys and customer interviews with Photoshop beta forum users. We identified their goals, workarounds, and tools used with Content-aware Fill. These insights guided our iterative design, prototyping, and validation process.

Constraints

Photoshop's architecture limited the preview's flexibility, and the updated Content-aware Fill engine had numerous parameters to control. We had to balance technical feasibility with a better design experience while simplifying control knobs and creating default values that work for most cases.

Design Explorations and Outcomes

We focused on three main aspects: live preview, customizable sampling area, and fill settings. Our design explorations included developing smart defaults for sampling areas, providing different entry points for the feature, and using multiple image sources for improved filling.

Live Preview

The new Content-aware Fill offers a live preview, allowing users to see the filling results in real-time as they edit the sampling area or adjust fill settings.

Customizable Sampling Area

By default, the sampling area automatically samples relevant pixels. However, users can refine the sampling area using the Brush tool for more control.

Fill Settings

The fill settings provide a list of options for controlling the filling process. We also created animated tooltips to demonstrate the effects and use cases of each option.

Additional Feature: Content-aware Fill on iPad

Content-aware Fill was highly requested for the Photoshop iPad version. Although resource constraints limited the scope, we successfully designed an essential version of the feature for the iPad.

Results and Impact

The updated Content-aware Fill introduces an interactive editing experience, offering users full control over image retouching. Key benefits include:

• Elimination of randomness in filling results
• Reduced time spent removing unwanted objects from images
• Improved user experience with smart default settings and easy-to-use tools

By addressing the challenges and constraints, we have significantly enhanced the Content-aware Fill feature, making it more efficient and user-friendly for image retouchers.

Press

Sneak Peek: This is Content-Aware Fill on Steroids

Adobe Photoshop’s Content-Aware Fill is a powerful way to remove portions of photos, but its results can fall short and it doesn’t have tools for

PetaPixelMichael Zhang

Adobe brings Content-Aware Fill, Background Removal, and more to Photoshop for iPad

Adobe has finally brought Content-Aware Fill to Photoshop for iPad. Other new and improved features include Remove Background, Select Subject, Auto adjustments and more.

DPReviewGannon Burgett

Tweets