Contenido
Hace algunos meses, Adobe tuvo un gran avance con su herramienta de diseño web sensible, Edge Reflow CC. Esta fue la creación del complemento Generator, que vincula Photoshop (aquí se explica cómo descargar Photoshop) con Edge Reflow y le permite exportar rápidamente su diseño web en Photoshop directamente a Edge Reflow sin necesidad de codificación.
Anteriormente, si un diseñador deseaba crear un diseño web, necesitaba crear un diseño, cortarlo en componentes individuales y trasladarlos a un programa de diseño web. Eso llevaría mucho tiempo.
El complemento Generator simplifica ese proceso.
Cómo hacerlo
Lo primero que debe hacer es descargar Photoshop CC, luego descargar e instalar Edge Reflow CC. Esto es para asegurarse de que el complemento Generator funcione correctamente.
Si no es así, descargue el complemento Generator e instálelo directamente. Eso debería solucionar cualquier problema con la conexión.
A continuación, vaya a Editar: Preferencias: Complementos. En la sección Generador, haga clic en la casilla de verificación Habilitar generador y Aceptar para guardar la configuración.
Otra cosa que debe saber al usar Generator es que es un archivo específico, lo que significa que debe estar activado para cada archivo.
La razón por la que esto es así es porque es posible que no desee que esta función esté habilitada en todos los proyectos.
Para activar el Generador para un archivo específico, haga clic en Archivo: Generar: Activos de imagen.
Una vez que habilita Image Assets, esto crea la carpeta BracketsIO-assets en mi directorio de archivos, como se muestra aquí:
Cuando abrimos la carpeta BracketsIO-assets, verá todos los recursos de imagen para este proyecto que se han generado automáticamente para este proyecto.
Lo interesante es cómo se han creado estos archivos. Para esa respuesta, vaya al panel Capas.
Tenga en cuenta que se ha abierto la carpeta de la cuadrícula. En el área resaltada arriba, verá que varias de las capas han sido nombradas con la extensión .webp. Esto es parte de la función Generador.
Cuando los activos de imagen están habilitados, se crean los activos. No solo eso, sino que si realiza un cambio en cualquiera de las capas, ese cambio se actualizará inmediatamente en la carpeta de activos.
La siguiente etapa, una vez que esté satisfecho con su proyecto de diseño, es crear un proyecto Edge Reflow. Para hacerlo, haga clic en Archivo: Generar: Proyecto de reflujo de bordes.
Se crea una carpeta que contiene todos los activos para Edge Relow que podrá abrir a través de Edge Reflow.
A continuación, inicie Edge Reflow. Tenga en cuenta el icono de Photoshop CC Connect en la parte superior derecha de la pantalla. Haz click en eso.
Esto abrirá el cuadro de diálogo. Haga clic en el botón Photoshop Sync en la esquina inferior izquierda para sincronizar Edge Reflow con Photoshop.
Con el panel de Photoshop CC Connect, puede importar el diseño en Edge Reflow, completo con todo el CSS para su proyecto.
Como se mencionó anteriormente, si realiza cambios en el archivo de Photoshop original, esos cambios se actualizarán en la carpeta de activos y se pueden ver en Edge Reflow.
Consejos de reflujo de bordes
Es importante darse cuenta de que todo el texto del archivo Edge Reflow es HTML editable. Una vez que importa un proyecto a Reflow, puede crear un diseño receptivo con puntos de interrupción según sea necesario.
Una vez que haya terminado su diseño, puede extraer el HTML y CSS y mover todo el proyecto a un programa HTML como Dreamweaver para completar el proceso de diseño. También puede compartir el proyecto con otros profesionales como parte del proceso de diseño.
Esencialmente, Edge Reflow es una herramienta de creación de prototipos, una en la que puede experimentar rápida y fácilmente con diferentes diseños de diseño.
Si está creando un sitio que contiene varias páginas, puede importar cada página de ese diseño en Reflow usando el panel Photoshop CC Connect. Primero, abra la página en Photoshop, luego haga clic en el botón Crear nueva página en Edge Reflow y esa parte del proyecto se importará.
También puede hacer uso de esta conexión de diseño incluso si solo está trabajando en imágenes. Debería nombrar cada imagen con la extensión de imagen adecuada (como .webp, .PNG, .GIF). Puede agregar estas extensiones a capas, grupos u objetos inteligentes. Una vez que su proyecto se completa en Photoshop, puede importar el archivo completo en Edge Reflow.
Además de Photoshop, los diseñadores también pueden utilizar Fireworks e Illustrator CC. Edge Reflow también está integrado con Edge Inspect y Edge Web Fonts.
Conclusión
El puente entre Photoshop y Reflow ofrece a los diseñadores algunas herramientas nuevas y fantásticas y resuelve muchos desafíos de diseño. Elimina la necesidad de cortar imágenes y exportar las piezas a un programa de diseño HTML. No es perfecto, por supuesto, pero hace el trabajo para el que fue diseñado de manera eficiente y rápida.
Para acelerar con Reflow, es una buena idea descargar algunos archivos del proyecto y usarlos para ver cómo funciona el proceso. Necesitará un archivo de plantilla PSD y un archivo Reflow completo.
Palabras: Nathan Segal
