Diapositivas del workshop sobre Adobe Fireworks impartido en Bilbao el 3 de diciembre de 2011.

1. Fireworks
Optimizando el día a día del diseñador digital

2. ¿Quién soy?
@Skeku
www.criteriondg.info
[Q]Interactiva
video2brain trainer
Adobe Community Help

3. Algo está cambiando...
Cada vez con mayor frecuencia, aparecen en la red
nuevos artículos y referencias a Fireworks como una
buena decisión de cara a afrontar proyectos digitales.
http://fireworks.smashingmagazine.com/2010/09/17/the-power-of-
adobe-fireworks-what-can-you-achieve-with-it/
http://robots.thoughtbot.com/post/3564422865/dear-photoshop-user-
meet-fireworks

4. ¿Po qué?

5. ¿Po qué?
En mi opinión gran parte de esto se debe al auge de la
interfaz multidispositivo y al diseño flexible (responsive
web design). Proyectos con versión tablet, su web,
versión móvil, etc...
Proyectos que no exigen un sólo diseño sino más bien
una “familia” o un nutrido grupo de componentes
similares.

6. ¿Po qué?
También puede deberse (en mucha menor parte eso sí)
a la descentralización del equipo de trabajo.
Esto lo veremos un poco más adelante :P

7. ¿Po qué?
Si bien cada uno puede trabajar como mejor le parezca
o mejor le resulte, todos estaremos de acuerdo en que
la optimización de tareas rutinarias es algo que a todos
nos vendría bien. Al fin y al cabo, nos ayuda a reducir
tiempos.Y todos sabemos que el tiempo...es dinero.

8. ¿Po qué?
Después de todo esto... ¿por qué no usar una
herramienta que está mejor enfocada para nuestros
quehaceres en el diseño digital?
Hablo de web, interfaz, prototipado, interactivos... y para
eso, Fireworks está muy bien preparado.

9. ¿Po qué?
Además...

10. Katy Perry tiene
una canción
titulada
“Firework”
Photoshop, NO.

11. FW vs PS
El eterno dilema

12. FW vs PS
Algunas razones por las que se viene usando Photoshop
por encima de Fireworks:
Los diseñadores del mundo real, pasan al digital usando las
herramientas que ya conocen.
Photoshop surgió directamente en Adobe... Fireworks era de
Macromedia.
Fireworks se “hizo mayor” en la versión de la Creative Suite 3,
mucho después que Photoshop.

13. FW vs PS
En realidad, no existe (o no debería existir) tal dilema.
¿Cuál es mejor? ¿Cuál es peor?

14. FW vs PS
Photoshop es excelente en edición y retoque de
imágenes y Fireworks también lo permite, pero no son
comparables sus capacidades.
Fireworks es excelente para diseño y prototipado digital.
Photoshop también lo permite, pero el método de
trabajo (creo) que no es tan fluido y no tiene las
mismas capacidades.

16. Disclaimer
Fireworks mola sí, pero no es tan robusto y estable
como Photoshop por lo que es posible que pudiera ser
quizás a lo mejor se colgara o no funcionara bien en
algún momento de esta charla.
Pido disculpas por adelantado y agradezco a Adobe que
al menos ya añadieran a FW un autosave!

17. Inspector de
propiedades

19. Seleccionando...

20. Seleccionando... (PS)

21. Seleccionando... (FW)

22. Seleccionando... (FW)
Subselecciones:
Teniendo un grupo de objetos seleccionado, emplea
atajos de teclado para subseleccionar elementos de un
mismo tipo.

23. Seleccionando... (FW)

24. Seleccionando... (FW)
Información:
Las selecciones (especialmente las grupales) en PS no
ofrecen un feedback visual tan detallado como el que
ofrece FW.

25. Seleccionando... (FW)

26. Alineando y
moviendo...

27. Alineando y moviendo... (PS)

28. Alineando y moviendo... (FW)

29. Photoshop no te permite posicionar un elemento
directamente en un punto concreto. Fireworks además,
tiene opciones adicionales de alineación.
Alineando y moviendo... (FW)

30. Copiando y
pegando....

31. Copiando y pegando... (PS)
Debo tener realizada una selección bitmap y la capa
seleccionada también. Lo típico: Ctrl+C y luego Ctrl+V
pero si lo quiero pegar “en contexto” he de seleccionar
la opción correspondiente o haber editado el atajo de
teclado.
Podemos duplicar los objetos fácilmente sí, y podemos
enmascarar objetos apilándolos.
En algunos casos el copiar y pegar en Photoshop no nos
pega lo mismo que hemos copiado...véase las capas de texto
por ejemplo.

32. Copiando y pegando... (FW)
En FW, selecciono el objeto y lo pego directamente “en
contexto”. Puedo además pegar rápidamente como una
nueva máscara o dentro de otro objeto.

33. Copiando y pegando... (FW)
También tengo la opción de “pegar atributos” para
tomar los efectos y propiedades de un objeto y
pegarlos en otro.

34. Rellenos, bordes y
degradados

35. Rellenos, bordes y degradados...
Mayor variedad de
degradados.

36. Rellenos, bordes y degradados...
Inifinidad de
opciones de borde.

37. Rellenos, bordes y degradados...
Edición en tiempo real de degradados.

38. Photoshop presenta una ligera ventaja y es que
mediante las capas de relleno me permite escoger el
ángulo concreto en que se aplicará un degradado.
Rellenos, bordes y degradados...

39. Estilos

40. Estilos
Un método rápido de aplicar
diferentes aspectos y propiedades
a varios elementos de nuestro
documento.Aunque existen
también en PS, FW ofrece
mayores capacidades en esta
herramienta.
Los estilos en Fireworks permiten
guardar valores de texto.
Se pueden redefinir en cualquier
momento y por tanto se aplican en el
momento sobre todos aquellos
objetos asociados al estilo redefinido.

41. Edición vectorial

42. Edición vectorial (PS)
Coge un logo que tienes en formato AI (Illustrator) y lo
pegas en Photoshop. OK, si lo pegamos como objeto
inteligente, al reescalar no pierde calidad. Pero...
...¿y si tenemos que modificar el logo?Tendríamos que
volver a Illustrator y hacer los cambios.

43. Edición vectorial (FW)
¿Por qué usar dos programas si puedo hacerlo con uno?

44. Edición vectorial (FW)
En la variedad
está el gusto.

45. Edición vectorial (PS)
Probad a hacer un rectángulo con bordes redondeados
en Photoshop. Lo lógico será emplear la forma creada
para tal fin. Pero... ¿y si queremos modificar el grado de
redondez?Toca deshacer y volver a hacer.

46. Edición vectorial (FW)
En FW usamos el inspector de propiedades y el valor
“redondez” o creamos una forma automática con bordes
redondeados.

47. Escala 9

48. Escala 9
Fireworks no cuenta con la transformación en función
del contenido de Photoshop. En su lugar ofrece la
herramienta de escala de 9 divisiones.

49. Jerarquía y
organización

50. Jerarquía y organización...(PS)
Puedo organizar todo en carpetas y subcarpetas. Incluso
tengo “layer comps” que me ayudar a organizar estados
de mi documento.

51. Jerarquía y organización...(FW)
En FW me organizo también en carpetas y subcarpetas,
sólo que aquí se llaman capas.También tengo estados,
pero...

52. Jerarquía y organización...(FW)
Puedo compartir capas entre
estados y tener los objetos
independientes entre ellos.
Puedo usar los estados para
crear gif animados directamente.
Cada estado es independiente
de los demás en contenido. No
en dimensiones.

53. Jerarquía y organización...(FW)
Puedo compartir capas entre páginas,
todas o sólo las que yo quiera.
Puedo crear una página maestra que
me sirva de plantilla para todo el
documento.
Cada página es totalmente
independiente de las demás, en
contenido y dimensiones.
Cada página también puede tener sus
propios estados.

54. Símbolos

55. Símbolos
Un símbolo me permite guardar objetos dentro de mi
biblioteca (como en Flash) para poder reutilizarlos
posteriormente en el mismo proyecto o en otros
totalmente independentes.

56. Símbolos
Se pueden usar en los casos de uso reiterado de un
mismo conjunto de elementos y la tarea de pegar
atributos o de emplear estilos no sea la más eficaz.

57. Símbolos
Hay tres tipos:
Gráfico o “normal”,Animación y Botón, cada uno con
sus peculiaridades aunque todos comparten la
posibilidad de activar la escala 9.

58. Símbolos
Fireworks incorpora una serie de símbolos predefinidos
que podemos emplear a la hora de prototipar:

59. Símbolos
Estos símbolos incorporan propiedades extra que nos
ayudan a modificar su aspecto.

60. Símbolos
Podemos además crear símbolos “enriquecidos”.

61. Símbolos
A la hora de crear nuestros símbolos personalizados es
importante pensar bien lo que queremos hacer para no
“liarnos” durante el proceso.También hay que saber que
hay ciertas peculiaridades que hay que respetar.
Por ejemplo NO podemos dejar las capas con los
nombres que da FW por defecto.
Debemos guardar el símbolo en la biblioteca común de
FW.

62. Buscar y
reemplazar

63. Buscar y reemplazar
Para hacer cambios automáticamente de tipos de letra,
color, URLS,....

64. Comandos

65. Comandos
Similar a las acciones de Photoshop. Se crean mediante
el uso del historial.

66. Procesado por
lotes

67. Procesado por lotes
Similar al existente en Photoshop. En FW podemos
apilar un comando tras otro.

68. Guardar y
exportar

69. Guardar y exportar
Al igual que la mayoría de programas de Adobe,
Fireworks exporta en un variado número de formatos
diferentes.
Por ejemplo puedo guardar mi proyecto en formato
PSD, para continuarlo en Photoshop (y viceversa).
O guardarlo en formato .ai (Illustrator).

70. Guardar y exportar
De manera similar a Photoshop, cuento con la
posibilidad de exportar en formato HTML. Incluso
Fireworks me permite hacerlo con CSS.
(Debo decir que el código que genera no es muy
recomendable a día de hoy. Tomadlo como una opción
de cara a saber que existe o prototipos).

71. Guardar y exportar
A la hora de exportar imágenes es interesante saber
que FW cuenta con un asistente que nos ayudará a la
hora de configurar nuestro archivo exportado.
Entre otras cosas nos
permite decirle el peso
exacto que queremos que
tenga la imagen final.

72. Mejor exportación
de imagen

73. Exportación de imágenes
En formatos con compresión, Fireworks consigue
reducir el peso del archivo manteniendo la calidad de
imagen.
http://webdesignerwall.com/general/fireworks-vs-
photoshop-compression

74. Interactividad

75. Interactividad
Si bien Photoshop sabemos que exporta HTML,
Fireworks permite hacerlo pero añadiendo
interactividad a nuestro prototipo.
Mediante el uso de zonas interactivas, divisiones (sectores) y
estados podemos incluir efectos de rollover, menús
emergentes, navegación, etc... y luego exportarlo en HTML.

76. Integración con
otras aplicaciones

77. Integración con otras aplicaciones
Fireworks permite
exportar y guardar
plantillas o elementos que
luego podemos importar
directamente en otras
aplicaciones como
Dreamweaver, Flash
Catalyst, Flex, jQuery
Mobile...

78. Extensiones

79. Extensiones
Las extensiones son como los plugins de Photoshop.
Nos permiten añadir nuevos comandos o paneles a
Fireworks para incorporar funcionalidades que no
tenemos inicialmente.

80. John Dunning
Exportar como favicon, copy merged, smart punch...
http://johndunning.com/fireworks/

81. Aaron Beall
Layer commands, glyphs panel,Arc tool...
http://fireworks.abeall.com/

82. Orange Commands
Comandos y atajos de teclado extra.
http://orangecommands.com

83. Convert pages to PSD
http://www.adobe.com/cfusion/exchange/index.cfm?
event=extensionDetail&extid=1849527

84. CSS Sprite Maker
http://www.euchoice.com/blog/2010/12/08/css-sprite-maker-a-useful-
fireworks-extension/

85. OTROS

86. Webportio
Recursos gratuitos!!!
http://www.webportio.com/

87. Fireworks lab
Más recursos gratuitos!!!
http://fireworkslab.com/

88. The daily button
Aún más recursos gratuitos!!!
http://dailybutton.com/

89. Símbolos
http://jcorrea.es/2008/08/07/iphone-gui-as-rich-symbols-for-fireworks/
http://pojitonov.blogspot.com/

90. Responsive design
Matt Stow está
creando una
extensión para
previsualizar
“responsive
design”
http://www.mattstow.com/export-responsive-prototype.html

91. Adobe Developer Center
http://www.adobe.com/devnet/fireworks.html

92. http://blogs.adobe.com/sarthak/
Sarthak

93. http://www.zambetti.com/projects/liveview/
LiveView

94. TAP
http://unitid.nl/2011/03/touch-application-prototypes-tap-
for-iphone-and-ipad-using-adobe-fireworks/

95. Cosas que podrías
echar en falta

96. Echando de menos...
Al estar pensando para diseño en pantalla no ofrece
gestión de color.Y bueno, un poquito de estabilidad
extra no le vendría mal. Las herramientas bitmap
también podrían funcionar un poco mejor.

97. ¿Preguntas?
Es el momento!

98. Gracias por venir!