¡Hola! Me parece que andas usando un bloqueador de anuncios =( ¿Nos desbloqueas? ¿Por qué?
F13

Funcion 13

De capa de Photoshop a CSS/CSS3

Últimamente ando con varios proyectos en los que tengo que adaptar un archivo de Photoshop (PSD) a una web. Sea un template de Joomla! o cualquier otro tipo de web.

Para mi gusto, el desafío más grande llega cuando tienes que aplicar una cierta sombra o un degradado y lo tienes que convertir a CSS3.

Como casi todo en esta vida puede ser más sencillo, estuve buscando un tiempo y hallé dos plugins para Photoshop que vienen de perlas para estos casos. He pensado que quizá, puedas no conocerlos y te pueden sacar de un apuro y/o mejorar tu flujo de trabajo diario.

Los dos hacen más o menos lo mismo pero uno es de pago y otro es gratuito.

CSS Hat

CSS Hat convierte todos nuestros estilos de forma realmente precisa, en atributos CSS. Este es el plugin de pago y aunque su precio no es elevado (19.99$) mucha gente acabará decantándose por el gratuito.

Hasta hace poco tiempo no tenían versión para Windows pero tras mucha presión, ahora tienen versión disponible para Windows y Mac.

El plugin no es la panacea y hay cosas que no puede hacer 100% precisas como el satinado o la superposición de motivos (patterns).

El proceso de instalación es realmente sencillo y una vez instalado podremos acceder al plugin desde Ventana > Extensiones > Css Hat. Una vez ahí, selecciona una capa y marca el panel de CSS Hat donde podrás copiar el CSS, añadir comentarios, generar las versiones con prefijos propietarios, añadir tus propios atributos, etc.

Según sus propietarios, CSS Hat cubre lo siguiente:

  • Rellenos de capa de gradiente y sólidos
  • Opacidad y relleno de capas
  • Efectos de capa - Sombra exterior/ interior
  • Resplandor exterior/interior
  • Superposición de degradado
  • Superposición de colores
  • Trazo
  • Efectos de texto - Color de fuente y sombra del texto
  • Ancho y alto
  • Radio del borde

Un sencillo ejemplo de un PSD pasado por CSS Hat

CSS3 PS

CSS3 PS tiene la ventaja de ser gratuito.

Al igual que CSS Hat, lo podemos instalar tanto para Windows como para Mac, con el Adobe Extension Manager.

Después de haber estado probando ambos, os puedo decir que si bien este nos salva el pellejo, no tiene la misma precisión de CSS Hat y además tiene una característica que para mi es realmente molesta, y es que te lleva a una web que se encarga de transformar la capa a CSS, tardando 25 segundos. No es que me molesten los 25 segundos, si no el tener que dejar Photoshop para ver el navegador. En caso de no tener internet te quedaste sin plugin, claro.

Aquí podéis ver la diferencia entre generados con ambos plugins:

Y tú, ¿con cual te quedas? ¿conoces algún otro?

Si el artículo te pareció interesante, útil o incluso equivocado, por favor considera el dejar un comentario. ¡Lo apreciaré mucho!

Programador Front-end en First + Third y Potato. Trabajando con JavaScript y HTML5 desde el corazón de Sevilla.

Comentarios ¡Únete a la conversación!