Cómo convertir tu diseño de Photoshop en código CSS en menos de un minuto

CSS-Photoshop

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:

Trata de ser preciso

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.

web-photoshop

Configura todas las características de cada elemento

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.

Trabaja con grupos de capas

Esta función traduce nuestro trabajo organizado por dos tipos de clase, una por cada grupo que aglutine capas de formas o de texto  y una clase para cada capa de alguno de estos tipos. Cada clase de grupo representará un elemento div principal que contendrá elementos div secundarios y que se corresponderán a las capas insertas en cada grupo. De esta forma, los valores superior e izquierdo de los contenedores secundarios se van a establecer tomando como referencia el contenedor principal. Debes tener en cuenta que esta opción no está disponible con objetos inteligentes y tampoco será aplicable a más de una capa de forma simultánea a no ser que estas estén agrupadas.

Pasos para hacer la conversión

Una vez que hayas hecho tu maqueta, hayas personalizado cada elemento y los hayas agrupado por grupos no tendrás más que seguir estos pasos:

 

  • Dirígete al panel de capas y escoge alguna de estas dos opciones:
    • Haz clic con el botón derecho de tu ratón sobre una capa de formas o texto o en un grupo de capas y elige Copiar CSS en el menú contextual.
    • Selecciona una capa de formas o texto o un grupo de capas y, a continuación, elige la opción Copiar CSS en el menú del panel Capas.
  • Pega el código en el documento de tu hoja de estilos y aplícalo a tus páginas a través de html5.

    CSS-Photoshop1

    CSS-Photoshop2


Categorías

CSS, Photoshop

Fran Marín

Licenciado en comunicación audiovisual. Apasionado de las nuevas tecnologías, el arte y la creatividad. http://creatofilia.org

Escribe un comentario