Generated Backgrounds with AI

Designed contextual background replacement in Photoshop Desktop

ROLE

Lead UX Designer

EXPERTISE

UX/UI Design, User research

IMPACT

13k+ Users on beta launch

Project description

Led UX and interaction design for Generate Background, a generative-AI feature for Photoshop Desktop that removes backgrounds, repositions subjects, and replaces scenes with AI-generated, imported, or color fills in one seamless flow

I introduced a bottom-layer, context-aware workflow that integrates background generation and import into the main edit surface, removing tool switching and speeding complex edits.

Timeline

September 2023 – May 2024

Background

Problem: no purpose-built, fast workflow for background replacement in Photoshop.
Solution: designed an integrated flow for generative, imported, or color-fill backgrounds.
Core elements: clear in-app feedback, reusable bottom-layer logic, subject-aware masking.
Process: built vision prototypes and aligned stakeholders and PMs.
Outcome: shipped from concept to full launch in six months.

SOLUTIONS- FILL COLOR, import an image, and Generate background

Features in the background replace feature

Process

Designing

I led a complete redesign, creating a contextual workflow that supports AI-generated, imported, and color-filled backgrounds. I introduced the null-state context bar, contextual action bar specifically for background replace, layer-based interactions, and background-aware masking.

Development & Implementation

Partnered with engineers to introduce new layer behaviors and real-time masking updates.
Designed interactions that future-proof the UI for upcoming subject-aware tools.
Added inline background variations and in-flow transparency feedback for immediate visual confirmation

User Research

Conducted iterative user testing that began with a background-removal study. Feedback prompted a pivot from a standalone tool to an integrated workflow, and multiple validation rounds confirmed the solution’s ease, clarity, and speed.

KEY UX ChaLLENGES

TIMELINE & MY ROLE

Solutions

Key Capabilities of Photoshop’s Background-Replace Workflow

One-Click Subject Detection

Automatically isolates the main subject with pixel-level masks.
Supports manual add/subtract brushes for quick touch-ups.

Generative Background Creation

Uses Firefly to synthesize scene-aware backgrounds that match lighting, color, and perspective.
Generates multiple inline variations for rapid comparison.

Imported & Filled Background Options

Drag-and-drop any external image, gradient, or solid color.
Auto-scales and positions the new layer to fit the canvas.

Contextual Action Bar

Surfaces the most relevant controls: Generate, Swap, Refine, and Delete are directly on the canvas.
Reduces panel hunting and keeps focus on the artwork.

Bottom-Layer Architecture

Adds the replacement background as a locked layer at the base of the stack, preserving existing edits.
Enables non-destructive toggling or re-generation at any time.

Real-Time Preview & Lighting Match

Instantly renders background swaps so users see final results without dialog boxes.
Harmonizes global color and lighting to blend subject and scene.

Edge & Mask Refinement Tools

Feather, shift, or re-sample masks to remove halos.
Edge-aware refinements maintain hair, fur, and semi-transparent areas.

Subject Repositioning Handles

Click-and-drag UI lets users move, flip, or scale the foreground subject after the background swap.
Automatically re-calculates shadows and perspective.

Reusable Presets & History States

Save preferred prompts or imported backgrounds for future projects.
Step back through any generation in the History panel without losing mask integrity.