Hoy te traemos la primera publicación en lo que será una serie de publicaciones centradas en Fireworks para diseñadores web. Examinaremos en profundidad lo que Fireworks tiene para ofrecer a los diseñadores web, y por qué, cuando se usa correctamente, es el compañero perfecto de Photoshop. Prepárese para llevar su comprensión de Fireworks al siguiente nivel!
Tom Green es profesor de multimedia interactiva a través del Humber Institute of Technology y Advanced Learning's School of Media Studies. Al igual que todos los profesores del programa, Tom cree que sus estudiantes merecen ser enseñados por instructores que sean considerados expertos en su campo y cuyo conocimiento de su materia esté al día con las mejores prácticas de la industria. Es un experto en la comunidad de Adobe, líder en educación de Adobe (posterior a la secundaria), socio de Community MX y fue incluido en la lista de los diez diseñadores de flash más influyentes de Adobe..
Tom ha escrito varios libros (¡9 en total!) Y tutoriales extendidos sobre el tema de los fuegos artificiales y el diseño web en los últimos 7 años, por lo que es un paso natural para guiarnos a través de este increíble programa. Después de esta introducción, Tom nos guiará a través del maravilloso mundo de Fireworks con varios tutoriales en video. Bien, ahora que sabes un poco sobre Tom, vamos a profundizar en!
"Photoshop es un martillo y Fireworks es un destornillador ..."
Comencemos esta serie siendo sinceros: no estoy aquí para convencerte de que Fireworks es mejor que Photoshop para el diseño web. Si usted es un usuario de Photoshop confirmado y lo utiliza para diseñar sitios web, no espere que intente quitar Photoshop de sus dedos. Todo lo que espero de usted es que los comentarios a continuación no se rellenan con "Photoshop lo hace mejor porque ...". Ya hemos tenido esa discusión..
Brandon me ha pedido que haga una serie de artículos sobre cómo Fireworks encaja en el esquema general de las cosas cuando se trata del flujo de trabajo digital. Para ser honesto, he estado esperando esta oportunidad por un tiempo porque hay un peligro real en este negocio tonto de aferrarse a una herramienta y no renunciar a ella. Para mí, Photoshop es un martillo y Fireworks es un destornillador. Por lo tanto, puedes entender cuando te digo que estoy cansado de ver a las personas perder el tiempo manejando tornillos con un martillo o atornillando clavos.
He estado utilizando Fireworks desde que llegó al mercado por primera vez y puedo decir que Macromedia no tenía ni idea de cuán grande iba a ser la web. Intentaba sacar un editor de gráficos fácil de usar que podría usarse en Flash o Dreamweaver. Me enganché porque era un usuario de Director que descubrió que crear botones en Photoshop (CHOPS cualquiera) era tedioso y lento. Cuando descubrí que podía hacer el mismo botón en Fireworks en cinco minutos, tardé 10 minutos en crearlo en Photoshop y no he vuelto a mirar atrás. Solo recuerde que todavía utilizo Photoshop cuando necesito hacer algo que Fireworks no puede hacer, como "consciente del contenido" y varios filtros.
El otro aspecto de esta serie es que Adobe ha hecho un trabajo bastante malo en el posicionamiento de Fireworks en el mercado.. No fue hasta el lanzamiento de CS4 que descubrieron algo que muchas personas ya sabían: Fireworks es una herramienta de creación rápida de prototipos..
Esa es una de las cosas que planeo enfatizar en esta serie.. Como herramienta de creación de prototipos, Fireworks le ofrece la oportunidad de:
El problema es que las personas ven esos cuatro aspectos y se detienen allí porque pierden atención antes de la palabra "prototipo". No van más allá y descubren que cada uno de esos usos requiere un "siguiente paso", que generalmente involucra la entrega a un profesional encargado de la tarea de juntar la cosa..
La palabra "rápido" está ahí porque, francamente, los clientes hacen preguntas tales como: "¿Qué aspecto tiene este proyecto / cosa que está sugiriendo?" En esa etapa, no quiere gastar mucho tiempo y dinero en responder La pregunta. Fireworks le ofrece una solución bastante eficiente para responder esa pregunta..
Aunque planeo profundizar más en estos cuatro aspectos de la aplicación en los artículos subsiguientes, retrocedamos y analicemos Fireworks antes de ser específicos. Las áreas que resalto no son una lista "favorita". O bien disipan los "mitos" sobre Fireworks o resaltan una característica de productividad importante que puede ... o no ... encontrar útil. En ningún orden particular son:
No no.
Fireworks exporta diseños HTML y / o CSS que necesitarán una gran cantidad de trabajo adicional por parte de alguien con diseño web o diseño CSS y códigos de código. El propósito de poder exportar HTML o CSS es darle al cliente un vistazo a lo que está sugiriendo y darle al equipo web un punto de partida para el proyecto. Todavía no he encontrado ningún proyecto de Fireworks que haya ido directamente a la web desde la aplicación.
De hecho, cualquier persona que utilice Fireworks para crear sitios web de versiones finales debe entregar su licencia Fireworks CS5.
Desde hace varios años, Fireworks ha incluido un panel de optimización que le permite comparar varias configuraciones de optimización para imágenes jpg y gif y hacer una comparación de calidad 4-Up con la original. Esto no está aquí para insistir en el debate de Fireworks / Photoshop, sino para resaltar una característica de productividad de la aplicación que se pasa por alto con bastante frecuencia. De hecho, el jpg expulsado de Fireworks es en realidad más pequeño y mejor que el expulsado de Photoshop. No tomes mi palabra por ello. Greg Rewis, el evangelista mundial de Adobe, también lo descubrió y lo publicó en su blog..
En realidad se conoce formalmente como la Biblioteca Común. Este panel viene repleto de símbolos útiles que se pueden usar en sus prototipos y estos símbolos se pueden agregar a las páginas y, en el caso de los símbolos de Flex, se pueden intercambiar por el acuerdo real en una fecha posterior. Solo tenga en cuenta que estos símbolos no son más que íconos, pero que le facilitan la vida cuando necesita agregar un cuadro de cierre a algunos cromos.
Al mismo tiempo, Fireworks tiene la capacidad de crear símbolos interactivos de buttion, menús desplegables, rollovers y una serie de funciones y efectos interactivos a los que nos hemos acostumbrado a lo largo de los años. Estos símbolos se guardan en una biblioteca de símbolos y se pueden reutilizar según sea necesario.
Presentado en Fireworks CS4, el formato FXG es lo que convierte a Fireworks en una potencia de diseño de interfaz cuando se trata de crear prototipos de aplicaciones de Internet enriquecidas. De hecho, puede exportar un diseño de varias capas y varias capas de Fireworks como un archivo FXG y abrirlo ... completo con páginas y capas intactas ... en Flash Catalyst CS5. Un hecho poco conocido acerca de este formato es que puede guardar un documento de Fireworks como un archivo FXG y abrirlo en Illustrator CS5. Además, no olvidemos que "ida y vuelta" ha sido una característica de las aplicaciones durante años, lo que significa que puede, por ejemplo, colocar una imagen de Fireworks en un documento de Dreamweaver y editar y modificar el documento de Fireworks desde Dreamweaver.
Fireworks CS5 puede abrir documentos de Illustrator y Photoshop y guardar documentos en los formatos nativos de esas dos aplicaciones ... Fireworks admite capas de Photoshop, estilos de capas, composiciones de capas, capas de vectores y modos de mezcla comunes a Fireworks y Photoshop. Las excepciones son las capas de ajuste y los grupos de recorte. Si los necesitas, puedes aplastarlos o ignorarlos..
En la Figura puede notar que solo puede guardar archivos en Illustrator 8. Si es un núcleo duro, es muy probable que sea su excusa para darle un pase a Fireworks. Eso sería un gran error..
En el punto anterior resalté el formato FXG. Si lo hace, los efectos de relleno de vectores admitidos se conservan como vectores, lo que significa que los diseños de Fireworks, abiertos en Illustrator, se pueden convertir fácilmente en imágenes de alta resolución para trabajos de impresión basados en CMYK o simplemente se abren en Illustrator para su posterior manipulación.
La introducción de la colección de productos CS5 también marcó el debut de Fireworks en Device Central..
Elija su dispositivo y haga clic en Crear para abrir Fireworks. Cuando Fireworks se abre, el lienzo se ajusta al tamaño de la pantalla del dispositivo. Desde allí, cree su diseño y seleccione Archivo> Vista previa en Device Central para ver su página en el dispositivo. Admito que la implementación es bastante escasa en comparación con lo que puede hacer con otras aplicaciones. En este momento, simplemente puedes ver cómo se ve la página en el dispositivo. Si desea crear un diseño de varias páginas y desplazarse por las páginas, no se moleste. Solo puedes ver vistas de una sola página..
Cree un botón de múltiples estados en Fireworks, arrastre el símbolo desde el lienzo de Fireworks hasta el escenario de Flash y aparecerá un símbolo de botón de Flash en pleno funcionamiento en la biblioteca de Flash. También he estado utilizando Fireworks para crear prácticamente todos los elementos de la interfaz que he usado en mis libros, tutoriales y clases durante años. De hecho, una vez utilicé una máscara de video Flash completamente funcional que fue creada totalmente en Fireworks en uno de mis libros de Flash Video solo para demostrar que Fireworks debería ser invitado a la fiesta..
Lo que los diseñadores también tienden a pasar por alto es que Fireworks crea animaciones GIF y estas animaciones se pueden generar como archivos .swf para su uso en Flash o, prepárense ... After Effects CS5.
Esta es un área en la que Fireworks es un gigante que ahorra tiempo en Photoshop. Aunque puede crear acciones de Photoshop para cambiar el tamaño, renombrar y reformatear carpetas llenas de imágenes ... debe crear esa acción. Fireworks tiene un procesamiento por lotes ubicado en Archivo> Proceso por lotes. Desde allí, simplemente identifica los archivos que se procesarán, lo que desea que se les haga y adónde van. He procesado carpetas que contienen unas pocas docenas de imágenes tomadas en mi Nikon D200 para cargarlas posteriormente en Flickr. De principio a fin, el proceso rara vez lleva más de tres o cuatro minutos..
Como dije al principio, la intención de la pieza no es avivar el debate de no debate "Fireworks vs Photoshop" que ha estado ocurriendo desde que la aplicación salió a la calle en los días de Macromedia. Cuando Adobe compró Macromedia, había algo de dinero serio en el hecho de que los fuegos artificiales estaban a punto de ser arrojados al mismo montón de polvo que Freehand. Eso no sucedió y gran parte del razonamiento detrás de esto fue que Adobe nunca vio a Fireworks como una competencia para Photoshop. En cambio, a lo largo de los años, Fireworks llamó la atención de los diseñadores web, diseñadores RIA y diseñadores móviles como una forma de dar vida rápida a sus ideas para sus clientes. En ciertos aspectos, la evolución de Fireworks en una herramienta de creación rápida de prototipos se debió más a lo que los usuarios estaban haciendo con la aplicación y le contaron a Adobe que a la inversa..
En las próximas semanas, planeo hacer exactamente eso: decirle qué están haciendo los usuarios de Fireworks con la aplicación, y mostrarle cómo la aplicación puede adaptarse a su flujo de trabajo diario. Si decide dar un giro a Fireworks, depende de usted, pero a medida que nos adentramos en el entorno multipantalla que surgió repentinamente, Fireworks y photoshop se convertirán en productos aún más complementarios que los productos competitivos.