Para todos hoy en da Photoshop es sinnimo de diseo. Pero sabas que existe un programa especfico para el diseo web?

Adobe dispone en sus Creatives suites de Adobe Fireworks, una aplicacin que nosotros usamos en Perception y recomendamos a todos los diseadores especializados en web. Hay muchos puntos positivos por los que realmente notaris el cambio a la hora de editar vuestras webs: - Fireworks crea los estilos de vuestro proyecto de la misma manera que se crean las propiedades en vuestras hojas de estilo CSS. Al crear un estilo puedes guardarlo y aplicarlo en el resto de elementos o de pginas de tu proyecto. De la misma manera solo ser necesario modificar una vez las propiedades del estilo para modificarlo en todos los elementos relacionados. - Podris crear fcilmente mltiples pginas dentro de vuestro documento. Por lo que podris tener separada cada pgina de vuestro proyecto web en un mismo documento. - Fireworks usa un ratio de compresin superior en todos los formatos de imagen. Las imgenes de nuestros proyectos ocuparn menos espacio, lo que permitir cargar nuestros proyectos online ms rpidamente. - Notaremos mucho la diferencia en los recursos necesarios para mover estas aplicaciones en nuestro equipos. Fireworks necesita muchos menos recursos que Fireworks y adems nos permite contener ms elementos en un archivo de menos tamao. - Dispone de un sistema de Web Layers que nos permite crear guas para disponer zonas de nuestro diseo que luego relacionaremos con las URL de las imgenes que generaremos para nuestra web. Muy til para ayudarnos a crear nuestras webs ms rpidamente. - Una opcin que no os podis perder es la de redimensionar una zona concreta de una imagen que nos interese para por ejemplo lograr espacio suficiente para que quepan nuestros textos. Adems se pueden aplicar tanto a imgenes bitmaps como para vectores. En muchos blogs nos encontraremos comparaciones entre estos dos programas. Os dejamos una lista interesante que merece que le echis un vistazo.

Hace poco tuve la oportunidad de impartir un par de seminarios sobre Fireworkspara los alumnos de Artes visuales. Estuvimos pegando un buen repaso al programita para demostrar en profundidad, que, realmente, le pega muuuuchas vueltas a Photoshop en lo que respecta a prototipado y diseo web. Como les promet algn tipo de documentacin adicional que repasase los puntos clave, he pensado que puedo matar dos pjaros de un tiro:

refrescarles la memoria a ellos y ensearos a vosotros la verdadera potencia del programita en cuestin y el por qu se hace tan interesante. Creme, si con esto no te convences de que Fireworks es una joya, nada lo har :P Como el asunto se extiende bastante y estoy casi seguro que una super parrafada no la digers de una vez, dividir el artculo en varias partes. Vamos con la primera:

Si Fireworks es tan bueno, por qu no lo hemos usado antes?

Excelente pregunta compaero. Y para eso habra que preguntar a Adobe el por qu no integro esta aplicacin antes en sus famosas Creative Suites. Bueno, convendra recordar que Fireworks es un programa originario de Macromedia, no de Adobe y por tanto no se comercializ, ni publicit (ni pirate) del mismo modo que el ya famoso Photoshop. Fireworks se introdujo en la familia Adobe a partir de la suite CS3 (la ltima de las versiones lanzadas de la misma) por lo que bien podra decirse que Photoshop ya le haba ganado bastante terreno de cara al pblico en general. Quien sabe, quiz si tanto Ps como Fw hubiesen salido a la vez, otro gallo cantara.

El tiempo, factor clave

Realmente, el que uses un programa u otro no va a significar que te conviertas en un mejor diseador. El hbito no hace al monje, eso dicen. Entonces, para qu tanta historia? Bueno, si ya ests metido en el mundillo de un modo profesional ya sabrs que el tiempo es dinero. Y que cuando ests metido en un proyecto, el tiempo no suele correr a tu favor. Qu quiere decir esto? Que si las cosas se pueden hacer con ms comodidad y con ms fluidez,

por qu no hacerlas as? Te aseguro que con Fw, tu proceso creativo, va a otro ritmo. Uno mucho mejor.

Entonces usar Photoshop est mal? Podra ir al infierno por ello?

Usar Photoshop para prototipar o en proyectos web no es que est mal, pero creo que no es lo ms eficiente. Recordemos que Photoshop es una herramienta de edicin de imgenes. Muy verstil s, pero no creo que se idease teniendo en mente a los desarrolladores de aplicacin/web. Basta ver que el programa va evolucionando con nuevas caractersticas que apenas nada tienen que ver con este tema (3D, nuevas caractersticas de pincel, mejora en la correcin de imagen y eliminacin de contenido). Por contra Fireworks se ha ido enriqueciendo con pequeas caractersticas que llaman mucho ms la atencin en este sentido (exportacin directa CSS, interpretacin de etiquetas HTML, creacin de elementos RIA) Pero bueno, voy a ir poco a poco, desengranando algunos puntos que creo muy interesantes sobre Fireworks pero tambin haciendo alusin al rival, en este caso Photoshop.

Seleccin de elementos, posicionamiento

objetos

Una de las caractersticas ms simples y ms potentes a la vez es la seleccin de elementos. Basta con pasar por encima de los objetos para que se muestre su contorno o controles de transformacin sin que sea necesario seleccionar el objeto. La ayuda visual que esto supone es enorme.

En Photoshop tambin puedes mostrar los controles de transformacin, pero estos no se muestran hasta que no tienes la capa seleccionada.

Pero es mucho mejor la seleccin grupal. Simplemente arrastrando el cursor por encima de los mismos, todos los elementos que estn dentro del rea (slo hace falta que est un nico pxel del objeto dentro del rea de seleccin) quedarn seleccionados:

No importa si los objetos estn en diferentes capas o subcapas; automticamente quedan seleccionados todos. En el panel de propiedades, Fireworks te indicar cuntos objetos hay seleccionados y en el panel de capas, tambin te indicar en qu capas hay objetos que estn dentro del rea de seleccin:

La seleccin grupal en Photoshop no es tan buena. Si bien puedes hacer seleccin mltiple tambin simplemente arrastrando el cursor, no se mostrarn los controles individuales de cada capa (se mostrar un transformador grupal). Tambin ocurre que aunque en el panel de capas se te muestren las capas seleccionadas, las carpetas o grupos plegados que tengan objetos dentro de la seleccin no aparecen marcados en un primer momento . Hace falta expandir su contenido para comprobar si su contenido qued seleccionado:

Otro detalle extra de Fireworks en el tema de las selecciones grupales es que puedes hacer subselecciones mediante atajos de teclado. Ponte por ejemplo que has seleccionado cajas de texto, smbolos, rectngulos pero que slo quieres escoger las cajas de texto. Pues nada, pulsamos T y nos quedamos slamente con los elementos de texto que haba dentro de nuestra seleccin :) Evidentemente no es oro todo lo que reluce y las herramientas de seleccin bitmap dejan bastante que desear. No ser yo el que diga que su rendimiento es el ms ptimo que se pueda esperar. Cumplen su cometido y puedes operar, dejmoslo ah. Aqu Photoshop gana de calle claro (siempre hablando en trminos de rendimiento, no de funcionalidad).

Quiero cerrar este primer punto con el tema de posicionamiento de objetos. TantoFireworks como Photoshop cuentan con reglas gua, guas inteligentes, ajuste y alineacin de objetos pero Fireworks en su panel de propiedades tiene una pequea joyita:

Ya sea un objeto vectorial, un mapa de bits o un grupo de objetos, Fireworks arroja sus datos de dimensin y posicin. Parecer una tontera pero a la hora de prototipar y crear retculas, a veces viene realmente bien tener esto a mano. Photoshop que yo sepa, no cuenta con esta funcionalidad.

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 usis Flash o Illustrator tenis herramientas similares) que te permite editar y comprobar en tiempo real los cambios sobre el objeto sobre el que ests trabajando, mtodo mucho ms 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 aadir o sustituir los que tengamos visibles en el momento porque disponemos de un selector de tipos de estilos adems de una opcin que nos permite ver cules 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 Fireworkspodemos dar un paso ms. 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 actar sobre uno y emplear la opcin que te permite modificar los parmetros del estilo. En ese momento, todos los objetos con ese estilo vinculado, tendrn el aspecto modificado:

Aadir tambin que los estilos en Fireworks no slo guardan los efectos especiales,tambin permiten guardar informacin relativa al tipo de fuente, su tamao, color de relleno, etc Nota: Tambin tenemos el comando Pegar atributos dentro del men Edicin que nos permite trasladar propiedades de un objeto sobre otro :)

Edicin vectorial (y bitmap)

Evidentemente el poder editar objetos vectoriales in situ tena que salir destacado, verdad? Vale, en la edicin

bitmap ya hemos dicho que no es tan bueno como Photoshop, pero precisamente para eso est ste ltimo. Al Csar lo que es del Csar. En cualquier caso el poder trabajar tanto a nivel bitmap como vector, hace que tu proceso de trabajo sea ms 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 tambin. Y luego tenemos la estupendsima paleta Path que te permite hacer prcticamente de todo a nivel vector:

Tampoco me voy a parar a contar en profundidad el trabajo en vector, pero lo considero mucho ms sencillo y eficaz en Fw. Slo la accin de conseguir bordes redondeados en un rectngulo es algo taaaaan sencillo.

Organizacin: capas, pginas 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 tambin puedes, pero no de la misma manera. En Photoshop slo puedes organizar por capas, carpetas y subcarpetas sucesivas. Tambin tienes la opcin de layer comps que te permite guardar diferentes estados del documento (te permite recordar posicin, 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 ms desarrollado en este aspecto. Puedes jerarquizar un documento en objetos, capas, subcapas, estados y pginas. Bsicamente la cosa sera as:

Una capa puede contener diferentes objetos Una capa puede contener objetos y subcapas Un estado puede contener diferentes (valga la redundancia) estados de capas, subcarpetas y objetos

Una pgina puede contener todo lo anterior Un documento puede contener varias pginas

Qu es lo realmente bueno de todo esto? Que adems puedes compartir capas entre pginas y entre estados de manera que si haces un cambio en una pgina, se propague al resto de ellas sin ir una por una. Tambin puedes crear pginas maestras con resultado similar. Las pginas tienen propiedades independientes: propiedades de exportacin, dimensin del lienzo, Imagnate ahora entonces preparando un diseo web con una pgina para el inicio y otras para sus siguientes secciones. Cada pgina 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.