Convertir maquetas de Photoshop a código web en vivo es una práctica extremadamente común entre los diseñadores web. Todos lo hemos hecho un millón de veces a mano, por lo que es bastante emocionante cuando comenzamos a ver las soluciones emergentes que nos ayudarán a automatizar este proceso.
La última versión de Creative Cloud Photoshop CS6 tiene una función incorporada para convertir los estilos de Photoshop a CSS, y si necesita otra solución, hay dos extensiones sólidas que puede consultar. Hoy compararemos los resultados de los tres métodos: Photoshop, CSS3Ps y CSSHat para ver cuál es el mejor.
Nuestros tres candidatos
Este artículo trata de comparar los resultados de tres métodos diferentes para lograr el mismo objetivo. Tenemos un diseño en Photoshop y queremos verlo integrado en HTML y CSS.
Nuestros tres métodos incluyen Photoshop (versión 13.1) y dos extensiones CSS3P y CSSHat. Recientemente creé un screencast para Psdtuts + que introduce y hace algunas comparaciones entre Photoshop y CSS3Ps, que puede encontrar aquí.
Aunque no cubrí la funcionalidad de grupo de capas en ese tutorial, así que pensé que valía la pena intentarlo otra vez y decidí agregar CSSHat también, así que realmente cubrimos las bases también.
Nuestro caso de prueba
Necesitaremos algo para probar los diferentes métodos de conversión, así que preparé un panel de UI genérico que podría contener lo que quieras:
Básicamente se compone de tres capas diferentes: la capa de texto, la barra superior y el fondo. Aquí los separé un poco para que pudieran tener una idea de cómo fueron construidos.
A continuación puedes echar un vistazo a nuestra paleta de capas. Tenga en cuenta que este objeto está estructurado muy intencionalmente. Los tres métodos que veremos hoy convierten los nombres de capa en nombres de clase en CSS, por lo que debe asegurarse de tener mucho cuidado con el nombre de sus distintas piezas. También tenga en cuenta que las formas están hechas de capas de forma vectorial.
Algunos de los métodos que probaremos son compatibles con los grupos de capas, lo que significa que queremos convertir la estructura aquí a una estructura div en nuestro HTML.
HTML
Photoshop puede ocuparse del CSS por nosotros, pero aún estamos solos con HTML. Este es un intento rápido de una estructura HTML que funcionará con el código que Photoshop generará. ¡Sin esto en tu HTML, el CSS no hará nada!
Photoshop
Vamos a empezar con la funcionalidad integrada de Photoshop. El proceso aquí es extremadamente fácil, todo lo que tenemos que hacer es seleccionar nuestro grupo de capas en el panel Capas y acceder a Capa> Copiar CSS (También puede acceder a este comando con un clic derecho).
Photoshop proporciona una respuesta bastante nula de que algo ha sucedido en este momento. No hay opciones para modificar, no hay paneles para inspeccionar, solo el comando de menú en el que hicimos clic arriba, que coloca una gran parte de código en nuestro portapapeles. Aquí está la salida, directamente desde Photoshop.
El resultado
Si lanzamos esto en un editor de código y echamos un vistazo al resultado, los resultados son un poco desalentadores. Photoshop no hizo un gran trabajo con la conversión. Para empezar, la barra superior no tiene esquinas redondeadas. Además, la sombra parece estar en plena opacidad (demasiado oscura) y la ubicación de tipo está desactivada. Si nos da un buen comienzo y realmente nos ahorra mucho tiempo, pero probablemente no sea la solución mágica que esperaba de Photoshop.
Véalo en vivo: Haga clic aquí.
Para empeorar las cosas, si retrocedemos y miramos el código, hay muchas quejas. Hay algunas cosas realmente extravagantes aquí, como la transformación innecesaria en el texto. Parece que tu puede Deja que Photoshop escriba CSS para ti, pero no estoy convencido de que debas hacerlo.
CSS3Ps
Nuestro próximo candidato es CSS3Ps, un complemento de Photoshop completamente gratuito que es anterior a la funcionalidad integrada de Photoshop. El sitio web muestra algunos ejemplos bastante complejos, así que espero que esto aborde un poco mejor nuestro proyecto.
Con la extensión CSS3Ps instalada, ve a Ventana> Extensiones> CSS3Ps. Luego, seleccione el grupo de capas y haga clic en el logotipo que aparece dentro del panel CSS3Ps.
Una vez que presiona ese botón, una página web se abre y le presenta un temporizador. Se ve obligado a esperar veinte segundos y mirar un anuncio, lo que apesta pero dado que la extensión es gratuita, es comprensible.
Desde aquí, te llevan a una página que contiene el código, que copié y pegué a continuación. Tenga en cuenta que esta vez, tuve que agregar períodos antes de los nombres de clase. CSS3Ps toma el nombre de la capa exactamente como aparece en Photoshop, por lo que agrega en el. o? #? símbolos allí
El resultado
Hay mucho que gustar de la salida CSS3Ps. Para empezar, trata cada capa individual como su propio objeto y no intenta colocarlas una sobre otra. De hecho, prefiero esto y siempre elimino inmediatamente el código de posicionamiento absoluto que utiliza el método incorporado. Esto mantiene el enfoque de la conversión donde debería estar: en el estilo.
Véalo en vivo: Haga clic aquí.
Hablando de estilo, los resultados en esa área también han mejorado. Observe cómo la barra superior tiene realmente un radio de borde en esta ocasión y cómo la sombra de cuadro usa un valor alfa para reducir la opacidad. Esta versión puede ser un pequeño prefijo con muchas cosas que ya no requieren prefijos, pero de lo contrario el código no es tan malo.
Además, el hecho de que se pueda volver a formatear la salida en Sass o SCSS es una función asesina que fácilmente hace que este método sea mejor que la función predeterminada de Photoshop.
CSSHat
El tercer y último método que vamos a revisar es CSSHat. Como CSS3Ps, es una extensión de Photoshop, pero esta te costará alrededor de $ 30.
Para usar CSSHat, simplemente seleccione la capa que desea convertir y abra el panel CSSHat (encuéntrelo en el menú de extensiones como en CSS3P arriba). Desafortunadamente, CSSHat actualmente no admite grupos de capas, por lo que tendrá que hacerlo en cada capa individual. Este es un ataque serio contra CSSHat, pero lo compensa en versatilidad.
Me encanta que finalmente tengo algunas opciones para retocar. Los otros dos métodos fueron fáciles, pero si no te gusta algo, ¡difícil! Aquí puedo alternar cuatro opciones diferentes: explicaciones de comentarios, prefijos del navegador, dimensiones de la capa y si el código se ajusta o no a una regla que lleva el nombre de la capa.
También tenga en cuenta que puede obtener la salida en una impresionante variedad de formatos: CSS, SCSS, Sass, LESS, Stylus y Stylus CSS. Aquí está la salida para la versión CSS simple:
El resultado
Como puede ver arriba, el fragmento de código esta vez es bastante grande, principalmente debido al hecho de que el degradado se convierte en una URL de datos. A continuación se muestra el resultado si pegamos directamente en nuestro editor de código.
Véalo en vivo: Haga clic aquí.
Como puede ver, al igual que con los CSSP, los elementos tienen un estilo simple, no están posicionados, tendríamos que colocarlos en su lugar. En ese frente, los estilos se ven perfectos con la excepción del texto, que es pequeño. Espero que esto tenga que ver con el hecho de que construí la versión de Photoshop en una pantalla Retina, por lo que es posible que no experimente este error (CSS3P en realidad hizo lo mismo).
¿Quién gana?
"Recomiendo tanto CSSHat como CSS3P sobre lo que obtienes dentro de Photoshop 13.1."Ninguno de los métodos para convertir estilos de Photoshop a CSS descritos anteriormente es perfecto. La versión de Photoshop funciona, pero el código es bastante feo y los resultados no utilizan las técnicas avanzadas de CSS3 que necesitará para hacer coincidir cosas como la opacidad y las configuraciones complejas de radio de borde. CSS3Ps es gratuito y funciona mejor que Photoshop, pero el método de convertirte en una página web que está oculta tras un retraso de veinte segundos en el anuncio es bastante molesto.
CSSHat es el mejor en el grupo en cuanto a personalización, pero no admite grupos de capas. El método predeterminado de Photoshop es el único que coloca sus múltiples elementos de manera que coincida con su lienzo, lo que podría ser bueno o malo (me gustaría que fuera una característica opcional). En última instancia, nada le dará la precisión, la potencia y la versatilidad de la codificación a mano, pero estas herramientas pueden llevarlo a un buen comienzo y ahorrarle mucho tiempo.
Personalmente, tiendo a favorecer CSSHat en este grupo. Es un poco caro, pero la funcionalidad es estelar. Francamente, está mucho más cerca de lo que quería ver de Adobe. Creo que realmente se olvidaron de esta característica y recomiendo tanto CSSHat como CSS3P sobre lo que se obtiene dentro de Photoshop 13.1.
¿Qué piensas?
Ahora que ha visto mi evaluación de estas tres herramientas, es hora de que haga el timbre. ¿Cuál de los métodos anteriores ha probado? ¿Cuál crees que es el mejor? Háganos saber en los comentarios a continuación!