Guía del diseñador web para comparar Photoshop y Fireworks

Spanish (Español) translation by Esther (you can also view the original English article)

Hoy vamos a profundizar en las principales diferencias entre Photoshop y Fireworks y lo que significan para los diseñadores web. Este artículo pretende ser una guía para todos aquellos que intenten comprender las ventajas e inconvenientes de cada aplicación. Nuestro objetivo: ayudar a los diseñadores a entender mejor sus opciones a la hora de elegir su aplicación gráfica.

Hemos publicado una Encuesta de los lectores sobre este tema, así que no dejes de votar también en ese post.

Empecemos por enumerar los pros y los contras de cada programa. Para la mayoría de los diseñadores, Fireworks es el menos conocido, así que empezaremos por él:

Las ventajas de utilizar fuegos artificiales

Fireworks es una aplicación gráfica, igual que Photoshop... pero el "usuario objetivo" del programa es muy diferente. La principal razón por la que la gente elige Fireworks es porque está construido específicamente para los diseñadores web. Es ligero, se mueve rápido (incluso en ordenadores antiguos) y es más fácil de aprender que Photoshop si eres nuevo en cualquiera de los dos programas. Como está hecho para diseñadores web, es más probable que crezca con el tiempo para adaptarse a esta industria. También significa que si estás empezando, no te molestará ninguna de las complejas interfaces de usuario ni la empinada curva de aprendizaje que puedes encontrar en Photoshop.

Estas son algunas de las razones específicas por las que podría elegir Fireworks:

Páginas maestras (y múltiples páginas / estados)

La función de Página Maestra te permite establecer los elementos consistentes del sitio que quieres que aparezcan en cada "página". La función de páginas múltiples te permite crear tantas páginas secundarias dentro de la misma plantilla. Esto es súper poderoso porque actúa de manera muy similar a la forma en que funciona un sitio web real. De hecho, el manejo de las páginas y los estados en un archivo de Fireworks está pensado para imitar el comportamiento de una página web en vivo. Algunos elementos son fijos (como la navegación, la marca, los fondos, etc.) y otros cambian de una página a otra (columnas de contenido, fotos, títulos, etc.). Por supuesto, puedes lograr esto en Photoshop también mediante el uso de grupos de capas o múltiples archivos PSD, pero la organización y la interfaz de usuario que rodea a estas características en Fireworks es más natural. El manejo de los cambios universales en Fireworks es más rápido gracias a ello.

Ah, también puedes separar una página del Maestro si quieres crear elementos de diseño personalizados, lo que lo hace lo suficientemente flexible como para hacer frente a los sitios web más complejos.

Vinculación interna

La vinculación interna es justo lo que parece. En Fireworks, tiene la capacidad de especificar "puntos calientes" dentro de tu sitio que enlazan con las distintas páginas (mencionadas anteriormente). Incluso puedes enlazar con URLs externas si lo deseas. La idea original de esto era permitir a los diseñadores diseñar un sitio en Fireworks y luego "exportarlo" como código. El jurado aún no ha decidido si el código exportado es útil, pero esta función es fantástica si solo quieres exportar un archivo como PDF para que un cliente o director de arte lo hojee rápidamente. Esto facilita la creación rápida de prototipos en Fireworks sin necesidad de escribir una línea de código.

Gestión de estilo inteligente

Los estilos en Fireworks son muy similares al CSS en una página web. Cada elemento puede tener un relleno, un trazo, una fuente y un efecto y guardarlo como un estilo que puede ser reutilizado y modificado de la misma manera que las hojas de estilo en cascada. Si se edita el "estilo" principal, se modifican todos los elementos que utilizan ese estilo. Esto es particularmente eficaz cuando se trata de múltiples instancias de bloques de texto en un sitio. Actualiza uno y los actualizarás todos. Una vez más, es una gran herramienta para ahorrar tiempo.

Mejores herramientas vectoriales

Photoshop ofrece algunas herramientas de edición vectorial muy rudimentarias, pero Fireworks incorpora muchas de las funciones nativas de Illustrator en su propia interfaz de usuario. La mejor herramienta (para los diseñadores web) es probablemente el "rectángulo redondeado", que incluye puntos de control para cada esquina, lo que facilita la realización de cambios en un rectángulo redondeado. Puedes hacer que una esquina sea redondeada y las otras no, también puedes cambiar el radio, algo que Photoshop aún no puede hacer.

Bibliotecas

Los símbolos, estilos y formas vectoriales se agrupan en bibliotecas que pueden reutilizarse en otros proyectos. Esto es ideal para los diseñadores que se encuentran reutilizando elementos y estilos comunes. También significa que puedes compartir tus bibliotecas con otros diseñadores, lo que es especialmente útil si trabajas con grandes equipos de diseño en los que cada diseñador necesita acceder a las mismas bibliotecas.

Mejor agrupación

Photoshop te permite agrupar elementos en Grupos de Capas, pero se hace manualmente y puede resultar tedioso con el tiempo. La agrupación en Fireworks se hace de forma más natural: simplemente seleccionas un puñado de elementos y luego pulsas "Agrupar". Esto generalmente significa que tus archivos se organizarán un poco mejor, y en general ahorra tiempo en relación con el método de agrupación manual de Photoshop.

Mejores degradados

Aquí hay otro caso en el que Fireworks simplemente mejora lo que ofrece Photoshop. En lugar de un puñado de herramientas de degradado, Fireworks incluye una amplia gama de formas de ajustar y gestionar los degradados hasta que sean exactamente lo que estás buscando.

Mejor optimización de la imagen

Photoshop tiene algunas herramientas básicas de "Guardar para la web", pero Fireworks las amplía de forma que se adaptan a la forma de trabajar de los diseñadores web. ¡Las comparaciones entre ambos programas revelan que el tamaño de los archivos es menor cuando se guardan en Fireworks, lo cual es crucial para los sitios web con muchas imágenes; además, PNG-8 (con transparencia) es totalmente compatible, algo que Photoshop todavía no admite!

Aprende más rápido

Si has usado Photoshop durante años, Fireworks te parecerá extraño... pero la mayoría de las personas que no han usado ninguno de los dos programas coinciden en que Fireworks es mucho más fácil de aprender. Photoshop está diseñado para fotógrafos y diseñadores gráficos... lo que significa que se incluyen muchas herramientas que los diseñadores web no necesitan necesariamente. La sobrecarga de la interfaz de usuario a la que están acostumbrados los usuarios de Photoshop se reduce en gran medida en Fireworks, lo que hace que sea bastante fácil de aprender para cualquiera que esté dispuesto a dedicar algo de tiempo extra.

Rendimiento más rápido

¿Qué se obtiene cuando eliminas toda la funcionalidad extra que ofrece Photoshop? Archivos de menor tamaño que se mueven MUCHO más rápido. Los archivos de Fireworks (formato .PNG) pueden contener mucha más complejidad que los archivos .PSD, pero se comportan mejor en la mayoría de los ordenadores, lo que significa menos tiempo de espera para que la CPU procese los gráficos y más tiempo para diseñar.

Muchas de estas funciones también permiten hacer cosas en Fireworks que no se pueden hacer en Photoshop, como crear rápidamente prototipos de un sitio web o una aplicación de AIR, crear PDF interactivos, avanzar y retroceder con Flash y trocear rápidamente un sitio en archivos listos para la web.

Las agencias lo están pidiendo

"En una reciente encuesta sobre competencias laborales de la Sociedad de Agencias Digitales (SODA), casi el 20% de las agencias buscan competencias en FW. El año anterior la cifra era tan pequeña que resultaba insignificante". - Tom Green (de nuestro post sobre la encuesta)

Los inconvenientes del uso de fuegos artificiales

La industria sigue estando muy inclinada hacia Photoshop. Esto significa que casi siempre necesitarás saber PS cuando trabajes con otros diseñadores.
Los archivos complejos de Photoshop no siempre se abren correctamente.
El antialiasing del texto podría mejorarse.
Le faltan muchas de las herramientas gráficas con las que los usuarios de Photoshop están familiarizados, lo que significa que siempre habrá razones para abrir Photoshop.

Las ventajas de utilizar Photoshop

Esta lista va a ser más pequeña porque ya hemos repasado los principales puntos de comparación, pero aquí hay algunos argumentos más para usar Photoshop en lugar de Fireworks.

Es el buque insignia

Admitámoslo, Fireworks sufre un poco el síndrome del "hijastro pelirrojo". Solo en las versiones recientes (CS4 y CS5) Fireworks ha recibido actualizaciones significativas de sus características. Aunque esto es un buen presagio para el futuro, la lógica diría que es mucho menos probable que Adobe preste más atención a Fireworks que a Photoshop, simplemente porque Photoshop se vende más veces al año, por más dinero. Photoshop también es un programa más antiguo, lo que significa que se beneficia de un historial más largo de comentarios de los usuarios. Fireworks sigue creciendo a pasos agigantados con cada nueva versión que sale, pero como Photoshop es el producto estrella de Adobe en la suite CS, es de esperar que reciba la mayor parte de las actualizaciones importantes en el futuro.

Estabilidad

Históricamente, los usuarios de Fireworks informan de más caídas y problemas con los archivos que los usuarios de Photoshop (aunque CS5 trajo mucha más estabilidad). Photoshop tiene su parte justa de problemas, pero vale la pena considerar que es un poco más probable que se encuentre con dolores de cabeza cuando se trata de Fireworks exclusivamente.

Es el estándar de la industria

Aunque hay una demanda creciente de personas que sepan utilizar Fireworks, la demanda de diseñadores web que trabajen con Photoshop es universal. Casi todos los proyectos web importantes utilizan Photoshop al menos en alguna medida, y tener al menos un conocimiento intermedio de PS va a ser un requisito de trabajo para la mayoría de los puestos de diseño web en los que interviene un equipo. Aunque a tus clientes autónomos no les importe en qué programa trabajas, hay muchas más posibilidades de poder intercambiar archivos de Photoshop con tus compañeros que de Fireworks.

Es lo que te resulta familiar

Quizás el argumento más fuerte a favor de usar Photoshop es que ya lo has aprendido y es una parte cómoda de tu flujo de trabajo. Como vimos en nuestro debate en la Encuesta de los Lectores, la gran mayoría de las personas que empezaron con Photoshop se han quedado con él. ¿Por qué? Porque funciona. Y como dice el viejo refrán: "Si no está roto, no lo arregles". Aprender un nuevo programa lleva tiempo y dinero, y si no tienes ninguna razón urgente para empezar a usar Fireworks, no hay realmente ninguna razón para hacer el cambio ahora mismo.

Hay una gran cantidad de tutoriales y recursos

Reconozcámoslo, aunque hay muchos tutoriales para Fireworks, los tutoriales y recursos de Photoshop superan en número a los contenidos basados en Fireworks en la web por lo menos 10 a 1. ¿Qué significa esto para ti? La probabilidad de encontrar increíbles tuts educativos (como en PSDTuts!) es mucho mayor que la de encontrar el mismo contenido para Fireworks. Para muchos, esto es suficiente para compensar el hecho de que Photoshop es más difícil de aprender.

Es una ventanilla única

Un diseñador que usa Fireworks normalmente tendrá que usar Photoshop para crear cualquier gráfico avanzado... pero la mayoría de los usuarios de Photoshop no se molestan en abrir nunca Fireworks. ¿Por qué? Porque no lo necesitan. Toda la funcionalidad principal está ahí en Photoshop. Mientras que Fireworks puede tener un par de características que han sido "mejoradas", los usuarios de Photoshop no se las pierden porque ni siquiera sabían que existían ;)

Los inconvenientes del uso de Photoshop

Un mayor tamaño de los archivos = un rendimiento más lento.
No hay "herramientas web" nativas más allá de la capacidad de guardar imágenes para la web.
Es más caro: 699 dólares para Photoshop / 299 dólares para Fireworks. Ten en cuenta que no se trata de una compra única: ¡las actualizaciones también son más caras!

Poniendo todo esto en contexto

En los albores de Internet, los diseñadores web se veían obligados a utilizar cualquier programa que tuvieran a mano para crear sus sitios web. Los primeros sitios web empezaron siendo cosas sencillas y no requerían mucha destreza gráfica. Los diseñadores de antaño se las arreglaban con el software de diseño gráfico que utilizaban o en el que se habían formado.

Ahora, sin embargo, el diseño web es una parte esencial de la propiedad de casi cualquier negocio. De hecho, hoy en día casi todo el mundo sabe algo sobre el diseño de una página web. Hay programas gratuitos de páginas web en línea, software diseñado para facilitar el diseño web, y luego están los programas más serios creados para diseñadores web profesionales.

A medida que la tecnología avanza, se han lanzado más productos y la decisión de qué programa elegir se ha vuelto difícil. Sin embargo, para quienes llevan mucho tiempo en el mundo del diseño web, los nuevos programas tienen poco atractivo en comparación con los programas probados y auténticos con los que se han formado. Pero, ¿qué dirección debe seguir un nuevo diseñador web? La bifurcación del camino puede ser confusa y abrumadora sin un mapa que seguir.

La imagen más grande

Adobe Photoshop siempre ha sido la piedra angular de la comunidad del diseño gráfico, por lo que es una opción natural para la transición del diseño impreso al diseño web. Adobe Photoshop e Illustrator son los programas utilizados para formar a los nuevos diseñadores gráficos. Normalmente se requiere una base sólida en estos dos programas antes de que una escuela permita a un estudiante la transición a otro software multimedia.

Cuando preguntas a los diseñadores web qué software suelen utilizar, las respuestas más comunes son Photoshop, Fireworks y Dreamweaver. No hay un programa más popular que otro ya que hay varias razones por las que un diseñador aprende qué software sobre otro. Se habla mucho de que Adobe Photoshop y Macromedia Fireworks son lo mismo para los diseñadores de páginas web, pero este amplio resumen no le hace a ninguno de los dos programas la justicia que merecen.

Ahora que Adobe ha adquirido Macromedia, es de suponer que Fireworks seguirá pareciéndose aún más a Photoshop con el tiempo y las futuras actualizaciones. Sin embargo, nunca serán iguales y comprender sus diferencias fundamentales te ayudará a tomar una decisión.

Hay otras opciones de software de diseño web (como Pixelmator para Mac, ULead, Xara, Stone y otros), pero estos dos son los principales y los más debatidos.

Una mirada más profunda a Photoshop

En primer lugar, Photoshop se diseñó para la edición de fotografías. Esto lo convierte en el software preferido de los fotógrafos y de cualquiera que trabaje mucho con fotografías. Los diseñadores de Photoshop nunca pretendieron que el software fuera el programa principal para los diseñadores de páginas web, aunque incluye muchas funciones para ayudar a los diseñadores de páginas web. Photoshop es perfecto para los diseñadores que se dedican a algo más que al diseño de páginas web, ya que sus capacidades multiplataforma y multimedia lo hacen muy versátil.

Photoshop también tiene su reputación. Es el software de diseño gráfico más popular y respetado que existe. Se ha convertido en un estándar del mercado y muchos clientes esperan que los diseñadores lo utilicen. Es posible que tenga que dar algunas explicaciones si quieres enviar un archivo .png de Fireworks en lugar de un documento .psd de Photoshop.

Cuando se trata de la gestión del color, no hay mejor programa que Photoshop. Adobe tiene colores profesionales hasta una ciencia.

Por supuesto, ningún software es perfecto y Photoshop no es una excepción. El software es grande y pesado y difícil de manejar para cualquier ordenador. La memoria necesaria para ejecutar el software es lo suficientemente grande, pero una vez que empiezas a trabajar con archivos de alta resolución puedes tener problemas. Las caídas de Photoshop son legendarias y hay que esperar largos tiempos de carga y congelaciones ocasionales, a menos que tengas un ordenador brillante para trabajar.

Y no solo eso, la complicada interfaz de usuario y las funciones son desalentadoras e intimidantes. El software hace mucho, pero para el usuario medio la mayoría de sus capacidades están enterradas bajo menús y terminología extraña. Photoshop es un programa difícil de aprender por uno mismo, y costoso y que requiere mucho tiempo para acudir a un experto en busca de ayuda.

Aunque las capas de Photoshop pueden ser muy útiles y son el sueño de una persona organizada, a veces pueden ser frustrantes. Sobre todo porque no se puede simplemente hacer clic para seleccionar elementos del documento. La navegación por las capas es esencial. Esto puede suponer una curva de aprendizaje molesta y un proceso que consume tiempo si no se etiquetan bien las capas.

Una mirada más profunda a los fuegos artificiales

Macromedia Fireworks fue diseñado especialmente para los diseñadores de páginas web. La interfaz de usuario es fácil de usar y navegar. Mientras que el aprendizaje de Adobe Photoshop puede ser un proceso largo y frustrante, aprender a utilizar Fireworks apenas lleva tiempo. El software es más intuitivo que Photoshop y más flexible de usar.

Fireworks se creó para aprovechar al máximo el tamaño de los archivos, ya que las páginas web no pueden manejar los gráficos más grandes para los que se creó Photoshop. Esto puede ahorrar tiempo a la hora de cambiar el tamaño del archivo y las propiedades de resolución durante el diseño.

Aunque Fireworks nunca será tan bueno para editar fotos como Photoshop, tiene sus propias capacidades de optimización de fotos. Estas funcionan muy bien para muchos diseñadores web.

Otra gran diferencia entre los dos programas es que un diseñador web crea más de una página a la vez. En Photoshop sueles centrarte en una página a la vez. Con Fireworks, puedes diseñar varias páginas a la vez, cada una con varias capas. Tampoco se necesita tanta memoria para trabajar varias páginas como en Photoshop.

A los diseñadores les gusta que Fireworks sea capaz de trabajar tanto con fotos como con imágenes vectoriales. Es como utilizar Photoshop e Illustrator al mismo tiempo. Además, el precio de Fireworks es mucho más atractivo que el de Photoshop.

Fireworks tiene su cuota de fallos y errores como cualquier otro programa, pero Adobe ha declarado que planea solucionar estos problemas con futuras actualizaciones ahora que ha adquirido Macromedia.

¿Por qué no usar ambos?

Esperaba que me lo preguntaras. En un mundo perfecto, tendría sentido hacer un wireframe de un sitio en Fireworks, pasar a Photoshop para los detalles avanzados, y luego usar Fireworks para componer el sitio y exportarlo para la web ... en la práctica, sin embargo, esto no funciona del todo. Mucha gente opta por hacer esto para elementos específicos (como guardar imágenes de fondo de Fireworks para reducir el tamaño del archivo), pero con demasiada frecuencia los archivos .PSD no se abren perfectamente en Fireworks. Los grupos de capas se mezclan, los estilos de capa se borran y la frustración sobreviene. Puedo recomendar el uso de Fireworks en cada caso (sobre todo para utilizar las mejoras de PNG8 y guardar para la web), pero no esperes que el sistema de doble programa se convierta en una parte fiable de tu propio flujo de trabajo hasta que Adobe pueda resolver estos problemas entre programas.

Dicho esto, hemos escuchado de al menos un par de diseñadores en nuestro post de la Encuesta de los Lectores que utilizan ambos programas lado a lado, por lo que realmente se reduce a tus propias preferencias de flujo de trabajo.

El resultado final

Si ya estás bien entrenado en Photoshop o Fireworks, probablemente sea mejor seguir usando ese programa para tus necesidades.

En un mundo ideal, los diseñadores web tendrían el tiempo, el dinero y la energía necesarios para aprender ambos programas y utilizarlos por sus puntos fuertes y prescindir de sus puntos débiles. Por supuesto, aunque tengas el dinero para invertir en dos programas, probablemente no tengas el tiempo necesario para familiarizarte con el funcionamiento de cada uno de ellos.

Si ya estás bien entrenado en Photoshop o Fireworks, probablemente sea mejor continuar usando ese programa para tus necesidades. Si eres un principiante y estás tratando de decidir cuál es el mejor para empezar, Fireworks es más fácil de usar y aprender, pero Photoshop te ayudará a convertirte en un mejor diseñador en general que si te limitas solo a Fireworks.

Las prioridades, los objetivos y las limitaciones personales serán sin duda un factor a tener en cuenta en tu decisión final. Tener mucha paciencia y tiempo de inactividad sin duda ayudará si quieres dominar todas las increíbles opciones que ofrece Photoshop. Si quieres empezar rápidamente y no quieres perder tiempo en familiarizarte con el proceso, entonces Fireworks es tu mejor opción.

En el mundo del diseño web, cualquiera de los dos programas es de uso común y no se le reprochará que elija uno en lugar de otro. Hay un montón de tutoriales gratuitos disponibles en línea para ambos programas, así como libros y clases de formación.

En la industria del diseño web, encontrarás diseñadores que juran por Photoshop y otros que juran por Fireworks. Escucha sus pros y sus contras, pero en última instancia la decisión depende de ti. No hay pruebas abrumadoras de que un programa sea mejor que otro, simplemente funciona de forma diferente para los distintos usuarios y talentos.

Sobre el autor(es)

Brandon Jones (editor del sitio web de Webdesigntuts+) escribió la introducción y la sección de "puntos de comparación" de este artículo. Greg Bates contribuyó escribiendo la información de fondo adicional para cada programa, así como proporcionando la investigación de la industria.

Greg Bates es un estudiante de segundo año en CSULB y actualmente se especializa en Sistemas de Información, pero también toma clases en el lado de la web y el diseño gráfico. Es escritor de una revista en línea StyleCeo que se ocupa de la moda. También construye sitios web desde cero para diferentes negocios y corporaciones en línea. En su tiempo libre, le gusta hacer deporte, estar con su chica o simplemente hacer algún trabajo independiente. Si te gusta su trabajo y quieres que trabaje como autónomo para ti, puedes contactar con él en http://twitter.com/TheAllureIs_.

Durante el próximo mes destacaremos algunas de las funciones menos conocidas de Fireworks, ¡así que suscríbete (en la parte superior del sitio) para que te avisemos cuando se publiquen los nuevos tutoriales y screencasts!

Continúa el debate

Ya hemos recibido casi 100 comentarios estupendos en el post de la Encuesta de los Lectores, pero si tienes algún comentario, sugerencia o pregunta, ¡publícalo aquí también! Lo mejor de un artículo como éste es que puede reunir a otros diseñadores web para que compartan sus propias experiencias y flujos de trabajo... ¿cómo utilizas tú estos programas?