Jason
143 lines
5.0 KiB
Markdown
143 lines
5.0 KiB
Markdown
# 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
|
|
|
|
```json
|
|
{
|
|
"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:
|
|
|
|
```json
|
|
{
|
|
"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.
|