Diseño Web - Martes, febrero 16, 2010 9:16 - Etiquetas: criterion, fireworks

Fireworks y la realización de prototipos web II

Seguimos con la segunda parte del post que nuestro amigo Armando Sotoca impartió para el Instituto en Artes Visuales sobre la creación de prototipos web en Fireworks.

Degradados y estilos

Si le perdono a Fireworks muchos problemas de estabilidad es por cositas como su manejo de los degradados y los estilos. Aquí no hay color, Photoshop no puede presentar batalla en este aspecto:

Algo tan simple como un manejador de gradiente (los que uséis Flash o Illustrator tenéis herramientas similares) que te permite editar y comprobar en tiempo real los cambios sobre el objeto sobre el que estés trabajando, método mucho más intuitivo que andar jugando con los efectos de capa en Photoshop o la prueba a ojo. Y si te equivocas y quieres volver al principio, doble clic sobre el manejador para que retorne a su estado inicial.

De los estilos, destacar que Fireworks viene bien nutrido con un buen surtido por defecto y que al contrario que en Photoshop, no se hace necesario añadir o sustituir los que tengamos visibles en el momento porque disponemos de un selector de tipos de estilos además de una opción que nos permite ver cuáles son los que tenemos usados en nuestro documento actual. Pero eso no es todo:

Fireworks interpreta los estilos de una manera diferente a Photoshop. En Photoshop lo que podemos hacer sobre una capa es aplicar un estilo y editar posteriormente el subconjunto de efectos que conforman el estilo. En Fireworks podemos dar un paso más. Podemos redefinir estilos sobre objetos vinculados. ¿Que quiere decir esto? Que si tenemos 16 botones a los que hemos aplicado un estilo concreto, basta con actúar sobre uno y emplear la opción que te permite modificar los parámetros del estilo. En ese momento, todos los objetos con ese estilo vinculado, tendrán el aspecto modificado:

Añadir también que los estilos en Fireworks no sólo guardan los “efectos especiales”, también permiten guardar información relativa al tipo de fuente, su tamaño, color de relleno, etc…

Nota: También tenemos el comando Pegar atributos dentro del menú Edición que nos permite trasladar propiedades de un objeto sobre otro

Edición vectorial (y bitmap)

Evidentemente el poder editar objetos vectoriales in situ tenía que salir destacado, ¿verdad? Vale, en la edición bitmap ya hemos dicho que no es tan bueno como Photoshop, pero precisamente para eso está éste último. Al César lo que es del César.

En cualquier caso el poder trabajar tanto a nivel bitmap como vector, hace que tu proceso de trabajo sea más fluido y mejor al no tener que saltar entre diferentes aplicaciones. No obstante, reconozco que de todas formas, casi todos trabajamos con varias aplicaciones a la vez.

Continuemos. El trabajo a nivel bitmap en Fireworks se puede al menos realizar, cosa que no te permite Photoshop con el amigo vector con tanta facilidad. Para Photoshop sacaron los “objetos inteligentes”: tú te copias de Illustrator un logo en Photoshop y lo puedes reescalar y modificar sin que pierda calidad. Y ya está. Ahí se acaban tus opciones. Si quieres editar el logo, te vuelves por donde viniste. Prueba a abrir un EPS. Ahora hazlo con Fireworks. Mejor, ¿verdad? Prueba a abrir un .AI Y si eres de los que resisten con el Freehand, haz “copypaste” también. Y luego tenemos la estupendísima paleta Path que te permite hacer prácticamente de todo a nivel vector:

Tampoco me voy a parar a contar en profundidad el trabajo en vector, pero lo considero mucho más sencillo y eficaz en Fw. Sólo la acción de conseguir bordes redondeados en un rectángulo es algo taaaaan sencillo….

Organización: capas, páginas y estados

Otro de los puntos realmente fuertes de Fireworks es la capacidad de mantener en un único documento un website completo (por poner un ejemplo). Que sí, que en Photoshop también puedes, pero no de la misma manera.

En Photoshop sólo puedes organizar por capas, carpetas y subcarpetas sucesivas. También tienes la opción de layer comps que te permite guardar diferentes estados del documento (te permite recordar posición, visibilidad y estilos de capa).

Para el que no lo sepa, layer comps se ubica dentro del menú window. No suele ser muy conocido porque por defecto aparece como panel oculto.

Como he dicho, Fireworks está mucho más desarrollado en este aspecto. Puedes jerarquizar un documento en capas, carpetas (y subcarpetas), estados y páginas. Básicamente la cosa sería así:

• Una capa puede contener diferentes objetos
• Una carpeta puede contener capas y subcarpetas
• Un estado puede contener diferentes (valga la redundancia) estados de capas y subcarpetas
• Una página puede contener todo lo anterior
• Un documento puede contener varias páginas

¿Qué es lo realmente bueno de todo esto? Que además puedes compartir capas entre páginas de manera que si haces un cambio en una página, se propague al resto de ellas sin ir una por una. También puedes crear páginas maestras con resultado similar. Las páginas tienen propiedades independientes: propiedades de exportación, dimensión del lienzo,…

Imagínate ahora entonces preparando un diseño web con una página para el inicio y otras para sus siguientes secciones. Cada página con elementos comunes (el menú, footer, etc…) y elementos propios. Todo dentro de un mismo documento y con un peso de archivo relativamente menor al que puedes conseguir en Photoshop.

Tenéis más información sobre el uso de páginas, estados y capas en este artículo [en] pero ya os digo que es muy sencillo acomodarse a su uso

Me he quedado con ganas de más…

Para la siguiente parte de este artículo “evangelista” os comentaré algunas cosillas también muy interesantes de Fireworks que vimos en Artes Visuales: el uso de la herramienta de búsqueda y reemplazo, los símbolos, exportación… Permanezcan cerca de sus pantallas!