PSD a PNG: cuando envía RGBA, detalla los bordes alfa, la intención del perfil de color y lo que realmente significa "combinar visible"
PNG se adapta a íconos, recortes y pegatinas que necesitan un alfa limpio: a diferencia de JPEG, evita daños en bloques en los bordes suaves, pero los patrones a todo color pueden volverse grandes y los píxeles semitransparentes aún se ven diferentes según las reglas de composición del espectador. PSD del lado del servidor a PNG es efectivamente “rasterizar el compuesto visible y luego codificar”; no conserva el tipo en vivo ni los vectores, por lo que el PSD sigue siendo el maestro y el PNG es el traspaso. Escriba si necesita alfa completo, si los objetivos son sRGB y si el arte se encuentra en una interfaz de usuario oscura; de lo contrario, diseño, web y preimpresión discutirán sobre el mismo archivo con tres orígenes. Estandarice el control de calidad como tapete claro + tapete oscuro + el fondo CSS real y registre hashes para que los debates vuelvan a ser evidencia en lugar de capturas de pantalla.
Cómo usar PSD a PNG en línea: cargue el archivo firmado, espere a que se fusionen las capas visibles, descárguelo y luego valide los bordes transparentes en tapetes claros y oscuros antes de versionar el recurso.
- Congele el estado de visibilidad externa en Photoshop: oculte anotaciones y elimine capas, asegúrese de que ninguna placa blanca bloquee áreas que deban permanecer transparentes, confirme el tamaño de la mesa de trabajo y los objetivos @2x/@3x en el informe, cargue y lea la nota de combinación visible de la herramienta para que nadie espere semántica en capas de un PNG.
- Descargue e inspeccione el canal alfa, luego componga el PNG sobre blanco, una superficie completamente oscura y el fondo de la página en vivo; amplíe el cabello, las sombras y los trazos finos para obtener flecos grises, halos de color o irregularidades; si falla, corrija los mates/recorte en el PSD y vuelva a ejecutarlo en lugar de retocar el PNG a ciegas.
- Se envía con un nombre de archivo versionado, espacio de color de registro, política de inserción ICC, borde largo y aprobador; si una CDN lo sirve, las URL de huellas dactilares para que "reemplacé el activo" no colisionen con los cachés de un mes.
Preguntas frecuentes sobre PSD a PNG (alfa, visible para combinación y tamaño de archivo)
Los bordes se ven grises sobre fondos negros, pero finos sobre fondos blancos. ¿Está rota la conversión o la premultiplicación alfa y el contexto de visualización?
Los píxeles suavizados semitransparentes interactúan con el color de fondo; si un lado asume alfa directo y el otro premultiplicado, se obtiene la clásica “franja gris mate oscura”. Valide en la web real o en el fondo del motor, documente la suposición de composición y ajuste los mates o las opciones de exportación en Photoshop; pedir “otra exportación PNG” sin cambiar las matemáticas rara vez soluciona el problema.
Photoshop "Exportar como" y el resultado de la combinación en línea difieren ligeramente: ¿qué debemos comprobar antes de culpar al servicio?
Las diferencias a menudo provienen de pilas de visibilidad, grupos de recorte, alcance de ajuste u objetos inteligentes obsoletos, no del codificador PNG. Fusionar lo visible en una capa temporal localmente y comparar las regiones de interés (ROI); Si la fusión local ya no está de acuerdo con Exportar como, corrija el PSD en lugar de escalar el proceso.
Los PNG heroicos son enormes y las facturas de CDN duelen: ¿deberíamos prohibir PNG en todo el sitio o cuándo PNG sigue siendo el comercio correcto?
Mantenga PNG donde necesite alfa suave o recortes nítidos; tamaño de ataque limitando el borde largo, cuantificando a la paleta cuando el arte lo apruebe, dividiendo los fondos de las fotografías en JPEG/WebP/AVIF y documentando qué regiones realmente requieren alfa. Una prohibición general genera más hackeos de los que ahorra bytes.
Las letras pequeñas y las líneas finas se ven nítidas en el PNG grande, pero borrosas después de escalar el navegador. ¿Deberíamos arreglar el PSD o el CSS?
Alinee con la cuadrícula de píxeles para el tamaño enviado, evite dimensiones impares y empujones de medio píxel, y acuerde la "renderización de imágenes" más rutas de escala de números enteros; verifique en 1x y 2x. Engrosar trazos solo en PNG sin corregir la escala del diseño generalmente cambia un artefacto por otro.
Los clientes dicen que el PNG “no tiene capas” y no se puede editar la copia. ¿Cómo establecemos las expectativas antes de la transferencia?
PNG es una transferencia de trama, no un diseño editable; Si se prometió la edición, envíe PSD (o la fuente acordada) junto con los archivos RASTER_FINAL versus EDITABLE_MASTER. Aclare por escrito que PSD a PNG en línea se está aplanando, no "exportando fuentes de proyectos".