UI mock PSD to PNG: pixel grid, density scales, and light/dark QA—skip one and devices expose it immediately
`ui-mockup-psd-png` bridges design review and engineering handoff. Fractional coordinates and odd widths blur 1 px strokes after rasterization; transparent icons with soft shadows often look muddy on dark themes. Separate shippable asset comps from redline review layers so automation never bakes annotations into production PNGs.
Verwendung
- Enable pixel preview and snapping, land critical edges on whole pixels, derive @2x/@3x from an even-pixel 1x base, and upload using an ASSET-only layer comp.
- View at real CSS sizes in devtools on light and dark shells; if shadows gray out on dark, ship theme-specific PNGs or move to vectors/CSS shadows.
- Update the naming manifest in the same PR as code references and attach byte sizes for performance review.
PSD to PNG (ui) FAQ
UI PNG looks blurry—pixel grid issue?
Half-pixel placement splits anti-aliasing across two device pixels, so strokes look soft; odd dimensions misalign centers when scaled. Snap shapes to the grid, keep 1x dimensions even, and derive multiples mathematically instead of scaling ad hoc.
How to name @2x assets?
Maintain a repo manifest mapping component props to each density filename—use consistent `@2x` suffixes or density folders and let CI fail missing assets; verbal folder conventions break during refactors.
Icon shadows on transparent PNG break in dark mode?
Highlights tuned for white backgrounds read as haze on charcoal UI; ship separate PNGs per theme or author vectors/CSS-driven shadows, and document which theme each file targets.
Mini-program clients are PNG-size sensitive—trade-offs?
When platforms allow, prefer WebP/AVIF; otherwise pack micro-icons into atlases with tuned compression, balancing decode cost on low-end hardware—agree on a byte budget with engineering before locking PNG-only flows.
Annotations leak into exported PNG?
Keep redlines and measurements in a REVIEW comp while automation exports only the ASSET comp—otherwise users download builds with designer arrows baked into icons.