Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

Sombras de PSD a CSS

Sombras de PSD a CSS 23.FEB.16

Alvaro José Rios Ch
Fundador WebBizarro

PhotoShop no es por definición una herramienta para diseñar sitios web ya que no cuenta con las herramientas necesarias para hacerlo. Imaginen que tienen que hacer un sitio con 5 secciones y debe funcionar en al menos 5 resoluciones de pantalla 320, 480, 720, 1200 y 1900 solo por dar un ejemplo, entonces tendrían que crear 25 archivos de PhotoShop para un solo sitio.

Por lo general lo que se hace es definir wireframes, donde se define el comportamiento y una guía de estilos donde se define como se ven los elementos en el sitio, esto es mucho más practico para todos sin embargo el mundo no es tan hermoso y muchas veces vas a recibir un archivo PSD con un montón de capas sin nombre y elementos con sombras.

Como saben las sombras en PhotoShop no se crean con los mismos valores que se usan en CSS por lo que es un poco complicado llevarlo de la herramienta al lenguaje pero tenemos una solución bastante simple.

PSD-TO-CSS es una pequeña herramienta que solo calcula lo que debes colocar en tu código CSS y te permite fácilmente llevarlo a las hojas de estilo. La herramienta se encuentra en el blog de Melanie Ceraso una diseñadora web conocida en twitter como @mceraz a la que agradecemos inmensamente.