Pasar del diseño al desarrollo al instante

12/12/2014
Pasar del diseño al desarrollo al instante

Los diseñadores y los desarrolladores tenemos una visión diferente de la creación web, usamos programas y lenguajes diferentes. A menudo conciliar ambos trabajos es difícil y se pierde mucho tiempo creando hojas de estilo y solucionando errores en el flujo de trabajo. Conseguir que este flujo sea lo más eficiente posible puede ahorrarnos una gran cantidad de tiempo, además de conseguir que las versiones que se crean en Photoshop se plasmen de la mejor manera en el código definitivo.

Creative Cloud Extract es la gran solución que nos ofrece Adobe para crear un flujo de trabajo eficiente, y lo mejor, de manera gratuita. Se trata de una herramienta muy potente a la vez que muy sencilla. La podemos encontrar dentro de las herramientas de Adobe Asset y solo necesitamos para usarla tener una cuenta de Adobe.

Con esta nueva herramienta podemos compartir y extraer información de diseño esencial de una composición PSD, como son la paleta de colores, todas las fuentes utilizadas y todos los recortes y activos. Para usarlos directamente en la codificación de diseños.

http://www.adobe.com/es/creativecloud/extract.html


Captura de pantalla 2014-12-12 a la(s) 13.36.47.png

 

¿Cómo funciona?

Una vez creados los diseños web en Photoshop solo tenemos que sincronizarlos con Adobe Asset compartiendolos en la carpeta de Creative Cloud. Esto es un servicio de almacenamiento en la nube que nos ofrecen para archivos de diseño.

Accediendo a la cuenta de Asset se genera una visualización online del PSD. Automáticamente nos genera la paleta completa de colores y degradados usados en el diseño, así como todas las fuentes; pudiendo hacer búsquedas por fuentes y colores. Además nos ofrece una sugerencia de código CSS para cada elemento.

Captura de pantalla 2014-12-12 a la(s) 13.39.41.png

Además nos permite medir distancias entre elementos.

 

Captura de pantalla 2014-12-12 a la(s) 13.38.35_600x400.png

Una de las funciones más interesantes y que más tiempo nos puede ahorrar, es la opción de visualizar y descargar directamente los activos y recortes usados, optimizándolos en tiempo récord.

Otras funcionalidades interesantes son la inserción de comentarios o la visualización por capas.

 

Captura de pantalla 2014-12-12 a la(s) 13.38.06_600x400.png

 

Conclusiones

El nuevo Creative Cloud Extract reinventa el paso de la composición al código, aumentando en gran medida la eficacia del proceso. Es importante, si optamos por esta herramienta para pasar la información de los PSD al código, diseñar pensando en esto; siendo ordenado con las capas, los nombres y los objetos inteligentes. Si lo hacemos bien y diseñamos pensando en los desarrolladores, podremos ahorrarnos crear hojas de estilo generar a mano los recortes y activos de la web. Ganando, además de mucho tiempo, una gran precisión para que el resultado final sea fiel a los diseños originales.