Photoshop o fuegos artificiales? Es la pregunta que ha llevado a todo tipo de diseñadores y desarrolladores a un debate acalorado. Hoy usaremos ambas aplicaciones para crear un gráfico web simple.
Este tutorial está dirigido a todos aquellos diseñadores que nunca sueñan con renunciar a Photoshop y no saben casi nada acerca de Fireworks. Le mostraré cómo tomar sus gráficos de Photoshop y agregar algunas funciones interactivas a través de Fireworks.
La interactividad debería afectar el diseño
Hay muchos diseñadores que se apegan a las maquetas de diseño de front-end puro. En otras palabras, inician Photoshop, eliminan el aspecto general de un sitio web y luego lo transmiten a los desarrolladores.
Muchos argumentan que todos los diseñadores deben saber cómo codificar, pero este debate es irrelevante para nuestro tema de hoy. El hecho es que he visto oficinas de diseño en corporaciones en todo Estados Unidos que operan con dos equipos distintos: las personas que diseñan en Photoshop y las personas que dan vida a esos diseños en el navegador.
Este artículo es para el primero. Eres un diseñador de diseño que no conoce un poco de código, pero sabes que tu equipo de desarrolladores fomenta diseños dinámicos e interactivos. Le gustaría construir sus comps con estos objetivos en mente, pero en última instancia, solo puede hacer sugerencias vagas y esperar que los desarrolladores compartan su visión.
Otra situación común es la necesidad de crear rápidamente una maqueta en vivo que pueda mostrar a un cliente. Puede ser perfectamente capaz de transformar su trabajo de Photoshop en un sitio web que cumpla con los estándares, pero desea asegurarse de que su cliente esté satisfecho antes de continuar.
En cualquiera de estos casos, Adobe Fireworks es una herramienta perfecta para agregar a su flujo de trabajo para lograr lo que está buscando. Con Fireworks, puede crear interacción directamente en sus diseños y previsualizarlos como si fueran una página activa.
¿Por qué fuegos artificiales?
Los diseñadores web en todas partes están comenzando a darse cuenta de que Fireworks es una herramienta realmente impresionante para diseñar sitios web. En este momento, incluso hay un gran argumento sobre si los diseñadores web deberían abrir Photoshop cuando puedan crear un sitio completo en Fireworks.
A pesar de estos argumentos, me doy cuenta de que la comunidad de diseño web, en su mayor parte, vive en Photoshop. Incluso soy bastante nuevo en Fireworks y, por lo tanto, soy mucho más propenso a crear una compilación rápida en Photoshop. Por este motivo, este tutorial le mostrará que puede usar los dos juntos de manera sinérgica. Crearemos un gráfico básico en Photoshop en el que se sienta cómodo, luego lo pasaremos a Fireworks para darle vida.
Creando un botón en Photoshop
En lugar de que su primer proyecto de Fireworks sea una maqueta completa del sitio web, intente comenzar con algo pequeño. El resultado será una transición mucho menos abrumadora de una aplicación a otra. Hoy comenzaremos tu educación en Fireworks con un simple botón gráfico.
Como mencioné anteriormente, ya que está acostumbrado al conjunto de herramientas de Photoshop, comenzaremos allí. Fácilmente podría hacer este objeto completo en Fireworks (el flujo de trabajo podría ser bastante similar), pero por ahora quiero centrarme en la idea de que no necesariamente tiene que renunciar a su aplicación de gráficos favorita.
Cree un nuevo documento de Photoshop (cualquier tamaño está bien para esta prueba) y cree un rectángulo vectorial como el que se muestra a continuación. Llené el botón con # 005da5.
A continuación, vaya a sus estilos de capa y agregue una ligera superposición de degradado y una sombra interior. Solo lo suficiente para hacer que el botón se vea un poco menos plano.
Desde aquí, duplique la capa de forma vectorial con su botón y elimine los puntos a lo largo del borde inferior utilizando la Herramienta de selección directa (A). Luego, mueve los puntos a lo largo del costado, rellena la capa con blanco y reduce la opacidad para que el efecto sea similar a la imagen de abajo.
Finalmente, agregue algunas palabras y estará listo para ir. Usé una fuente típica de sans-serif en negrita con una sombra interior, las configuraciones se muestran a continuación.
Ahora tenemos nuestro botón de Photoshop brillante horriblemente cliché. Desde aquí queremos previsualizar alguna interactividad. Por ejemplo, digamos que queremos mostrar un simple efecto de desplazamiento. Photoshop no es necesariamente la mejor manera de hacerlo y realmente no necesitamos nada tan intenso como Dreamweaver, así que ¿dónde está el término medio? Fuegos artificiales al rescate!
Importación en fuegos artificiales
Antes de importar este documento en Fireworks, asegúrese de que su PSD esté bien y limpia. Asigne un nombre a todas sus capas, agrupe las capas donde sea necesario, etc. Esto hará que sea mucho más fácil hacer un seguimiento de la ruta. Nuestro pequeño botón solo tiene unas pocas capas, así que simplemente nombré todo y guardé la PSD en la carpeta de mi proyecto.
Enciende Fireworks y abre el PSD que acabas de guardar. No tiene que exportar / importar de ninguna manera especial, simplemente use el comando Abrir antiguo. Esto te dará algunas opciones con las que puedes jugar (las dejé todas solas), solo asegúrate de seleccionar la opción para mantener la editablilidad de la capa sobre la apariencia.
A partir de aquí, es importante investigar lo que Fireworks transferirá y no transferirá correctamente. Como se puede ver en la imagen de abajo, mis formas vectoriales, el texto y los colores aparecieron muy bien, pero la opacidad de la capa en mi punto culminante es del 100%. Esto es un poco molesto, pero es lo suficientemente fácil como para dejarlo caer al 10%.
Aparte de eso, mi pequeño archivo sobrevivió perfectamente a la importación. Como puede ver a continuación, cada una de mis capas quedó intacta e incluso mis efectos de capa aún son editables.
Tenga en cuenta que los efectos de capa aparecen en la paleta Propiedades y tienen una interfaz muy diferente a la de Photoshop. Sin embargo, los mismos efectos básicos y controles están presentes.
Añadiendo un nuevo estado
Para agregar algo de interactividad a nuestro botón, tendremos que trabajar con dos características de Fireworks con las que puede o no estar familiarizado: Slices y States.
Los estados son un poco como Photoshop Layer Comps, pero más orientados a los cambios reales por los que se espera que pase un objeto. Así que para nuestro botón, queremos que la apariencia cambie cuando el usuario se desplace sobre él. Para lograr esto, crearemos múltiples estados para reflejar las diferentes iteraciones de los botones.
Para hacer esto, navegue a la paleta de Estados y duplique el estado actual. Entonces nombra el estado original? Normal? o? Predeterminado? ¿Y nombrar el nuevo estado?
Desde aquí, vaya a la paleta Propiedades y cambie el color de relleno del botón a rojo. Nuevamente, esto es bastante diferente de lo que se ve en Photoshop, pero el proceso se explica por sí mismo. Haga clic en la muestra, elija un nuevo color y estará listo para comenzar.
Ahora tenemos dos estados diferentes con los que trabajar: un botón rojo y un botón azul. Mediante la utilización de segmentos, podemos vincular estos estados a una acción de desplazamiento sin ningún tipo de código.
Añadiendo una rebanada
Los cortes de Fireworks funcionan de manera muy similar a los de Photoshop, solo cuando se combinan con estados, se obtiene una funcionalidad casi similar a Dreamweaver.
Para agregar una porción, tome la herramienta de selección y haga clic derecho en el botón azul (asegúrese de no hacer clic en el resaltado). Desde aquí, seleccione el elemento del menú? Insertar rebanada rectangular? para crear una porción del mismo tamaño que nuestro botón.
Después de esto, debería aparecer una superposición de color sobre el botón. Mire hacia abajo en la paleta de Propiedades nuevamente para encontrar opciones para la compresión de archivos de la porción, elegí "JPEG - ¿Mejor calidad?" Aquí también puede agregar un enlace y un texto alternativo.
Implementando el Efecto Hover
Observe el pequeño círculo en el centro del botón en la captura de pantalla anterior. Al hacer clic en esto aparecerá una lista de acciones. A partir de aquí, todo lo que tiene que hacer es seleccionar "Agregar comportamiento de rollo simple". y eso cambiará automáticamente el estado del botón cuando se desplace sobre la imagen.
Después de hacer esto, realmente no notará ninguna diferencia en su documento. Para ver el efecto en acción, haga clic en el botón Vista previa cerca de la parte superior de la ventana. Esto le permitirá interactuar con el botón como si estuviera en un navegador web.
Exportando el botón a un navegador
Ahora, si desea mostrar su creación a otra persona, es probable que desee llevarla fuera de Fireworks. Una forma de hacer esto es exportar su archivo como una página web. Cuando llegues a Archivo> Exportar, elige la opción? HTML e Imágenes? Se muestra en la imagen de abajo.
Tenga en cuenta que si está creando un sitio completo real con varias páginas, querrá seleccionar? ¿Todas las páginas? Opción pero para esta pequeña prueba solo necesitamos la página actual. El resultado debe ser una carpeta de imágenes y un? Htm? o? html? Archivo que puede cargar en un servidor y compartir en línea. Tenga en cuenta que cuando lo abre en el navegador, tanto el efecto de desplazamiento como el enlace que insertamos funcionan como en un sitio web real, lo que hace que esta sea una gran herramienta para crear composiciones web muy rápidamente.
No listo para producción
Si eres un no programador que de repente piensa que golpeó el oro, espera un minuto. Desafortunadamente, la salida aquí está bien para mirar, pero no cerca de algo que querría publicar en un sitio real. El resultado de nuestro pequeño proyecto simple fue todo un lío de JavaScript cuando, en realidad, un elemento web tan simple solo requiere unas pocas líneas de HTML y CSS.
Fireworks no está destinado a ser un creador de sitios WYSIWYG completo. En consecuencia, la salida web en vivo simplemente no está a la par y solo debe usarse para propósitos de vista previa.
Conclusión
En resumen, Photoshop es increíble para crear gráficos, pero cuando se trata de crear y previsualizar la interacción, se queda corto. En estos casos, Fireworks le proporciona un conjunto de herramientas mucho más potente.
Este tutorial es para principiantes de Fireworks absolutos y apenas roza la superficie de las herramientas web y la funcionalidad que tiene disponible. Seguiremos esto pronto con una mirada más profunda sobre cómo usar Fireworks para construir algunas composiciones de sitios web asombrosas.