Jason
116 lines
3.8 KiB
Markdown
116 lines
3.8 KiB
Markdown
# Visual Test Images - Layer Reference
|
|
|
|
## Image Overview
|
|
|
|
All images created with **800x600px** canvas dimensions for perfect alignment.
|
|
|
|
## Layers Created
|
|
|
|
### 1. **Base Layer** (`/layers/base.jpg`)
|
|
- **Sky blue background** (#87CEEB)
|
|
- **Green grass** at bottom
|
|
- **Tan house** with dark brown roof
|
|
- **Two side windows** with dividers
|
|
- **Door opening** in center (lighter tan rectangle)
|
|
- **Opaque JPG** - the foundation layer
|
|
|
|
### 2. **Door Layer** (`/404/door-{color}.png`)
|
|
Created in 4 colors:
|
|
- `door-white.png` - White door (#FFFFFF)
|
|
- `door-black.png` - Dark gray/black door (#2C2C2C)
|
|
- `door-bronze.png` - Bronze door (#8B6914)
|
|
- `door-tan.png` - Tan door (#D2B48C)
|
|
|
|
Each door has:
|
|
- **Rectangular shape** positioned in the door opening
|
|
- **Two decorative panels** (outlined rectangles)
|
|
- **Small black circle** on right side marking handle position
|
|
- **Transparent PNG** - shows house through transparent areas
|
|
|
|
### 3. **Hardware Layer** (`/layers/hardware.png`)
|
|
- **Gold circle** (#FFD700) for door handle
|
|
- **Bronze backplate** (#B8860B) behind handle
|
|
- **Light highlight** for 3D effect
|
|
- **Positioned on right side** (for left-hinge door)
|
|
- **Transparent PNG** - only handle visible
|
|
|
|
### 4. **Foreground Layer** (`/layers/foreground.png`)
|
|
- **Green bushes** at bottom corners (#228B22)
|
|
- **Pink flowers** with gold centers
|
|
- **Plants overlap bottom of door** realistically
|
|
- **Transparent PNG** - plants appear in front
|
|
|
|
## How They Stack (z-index order)
|
|
|
|
```
|
|
Layer 5: Foreground (plants) - On top, in front of everything
|
|
Layer 3: Hardware (handle) - Above door
|
|
Layer 2: Door (colored) - In door opening
|
|
Layer 1: Base (house) - Background, always visible
|
|
```
|
|
|
|
## Left-Hinge vs Right-Hinge
|
|
|
|
### Product 404 (Left-Hinge)
|
|
- Door handle on **right side** of door
|
|
- Door opens to the right
|
|
- Uses images as created
|
|
|
|
### Product 404R (Right-Hinge)
|
|
- Door and hardware layers **flipped horizontally**
|
|
- Door handle appears on **left side** of door
|
|
- Door opens to the left
|
|
- Same image files, just CSS transformed!
|
|
|
|
## Visual Features to Notice
|
|
|
|
1. **Door positioning**: The door rectangle fits perfectly in the lighter opening on the house
|
|
2. **Handle alignment**: The small black dot on the door matches the gold handle position
|
|
3. **Plants overlap**: The foreground plants appear in front of the door bottom
|
|
4. **Color changes**: Select different colors to see door change while everything else stays the same
|
|
5. **Flip effect**: Compare 404 vs 404R to see the door and handle swap sides
|
|
|
|
## Technical Details
|
|
|
|
- **Canvas size**: 800x600 pixels (all layers)
|
|
- **Format**: JPG for base (opaque), PNG for others (transparency)
|
|
- **Color depth**: RGB/RGBA
|
|
- **Positioning**: Centered with `object-fit: contain`
|
|
|
|
## Test Checklist
|
|
|
|
When viewing the products, verify:
|
|
- ✅ House background always visible
|
|
- ✅ Door fits in opening
|
|
- ✅ Door color changes when selected
|
|
- ✅ Gold handle appears on door
|
|
- ✅ Plants appear in front of door
|
|
- ✅ 404R has flipped door and handle
|
|
- ✅ No white gaps or misalignment
|
|
|
|
## File Locations
|
|
|
|
```
|
|
app/static/images/
|
|
└── window/
|
|
└── storm-window/
|
|
├── 404/
|
|
│ ├── door-white.png
|
|
│ ├── door-black.png
|
|
│ ├── door-bronze.png
|
|
│ └── door-tan.png
|
|
└── layers/
|
|
├── base.jpg
|
|
├── hardware.png
|
|
└── foreground.png
|
|
```
|
|
|
|
## Creating Similar Images
|
|
|
|
Use the script `create_visual_test_images.py` as a template:
|
|
1. Set canvas dimensions (CANVAS_WIDTH, CANVAS_HEIGHT)
|
|
2. Design each layer with proper positioning
|
|
3. Use transparent PNGs for layered elements
|
|
4. Export base layer as JPG, others as PNG
|
|
5. Keep all layers at same canvas size
|