CGW-Quote-Builder/information/FOREGROUND_LAYER_EXAMPLE.md

Foreground Layer Example

Overview

The foreground layer adds depth and realism to product images by placing decorative elements (like plants, porch furniture, or architectural details) in front of the product.

Layer Stacking Order

From back to front:

1. Base Layer (z-index: 1) - Background/house/frame
2. Door Layer (z-index: 2) - Door or window panel (changes with color)
3. Hardware Layer (z-index: 3) - Handles, locks, hinges
4. Overlay Layer (z-index: 4) - Glass views or decorative overlays
5. Foreground Layer (z-index: 5) - Plants, decorative items that appear in front

Creating a Foreground Layer

Step 1: Prepare Your Image

1. Take or create an image of decorative elements (plants, porch items, etc.)
2. Remove the background completely (use Photoshop, GIMP, or Photopea)
3. Save as PNG with transparency
4. Ensure dimensions match your base layer image

Step 2: Position Elements

When creating your foreground layer, position elements to:

• Frame the product naturally
• Not obscure critical product details
• Add depth by having some elements extend beyond product edges
• Consider perspective and lighting consistency

Step 3: Export Settings

• Format: PNG-24
• Transparency: Enabled
• Color Profile: sRGB
• Resolution: Match your base layer (typically 800-1200px width)

JSON Configuration Example

{
  "productCode": "600",
  "description": "#600 PREMIUM ENTRY DOOR",
  "image": "images/600.jpg",
  "colors": ["White", "Black", "Bronze", "Sandstone"],
  "materials": ["Aluminum", "Vinyl"],
  "imageConfig": {
    "layered": true,
    "basePath": "images/products/600/",
    "layers": {
      "base": "house-background.jpg",
      "door": {
        "white": "door-white.png",
        "black": "door-black.png",
        "bronze": "door-bronze.png",
        "sandstone": "door-sandstone.png"
      },
      "hardware": "handle-silver.png",
      "foreground": "front-plants.png"
    }
  }
}

File Structure

app/images/products/600/
├── house-background.jpg        # Background layer with house/frame
├── door-white.png             # White door (transparent background)
├── door-black.png             # Black door (transparent background)
├── door-bronze.png            # Bronze door (transparent background)
├── door-sandstone.png         # Sandstone door (transparent background)
├── handle-silver.png          # Hardware layer (transparent background)
└── front-plants.png           # Foreground layer with plants (transparent background)

Tips for Best Results

Foreground Elements to Consider

• Potted plants: Add life and color to the scene
• Hanging baskets: Create visual interest at different heights
• Porch railings: Partial railings in foreground add depth
• Architectural details: Columns, trim, or decorative elements
• Seasonal decorations: Pumpkins, wreaths, holiday items (create variants)

Technical Tips

• Keep file sizes reasonable (compress PNGs without losing quality)
• Use soft shadows on foreground elements for realism
• Match lighting direction across all layers
• Consider blur/depth of field on very close foreground elements
• Test on different screen sizes to ensure elements don't obscure product

Common Mistakes to Avoid

• ❌ Foreground elements too large, obscuring product
• ❌ Inconsistent lighting between layers
• ❌ Mismatched image dimensions
• ❌ Harsh edges on transparent elements
• ❌ Too much foreground detail competing with product

Advanced: Multiple Foreground Variants

You can create different foreground options for variety:

{
  "productCode": "600",
  "description": "#600 PREMIUM ENTRY DOOR",
  "imageConfig": {
    "layered": true,
    "basePath": "images/products/600/",
    "layers": {
      "base": "house-background.jpg",
      "door": {
        "white": "door-white.png",
        "black": "door-black.png"
      },
      "hardware": "handle-silver.png",
      "foreground": "plants-spring.png"
      // Could add logic to swap between plants-spring.png, plants-summer.png, etc.
    }
  }
}

Testing Your Foreground Layer

1. Load your product page
2. Change door colors - foreground should stay visible on top
3. Verify no important product details are obscured
4. Check on mobile/tablet to ensure proper scaling
5. Test with different browsers for compatibility

Performance Considerations

• PNG files can be large - optimize them using tools like:
  • TinyPNG (https://tinypng.com)
  • ImageOptim (https://imageoptim.com)
  • Photoshop "Export for Web"
• Target file size: 50-200KB for foreground layer
• Use appropriate resolution (no need for 4K if displaying at 800px)

Accessibility Note

The foreground layer has pointer-events: none CSS property, meaning clicks pass through to the controls below. This ensures the decorative layer doesn't interfere with user interaction.