Plan: Iterate Layers Panel Visual Design

Goal

Iteratively improve the iced layers panel to match the Photoshop reference screenshots. Test, take screenshots, compare, and fix until it looks right.

Visual Issues to Fix (from code analysis)

1. Active Layer Row Styling

Current: active_item_bg uses bg_active (#404040) with 1px accent border Photoshop: Subtle blue-tinted background fill, no prominent border Fix: Change active row to use accent color at low alpha (0.15-0.2) for background, remove or淡化 the border

2. Layer Row Spacing

Current: spacing(1) between rows — too tight Photoshop: ~4px spacing between rows Fix: Increase to spacing(2) or spacing(3)

3. Visibility Icon

Current: ◉/○ Unicode characters Photoshop: Eye icon (👁) Fix: Use eye emoji or simpler toggle indicator

4. Thumbnail Border

Current: No border on thumbnails Photoshop: 1px subtle border around thumbnails Fix: Add container with border around thumbnail image

5. Layer Name Font

Current: Monospace font for active layer Photoshop: Proportional font for all layers Fix: Remove .font(iced::Font::MONOSPACE) from active layer name

6. Controls Layout

Current: Blend mode, opacity, lock in separate rows Photoshop: More compact, blend mode + opacity on same row Fix: Reorganize controls to be more compact

7. Button Styling

Current: Default iced button styling Photoshop: Flat buttons with subtle borders, no background Fix: Add button style function for flat Photoshop-like buttons

8. Panel Header

Current: "Layers" text with monospace font Photoshop: Panel title with specific styling Fix: Adjust header to match Photoshop's panel title style

Implementation Steps

Fix active row styling — Change background to accent color at low alpha
Increase row spacing — Change from spacing(1) to spacing(2)
Fix visibility icon — Use eye emoji or simpler indicator
Add thumbnail border — Wrap thumbnail in container with border
Fix font — Remove monospace from active layer name
Reorganize controls — Make more compact
Add button styles — Create flat Photoshop-like button style
Fix panel header — Match Photoshop's title style

Verification

Build and run the app
Take screenshot of Layers panel
Compare with Photoshop reference
Identify remaining differences
Repeat until satisfied

2.5 KiB Raw Permalink Blame History