PSD Layer FX (Style) Geliştirme Süreci Planı

Amaç

PSD layer efektlerinin (Drop Shadow, Inner Shadow, Outer Glow, Inner Glow, Bevel Emboss, Satin, Color Overlay, Gradient Overlay, Pattern Overlay, Stroke) rendering motorunu test edip geliştirmek için otomatikleştirilmiş bir test süreci oluşturmak.

İnceleme Sonuçları

Mevcut Altyapı

hcie-fx kütüphanesi: Layer efektlerini parse edip render eder
- types.rs: LayerEffect enum'ları ve veri yapıları
- parser.rs: lfx2 ve lrFX binary formatlarını parse eder
- shadow.rs: Efektleri canvas üzerine uygular (apply_layer_effects)
test_styles_composite.rs: PSD dosyasını import eder, efektleri uygular, PNG'e kaydeder, referansla karşılaştırır

Test Dizini

Hedef: /home/hc/Pictures/_psd_stil_test/
Mevcut dosyalar: drop_shadow.psd, emboss.psd, inner_bevel.psd, inner_shadow.psd, blend.psd

Geliştirme Süreci

Aşama 1: Otomatik Test Dosyası Oluşturucu

Rust programı yazılacak:

Her stil için ayrı ayrı 512x512 px PSD dosyası üretir
Layer efekt parametrelerini kod içinde belirtir
Asimetrik şekiller kullanır (matematiksel aynılık önlenir)
PNG referans çıktısı üretir (Photoshop/Photopea uyumlu)
Multi-layer test dosyası (tüm stilleri içeren)

Aşama 2: Tek Katmanlı Test Dosyaları

Dosya adı = stil adı ilkesi:

Stil	Dosya	Özel Parametreler
`drop_shadow.psd`	Drop Shadow	angle=120°, distance=20px, size=15px, spread=5%
`inner_shadow.psd`	Inner Shadow	angle=120°, distance=10px, choke=5px, size=10px
`outer_glow.psd`	Outer Glow	size=15px, spread=5%
`inner_glow.psd`	Inner Glow	choke=5px, size=10px
`bevel_emboss.psd`	Bevel & Emboss	style=InnerBevel, depth=100%, size=5px
`satin.psd`	Satin	angle=120°, distance=10px, size=10px
`color_overlay.psd`	Color Overlay	blend=Overlay, color=#FF6B35
`gradient_overlay.psd`	Gradient Overlay	angle=90°, linear gradient
`pattern_overlay.psd`	Pattern Overlay	(gray placeholder)
`stroke.psd`	Stroke	position=Outside, size=5px

Aşama 3: Çok Katmanlı Demo Dosyası

all_effects.psd (2048x1024 px)
Her stil ayrı bir katmanda
Katman sıraları: alt → üst (Drop Shadow, Color Overlay, Inner Glow, Inner Shadow, Satin, Gradient Overlay, Outer Glow, Stroke, Bevel Emboss, Pattern Overlay)
Her katman farklı şekil (asimetrik)

Aşama 4: Şekil Tasarımı (Asimetrik)

Her test dosyası için farklı şekil:

drop_shadow: Sağa bakan şekil (gölge yönü testi)
inner_shadow: Aşağı bakan L-şekli
outer_glow: Elli yaylı daire
inner_glow: Yuvarlak köşeli L-şekil
bevel_emboss: Dikdörtgen asimetrik köşeli
satin: Hexagon içinde L harfi
color_overlay: Üçgen + daire kombinasyonu
gradient_overlay: L harfi içinde dikdörtgen
stroke: İçi boş L harfi
pattern_overlay: M harfi

Aşama 5: Otomasyon Script'i

examples/generate_style_tests.rs oluştur:

// PSD binary format yazma (8BPS signature, header, layer + mask info, image data)
// lrFX efekt blokları ekle
// PNG referansları (imagemagick ile compare)

Aşama 6: Test ve Karşılaştırma

Rust kodu ile PSD dosyalarını oku
hcie_composite::composite_layers ile render et
Reference PNG ile compare -metric AE ile fark ölç
Rapor: avg_diff, max_diff, pixel farkı

Dosya Yapısı

Pictures/_psd_stil_test/
├── drop_shadow.psd
├── drop_shadow.png      # Reference
├── inner_shadow.psd
├── inner_shadow.png
├── outer_glow.psd
├── outer_glow.png
├── inner_glow.psd
├── inner_glow.png
├── bevel_emboss.psd
├── bevel_emboss.png
├── satin.psd
├── satin.png
├── color_overlay.psd
├── color_overlay.png
├── gradient_overlay.psd
├── gradient_overlay.png
├── pattern_overlay.psd
├── pattern_overlay.png
├── stroke.psd
├── stroke.png
├── all_effects.psd     # Multi-layer
└── all_effects.png

Uygulama Adımları

examples/generate_style_tests.rs yaz
cargo run --example generate_style_tests ile PSD dosyalarını üret
Photopea ile açıp düzelt (efekt parametreleri hatalı olabilir)
PNG referansları kaydet
examples/test_styles_composite.rs ile test et
Farklılıkları gider, tekrar dene

Not

PSD binary yazma kısıtlı (basit tipler, 8-bit RGB, tek layer)
Blend modları: Normal, Multiply, Screen, Overlay (temel)
Parametre dönüşümleri: PSD fraction (1/65536) formatında

4.5 KiB Raw Permalink Blame History Unescape Escape