de Photoshop a CSS

Desde la llegada de la versión CS6, Adobe implantó en Photoshop una opción bastante útil para maquetar y desarrollar diseños web. El funcionamiento es muy sencillo y sobre todo rápido. A través de la aplicación seremos capaces de generar hojas de estilos en cascada tomando como referencia nuestras capas de formas y de texto. El procedimiento es tan sencillo como desarrollar nuestra maqueta, copiar la versión en código de nuestros elementos y pegarlo en nuestra hoja.

Es una muy buena opción sobre todo porque nos permite ir viendo la evolución de nuestro diseño en términos visuales y en tiempo real. A continuación os dejo algunos tips para utilizar esta opción y sacar el máximo rendimiento.

Para obtener un resultado profesional, es recomendable que tengas en cuenta las medidas y proporciones de tu sitio. Fija los valores de Width y Heigh de la plantilla que estás diseñando y aplícalos a tu maqueta. Cuando copies el código CSS situaremos cada elemento tomando como referencia la distancia en píxeles entre cada elemento y los bordes del lienzo. Ten en cuenta también los tamaños y las razones jerárquicas que vas a incluir en tu diseño incluyendo la alineación de cada elemento y el espaciado entre cada uno de ellos para proporcionar la máxima legibilidad a tus usuarios.

El uso de guías y las reglas de la interfaz te ayudará a construir una plantilla ordenada, limpia y con todos sus elementos perfectamente alineados.

La opción de copiar el código CSS nos da la posibilidad de diseñar nuestro sitio con gran precisión a partir del uso de capas de forma y de texto. El contenido de cada capa se copiará en el Portapapeles y podremos pegarlo rápidamente en nuestra hoja de estilos. De las capas de forma, captura los valores de los ajustes siguientes:

• Tamaño
• Posición
• Color de trazo
• Color de relleno (incluidos los degradados)
• Sombra paralela

De las capas de texto podremos capturar los siguientes valores:

• Familia de fuentes
• Tamaño de fuente
• Grosor de fuente
• Alto de línea
• Subrayado
• Tachado
• Superíndice
• Subíndice
• Alineación del texto

Tenlo en cuenta y establece cada uno de estos valores para proporcionar el estilo que buscas.

igualmente debes tener en cuenta que como se trata de una concatenación nueva, esta genera mucho código basura el cuál deberás eliminar manualmente, aún así, sigue siendo una muy buena opción una vez dominado este proceso.