---
title: "Compositing AI output with photography and typography"
description: "AI images are ingredients, not finished designs In professional work, an AI image is rarely the final asset. It becomes one layer in a design: combined…"
url: https://optimizeall.com/learn/ai-image-generation-and-design/compositing-ai-with-design
updated: 2026-10-05
---

AI Image Generation and Design · Editing, upscaling and finishing · lesson 9 of 18 · 7 min

# Compositing AI output with photography and typography

## AI images are ingredients, not finished designs

In professional work, an AI image is rarely the final asset. It becomes one layer in a design: combined with real product photography, brand typography, logos, graphic devices and layout grids. Good compositing makes the result feel intentional and on-brand.

## Common hybrid patterns

| Pattern | How it works | Watch out for |
|---|---|---|
| Real product + AI scene | Cut out product photo; place in generated environment | Matching light direction, shadows, reflections, perspective |
| Real person + AI background | Real portrait with generated backdrop | Edge quality around hair; honest context |
| AI illustration + brand typography | Generated artwork; text set in brand fonts | Contrast and space for text |
| AI texture/pattern + layout | Generated textures as backgrounds | Keep subtle so text stays legible |
| AI concept + real reshoot | AI shows the idea; real shoot delivers final | Clear communication with photographers |

## Matching light and perspective

When combining elements, the eye notices inconsistencies instantly:

1. **Light direction:** shadows and highlights on the product must match the scene's light source.
2. **Color temperature:** a cool daylight product in a warm sunset scene looks pasted on; color-grade to match.
3. **Perspective and horizon:** the camera angle of the product photo should match the scene (shooting product photos with the intended scene angle in mind helps).
4. **Contact shadows:** objects need shadows where they touch surfaces.
5. **Depth of field and grain:** match blur levels and add consistent grain/noise across layers.

Some tools can generate scenes around a product image (product-aware generation) — useful, but still check that the product itself has not been altered.

## Typography over AI imagery

- **Plan space for text** in the prompt ("negative space in the top third").
- **Set text in the design tool** using brand fonts and your type scale.
- **Check contrast** against the actual area behind the text; add scrims or blocks if needed.
- **Avoid AI-generated text** for final copy — it can be misspelled or render pseudo-letters, especially in Arabic, Urdu and other non-Latin scripts.

## Building templates around AI imagery

For recurring content (weekly carousels, thumbnails), design templates with fixed zones:

```
Template: Weekly tip carousel cover (4:5)
Image zone:   top 60%, AI illustration in approved style
Text zone:    bottom 40%, solid brand color block
Headline:     brand font H1, max 7 words
Logo/handle:  bottom-left, symbol version
Prompt snippet: [approved style spec] + [topic subject], negative space top, 4:5
```

The AI output then slots into a consistent structure every week.

## File management for hybrid work

- Keep layered working files (design tool files or PSD/TIFF with layers).
- Name layers: "AI_background_v3", "Product_photo_cutout", "Headline".
- Store the prompt log reference with the file.
- Record which parts are AI-generated — needed for disclosure decisions and client transparency.

## Disclosure considerations for composites

A composite may include both real and AI elements. Consider:

- Is the overall impression realistic enough that viewers might think the whole scene was photographed?
- Does the AI element change the meaning (for example, placing a product in a location it has never been, suggesting a sponsorship or event that didn't happen)?
- Do platform rules require an AI label for "realistic altered or synthetic content" in this case?

When in doubt, label, and make sure no claim is misleading.

## Worked example: a sneaker drop in Riyadh

- Real product photos shot at three angles against gray.
- AI-generated scene: an evening desert road with warm city lights in the distance, generated in 9:16 and 4:5 with negative space at the top.
- Composite: product cut-out placed at the matching angle, color graded warmer, contact shadow painted, subtle grain added.
- Typography: Arabic and English headlines set in the brand's bilingual fonts, right-aligned Arabic, checked by a native reader.
- Disclosure: the campaign is clearly stylized; the brand follows platform guidance on labeling realistic synthetic content.

## Common mistakes

- Mismatched lighting that makes composites look fake.
- Using generated text in final designs.
- Losing track of which elements were AI-generated.
- Placing products in scenes that imply false claims.

## Hands-on: a Figma workflow for AI-assisted layouts

This workflow keeps AI imagery as a swappable ingredient inside a brand-controlled layout. Menu names can change between Figma releases; the concepts stay.

1. **Set up variables and styles.** Create color variables for the brand palette (for example `color/brand/primary`, `color/text/on-dark`) and text styles for headline, subhead and body. Every layout uses these, never raw hex values.
2. **Build a frame per format.** Create frames at 1080×1350 (4:5), 1080×1920 (9:16) and 1920×1080 (16:9). Add layout guides for margins and platform safe zones.
3. **Make a template component.** Inside each frame, add an image rectangle (the AI image goes in as an image fill set to "Fill" or "Crop"), a gradient scrim layer for text contrast, and text layers using your styles. Turn the group into a component with variants for each format.
4. **Drop in the AI image.** Place the edited, upscaled image as the fill. Adjust the crop so the subject sits away from the text zone.
5. **Check contrast.** Use a contrast-checking plugin or your own measurement on the text over the scrim; aim for WCAG 2.2 AA (4.5:1 for normal text, 3:1 for large text).
6. **Name layers by source.** `AI_bg_v4`, `PHOTO_product_front`, `TXT_headline` — this doubles as your disclosure record.
7. **Export.** Select the frames and export PNG or JPG at 1× for these pixel sizes (2× only when the platform accepts larger uploads), sRGB.

If your team uses Figma's own AI image features or node-based workflow tools such as Figma Weave, the same principle applies: the design system (variables, text styles, components) anchors the look; the generated image is one layer.

## Before/after: a composite that looks pasted on

| Problem (before) | Fix (after) |
|---|---|
| Product lit from the right, scene lit from the left | Flip scene or relight product; add highlights on the correct side |
| No shadow where the bottle meets the table | Add a soft contact shadow on a multiply layer |
| Product razor-sharp, background soft but noisy | Match grain across layers; add slight blur to product edges |
| Warm scene, cool product | Color-grade the product toward the scene's temperature, or use a harmonizing feature in your editor, then check the label color against the real product |

## Summary

Treat AI output as a design ingredient: match light, color, perspective and grain when compositing; set typography in your design tool; build templates with fixed zones; track AI elements in layered files; and assess disclosure for realistic composites.

## Video lecture: Compositing AI output with photography and typography

Lecture coming soon · 10 chapters · about 8 minutes. Read the full transcript below.

1. Compositing AI with design
2. Why compositing matters
3. Five hybrid patterns
4. Five matching checks
5. Worked example 1: a candle composite
6. Worked example 2: a sneaker drop in Riyadh
7. Watch me do it: the Figma workflow
8. Type over AI imagery
9. Common mistakes
10. Recap and try this now

## Lecture transcript

### Compositing AI with design

Here's a truth that surprises people new to AI design. The generated image is almost never the final asset. It's an ingredient. The final ad has a real product, the brand's fonts, a logo, a layout grid and a call to action. And when those pieces don't match, the eye notices instantly, even if the viewer can't say why. It just looks pasted on. In this lecture, you'll learn the common hybrid patterns, how to match light and perspective, how to set type over AI imagery, and a Figma workflow that keeps AI images swappable inside a brand-controlled layout. By the end, your composites will look intentional, not assembled.

### Why compositing matters

Why does compositing matter? Because it's where AI work becomes brand work. A beautiful generated scene means nothing if the headline is unreadable, the product is inaccurate, or the colors fight the brand. And it's where you protect accuracy. Real product photos stay real. Real text stays editable and correct. Think of a chef plating a dish. The ingredients might come from anywhere, but the plating is what makes it the restaurant's dish. Compositing is plating. It's also where the time savings from AI are either kept or lost. A good template means every new AI image drops in and is ready in minutes.

### Five hybrid patterns

Here are five hybrid patterns you'll use again and again. Real product plus AI scene: you cut out the product photo and place it in a generated environment. Real person plus AI background: a real portrait with a generated backdrop, handled honestly. AI illustration plus brand typography: generated artwork, with text set in the brand's real fonts. AI texture plus layout: subtle generated textures as backgrounds. And AI concept plus a real reshoot: the AI image shows the idea, and a photographer delivers the final. Notice that in every pattern, the parts that carry facts, like the product, the person, and the words, come from real, controllable sources.

### Five matching checks

Now, the five checks that stop a composite looking pasted on. One, light direction. Shadows and highlights on the product must match the scene's light source. Two, color temperature. A cool product in a warm sunset scene looks fake, so color-grade toward the scene. Some editors have harmonizing features that help, but check that the product's label color is still true. Three, perspective. The camera angle of the product should match the scene. Four, contact shadows. Anything touching a surface needs a shadow where it touches. And five, depth of field and grain. Match blur and add consistent grain across all layers. Here's the key idea. The eye trusts consistency. Break one of these, and the whole image feels wrong.

### Worked example 1: a candle composite

Worked example one, simple. A candle maker has a photo of her candle on a white background and an AI-generated cozy living room. First attempt: it looks pasted on. The room is lit by a window on the left, but the candle's highlight is on the right. So she flips the scene horizontally, since there's no text in it to worry about. Next, there's no shadow where the candle sits on the table. She paints a soft contact shadow on a multiply layer. The candle is razor sharp while the room is soft and grainy, so she adds matching grain to the candle. Three fixes, and now it looks like a photo taken in that room.

### Worked example 2: a sneaker drop in Riyadh

Worked example two, a business scenario with illustrative details. A sneaker brand in Riyadh is launching a limited drop. The team shoots the real sneaker on a turntable from the same angle they plan to use in the scene. They generate a desert dusk environment with a low camera angle, leaving the right third calm. In the layout, the sneaker photo sits on top with a contact shadow and warm color grade. A subtle gradient scrim sits under the Arabic and English headlines, which are set in the brand's licensed fonts. The countdown date is live text, not generated. They build the layout once as a template with three format variants, so when the next colorway drops, they swap two layers and export.

### Watch me do it: the Figma workflow

Watch me do it in Figma. I start by creating color variables for the brand palette and text styles for headline, subhead and body. Next, I create three frames: four by five, nine by sixteen, and sixteen by nine, each with margin guides and safe zones. Inside the four by five frame, I add a rectangle for the image, a gradient scrim, and my text layers using the styles. I turn that into a component with a variant for each format. Now I drop the AI image in as the rectangle's fill and adjust the crop so the subject stays away from the text. I check contrast with a plugin. Then I name layers by source, like AI background version four, and export all three frames in sRGB.

### Type over AI imagery

A few words on typography over AI images, because this is where many composites fail. Generated images are often busy, and text needs calm space. So prompt for negative space in the first place. If the background is still too busy, add a scrim, a gradient or a solid panel behind the text. Check contrast. Aim for the WCAG two point two AA levels: four point five to one for normal text, and three to one for large text. Never let the model render your headline, prices or legal text. Set them as live text in the layout, where you can proofread, translate and edit them. That's especially important for Arabic, Urdu and other scripts where AI text rendering is less reliable.

### Common mistakes

Common mistakes. Ignoring light direction, so the product glows from the wrong side. Forgetting contact shadows, so objects float. Letting the upscaler or the scene model subtly change the real product. Placing text over the busiest part of the image. Having the AI render the headline or price. Flattening everything into one layer, so you can't swap the background next month. And losing track of which layers are AI and which are real, which makes disclosure and client questions harder. Naming layers by source is a two-second habit that saves hours.

### Recap and try this now

Let's recap. The AI image is an ingredient. Keep facts real: products, people and words come from real, controllable sources. Match light, color temperature, perspective, contact shadows and grain. Give text calm space, use scrims, check contrast against WCAG two point two, and keep every word as live text. Build your layouts as templates with variables, styles and format variants, so each new image drops in quickly. Try this now. Create one composite that combines a real product or object photo with an AI background. Match the light, shadow and grain, add a headline in your design tool, name every layer by source, and export it in two formats.

## Key takeaways

- Treat AI images as one layer; products, people and words come from real, controllable sources.
- Match light direction, color temperature, perspective, contact shadows, blur and grain across layers.
- Give text calm space, use scrims, and check WCAG 2.2 AA contrast; never let the model render headlines or prices.
- Build Figma templates with variables, text styles and format variants so new images drop in quickly.
- Name layers by source (AI, photo, text) to support swaps, client questions and disclosure.

## Try it

Create a composite that combines a real product or object photo with an AI-generated background. Match light, shadow and grain, add headline text in your design tool, and label every layer by source.

- [Previous: Upscaling, artifacts and quality control](https://optimizeall.com/learn/ai-image-generation-and-design/upscaling-and-quality-control)
- [Next: Consistent characters, mascots and products](https://optimizeall.com/learn/ai-image-generation-and-design/consistent-characters-and-products)
- [All lessons of AI Image Generation and Design](https://optimizeall.com/learn/ai-image-generation-and-design)