Successfully reported this slideshow.
Your SlideShare is downloading. ×

Adobe Fireworks: optimizando el día a día del diseñador digital

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Prueba
Prueba
Loading in …3
×

Check these out next

1 of 98 Ad

Adobe Fireworks: optimizando el día a día del diseñador digital

Download to read offline

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

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

Advertisement
Advertisement

More Related Content

Advertisement

Recently uploaded (20)

Adobe Fireworks: optimizando el día a día del diseñador digital

  1. 1. Fireworks Optimizando el día a día del diseñador digital
  2. 2. ¿Quién soy? @Skeku www.criteriondg.info [Q]Interactiva video2brain trainer Adobe Community Help
  3. 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. 4. ¿Po qué?
  5. 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. 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. 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. 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. 9. ¿Po qué? Además...
  10. 10. Katy Perry tiene una canción titulada “Firework” Photoshop, NO.
  11. 11. FW vs PS El eterno dilema
  12. 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. 13. FW vs PS En realidad, no existe (o no debería existir) tal dilema. ¿Cuál es mejor? ¿Cuál es peor?
  14. 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.
  15. 15. 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!
  16. 16. Inspector de propiedades
  17. 17. Seleccionando...
  18. 18. Seleccionando... (PS)
  19. 19. Seleccionando... (FW)
  20. 20. Seleccionando... (FW) Subselecciones: Teniendo un grupo de objetos seleccionado, emplea atajos de teclado para subseleccionar elementos de un mismo tipo.
  21. 21. Seleccionando... (FW)
  22. 22. Seleccionando... (FW) Información: Las selecciones (especialmente las grupales) en PS no ofrecen un feedback visual tan detallado como el que ofrece FW.
  23. 23. Seleccionando... (FW)
  24. 24. Alineando y moviendo...
  25. 25. Alineando y moviendo... (PS)
  26. 26. Alineando y moviendo... (FW)
  27. 27. 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)
  28. 28. Copiando y pegando....
  29. 29. 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.
  30. 30. 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.
  31. 31. 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.
  32. 32. Rellenos, bordes y degradados
  33. 33. Rellenos, bordes y degradados... Mayor variedad de degradados.
  34. 34. Rellenos, bordes y degradados... Inifinidad de opciones de borde.
  35. 35. Rellenos, bordes y degradados... Edición en tiempo real de degradados.
  36. 36. 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...
  37. 37. Estilos
  38. 38. 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.
  39. 39. Edición vectorial
  40. 40. 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.
  41. 41. Edición vectorial (FW) ¿Por qué usar dos programas si puedo hacerlo con uno?
  42. 42. Edición vectorial (FW) En la variedad está el gusto.
  43. 43. 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.
  44. 44. Edición vectorial (FW) En FW usamos el inspector de propiedades y el valor “redondez” o creamos una forma automática con bordes redondeados.
  45. 45. Escala 9
  46. 46. 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.
  47. 47. Jerarquía y organización
  48. 48. 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.
  49. 49. 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...
  50. 50. 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.
  51. 51. 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.
  52. 52. Símbolos
  53. 53. 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.
  54. 54. 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.
  55. 55. 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.
  56. 56. Símbolos Fireworks incorpora una serie de símbolos predefinidos que podemos emplear a la hora de prototipar:
  57. 57. Símbolos Estos símbolos incorporan propiedades extra que nos ayudan a modificar su aspecto.
  58. 58. Símbolos Podemos además crear símbolos “enriquecidos”.
  59. 59. 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.
  60. 60. Buscar y reemplazar
  61. 61. Buscar y reemplazar Para hacer cambios automáticamente de tipos de letra, color, URLS,....
  62. 62. Comandos
  63. 63. Comandos Similar a las acciones de Photoshop. Se crean mediante el uso del historial.
  64. 64. Procesado por lotes
  65. 65. Procesado por lotes Similar al existente en Photoshop. En FW podemos apilar un comando tras otro.
  66. 66. Guardar y exportar
  67. 67. 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).
  68. 68. 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).
  69. 69. 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.
  70. 70. Mejor exportación de imagen
  71. 71. 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
  72. 72. Interactividad
  73. 73. 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.
  74. 74. Integración con otras aplicaciones
  75. 75. 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...
  76. 76. Extensiones
  77. 77. 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.
  78. 78. John Dunning Exportar como favicon, copy merged, smart punch... http://johndunning.com/fireworks/
  79. 79. Aaron Beall Layer commands, glyphs panel,Arc tool... http://fireworks.abeall.com/
  80. 80. Orange Commands Comandos y atajos de teclado extra. http://orangecommands.com
  81. 81. Convert pages to PSD http://www.adobe.com/cfusion/exchange/index.cfm? event=extensionDetail&extid=1849527
  82. 82. CSS Sprite Maker http://www.euchoice.com/blog/2010/12/08/css-sprite-maker-a-useful- fireworks-extension/
  83. 83. OTROS
  84. 84. Webportio Recursos gratuitos!!! http://www.webportio.com/
  85. 85. Fireworks lab Más recursos gratuitos!!! http://fireworkslab.com/
  86. 86. The daily button Aún más recursos gratuitos!!! http://dailybutton.com/
  87. 87. Símbolos http://jcorrea.es/2008/08/07/iphone-gui-as-rich-symbols-for-fireworks/ http://pojitonov.blogspot.com/
  88. 88. Responsive design Matt Stow está creando una extensión para previsualizar “responsive design” http://www.mattstow.com/export-responsive-prototype.html
  89. 89. Adobe Developer Center http://www.adobe.com/devnet/fireworks.html
  90. 90. http://blogs.adobe.com/sarthak/ Sarthak
  91. 91. http://www.zambetti.com/projects/liveview/ LiveView
  92. 92. TAP http://unitid.nl/2011/03/touch-application-prototypes-tap- for-iphone-and-ipad-using-adobe-fireworks/
  93. 93. Cosas que podrías echar en falta
  94. 94. 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.
  95. 95. ¿Preguntas? Es el momento!
  96. 96. Gracias por venir!

×