Cómo convertir de PSD a PNG (y acoplar las capas correctamente)
Por qué convertir de PSD a PNG es más complicado de lo que parece
Un archivo PSD no es una sola imagen. Es una receta compleja: una pila de capas, capas de ajuste, máscaras, objetos inteligentes y modos de fusión que solo cobran sentido cuando una aplicación potente como Photoshop los procesa. Si intentas convertir un PSD a PNG sin entender esto, las cosas saldrán mal. Podrías obtener un fondo blanco opaco donde debería haber transparencia, ver que falta texto porque una capa de fuente no se renderizó, o notar extraños cambios de color porque se ignoró una capa de ajuste. El formato PNG es un formato de rasterización simple. Almacena una cuadrícula de píxeles, no una lista de instrucciones. La conversión es, en realidad, un trabajo de renderizado. Estás colapsando todas esas instrucciones de Photoshop en una cuadrícula final de píxeles y luego guardando esa cuadrícula como un PNG sin pérdida. La calidad de tu imagen final depende por completo de lo bien que ese renderizado gestione todo lo que contiene el archivo de origen. Los fallos más comunes son fáciles de detectar una vez que sabes qué buscar. La transparencia a menudo se reemplaza con un relleno blanco o negro sólido. Los efectos de capa como sombras paralelas y resplandores pueden desaparecer por completo. Los objetos inteligentes podrían renderizarse a baja resolución porque no se rasterizaron primero. Y los perfiles de color eliminados pueden hacer que tus imágenes se vean descoloridas en pantallas calibradas. Conocer estos escollos de antemano te ahorra un montón de frustración y trabajo extra.
Cómo acoplar capas en Photoshop antes de exportar
Si tienes Adobe Photoshop, acoplar y exportar manualmente te da un control total. La elección crucial está entre 'Acoplar imagen' y 'Combinar visibles'. Suenan parecido, pero hacen cosas muy diferentes. 'Acoplar imagen' (Capa > Acoplar imagen) fusiona absolutamente todas las capas —incluso las ocultas— y rellena todas las áreas transparentes con blanco. Para un PNG que necesita un fondo transparente, esta es casi siempre la opción incorrecta. En su lugar, usa 'Combinar visibles' (Shift+Ctrl+Alt+E en Windows / Shift+Cmd+Option+E en Mac). Este atajo genial estampa una copia combinada de todas las capas visibles en una nueva capa en la parte superior de tu pila, dejando tus capas originales intactas debajo. Luego puedes exportar solo esa nueva capa combinada, con su transparencia y todo. Para la exportación en sí, no uses el antiguo comando 'Guardar como'. Ve directamente a Archivo > Exportar > Exportar como. En ese diálogo, establece el Formato en PNG y asegúrate de que la casilla 'Transparencia' esté marcada. Para uso en pantalla, 72 PPI es el estándar. Para cualquier cosa de alta resolución, como para impresión o pantallas Retina, usa 144 o 300 PPI. Recuerda, el valor de PPI es solo metadatos; un lienzo de 2000×2000 píxeles a 72 PPI exporta un PNG de 2000×2000 píxeles. Las dimensiones físicas no cambian. Un último consejo profesional: si tu PSD utiliza un perfil de color creado para impresión, como CMYK o Adobe RGB 1998, debes convertirlo a sRGB antes de exportar para la web. Ve a Edición > Convertir en perfil, selecciona sRGB IEC61966-2.1 y utiliza el modo de interpretación Colorimétrico relativo con la compensación de punto negro marcada. Saltarse este paso es la razón número uno por la que los diseños cuidadosamente elaborados se ven apagados y descoloridos en un navegador web.
Convertir de PSD a PNG online con CocoConvert
No todo el mundo tiene una suscripción a Photoshop, e incluso si la tienes, convertir una carpeta llena de PSDs uno por uno es una tarea increíblemente aburrida. El [conversor de PSD a PNG](/convert/psd-to-png) de CocoConvert resuelve esto gestionando el renderizado en un servidor. Simplemente subes el PSD y obtienes un PNG correctamente acoplado, sin necesidad de tener software de diseño en tu equipo. El conversor combina de forma inteligente todas las capas visibles mientras preserva el canal alfa. Eso significa que las áreas transparentes en tu archivo de Photoshop permanecen transparentes en el PNG final, sin ese temido fondo blanco. Gestiona de forma fiable los tipos de capa comunes, incluyendo imágenes rasterizadas, capas de texto (que se renderizan a la resolución nativa del documento) y capas de ajuste básicas como Niveles, Curvas y Tono/Saturación. Usarlo es muy sencillo. Ve a /convert/psd-to-png, arrastra tu PSD a la página o haz clic en 'Elegir archivo' y pulsa Convertir. La herramienta admite archivos de hasta 50 MB. El procesamiento suele tardar solo entre 5 y 15 segundos para un archivo típico, después de lo cual obtienes un enlace de descarga para el archivo PNG sin pérdida. Si estás trabajando con un lote de archivos, como un conjunto de iconos o un kit de interfaz de usuario, puedes subir varios PSD a la vez. Cada uno se procesa por separado, y puedes descargar los PNG resultantes individualmente u obtenerlos todos en un único archivo ZIP. Es un gran ahorro de tiempo.
Lo que CocoConvert no puede gestionar (seamos sinceros)
Las herramientas automatizadas tienen límites, y es mejor conocerlos de antemano que descubrirlos después de entregar los archivos a un cliente. Los objetos inteligentes son lo principal a tener en cuenta. Si tu PSD contiene objetos inteligentes incrustados o enlazados, CocoConvert los renderiza a su tamaño dentro del documento, no a su propia resolución nativa. Por ejemplo, un gráfico vectorial de 4000px colocado como objeto inteligente en un lienzo de 1000px se renderizará a 1000px. No pierdes calidad en relación con el lienzo, pero tampoco obtienes el beneficio de la mayor resolución interna del objeto inteligente. Para eso, necesitas rasterizar primero el objeto inteligente en Photoshop (Capa > Objetos inteligentes > Rasterizar). Las capas 3D y las capas de vídeo no son compatibles. Cualquier PSD que las contenga tendrá esas capas específicas omitidas en el PNG final, mostrando lo que hubiera debajo de ellas. Algunos modos de fusión complejos pueden ser problemáticos. Específicamente, Disolver, Mezcla fuerte y ciertos modos basados en la luminosidad podrían renderizarse de forma ligeramente diferente a como lo hacen en Photoshop. La diferencia suele ser mínima (unos pocos valores de color por canal), pero para un trabajo que requiera perfección a nivel de píxel, siempre debes verificar el resultado comparándolo con una exportación de referencia desde Photoshop. Los PSD en CMYK se convierten automáticamente a sRGB durante el procesamiento. Esta conversión utiliza un perfil ICC estándar, que es preciso para la mayoría de los usos en web y pantalla. Sin embargo, no coincidirá perfectamente con un flujo de trabajo personalizado y calibrado para impresión. Si estás preparando archivos para impresión offset, realiza la conversión de color tú mismo en Photoshop para tener el máximo control.
Elegir los ajustes de PNG correctos: profundidad de bits y compresión
El formato PNG viene en dos variantes principales, 8 bits y 24 bits (a menudo llamadas PNG-8 y PNG-24), y elegir la correcta es importante. PNG-24 es la opción de alta calidad. Almacena 16.7 millones de colores más un canal alfa completo de 8 bits para una transparencia suave. Esto es lo que necesitas para fotografías, degradados complejos y cualquier imagen con sutiles variaciones de color. CocoConvert utiliza PNG-24 por defecto, que es la elección correcta para convertir archivos PSD ricos en detalles. PNG-8 es la alternativa ligera. Está limitado a una paleta de 256 colores y produce archivos mucho más pequeños, a menudo un 60-70% más pequeños. La contrapartida es un bandeado de color visible en los degradados y una transparencia de todo o nada (un píxel es completamente transparente o completamente opaco, sin puntos intermedios). El formato PNG-8 solo es adecuado para gráficos simples como iconos de colores planos con bordes duros. Para obtener un PNG-8, necesitarías procesar el PNG-24 resultante en una herramienta como Photoshop o usar una utilidad de línea de comandos como pngquant. La compresión PNG es siempre sin pérdida, lo que significa que nunca reduce la calidad de la imagen. El ajuste del nivel de compresión es puramente un equilibrio entre el tamaño del archivo y el tiempo que tarda en guardarse. CocoConvert utiliza un nivel de compresión equilibrado automáticamente. Si estás obsesionado con el rendimiento y necesitas el tamaño de archivo más pequeño posible para un proyecto web, puedes reducirlo un 10-20% adicional pasándolo por un optimizador dedicado como oxipng o pngcrush. Estas herramientas recomprimen los datos de forma más agresiva sin tocar un solo píxel. Finalmente, pregúntate siempre si PNG es siquiera el formato adecuado. Si no necesitas transparencia, un JPEG de alta calidad será drásticamente más pequeño. Para el uso web moderno con transparencia, WebP y AVIF ofrecen una compresión superior. Pero para los archivos maestros, las entregas de diseño y cualquier cosa que pueda necesitar ser editada de nuevo, el PNG-24 sigue siendo el rey.
Gestionar la transparencia correctamente: una mirada más de cerca
La transparencia en PNG funciona a través de un canal alfa, un mapa extra de escala de grises de 8 bits donde a cada píxel se le asigna un valor de transparencia de 0 (completamente transparente) a 255 (completamente sólido). Esto es lo que permite tener sombras paralelas con bordes suaves y texto con anti-aliasing que se ven bien sobre cualquier fondo. Uno de los errores de conversión más comunes está relacionado con el alfa pre-multiplicado. En una imagen pre-multiplicada, los valores de color ya se han mezclado con un color de fondo, lo que puede provocar halos oscuros o claros alrededor de los bordes si la aplicación que lo visualiza espera un alfa directo (straight alpha). Cualquiera que haya luchado con horribles franjas negras en sus iconos conoce este suplicio. CocoConvert genera PNGs con alfa directo, que es el estándar que esperan los navegadores web y casi todo el software moderno. Para asegurarte de que tu transparencia sobrevivió a la conversión, prueba el resultado. La forma más rápida es abrir el PNG en un navegador web con un fondo de color. Simplemente crea un archivo HTML súper sencillo con un `body` de color y una etiqueta `<img>` que apunte a tu PNG. Si las partes transparentes muestran el color de fondo y los bordes están limpios, todo está bien. Si ves una caja blanca o halos oscuros, el canal alfa se gestionó incorrectamente. Además, revisa la capa 'Fondo' de tu PSD, la capa predeterminada con un icono de candado. Esta capa es siempre 100% opaca. Si necesitas transparencia en tu PNG final, debes eliminar esa capa de Fondo o convertirla en una capa normal (simplemente haz doble clic sobre ella en el panel de Capas de Photoshop y pulsa OK). CocoConvert es lo suficientemente inteligente como para verificar esto; si un PSD solo tiene una capa de Fondo opaca, el PNG resultante no tendrá un canal alfa, que es el comportamiento correcto y más eficiente.
Un flujo de trabajo práctico para resultados consistentes
Si conviertes PSDs regularmente para un kit de interfaz de usuario, una biblioteca de marca o el trabajo de un cliente, un flujo de trabajo consistente es tu mejor amigo. Ahorra tiempo y elimina errores tontos. Para archivos individuales o lotes pequeños con Photoshop a mano, quédate con el método manual. Usa el estampado de 'Combinar visibles' (Shift+Cmd+Option+E), comprueba que el perfil de color sea sRGB y luego usa 'Exportar como' con la transparencia activada. Lleva menos de un minuto por archivo y te da el máximo control. Para grandes lotes o cuando no tienes Photoshop, usa el [conversor de PSD a PNG](/convert/psd-to-png) de CocoConvert. Él hace el trabajo pesado. Antes de subir los archivos, es buena idea revisar rápidamente tus PSD en busca de objetos inteligentes complejos o capas 3D. Si la precisión a nivel de píxel no es negociable, rasteriza esas capas primero. Después de descargar el lote, revisa al azar algunos de los PNG resultantes en un navegador para confirmar que la transparencia se ve bien. Para los recursos web en producción, el tamaño del archivo lo es todo. Después de convertir, pasa tus PNGs por un optimizador como oxipng. Un comando simple como `oxipng -o 4 --strip safe *.png` ofrece un gran equilibrio entre compresión y velocidad, y elimina de forma segura los metadatos innecesarios. Finalmente, hazle un favor a tu equipo (y a tu yo del futuro): documenta tus ajustes. Cuando entregues los archivos, incluye una nota de una línea sobre el formato. Algo como: 'Todos los PNG son sRGB, PNG-24, con transparencia, optimizados con oxipng -o4'. Este simple paso evita la temida conversación de '¿por qué estos colores se ven raros en mi pantalla?' que hace perder el tiempo a todo el mundo.