Convertir PSD a CSS

Un mockup de Photoshop debe convertirse en una interfaz para navegador cuando un diseñador entrega un archivo .psd con capas a un desarrollador web. El resultado no es otro formato de imagen: es HTML con estilos definidos mediante una hoja de estilos .css, además de recursos de imagen o vectoriales exportados cuando sea necesario.

Qué es el formato PSD

PSD es el formato nativo de imagen rasterizada con capas de Adobe Photoshop. Puede almacenar capas de píxeles, texto editable, formas vectoriales, máscaras, capas de ajuste, guías, efectos de capa, objetos inteligentes y otros datos de edición en un mismo documento.

Fotógrafos, ilustradores, diseñadores gráficos, diseñadores de UI y agencias web utilizan archivos PSD para composiciones editables, mockups de interfaces, material gráfico publicitario y diseños para impresión. Un PSD puede mostrar una página completa o la pantalla de una aplicación, pero no define la estructura HTML, el significado semántico, la interacción, la accesibilidad ni el comportamiento responsive.

Qué es el formato CSS

CSS es un formato de hoja de estilos de texto sin formato que controla la presentación y el diseño de HTML y SVG. Sus propiedades incluyen color, font-family, font-size, margin, padding, display, grid-template-columns, bordes, sombras, transformaciones y reglas media responsive.

CSS permite editar el diseño en un sitio web o una aplicación, hace posible que el texto y los diseños se adapten a diferentes pantallas y separa la presentación del contenido HTML. Una hoja de estilos no puede almacenar capas de Photoshop, el historial de ajustes, el texto editable del PSD ni datos de píxeles arbitrarios.

Cómo convertir PSD a CSS

No existe una conversión completa y sin pérdidas de PSD a CSS, porque PSD describe una composición visual editable, mientras que CSS describe reglas aplicadas a elementos del documento. La conversión práctica consiste en entregar el diseño e implementarlo en el front-end.

1. Abre el archivo en Adobe Photoshop y organiza las capas en grupos significativos, como encabezado, navegación, tarjeta y pie de página. Cambia el nombre de las capas para que identifiquen los elementos de interfaz correspondientes.
2. Inspecciona las dimensiones, el espaciado, los colores, la tipografía, la opacidad y los efectos mediante las guías, las reglas, el panel Carácter y el muestreador de color de Photoshop. Utiliza un sistema de medición coherente basado en píxeles o rem.
3. Para las capas de texto, forma e imagen compatibles, utiliza el comando Copy CSS del menú contextual de la capa. Pega las declaraciones en un archivo como styles.css y, a continuación, elimina los selectores y las propiedades que no correspondan al marcado real.
4. Crea elementos HTML semánticos que representen el diseño y, después, conéctalos a la hoja de estilos mediante clases u otros selectores adecuados. Sustituye las coordenadas del lienzo de Photoshop por Flexbox, CSS Grid, el flujo normal u otro modelo de diseño.
5. Exporta los recursos que CSS no pueda reproducir directamente. Utiliza File → Export → Export As para fotografías como .jpg, gráficos rasterizados que dependan de la transparencia como .png y gráficos vectoriales simples adecuados como .svg. Haz referencia a ellos con <img> o background-image, según corresponda.
6. Prueba la implementación en los navegadores con los tamaños de viewport requeridos. Compara la tipografía, el ajuste de línea, el espaciado, el recorte de imágenes y los efectos visuales con el PSD y, después, añade reglas responsive en lugar de forzar un único lienzo fijo.

Adobe Photoshop es la opción de escritorio más directa porque lee los datos PSD nativos y proporciona funciones para exportar recursos y copiar CSS. Photopea es una alternativa fiable basada en navegador para trabajos ocasionales: abre archivos PSD, muestra las propiedades de las capas y puede copiar CSS para las capas compatibles. Aun así, requiere HTML manual, trabajo de diseño, exportación de recursos y pruebas responsive.

Las herramientas de inspección y entrega de diseños, como Avocode, pueden mostrar medidas de capas, colores, tipografía y fragmentos de CSS, pero las funciones de importación y exportación de PSD varían según el producto y la suscripción. Verifica la compatibilidad actual con PSD antes de depender de una de ellas. Los convertidores genéricos online de “PSD a CSS” suelen generar únicamente declaraciones básicas o fragmentos con posiciones fijas; no subas archivos de diseño confidenciales a un servicio desconocido.

Limitaciones de calidad y compatibilidad

El CSS copiado de Photoshop suele representar un lienzo fijo con posiciones absolutas. Puede coincidir con una captura de pantalla, pero fallar cuando el viewport se estrecha, cambia la longitud del texto, aumenta el contenido o los usuarios incrementan el tamaño de la fuente. Reconstruye el diseño con HTML semántico, Flexbox o Grid, unidades relativas y media queries.

Los estilos de capa, los modos de fusión, las máscaras de recorte, los filtros inteligentes, las capas de ajuste y las sombras complejas pueden no tener un equivalente directo en CSS. Cuando sea práctico, aproxímalos con degradados, sombras, filtros, pseudo-elementos y propiedades de fusión; de lo contrario, exporta el resultado afectado como un recurso rasterizado o vectorial.

La tipografía del navegador depende de una fuente web segura disponible, una webfont con licencia o @font-face. Una fuente ausente o sustituida cambia el ajuste de línea y puede alterar todo el diseño. CSS tampoco puede conservar el historial editable de capas de Photoshop, por lo que debes conservar el .psd original como archivo de origen.