Layer Compositing Fundamentals - Complete Blend Mode Guide with Practical Techniques

Layer Compositing Concepts - Understanding Per-Pixel Operations

Layer compositing (blending) defines the mathematical formula used to mix color values when stacking two or more images. Photoshop offers 27 blend modes, but each is fundamentally a mathematical function taking "upper layer pixel value" and "lower layer pixel value" as inputs.

Basic terminology: The upper layer is called "Blend color," the lower layer is "Base color," and the computation result is "Result color." Calculations use values normalized to 0.0-1.0 (for 8-bit images, pixel values divided by 255).

Normal mode: The most basic mode where the upper layer completely covers the lower layer. Reducing Opacity applies linear interpolation: Result = Blend x alpha + Base x (1 - alpha). At alpha=0.5, both layers mix equally at 50%.

Blend mode categories: Photoshop's blend modes are organized into 6 functional groups:

• Darken group (Darken, Multiply, Color Burn, Linear Burn, Darker Color): Results are darker than base
• Lighten group (Lighten, Screen, Color Dodge, Linear Dodge, Lighter Color): Results are lighter than base
• Contrast group (Overlay, Soft Light, Hard Light, Vivid Light, Linear Light, Pin Light, Hard Mix): Different processing above and below midtones
• Inversion group (Difference, Exclusion, Subtract, Divide): Uses color differences and inversions

Multiply and Screen - The Two Most Frequently Used Modes

Multiply and Screen are the most commonly used fundamental blend modes. They are mathematically symmetrical - Multiply darkens while Screen lightens.

Multiply formula: Result = Base x Blend

Multiplying values between 0.0 and 1.0 always produces results equal to or less than inputs (darkening). Multiplying with white (1.0) leaves results unchanged; multiplying with black (0.0) produces black. This property makes white backgrounds transparent when compositing logos or text scanned on white paper.

Multiply practical uses:

• Compositing white-background scans (hand-drawn illustrations, signatures) onto photos
• Adding shadows (gray layers in Multiply mode)
• Applying only dark portions of textures
• Combining differently-exposed photos for HDR-like effects

Screen formula: Result = 1 - (1 - Base) x (1 - Blend)

The "inverse" of Multiply - results are always equal to or greater than inputs (lightening). Screening with black (0.0) leaves results unchanged; screening with white (1.0) produces white. Black backgrounds become transparent, perfect for compositing lens flares, sparks, and light particles.

Screen practical uses:

• Compositing black-background lens flares and light effects
• Brightening dark images (duplicate layer in Screen mode)
• Adding fog or light diffusion effects
• Compositing fireworks or lightning onto night scenes

Both modes are available via CSS mix-blend-mode for web design text overlays and hover effects.

Overlay and Soft Light - Primary Contrast Adjustment Modes

Overlay and Soft Light are the most frequently used modes for contrast adjustment. They create an "S-curve" effect using 50% gray as the boundary - darkening shadows and brightening highlights simultaneously.

Overlay formula:

If Base <= 0.5: Result = 2 x Base x Blend

If Base > 0.5: Result = 1 - 2 x (1 - Base) x (1 - Blend)

Multiply applies to dark base areas (below 0.5) while Screen applies to bright areas (above 0.5). Blending 50% gray produces no change. This "neutral" property enables non-destructive dodge and burn - create a 50% gray layer set to Overlay, then paint with white (lighten) or black (darken) for localized brightness adjustments.

Overlay practical uses:

• Texture compositing (paper grain, concrete, fabric overlaid on photos)
• Dodge and burn (50% gray layer + Overlay mode)
• Color grading (colored layers in Overlay mode)
• Contrast enhancement (duplicate image in Overlay, adjust opacity)

Soft Light: Produces gentler effects than Overlay. The formula is more complex, but results in approximately half the contrast change. Ideal for portrait skin retouching and subtle color grading. Use as an alternative when Overlay is too aggressive.

Hard Light: The "reverse" of Overlay, using the blend color as the reference. Dark blend colors apply Multiply; light blend colors apply Screen. Used for strong texture effects and dramatic lighting.

Difference and Exclusion - Alignment and Special Effects

Difference and Exclusion visualize differences between two images. Beyond creative special effects, they serve practical purposes like image alignment and version comparison.

Difference formula: Result = |Base - Blend|

Takes the absolute difference between two pixel values. Identical images produce pure black (zero difference). This property enables pixel-precise alignment during panorama stitching and visualizing retouching changes between before/after versions.

Alignment application: Stack two images in Difference mode and move the upper layer until the display becomes maximally dark (black). Perfect alignment produces pure black, enabling pixel-level precision. Photoshop's "Auto-Align Layers" feature uses this principle internally.

Version comparison: Stacking before/after retouching images in Difference mode highlights only changed areas as bright pixels. Useful for client revision reports and quality control change verification. Even subtle changes (color correction, noise reduction) become visible as differences.

Exclusion formula: Result = Base + Blend - 2 x Base x Blend

Similar to Difference but with lower contrast. Midtones blended together produce 50% gray, creating gentler inversion effects. Used for color effects in art and poster design.

Creative applications: Gradient layers in Difference mode produce psychedelic color effects, effective for music event flyers and album artwork. At 20-30% opacity, it adds subtle color shifts as a color grading technique for photography.

CSS and Canvas API Blend Mode Implementation - Web Applications

Blend modes are available not only in Photoshop but also through CSS and HTML5 Canvas API. They enable interactive visual effects and real-time image compositing in web design.

CSS mix-blend-mode: Blends an element with elements behind it.

.overlay-text { mix-blend-mode: multiply; color: #333; }

Text placed over an image with Multiply mode shows the image texture through the text. Hover interactions that switch blend modes are achievable with CSS transitions.

CSS background-blend-mode: Blends multiple background images within the same element.

.hero { background: url(texture.png), url(photo.jpg); background-blend-mode: overlay; }

Composites texture and photo images in Overlay mode for rich visual effects without JavaScript. Duotone effects combining gradients with photos are a popular technique.

Canvas API implementation:

ctx.globalCompositeOperation = 'screen';

The Canvas 2D context's globalCompositeOperation property specifies blend mode during drawing. Supported modes include multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, and luminosity - 15 modes total.

WebGL shader custom implementation: Writing blend mode formulas directly in fragment shaders enables GPU-accelerated real-time compositing. All 27 Photoshop modes can be reproduced, plus custom blend functions can be defined. Essential technology for web-based image editing applications.

Photoshop and layer compositing books can be found on Amazon

Practical Workflows - Non-Destructive Editing with Combined Blend Modes

Professional image editing uses non-destructive workflows combining multiple blend modes. Rather than directly modifying source images, adjustment layers and blend mode combinations provide flexible effect control.

Dodge and burn (localized brightness): (1) Create new layer filled with 50% gray. (2) Set blend mode to Overlay. (3) Paint with white brush to brighten areas, black brush to darken. Use 10-20% opacity brushes, building gradually for natural lighting adjustments. Applied to portrait facial contouring and landscape light direction enhancement.

Color grading: (1) Create solid color layer (e.g., warm orange #FF8C00). (2) Set blend mode to Soft Light. (3) Adjust opacity to 15-25%. This alone applies a cinematic warm tone across the entire image. Stack multiple color layers to apply different colors to shadows and highlights for split-toning effects.

Texture overlay: (1) Place texture image (paper, film grain, light leaks) as the top layer. (2) Set blend mode to Overlay or Soft Light. (3) Adjust opacity for effect strength. Film grain texture at 10-15% opacity adds analog character to digital photographs.

Vignette addition: (1) Create new layer. (2) Make elliptical selection at center, invert selection. (3) Fill with black, apply large Gaussian blur. (4) Set blend mode to Multiply at 30-50% opacity. Recreates lens vignetting that draws viewer attention toward the center of the frame.