Share
Edge Reflow es un programa relativamente nuevo de Adobe, que se anunció en 2012 y se lanzó en febrero de 2013, con el impulso del ascensor de permitirle "Diseñar la web receptiva" y "Crear hermosos diseños responsivos". La parte difícil es que en este momento no puedes usarlo directamente para crear respuestas. sitios web, solo sensible diseños.
Esto significa que puede abrir Reflow y usar su interfaz de diseño visual para crear prototipos de diseño completamente funcionales, con esquemas de color, diseños, elementos de formulario, enlaces y contenido de texto en su lugar. Puede obtener una vista previa de su diseño tanto dentro de la herramienta como en Chrome, y puede establecer puntos de interrupción, hacer que su diseño sea sensible y previsualizarlo para dispositivos móviles a través de la herramienta Inspección de bordes de Adobe.
Sin embargo, en este momento eso es lo más lejos que puedes llegar. Aún no puedes seguir adelante y exportar tu diseño como un sitio web real. No existe un control directo sobre el HTML y CSS que conforma el diseño, y Adobe deja muy claro que la salida del código para las vistas previas debe considerarse solo eso; Código de vista previa y no de calidad de producción. Entonces, después de pasar por el proceso de diseño de su sitio en Reflow, debe armarlo por segunda vez para crear un código que un sitio en vivo pueda usar..
Para algunos diseñadores esto está bien; La creación de un prototipo funcional que los clientes puedan dar luz verde es una parte integral de su proceso. Sin embargo, para muchos diseñadores, crear un sitio dos veces hace que Reflow sea una herramienta que todavía es demasiado ineficiente para adoptar con el fin de crear un sitio web sensible..
Se habla de que se agreguen herramientas de exportación completas en un momento indefinido en el futuro, pero luego se dice que Reflow solo será una herramienta de diseño y nunca incorporará un flujo de trabajo para la creación completa del sitio. Entonces, si bien las cosas pueden cambiar en el futuro, por ahora solo podemos suponer que para aquellos que desean tener un sitio en funcionamiento al final de su proceso de diseño, es posible que Reflow no sea tan bueno.
Dicho esto, si bien Reflow no es un completo creación de sitio web herramienta, tiene algunas características que pueden hacerla muy útil diseño del elemento del sitio web herramienta.
Para mí, las ventajas más importantes que ofrece actualmente son sus controles CSS similares a Photoshop que te permiten ver los efectos de tus elecciones en tiempo real. Puede controlar colores, fondos, bordes, sombras, brillos, esquinas curvas, ajustes de opacidad, filtros y más en un entorno muy familiar.
Y aunque Reflow no le proporciona herramientas de exportación de código para un sitio completo, le brinda la posibilidad de generar, copiar y pegar CSS para un elemento a la vez. Para hacerlo, simplemente haga clic en el elemento en el que está trabajando para seleccionarlo y, a continuación, haga clic en la parte inferior de la pantalla. <> Icono al final del rastro de migas de pan. Esto te dará una ventana emergente con el CSS del elemento para que puedas copiar y pegar:
Con esta característica, puede diseñar elementos individuales que se usarán en su sitio, luego copiar su CSS para usar en su proyecto de sitio listo para producción. Es posible que tenga que eliminar algunos códigos de diseño no deseados para cosas como márgenes o alturas, pero la mayoría del código de estilo es bueno para pegarlo directamente en un archivo CSS. Si está familiarizado con Photoshop, puede comparar esto con la creación de estilos de capa y guardarlos para su uso posterior.
Entonces, ya sea que Reflow se convierta o no alguna vez en una herramienta de creación de sitios web totalmente funcional, hay algunas cosas realmente útiles que puede hacer ahora mismo, y vamos a cubrir cinco de ellas..
Adobe Edge Fonts es una impresionante colección de fuentes web de uso gratuito que se pueden cargar en cualquier sitio web. Para hacerlo, agregue un pequeño fragmento de código JavaScript a la sección de la página como tal:
La fuente se aplica a través de CSS de la manera habitual, por ejemplo,.
p font-family: abel, sans-serif; peso de la fuente: 300; estilo de letra: normal;
Las fuentes Edge parecen tener más problemas con FOUT (flash de texto sin estilo) que las fuentes de Google cargadas a través de un etiqueta en el Sin embargo, se proporcionan métodos para minimizar el efecto como se describe en la documentación de Adobe..
Como saben todos los diseñadores que han trabajado con fuentes, a veces la forma en que se ve una fuente en un panel de selección termina siendo muy diferente a cómo se ve cuando el contenido de texto requerido, el tamaño de fuente, los colores y otros efectos se incorporan a la imagen. Al utilizar Reflow para obtener una vista previa de las Fuentes Edge con todas estas cosas en su lugar, puede evitar el arduo proceso de tener que cambiar su etiqueta de script de inserción y varios estilos CSS cada vez que quiera probar una fuente nueva. Así es cómo:
Agregue un "Cuadro de texto" a su lienzo seleccionando primero la herramienta de cuadro de texto en la parte superior izquierda de la interfaz de Reflow:
Luego dibuja un cuadro de texto en el lienzo:
Ingrese el texto con el que desea obtener una vista previa de las fuentes reemplazando la palabra predeterminada "Texto" que se muestra al terminar de dibujar su cuadro de texto.
Establezca las propiedades de estilo que desea usar haciendo clic en Estilo pestaña en el lado izquierdo de la interfaz:
Aquí puede configurar el tamaño de la fuente del color del texto, el estilo de la fuente, el grosor de la fuente y todas las demás propiedades que ve en el Tipografía panel representado arriba.
Debajo de este panel también verá la Fondo y Las fronteras panel que puede usar para simular completamente el esquema de color en el que se usará el texto:
A continuación se muestra nuestro texto con las configuraciones de color, tamaño, peso y fondo en su lugar:
Nota: También centré el texto y agregué un poco de relleno debajo del Diseño lengüeta.
Ahora está listo para comenzar a obtener una vista previa de las fuentes para ver cuáles funcionarán con su tamaño, peso y combinación de colores deseados. Es posible que desee ajustar un poco el tamaño y el peso a medida que avanza, para compensar las variaciones de una fuente a la siguiente.
Para elegir nuevas fuentes, asegúrese de que su cuadro de texto esté seleccionado y luego haga clic en T+ icono a la derecha de la Tipo de letra etiqueta:
Esto hará que aparezca una ventana con un rango de Fuentes Edge para elegir:
Cuando vea uno que le gusta, haga clic en él y, después de un breve tiempo de espera de carga, se aplicará a su cuadro de texto. Puede continuar probando las distintas fuentes hasta que encuentre una que le guste, por ejemplo,.
Una vez que haya seleccionado la fuente que desea usar, puede dirigirse al sitio de Edge Fonts para obtener el código de inserción de JavaScript.
Simplemente busque el nombre de la fuente que seleccionó, haga clic en él y se mostrará el código de inserción a continuación..
Con la configuración CSS3 de Reflow, puede crear algunos efectos de texto bastante impresionantes, de nuevo de manera similar a la creación de estilos de capas de texto en Photoshop. Todos estos estilos se pueden crear a través de la codificación manual, pero la capacidad de ver tus ajustes en tiempo real puede ser invaluable. Aquí hay algunos ejemplos de efectos de texto en CSS puro y la configuración utilizada para crearlos..
Configuraciones utilizadas (crédito: markdotto.com):
Configuraciones utilizadas:
Configuraciones utilizadas:
Una de las mejores cosas que puedes hacer con CSS3 es crear botones elegantes que previamente hubieran requerido grandes imágenes torpes. Al igual que con los efectos de texto en la sección anterior, la configuración de CSS en tiempo real de Reflow hace que este proceso sea más rápido e intuitivo que la codificación manual. Aquí hay un par de ejemplos de botones solo en CSS hechos en Reflow.
Configuraciones utilizadas:
Configuraciones utilizadas:
Junto con la capacidad de crear efectos de texto y estilos de botones, Reflow también le brinda herramientas para colocar imágenes, entradas de texto, cuadros de selección, casillas de verificación y botones de radio en el lienzo para crear estilos. Además, puede crear "cajas" genéricas que son esencialmente equivalentes a "divs", por lo que entre todas estas características tiene los componentes básicos necesarios para crear clases para las hojas de estilo del kit de IU.
Puede comenzar desde cero con su propio diseño o puede emular los kits de interfaz de usuario de PSD existentes. Si desea pasar de PSD a UI, Reflow tiene una característica que es casi impresionante con los kits PSD descargados listos para usar, y eso es Photoshop CC Connect.
Después de descargar un kit de interfaz de usuario de PSD, como este pequeño y divertido kit plano gratuito de Blaz Robar, adelante, ábrelo en Photoshop. En el caso de este kit verás lo siguiente:
Luego, en Reflow, con un nuevo documento abierto, haga clic en Photoshop CC Connect Icono en la parte superior derecha de la interfaz:
En la ventana emergente que aparece, haga clic en Crear nueva página botón:
Reflow intentará crear un duplicado de lo que se muestra actualmente en Photoshop. En el caso de este kit de interfaz de usuario obtendrá lo siguiente:
Tal vez el resultado no sea exactamente lo que podríamos haber esperado, ya que estoy seguro de que existen flujos de trabajo preferenciales para crear PSD que se importan perfectamente en Reflow, sin embargo, en realidad es más útil de lo que parece al principio. La razón es que a pesar de las cosas que aún no tienen el aspecto que necesitamos, los elementos esenciales incluidos en el kit están en su lugar junto con sus colores. Esto le ahorra la molestia de crear elementos y copiar sobre códigos de color. Puede mover los elementos generados y ajustarlos hasta que se vean como el original.
Accentsconagua
px en lugar de %. Esto evitará que los elementos se contraigan y se estiren de forma impredecible si cambia el ancho de su lienzo o si cambia el tamaño de la ventana de Reflow.relativo a absoluto. De esta manera, puede arrastrar elementos y colocarlos donde desee evitar la superposición y hacer que sean más fáciles de ver..relativo a absoluto Así que aún puedes colocarlo donde quieras en el lienzo..A medida que avanza, puede encontrar elementos que requieren imágenes que no se pueden realizar solo con la configuración de Reflow CSS y, como tales, imágenes de necesidad, como las pequeñas flechas de este kit de IU o las imágenes de iconos sociales. Aquí es donde viene otra característica interesante de Photoshop CC Connect..
Para importar instantáneamente una imagen de la PSD original, todo lo que tiene que hacer es encontrar su capa y luego cambiarle el nombre a su nombre de archivo de imagen deseado. Por ejemplo, en este PSD quiero acceder a la pequeña flecha blanca que apunta hacia abajo que se ve en los elementos naranjas. Primero, encuentro su capa en la PSD, que en este caso está etiquetada como ">" debajo de la carpeta "Image Nav Copy". Renombro esa capa al nombre del archivo que deseo que tenga la imagen de flecha exportada, es decir, "downarrow.png".
Entonces hago clic en el mismo Photoshop CC Connect icono que pulsamos para importar el PSD inicialmente, solo que esta vez hago clic en el Biblioteca de activos botón. Reflow le mostrará un breve mensaje de "importación" mientras extrae cualquier capa de su PSD que tenga una extensión de archivo de imagen al final de su nombre. Ahora puedo hacer clic en el Biblioteca de activos Ícono y veré mi imagen "downarrow.png" que puedo arrastrar y soltar en cualquier lugar del diseño.
Nota: Hay una vista previa de la imagen en la ventana sobre el nombre del archivo, sin embargo, en este caso es un poco difícil de ver, ya que es pequeño y blanco..
Después de algunos ajustes en la configuración de Reflow, es posible hacer que la mezcla inicial de formas parezca bastante comparable al kit de interfaz de usuario basado en la imagen original:
Los Filtros CSS son bastante nuevos en la escena y te permiten aplicar algunos efectos visuales geniales a cualquier elemento HTML o SVG; desde divs, a imágenes, a botones, sin embargo, la aplicación más común de estos filtros tiende a ser en imágenes. Tenga en cuenta que la compatibilidad con los filtros CSS todavía está limitada a Chrome, Opera y Safari, por lo que la forma en que elija usarlos debería ser solo para un atractivo adicional que no dejará a los usuarios de IE y Firefox con una funcionalidad reducida..
Como Adobe contribuye a la especificación de Filtros CSS, tal vez no sea una sorpresa ver las herramientas para usarlas incluidas en Reflow, y brindan una manera muy útil de probar cómo se verán sus configuraciones de filtro en tiempo real a medida que las aplique y las modifique. Desafortunadamente, Reflow solo es compatible con siete de los diez filtros disponibles, pero aún hay mucho para trabajar:
Los efectos no son visibles por defecto en su Estilos pestaña, así que para activarlas ve a Ver> Característica web brillante a continuación, haga clic en el botón a la izquierda de la Filtros opción. Una vez activado, puede hacer clic en cualquier elemento de su página y luego hacer clic en + icono debajo de Filtros Panel de configuración para agregar nuevos filtros CSS:
Al igual que con otros efectos CSS, en realidad podría codificar manualmente sus filtros CSS, pero el hecho de poder ver los resultados de su configuración en tiempo real ayuda a acelerar el proceso. Puede aplicar filtros individuales a las imágenes o combinar filtros para crear una variedad de efectos diferentes. Aquí hay algunos ejemplos de filtros aplicados a través de Reflow:
Imagen cortesía de http://publicdomainpictures.net/Si aún no ha echado un vistazo a Reflow, o si lo ha hecho, pero ha decidido no utilizarlo como herramienta de diseño de sitios web, tal vez ahora esté tentado a tomarlo y probarlo como un elemento de diseño de sitio web herramienta en su lugar. Puede que no sea exactamente lo que está buscando en una herramienta completa de creación de sitios, pero podría hacer un gran trabajo para ayudar a que segmentos de su proceso de diseño general sean más rápidos e intuitivos..
Puede obtener los archivos de origen incluidos en este artículo para obtener todos los documentos de Reflow que se muestran arriba y obtener algunas ideas de lo que puede hacer..
Reflow está disponible como una inclusión gratuita con cualquier membresía de Creative Cloud, ya sea para una aplicación única o múltiple, y también puede usarla sin cargo en una versión de prueba de 30 días. Lea más en el portal de Reflow.
