Académique Documents
Professionnel Documents
Culture Documents
Claudio Hernndez
GUAS PRCTICAS
Responsable editorial: Eugenio Tuya Feijo Diseo de cubierta: Narcs Fernndez Realizacin de cubierta: Cecilia Poza Melero Autoedicin: Seven Servicios Integrales
Reservados todos los derechos. El contenido de esta obra est protegido por la Ley, que establece penas de prisin y / o multas, adems de las correspondientes indemnizaciones por daos y perjuicios, para quienes reprodujeren, plagiaren, distribuyeren o comunicaren pblicamente, en todo o en parte, una obra literaria, artstica o cientfica, o su transformacin, interpretacin o ejecucin artstica fijada en cualquier tipo de soporte o comunicada a travs de cualquier medio, sin la preceptiva autorizacin.
Este libro est dedicado a Angel Lpez Romn, quien ms que mi suegro es un padre y un amigo. Mientras yo escriba este libro, sufri un infarto agudo y a punto estuvo de dejarme solo, sin su compaa y sin sus gratas charlas. Gracias a Dios, por la tcnica del catter todava lo tengo a mi lado y espero que por muchos aos. A ti viejo, con cario.
EDICIONES ANAYA MULTIMEDIA (GRUPO ANAYA, S. A.), 2001 Juan Ignacio Luca de Tena, 15. 28027 Madrid Depsito legal: M. 30.078-2001 ISBN: 84-415-1158-6 Printed in Spain Impreso en Anzos, S. L. - Fuenlabrada (Madrid)
Agradecimientos Como siempre, agradezco enormemente a Macromedia esas excelentes aplicaciones con las que tanto he disfrutado y que tanto contribuyen a deleitarme como escritor. Pero especialmente debo agradecer y agradezco que est aqu, a Eugenio Tuya Feijo quien con mucha paciencia y comprensin ha sabido confiar en m y me ha dado la inapreciable oportunidad de pertenecer a su lista personal de autores.
Introduccin . ................................................. 17 Cmo usar este libro ...............................................21 1. Fireworks 4, la nueva versin ................................27 1.1. Introduccin ............................................. 27 1.2. Los conceptos bsicos de Fireworks .....................28 1.3. Fireworks se basa en imgenes vectoriales y de Mapas de bits ..................................................29 1.4. Fireworks 4, las novedades ................................30 1.5. Una Gua rpida de Fireworks 4 ..........................32 1.5.1. Solidez ..........................................................32 1.5.2. Estndar .......................................................39 1.5.3. Trabajo ........................................................42 2. Fireworks bsico . ......................................... 49 2.1. Introduccin ............................................. 49 2.2. El entorno de trabajo de Fireworks . ................. 50 2.3. Visualizacin de un documento en Fireworks . ........................................... 52 2.4. La paleta de herramientas, visualizacin y seleccin ....................................56 2.5. Los paneles flotantes .........................................57 2.6. Los Mens contextuales .....................................58 2.7. Los otros conceptos bsicos de Fireworks . ........................................... 58 2.8. Las imgenes vectoriales y los mapas de bits ...........................................59 9
2.9. Volviendo a las mismas cuestiones ...........61 3. Los paneles de Fireworks . ..........................63 3.1. Introduccin . ........................................63 3.2. Los paneles en un listado ........................64 3.3. El Panel de capas ............................ .......68 3.4. Panel de Fotogramas ..............................70 3.5. Panel Historial .......................................74 3.6. Panel de estilos ......................................75 3.7. Panel Biblioteca . ....................................77 3.8. Panel de manipulacin URL ......................80 3.9. Panel de Trazos .....................................82 3.10. Panel de relleno . ..................................84 3.11. Panel de efectos ...................................86 3.12. Panel de informacin ............................88 3.13. Panel Optimizar ...................................89 3.14. Panel de objeto ....................................91 3.15. Panel Comportamientos ........................92 3.16. Panel de Mezclador de colores ................96 3.17. Panel de Muestras ................................97 3.18. Panel Tablas .............................. ........ 99 3.19. Panel de opciones ....................... ....... 101 3.20. Panel de modificaciones o Buscar y reemplazar ................ ....... 102 3.21. Panel de proyecto ...................... ....... 103 4. Iniciar Fireworks y las barras de herramienta107 4.1. Introduccin ............................... ....... 107 4.2. Iniciar Fireworks .......................... ....... 108 4.3. Toolbox, la paleta de herramientas Principal ............. ....... 111 4.4. La herramienta Puntero ................ ....... 113 4.5. La herramienta Subseleccin ......... ....... 114 4.6. La herramienta Recuadro .............. ....... 115 4.7. La herramienta Lazo .................... ....... 115 4.8. La herramienta Varita mgica ........ ....... 116 4.9. La herramienta Recortar ............... ....... 117 4.10. La herramienta Lnea ................. ....... 118 4.11. La herramienta Pluma ................ ....... 118 10
La herramienta Rectngulo ......... :....... 119 La herramienta Texto ................ ........ 120 La herramienta Lpiz . ............... ........ 121 La herramienta Pincel ................ ........ 121 La herramienta Escala ............... ........ 123 La herramienta Estilo libre .......... ........ 124 La herramienta Cuentagotas ....... ........ 125 La herramienta Cubo de pintura .. ........ 126 La herramienta Borrador ............ ........ 126 La herramienta Sello ................. ........ 127 La herramienta Zona interactiva .. ........ 128 La herramienta Divisin ............. ........ 129 La herramienta Mano ................. ........ 130 La herramienta Zoom ................ ........ 130 Barra de Botones Principal y Modificar ............................... ........ 132 4.27. El contenido de la barra de herramientas Principal ........... ........ 133 4.28. El contenido de la barra de herramientas Modificar .......... ........ 135 5. Los mens de Fireworks 4 .............. ........ 139 5.1. Introduccin . ............................. ........ 139 5.2. El Men Archivo .......................... ........ 140 5.3. El Men Editar ............................ ........ 147 5.4. El Men Ver ................................ ........ 151 5.5. El Men Insertar ......................... ........ 155 5.6. El Men Modificar ....................... ........ 159 5.7. El Men Textos ........................... ........ 169 5.8. El Men Comandos ..................... ........ 172 5.9. El Men Xtras ............................. ........ 174 5.10. El Men ventana ....................... ........ 175 5.11. El Men ayuda .......................... ........ 178 6. Iniciar Fireworks 4, el principio ........ ........ 181 6.1. Introduccin .............................. ........ 181 6.2. Iniciar Fireworks 4 ...................... ........ 182 6.3. Crear un nuevo documento cada vez ...... 185 6.4. Documento Setup o propiedades del documento .. 186 11
4.12. 4.13. 4.14. 4.15. 4.16. 4.17. 4.18. 4.19. 4.20. 4.21. 4.22. 4.23. 4.24. 4.25. 4.26.
6.5. Cambiar el tamao de la imagen ............ 186 6.6. Cambiar el tamao del lienzo ................ 189 6.7. Cambiar el color del lienzo .................... 191 6.8. Recortar y Ajustar el Lienzo ................... 192 6.9. Rotar el lienzo . .................................... 193 6.10. Los cambios visuales del lienzo ............ 194 6.11. Editar cuadrculas y guas .................... 197 6.12. Comenzar a trabajar con Fireworks ....... 199 6.13. Abrir ficheros ..................................... 200 6.14. Importar imgenes desde una adquisicin Twain ........................ 202 6.15. Importar documentos ......................... 204 6.16. Insertar una Imagen .......................... 205 6.17. Los formatos soportados para importar e insertar ...................... 207 6.18. Descripcin de los diferentes formatos soportados .......................... 208 7. Comenzar a trabajar con Fireworks 4 ........ 211 7.1.Introduccin . ....................................... 211 7.2. Cmo dibujar lneas rectas, valos y rectngulos ............................ 212 7.3. Cmo asignar atributos a las lneas, valos y rectngulos ........... 216 7.3.1. Cmo aplicar atributos de relleno y trazo ....................................... 216 7.4. Cmo dibujar con la herramienta Pluma .. 220 7.5. Cmo trabajar con objetos . .................. 223 7.5.1. Cmo seleccionar objetos con la herramienta Puntero ................ 223 7.5.2. Seleccionar objetos con la herramienta Subseleccin ......... 228 7.5.3. Cmo desplazar, copiar y pegar objetos ................................ 230 7.5.4. Cmo escalar objetos o modificar el tamao ........................................ 231 7.5.5. Cmo rotar objetos ........................... 233 7.5.6. Cmo Inclinar objetos ... ..................... 234 7.5.7. Cmo Distorsionar objetos .................. 235 12
8. Trabajando con Fireworks 4, los Trazos ...... 239 8.1. Introduccin ........................................ 239 8.2. Los tres elementos para aplicar Trazo ....................................... 240 8.3. Aplicando niveles de Trazo sobre la lnea recta ..................................... 241 8.4. Aplicando niveles de Trazo en el rectngulo ......................................... 243 8.5. Aplicando niveles de Trazo en el texto del rectngulo ............................ 245 8.6. Aplicando niveles de Trazo al ttulo ......... 247 8.7. Trazos personalizados ........................... 249 9. El Panel de Rellenos . ...............................261 9.1. Introduccin . .......................................261 9.2. Aplicacin de rellenos bsicos antes de empezar con el ejemplo .................. 262 9.3. Preparando el documento activo ............. 264 9.4. Creando las elipses y rellenos de color slido ............................................267 9.5. Aadir otros rellenos como Lineal, Radial y Degradados ........................... 270 9.6. Aadir relleno Tramado web .................. 275 9.7. Aadir relleno Patrn ............................ 277 10. Trabajando con Fireworks, efectos .......... 281 10.1. Introduccin ...................................... 281 10.2. Aplicar el efecto Bisel Interior y Exterior ..................................................282 10.3. Aplicar el efecto Sombra ..................... 291 10.4. Aplicar efecto Relieve elevado .............. 294 10.5. Aplicar efecto Iluminado ...................... 297 10.6. Aplicar varios efectos a la vez .............. 300 10.7. Funciones del men Xtras . .................. 301 10.8. Filtro Ajustar color .............................. 302 10.9. El filtro Desenfocar ............................. 306 10.10. Filtro de imagen Alfa ......................... 307 10.11. Eye Candy 4000 LE en Fireworks . ....... 308 13
11. Trabajando con textos y aplicando Estilos . 311 11.1. Introduccin ...................................... 311 11.2. Escribir textos ................................... 312 11.3. Conversin del texto en un objeto "trazado" ................................ 318 11.4. Rotacin y transformacin libre del texto . .......................................... 319 11.5. Agregando perspectiva al texto ............ 322 11.6. Aadiendo el efecto Relieve interior y exterior ..................................................... 323 11.7. Aplicando estilos a objetos .................. 328 12. Creando Mapas de imagen, Rollover y Animaciones GIF . .............................. 331 12.1. Introduccin ..................................... 331 12.2. Creando una Zona interactiva .............. 332 12.3. Importancia de los Mapas de imagen y los efectos Rollover .................. 348 12.4. Crear un efecto Rollover ..................... 349 12.5. Creando animaciones, Animation GIF ................................... 356 12.6. Pasos a seguir para crear una animacin sencilla ........................ 356 12.6.1. Paso 1, escribir el texto .................... 357 12.6.2. Paso 2, preparando los Fotogramas . .............................. 358 12.6.3. Paso 3, exportacin de la animacin ............................... 360 12.7. Animacin por interpolacin ................ 361 12.8. Animar con Fireworks ......................... 365 12.9. Algunas recomendaciones al crear Gif animados .......................... 368 13. Exportando con Fireworks 2 ................... 371 13.1. Introduccin ..................................... 371 13.2. La funcin Exportar ............................ 372 13.3. El asistente Exportar y el Editor ........... 378 14
Introduccin
Se dice que no hay dos sin tres, y as vamos por nuestra tercera Gua Prctica sobre un producto de Macromedia. Es la tercera vez tambin que repetimos el nmero de captulos, 13. Y es la tercera vez que nos sentamos delante del ordenador con la mente en blanco, titubeando y casi temblando porque no sabemos exactamente qu ms contar en este rincn de la Gua, sencillamente porque a estas alturas creemos haberlo dicho todo. Escribir una Gua Prctica es como radiografiar cuidadosamente el producto en que se basar, y as en ms de ciento treinta pginas sobre Word se ha escrito de todo y cmo no, se ha descrito todo o casi todo, pero al dar por terminado el manuscrito se cree siempre que queda algo por decir. Es como un ejercicio mental cuando se termina un libro, y la consecuente paradoja, se ha terminado o todava no? La respuesta es s, pero por ms que se intenta ignorar esa inquietud, vuelve siempre a la mente aquello de que hay algo ms que decir. Es cosa comn creo, a todos los escritores. Es, digamos, como el preludio de una depresin "postparto literario". Segn Stephen King sucede que, cuando el escritor no comprende todava bien que ha terminado su obra, sufre un lapsus mental que lo deja perplejo y algo confundido. Pero despus de todo, no es del inters comn lo que se sufre al concebir un libro, ni vendra al caso esta reflexin cuando nada se ha hecho todava, cosa lejos de la realidad porque la introduccin, en la que estamos, se escribe al final cuando ya casi todo est dicho y quedan pocas ideas que transmitir, aunque s una valiosa experiencia. De ah nuestra anterior reflexin. Pero no queremos cansar al lector desde la propia introduccin que, como decamos, es lo primero 17
que se lee aunque sea lo ltimo que se redacte, y pasamos a referirnos al porqu de esta obra, y lgicamente, al contenido de las ms de trescientas pginas que siguen. Fireworks es quizs una de las primeras aplicaciones que Macromedia tuvo el acierto de presentar al otro lado del charco, y ahora del lado de ac. Si bien es cierto que ya exista Flash, Fireworks fue la primera aplicacin de Macromedia que se dio a conocer en nuestro pas no hace muchos aos, si bien su presentacin fue un tanto tmida al principio. Recordamos que supimos de su existencia gracias a un escueto artculo en una conocida revista de informtica que ya no existe, y en momentos en que buscbamos locamente aplicaciones que nos permitiesen crear animaciones GIF para nuestra pgina personal. Comenzaba el reinado de los editores HTML visuales, en los que se olvidaba el cdigo y, muy a menudo, resultaba pesado. Lemos el reportaje y vimos que Fireworks era la apuesta del ao. Una semana despus ya sabamos del potencial del que entonces era Fireworks a secas, pero nos impact realmente por su elevada potencia y la sencillez de su uso. Poda crearse un Gif animado en pocos minutos, el rea de trabajo era intuitivo y lo que era mejor, podan previsualizarse los resultados antes de exportar. Simplemente Fireworks nos maravill. Y lo hizo de tal forma que desde entonces no hemos cesado de elogiar esta aplicacin. Hemos escrito mucho sobre l, artculos, libros y tambin de sus trucos. Despus lleg Fireworks 2, y le dedicamos un libro completo; tras l fue Fireworks 3 y nuevamente insistimos en contar lo maravilloso que era trabajar con l, y he aqu que una vez ms nos estamos repitiendo aunque ahora con respecto a Fireworks 4. Cada nueva versin suya aporta novedad. En realidad muchas cosas nuevas. La flexibilidad a la hora de trabajar con Fireworks es cada vez mayor, su potencia es infinita "valga la exageracin" y sus prestaciones inigualables. Sin ninguna duda Fireworks 4 no ser la ltima versin de esta potente aplicacin de grficos, y nos mordemos las uas de pura impaciencia en espera de Fireworks 5, ansiando saber qu ms puede ofrecernos esta aplicacin, aunque creemos que es una meta difcil de superar. Difcil porque Fireworks 4 lo trae casi todo ya. Buena prueba de ello es que Fireworks permite incluso exportar en formato Flash, lo que es todo un acierto. Tambin es compatible con Photoshop, lo que aumenta sus posibilidades de expansin en el terreno de las imgenes digitales y retoques fotogrficos. 18
Fireworks es una aplicacin exclusiva que permite crear grficos e imgenes dinmicas para contenidos Web, pero tambin admite la experiencia de retocar las imgenes en modo fotogrfico. Adems, se est aproximando a los modos de trabajo de Flash, lo que hace de Fireworks un buen aliado de las aplicaciones multimedia, adems del retoque fotogrfico y de los editores de pginas Web, como su gran aliado Dreamweaver. Esa aproximacin y esa integracin con estas aplicaciones invitan a tener presente a Fireworks siempre que se hable de pginas Web, contenidos multimedia o tratamiento de imgenes profesionales. Si bien Fireworks comenz como una aplicacin especfica para crear Banners publicitarios y Gif animados, ahora tiene ya un potencial enorme. Su fcil integracin con Dreamweaver, lllustrator, Photoshop y Flash convierten a Fireworks en la aplicacin ideal a tener siempre en cuenta. Aqu hemos generalizado, hemos concretado y nos hemos permitido, adems, recordar nuestro primer contacto con Fireworks. Ahora, y a lo largo de las pginas que siguen, describiremos al lector cun interesante es trabajar con Fireworks 4 y descubrir qu esconde, y le sugerimos abiertamente que utilice Fireworks en lo sucesivo. Valga esto como reflexin y tambin como introduccin, la ms corta que hemos escrito. Deseamos que el lector pase ya al primer captulo de esta Gua Prctica ansiosos por que conozca Fireworks de una vez por todas. Sin ms prembulo, pase a conocer Fireworks. Anmese a dar el primer paso, nosotros ya lo hicimos.
Claudio Hernndez
guilas, Junio de 2001
19
A diferencia de la introduccin, no hablamos aqu de las vicisitudes del escritor al concebir su libro. Estara de ms, por una parte porque ya se dijo algo de eso en su momento y por otra, porque ste no es un libro de ficcin, ni se trata aqu de una autobiografa sino de una Gua Prc t i c a, que ya tiene en sus manos. Pero s queremos dedicar un breve espacio a explicar lo que encontrar el lector en esta Gua Prctica, bien que el ttulo lo diga ya. La Gua le demostrar cun interesante es Fireworks 4 y lo til que resulta trabajar con l. En ese sentido abundan las palabras, pero todava queda algo por decir, y al respecto nos complace ofrecerle en los prrafos que siguen un resumen del contenido de la Gua, pensando siempre que le ser ms cmodo al lector ver ah de lo que se trata y encontrar rpidamente lo que busca en ella. Sera risible decirle que debe empezar leyendo desde la primera pgina y de izquierda a derecha. Obviamente no se trata de eso, sino de explicarle cmo usar esta Gua y cmo aplicar provechosamente su contenido. En concreto, lo que se pretende es resumir aqu en pocas palabras el contenido general de la Gua para que el lector pueda decidir si le interesa o no adquirir la obra. Tambin podramos anticiparle cun interesante le va a resultar el trabajo con Fireworks 4, pero preferimos dejarlo para que ms adelante lo descubra el lector por s mismo cuando lea la Gua y compruebe cunta razn tenemos al recomendarle Fireworks. Sin ms prembulo conozca aqu nuestra Gua Prctica. Le invitamos a leerlo que sigue y a que vea en este libro ms que su forma, cmo leerlo. Paradjico, verdad? 21
1. Captulo 1. Fireworks 4, La nueva versin. En este captulo conocer los conceptos bsicos de Fireworks 4, es decir, qu es exactamente y cunto puede hacer con l. Conocer qu son los mapas de bits y los dibujos vectoriales, los pilares en que descansa Fireworks. Tambin se muestran todas aquellas novedades relativas a Fireworks 3, y si ya lo conoce, sta es la parte del libro que le interesar ms. Deforma sencilla se presentan una a una todas las novedades de la nueva versin de Fireworks con detalles que le permitirn conocer de una sola ojeada tanto los conceptos bsicos como los nuevos aspectos de
Fireworks. 2. Captulo 2. Fireworks bsico. Un pecado reincidente pero
5.
esta vez perdonable. En este captulo se recuerdan conceptos bsicos como son los mapas de imagen olos dibuj os vectoriales, pero mucho ms detalladamente que en el captulo anterior. Aqu se trata bsicamente de mostrar cmo es Fireworks una vez que se inicia. Conocer el rea de trabajo de ste, as como los elementos aliados. Conocer qu son los paneles, la paleta de herramientas y el propio documento de Fireworks, tambin llamado lienzo de trabajo. En otras palabras, sta es la cita obligada para conocer Fireworks desde el principio. 3. Captulo 3. Los paneles de Fireworks. Despus de conocer todos los elementos que integran Fireworks llega el momento de centrar la atencin en ellos separadamente, aislados, con el fin de profundizar an ms si cabe el conocimiento que ya tiene de cada uno de ellos. En este caso se trata en riguroso orden cada uno de los paneles que va a encontrarse en Fireworks y que son parte de su potencial. Conocer la funcin exacta de cada uno de esos paneles as como de sus contenidos. Estudiarlos de esa manera le evitar toda inhibicin a la hora de realizar sus primeras prcticas. 4. Captulo 4. Iniciar Fireworks y las barras de herramientas. Aqu conocer cmo iniciar Fireworks. En este caso se encontrar con un caos de los elementos en pantalla, por ello dedicamos un aparte a explicar cmo ordenar el rea de trabajo. Pero lo verdaderamente interesante aqu, es que le proponemos conocer todo el contenido de la paleta de herramientas, lo que significa que conocer el contenido y la funcin de cada una de las herramientas disponibles en Fireworks por-
6.
7.
8.
que exponemos explcitamente el funcionamiento de cada herramienta, sus atributos y lo que puede hacer con ellas. Este conocimiento le permitir entender mejor a Fireworks y aprender a trabajar con l antes de pasar a la prctica. Captulo 5. Los mens de Fireworks 4. Son el alma de la aplicacin. Los mens esconden todas las funciones de cualquier aplicacin. Aunque las funciones ms requeridas estn disponibles en los Paneles mencionados y enlos Mens emergentes, es tarea obligada conocer los mens Principales. En este captulo destacamos todas y cada una de las opciones disponibles en los mens de Fireworks. Los detalles son bien explcitos y permiten conocer de antemano las funciones implcitas, tanto que sobre ese texto se pueden realizar las primeras prcticas. Captulo 6. Iniciar Fireworks 4, el principio. Parece ya una costumbre reincidir en ciertos aspectos, pero en esta ocasin se justifica plenamente. En este captulo se repite la tarea de aprender a iniciar Fireworks pero en este caso profundizando ms en los detalles, en cada paso a realizar para iniciar Fireworks. Adems conocer aqu todas las formas de trabajar y de modificar las propiedades del lienzo de trabajo. Ello significa que el lienzo puede adaptarse a las diferentes necesidades de su trabajo. Igualmente es posible iniciar Fireworks desde distintos estados, es decir, como documento nuevo, importando una imagen o cargando un documento previo. En definitiva, en este captulo comienza ya a trabajar de veras con Fireworks y a conocer con mayor detenimiento todos sus entresijos. Captulo 7. Comenzar a trabajar con Fireworks 4. Por el ttulo podra parecer que se repite un mismo tema una y otra vez, pero nada ms lejos de la realidad. En esta ocasin lo que se muestra es el verdadero trabajo con Fireworks 4, es decir, la forma de crear simples lneas y polgonos, y sencillamente cmo seleccionar objetos. En definitiva en este captulo conocer ya y de primera mano, cmo trabajar con las diferentes herramientas de Fireworks. Es un paso ms para familiarizarse con Fireworks, empezando por crear lneas y formas poligonales, as como a seleccionar objetos. Captulo 8. Trabajando con Fireworks 4, los Trazos. Ya sabe el contenido de Fireworks y tambin la manera de 23
22
utilizar sus herramientas bsicas. Ha creado ya sus primeras formas en vectores y ahora es el momento de atribuir nuevos parmetros, por ejemplo, a una simple lnea. En este captulo se centra la atencin en el Panel Trazo. Este panel permite darle nuevas propiedades a un trazo, a una lnea o al perfil de un polgono. Tambin hallar nuevos ejemplos que le mostrarn el potencial de este Panel. Tenga en cuenta que Fireworks permite hacer filigranas con los atributos de un Trazo y aqu se lo demostramos con creces. 9. Captulo 9. Trabajando con Fireworks 4, Rellenos. En este captulo le toca el turno al Panel Relleno. Desde aqu podr aplicar impresionantes rellenos a sus objetos. Fireworks presta especial atencin a estos paneles ya que las combinaciones de trazos, rellenos y efectos parecen ser su verdadero potencial. Lejos de aplicar rellenos simples y slidos a los objetos, Fireworks permite aplicar rellenos basados en texturas y combinaciones de colores slidos, degradados y las propias texturas. En realidad hay momentos en que ms que rellenos, Fireworks parece que imprime efectos especiales a los objetos. 10.Captulo 10. Trabajando con Fireworks 4, Efectos. Es la tercera opcin ms importante de Fireworks. Si antes aprendi a aplicar trazos y rellenos a sus trabajos, ahora aprender a aplicar efectos no menos interesantes. En cada nuevo panel descubrir nuevas propiedades. El Panel Efectos le permite aplicar interesantes resultados a un simple texto o a un objeto. En este caso se comparten de nuevo las texturas y se aaden los efectos pticos, de relieve y transformaciones especiales. A partir de una serie de prcticas conocer los mejores efectos y los ms interesantes. En este punto ya sabe cmo trabajar avanzadamente con Fireworks y podra decirse que est a ms de medio camino del total conocimiento de
Fireworks. 11.Captulo 11. Trabajando con textos y aplicando Estilos. En este
eventos antes mencionados, es decir, Trazos, Rellenos y Efectos. 12. Captulo 12. Creando Mapas de imagen, Rollover y Animaciones GIF. Este captulo es ya la antesala para la culminacin de la Gua, y es el ms productivo de todos porque le mostrar los entresijos de los efectos Rollover, los Mapas de imagen con zonas interactivas y los comportamientos. Tambin se describe aqu cmo crear varios tipos de animacin con Fireworks. Atrs deja los Trazos, los Rellenos y los Efectos para dibujos vectoriales estticos y tiene por delante las propiedades de una animacin o un efecto Rol lover simple. Practicando con los ejemplos que encontrar aqu podr crear un efecto Rol lover simple, conocer las propiedades y funciones de una zona interactiva, crear una Divisin o un par de animaciones no menos atractivas. 13.Captulo 13. Exportando con Fireworks 4. El trabajo con Fireworks culmina con el modo Exportar o la funcin Exportar. Ello le permite llevar su trabajo all donde debe estar, es decir en la pgina Web, en el navegador o, simplemente, en una carpeta de imgenes. Como aplicacin inteligente que es, Fireworks se ha esforzado en tratar con mimo el proceso de Exportacin. En este caso tiene varias opciones y resultados diferentes, a lo que se ha dedicado un captulo exclusivamente. Para estudiar la opcin Editar del Asistente Exportar deber descargar el archivo correspondiente, en formato PDF, desde la direccin www. anayamul timedia . es, dentro del apartado
Atencin al cliente, Complementos, Guas Prcticas, Fireworks4.
localizados y descargados desde la pgina web de Anaya Multimedia; www. anayamul timedia . es, dentro del apartado anteriormente referido. Como puede ver el lector, la estructura de la Gua es la idnea para este tipo de obra. Fireworks es tan extenso que sera posible sacarle punta todos los das. En cualquier caso 25
Esta Gu Prctica se complementa con ejemplos y prcticas que refuerzan su valor didctico. Todos ellos pueden ser
captulo conocer todos los secretos del texto, es decir, la manera de escribir y aadir nuevos atributos al mismo. Aunque antes conoci la forma de trabajar con el texto cuando aplic nuevos trazos y efectos, en esta ocasin reincide pero de forma ms productiva. Tambin se recupera aqu el contenido del Panel
24
aqu est todo lo que necesita saber sobre Fireworks. Creemos que al final de todo hemos logrado una buena Gua al incluir en ella todo lo que necesita para trabajar provechosamente con Fireworks 4. No le sorprenda vernos antes de un ao explicando lo maravilloso que es Fireworks 5, dado que la industria informtica y del software est en cambio constante. En todo caso, nos parece haber cumplido nuestro cometido por el momento, e imitamos al lector a leer esta Gu a Prctica de Fireworks 4, con la seguridad de que nada ms comenzar la devorar en muy poco tiempo. A qu espera?
1.1. Introduccin
Como podr apreciar en estas pginas, la presente Gu a Prctica de Fireworks 4 comienza con una fuerza inusitada, por lo Evidentemente, no todas se incluyen en este captulo, pero s las encontrar a lo largo de esta obra. Normalmente, las Guas Prcticas comienzan con un captulo en el que se describe cmo instalar el programa. En esta Gua Prctica damos por hecho que ya tiene asumida esa parte, es decir, que una instalacin no va ms all de hacer clic en el fichero Setup y esperar. Ms que eso, lo que realmente importa en esta ocasin, es conocer qu nos aporta de nuevo Fireworks 4. Es posible que ya conozca todas esas novedades, es posible que slo haya odo hablar de ellas e, incluso, es posible que no sepa qu es Fireworks 4. En este sentido tenemos el gusto de presentarle un primer captulo que concierne a todos estos elementos para un pblico iniciado y, a la vez, para un pblico avanzado. La primera referencia es que recorra la pgina de Macromedia y visite la seccin de Fireworks 4. Es una insinuacin un tanto decepcionante y en parte razonable. Por esa razn hemos trasladado a.estas pginas todo lo que Macromedia tiene que decir sobre la nueva versin de Fireworks. Aqu encontrar un resumen adecuado de las principales novedades de Fireworks, y de entrada conocer la potencia de esta aplicacin. Ms adelante y de forma progresiva a fin de no excedernos con una informacin demasiado rpida, conocer la parte principal del trabajo con esta aplicacin y luego, la forma de trabajar con
Fireworks. Fireworks y aquellas novedades ms destacadas de esta aplicacin.
26
27
Verdaderamente no hemos encontrado otro modo de adentrarnos en este primer captulo, que recordndole que esta Gua Prctica es ms que eso. Aqu encontrar la mayor fuente de informacin sobre Fireworks. Nos hemos esforzado para que as sea, y aunque en la introduccin de este libro nos hemos extendido en el tema, queremos insistir al respecto. Es nuestro propsito demostrarle que es posible dar a conocer en un slo captulo qu es Fireworks 4 y qu aportaciones nos trae esta nueva versin. De esta manera estamos acercndonos al lector iniciado y al experimentado al mismo tiempo, con la seguridad de que ambos nos comprendern. La literatura es la magia de los pensamientos plasmados en el papel. Pensamientos que despus pasarn del papel a su mente mgicamente. Y aunque esta Gua pretende ser a toda costa un libro tcnico y de estudio, creemos que es posible filtrar de forma conveniente una buena dosis de literatura fantstica, que nos permita dirigirnos al lector de forma directa y explicarle el por qu y el cmo de determinados textos que leer a partir de ahora. Evidentemente siempre a la vera de lo que realmente se pretende hacer, explicar qu es y cmo funciona Fireworks. A partir de ahora conocer Fireworrks 4, en realidad conocer los conceptos bsicos de esta aplicacin, que tambin se tendrn en cuenta indirectamente en los prximos captulos por lo que es posible que reconozca algunas frases entre ste y otros captulos de esta Gua. La repeticin es, en s, el arte de recordar las cosas siguiendo una voz que est siempre a su lado. Pero si ya conoce Fireworks y est impaciente por saber qu ms trae esta vez, sltese parte de este captulo y vaya directamente a Novedades de Fireworks 4. En cualquier caso, creemos haber cumplido nuestro deber con el lector.
bastante popularidad entre los diseadores, ya que posibilita el diseo de imgenes y grficos que se utilizan en la Web. Las nuevas herramientas de esta aplicacin solucionan con rapidez los principales problemas de los diseadores grficos al crear contenidos para la Web. Estas herramientas permiten a los diseadores crear imgenes con alguna de las mejores aplicaciones de grficos vectoriales y de Mapas de bits en una sola aplicacin. A esto hay que aadir que podr editar tambin objetos vectoriales y Aplicar efectos en Mapa de bits incluidos biseles, iluminacin, sombras y, ahora, filtros de Photoshop que permiten volver a dibujar mientras se edita. La combinacin potencia-flexibilidad de Fireworks permite que el diseador realice todo su trabajo desde una sola aplicacin, lo que hace que olvide, a veces, utilizar ms de una aplicacin a la vez, con las consecuencias que ello acarrea. Fireworks es capaz de automatizar tareas de creacin as como de implementar lavaScript, esto le facilitar la tarea de crear efectos rollovers o funciones interactivas. Finalmente, Fireworks aboga en su nueva versin por la posibilidad de optimizar las reas vinculadas a una zona activa o a una divisin, y obtener as un resultado profesional. En pocas palabras, ya conoce los conceptos bsicos de Fireworks, los que le recordaremos en otras partes de esta Gua
Prctica.
soportan ambas versiones de presentacin, pero con una clara diferencia en el uso de memoria entre ellas. Esto implica la necesidad de comprender las diferencias entre ambos modos de dibujo, ya que segn sea el destino final de su trabajo ser obvio utilizar uno u otro. Flash por ejemplo, recurre al uso de dibujo vectorial para crear presentaciones de poco tamao. Es as porque los dibujos vectoriales se representan por simples trazados, lo que significa que las imgenes estn compuestas por lneas y curvas con propiedades de color y posicin. Si opta por una resolucin ms detallada o por un trabajo ms complejo, deber usar el modo de Mapa de bits que presenta imgenes mediante puntos de color, denominados pxeles. En parte un monitor de televisin presenta todas las imgenes bajo este modo. Todos los pxeles estn normalmente definidos en una cuadrcula lo que hace necesario usar gran cantidad de memoria y resolucin de imagen. De esta forma cuando se edita un Mapa de imagen se modifican los pxeles y no las lneas y curvas. Ahora que ya conoce el concepto Fireworks bsico y sus modos de dibujo, llega el momento de conocer cules son las novedades de esta nueva versin de Fireworks.
pgina Web por ejemplo, creada en Dreamweaver con sofisticados grficos, Mens emergentes o botones avanzados que slo Fireworks puede ofrecerle. Con Fireworks podr utilizar controles de exportacin configurables para optimizar las imgenes, darles interactividad avanzada y exportarlas despus a Dreamweaver y otros entornos de edicin HTML. En otro orden de cosas, podr abrir y editar grficos de Fireworks dentro de Dreamweaver o de Flash. En este sentido tiene ante s, una Interfaz grfica y de trabajo que comparten las tres aplicaciones mencionadas, Fireworks, Dreamweaver y Flash, optimizando as su trabajo y su calidad final. Las novedades de Fireworks 4 son las siguientes: 1. Animacin automtica. 2. Importacin y Exportacin refinadas en Photoshop. 3. Creador de Mens emergentes. 4. Imgenes de sustitucin. 5. Panel de capas y enmascaramiento. 6. Procesamiento por lotes. 7. Edicin de tablas Roundtrip con Dreamweaver.
de texto tal cual sino ms bien una adaptacin del mismo, es decir, en estas pginas encontrar informacin ampliada de las caractersticas ms interesantes. Una adaptacin que permite comprender mejor lo que se quiere transmitir o ensear, as como informacin ampliada y adaptada alresto de la Gua Prctica. Fireworks es una herramienta de dibujo vectorial que goza de cierta superioridad en el mercado del diseo. Conocer cmo es y cmo trabajar con Fireworks, requiere una Gua completa "proyecto que se est gestando en estos momentos". Sin embargo, con las explicaciones que se ofrecen aqu, conocer lo ms esencial del nuevo Fireworks 4.
2. Edicin y Soporte de vectores. Fireworks permite tratar las imgenes como vectores. En este sentido podr crear rpidamente botones y objetos que pueden cambiar de tamao sin perder calidad. Cuando se copian y pegan vectores de una aplicacin a otra, como por ejemplo en Freehand o lllustrator, se mantienen las capas, y los vectores siguen siendo perfectamente editables dentro del entorno de Fireworks. El uso de vectores permite adems crear operaciones de ruta, con las que puede realizar sofisticadas tareas de vectores como son simplificar o expandir rutas. El resultado de ello es que podr unir o recortar varios vectores o varias formas con un solo clic del ratn.
1.5.1. Solidez
Nombre un tanto ajeno a lo que realmente se quiere decir, pero que se mantiene para respetar lo que podr encontrar en la Web de Macromedia. En este caso, la definicin Solidez va implcita en las opciones de capacidad cuando se tratan grficos en Fireworks. Dicha capacidad pasa por el tratamiento de texto o la creacin de elementos interactivos o dinmicos, entre otras cosas. Por ejemplo, se est hablando de botones avanzados o de efectos Rollover sobre un botn y una imagen. Estas funciones no estn localizadas en Dreamweaver que es el eslabn final para la creacin de una pgina Web, por ello se recomienda utilizar Fireworks para el tratamiento y retoque de imgenes. Las opciones destacadas en este grupo son las siguientes: 1. Edicin de Mapas de bits. Fireworks permite trabajar de forma total con las imgenes, es decir, podr manipular las imgenes de los Mapas de bits. En este sentido, Fireworks incluye soporte para cmaras digitales o escneres, lo que aumenta las prestaciones para la adquisicin de imgenes con calidad. Fireworks aporta herramientas eficaces como Lazo, Varita mgica, degradados o desenfoques entre otras, con las cuales podr delimitar, editar y modificar partes de una imagen con total precisin. 32 Figura 1.2. Fireworks permite controlar todos los atributos de texto 3. Control de texto. El control de texto es un factor importante si quiere fusionar texto con imgenes. A1 efecto Fireworks permite un control a nivel de carcter, de todos los atributos de texto. As, podr editar y modificar los atributos de color o de suavizado de las letras. A travs de una ventana podr previsualizar estos resultados y observar el efecto deseado. Adems, 33
podr cambiar de fuente de texto desde un cuadro de dilogo y los nuevos controles de suavizado que le permitirn personalizar sus textos. En la figura 1.2 puede ver el Editor de Texto. 4. Animaciones automticas. Acercndose a la filosofa de Flash, Fireworks introduce entre sus mejoras la posibilidad de crear animaciones automatizadas, es decir, si desea crear una animacin en la que un objeto cambie de tamao, tan slo tendr que decirle a Fireworks que desea ese efecto y l har el resto mediante las mltiples capas del dibujo. Para ello, lo nico que tiene que hacer es seleccionar el objeto que desee animar y aplicar las propiedades de animacin que desee. Una vez haya definido la animacin que desea, podr cambiarla ms adelante, ya sea arrastrando los controles de animacin en el rea de trabajo o ya cambiando los parmetros en el inspector de objetos. En la figura 1.3 puede ver el modo de animacin.
5. Crear botn paso a paso. A veces crear un simple botn puede resultar una tarea ardua y repetitiva. Fireworks posibilita ahorrarse esfuerzo y tiempo en la creacin de botones. El confeccionador de botn paso a paso y asistente de vnculos, se ocupa de ensear al diseador la forma de crear botones de inmediato. Todos los botones creados podrn ser compartidos entre un grupo de trabajo a travs de libreras especiales que ya tuvieron su estreno en Flash. Para que se haga una idea de la capacidad de Fireworks en este sentido, vea la figura 1.4.
Figura 1.4. El asistente para crear un botn contiene innumerables opciones de comportamiento
h.
Crear Mens emergentes. Con Fireworks puede crear tambin Mens emergentes. Estos Mens son muy populares en las pginas Web, tanto que su inclusin es casi obligatoria. Sin embargo, el diseador se puede encontrar con un factor difcil de obviar, es decir, la programacin de Scripts que no siempre se sabe crear correctamente. Fireworks toma la iniciativa de crear automticamente las lneas de cdigo necesarias gracias al creador de Mens emergentes. En este sentido,
35
34
incluso el lector ms novato puede crear elementos de Men complejos y de mltiples niveles, sin necesidad de escribir una sola lnea de cdigo. Desde un entorno visual, Fireworks le facilita crear el Men emergente paso a paso, vase figura 1.5, definiendo primero el contenido y la apariencia de un Men emergente para despus exportar el lavaScript necesario para hacer que el Men funcione en el Explorador.
funcin Divisin, Fireworks permite establecer vnculos de objeto, nombres de archivo y parmetros de optimizacin. As podr exportar imgenes usando una mezcla de tipos de compresin en una misma imagen, como por ejemplo, emplear JPEG para reas fotogrficas y GIF para partes con texto y reas planas de color. Adems de esta perfecta combinacin, podr combinar efectos Rollover con divisiones, usando el panel de comportamientos para asignar una accin a la divisin.
7. Efectos Rollover. Los efectos Rollover estn implcitos en botones o banners de publicidad. Dichos efectos le permiten cambiar de un estado a otro con slo hacer clic en el botn o imagen. Fireworks asume esta responsabilidad y una vez ms, incorpora la tecnologa necesaria para crear estos efectos rpida y sencillamente. 8. Divisiones. No se trata de un Mapa de imagen, aunque podra serlo en parte. En la figura 1.6 puede ver una divisin simple. Siendo as, se deduce que una imagen puede ser troceada en Fireworks, recibiendo propiedades distintas cada parte de imagen. En la 36
Figura 1.6. Puede crear divisiones que despus contengan comportamientos como efectos Rollover
9. Optimizacin de imgenes. Bsicamente, cualquier aplicacin de dibujo vectorial permite optimizar imgenes, al menos del tipo JPEG. Pero Fireworks va ms all de este simple hecho, vase figura 1.7. En esta ocasin, la nueva funcin de Fireworks permite optimizar imgenes directamente en el rea de trabajo, con un control completo del esquema de compresin. Durante esta accin podr comparar los resultados para crear rpidamente grficos ms pequeos con la calidad adecuada. Se aade tambin en 37
esta funcin, la opcin compresin con prdida Lossy GIF, con la que podr crear los GIF ms pequeos que jams haya visto.
11.Presentacin preliminar en el rea de trabajo. Con esta opcin podr ver, antes de publicarlas, las imgenes tal y como las ver en el explorador sin tener que abandonar el rea de trabajo. Adems podr ver los efectos Rollover y trabajar hasta con cuatro vistas de grfico al mismo tiempo.
1.5.2. Estndar
En esta opcin encontrar funciones u opciones relativas a la Interfaz de trabajo de Fireworks 4. Aqu encontrar las herramientas de trabajo, los nuevos paneles de funciones aadidas o la opcin de integrar aplicaciones de terceros en Fireworks. Entre otras cosas, este grupo ana todas las funciones especficas para trabajar rpida y sencillamente con Fireworks. Filtros, efectos especiales o el uso de extensiones variadas, permiten considerar a Fireworks como una herramienta potente y perfectamente compatible con otras aplicaciones de dibujo y fotografa como Freehand o Photoshop. Las opciones de este grupo son las siguientes: 1. Interfaz de usuario de Macromedia. Fireworks 4 mantiene la reconocida Interfaz de usuario de Macromedia en todos sus productos. Una vez ms el usuario tendr ante s, una Interfaz familiar con otras aplicaciones de Macromedia como Flash o Dreamweaver, lo que le permite trabajar por igual con todas las aplicaciones mencionadas. 2 Nuevo panel de capas. En la nueva versin de Fireworks se presenta un nuevo panel de capas, vase figura 1.8, donde las imgenes presentan en miniatura los objetos de cada capa. En este nuevo panel podr seleccionar objetos con slo hacer clic y arrastrar para reorganizar el orden de apilamiento, o bloquear y desbloquear mltiples capas y objetos. 3. Mscaras.Las mscaras, inicialmente utilizadas en Flash, permiten crear imgenes impactantes de manera sencilla, gracias a que se eliminan reas indeseadas de imgenes y objetos, adems de aadir efectos dramticos sobre estas zonas sin destruirlas. El uso de mscaras permite por ejemplo, crear el desplazamiento de focos de luz sobre una pared pintada o el efecto de ver por una cerradura. 39
10. Compresin de JPG selectivo. Uno de los problema: de Internet sigue siendo, a pesar de todo, la velocidac de descarga de archivos. Fireworks tiene en cuenta un, vez ms el problema. As, decide crear una tcnic selectiva de compresin de imgenes, con la cual po. dr especificar distintos niveles de compresin par, distintas reas de imagen. Tambin podr mantenei ntidos algunos puntos focales de una imagen, mien tras que, como trasfondo, otras reas de la misma ima gen, tendrn una mayor compresin dado que no s( requiere demasiada calidad. 38
4. Pluma Bezier. Fireworks introduce la herramienta Bezier, con la que podr crear y editar lneas precisas en Fireworks, Flash o Freehand indistintamente ya que comparten las mismas propiedades de herramienta.
5. Filtros de imagen, FX. El uso de Plug-ins est muy extendido en aplicaciones importantes de gran aceptacin popular como 3D Studio Max o Lightwave. En este sentido Fireworks acepta efectos de terceros. Dichos efectos de fotografa permiten imprimir efectos automticos a las imgenes. En la versin de Fireworks 4 se instala una versin de demostracin de Eye Candy con dos filtros completamente funcionales, vase figura 1.9. Este filtro permite aadir a las imgenes efectos pticos muy interesantes, pero no es el nico filtro aceptado por Fireworks. Lo ms interesante de esta opcin es que Fireworks acepta los filtros nativos de Photoshop. Sin comentarios. 6. Filtros de correccin de color nativo. Se aaden filtros de correccin para una correccin superior del color en las imgenes en Fireworks, utilizando los nuevos filtros de Brillo / contraste, Niveles / curvas y Matriz / saturacin. La aplicacin de estos filtros se hace en tiempo real, por lo que pueden activarse o desactivarse a voluntad desde el rea de trabajo. Significa que podrn editar o modificar dichas correcciones en cualquier momento. 7. Importacin y exportacin de Photoshop. Fireworks acepta trabajar con Photoshop. Hoy da los diseadores de pginas Web no utilizan una sola herramienta, pero s bsicamente las herramientas ms populares. Photoshop es una de ellas, y la nueva versin de Fireworks permite importar o exportar desde esta aplicacin, compartiendo as la extensin PSD de Photoshop. Cuando se exporta una imagen desde Photoshop, las propiedades de sta o de los diferentes objetos como textos, efectos automticos, capas o mscaras de objetos, siguen siendo editables desde 8. Importacin desde Freehand 9. Fireworks 4 permite importar trabajos realizados en Freehand 9 y continuar trabajando con ellos desde el propio Fireworks, para aadir interactividad. 9. Importacin y exportacin de WBMP. Denominados Mapas de bits inalmbricos, son el ltimo grito en diseo Web. Este modo permite crear archivos de imgenes especiales de 1 bit, lo que le ahorrar mucho del tiempo invertido en reducir archivos Web regulares.
Photoshop.
41
40
10. Exportacin como Adobe Illustrator. Adobe parece tener bastante presencia en el mercado del diseo y en las aplicaciones de Macromedia. En esto, y dejando los comentarios a un lado, Fireworks permite exportar vectores para utilizarlos en otros programas de dibujo de vectores, como el conocido Illustrator de Adobe. 11. Exportacin a Flash o formato SWF. La extensin SWF es el nuevo estndar de contenidos multimedia en la Web. Se trata de un contenido de Flash, donde podr integrar dinamismo y capacidad multimedia a sus archivos, sin ocupar demasiado espacio. Los contenidos de Flash son ya visualizados por un 90 % de los usuarios en la Red, por lo que se puede decir que sobran las palabras. En la figura 1.10 tiene una instantnea del modo Exportar a formato Flash.
que el diseador tenga un perfecto y absoluto control de todos los elementos puestos en escena. El uso de Scripts o Mapas de imagen con cdigo HTML implcito, exigen que el diseador tenga bien claro el cdigo en uso. Fireworks trata dicho cdigo como elementos adicionales y automatizados que siempre estn a la vista del diseador por si es necesario actuar sobre el mismo. Otra opcin de este grupo, es la capacidad de integracin de Fireworks con Flash 5 o Director. Slo de esta forma es posible tener una herramienta multimedia, con capacidad de edicin y diseo al mismo tiempo. Las funciones de este grupo son las siguientes: 1. Accesos directos personalizados. Al igual que Dreamweaver, U1traDev o Flash, Fireworks cuenta con la posibilidad de crear atajos de teclado, los cuales le permiten acceder a funciones repetitivas con slo combinar ciertas teclas. Pero aqu Fireworks va ms all, puesto que le permite cambiar las teclas por aquellas que le sean ms familiares. As no tiene que recordar accesos predeterminados por Macromedia lo que significa que podr utilizar los mismos atajos de teclado tanto en Fireworks, como en Photoshop o Illustrator.
1.5.3. Trabajo En la pgina de Macromedia el ttulo de este grupo es "nitidez", sin embargo esta identificacin no concuerda con lc que realmente se quiere decir. Trabajo es la palabra ms adecuada para definir la capacidad de Fireworks para tratar un diseo complejo. Diferentes paneles de uso comn hacen 42
Figura 1.11. Fireworks permite reunir una cantidad de pasos y convertirlos en un comando nico
43
2. Panel de Historial. El panel de Historial recoge todos los cambios realizados en su diseo, vase figura 1.11, as como todos los pasos que ha realizado. En este sentido, se encontrar con pasos repetitivos durante su diseo. Si hace uso del panel de Historial podr recuperar acciones realizadas en pasos anteriores. Tambin puede seguir la trayectoria de todo el trabajo realizado y ver los ltimos pasos. Seleccione un grupo de pasos y gurdelos, como un comando reutilizable, con un slo clic; esto viene a resumir lo antes descrito. Y ms que resumir, se puede aadir que con esta opcin tendr un comando o comandos que podr usar para crear grficos que se repiten en un mismo sitio Web. Dichos comandos de JavaScript le permitirn usarlos en distintas plataformas y compartirlos con otros. 3. Entorno controlable por Scripts. En el prrafo anterior, se hace especial hincapi en el uso de Scripts para automatizar la tarea de diseo. A1 igual que sucede con Dreamweaver 4, Fireworks permite crear comandos avanzados que se guardarn como JavaScript y que ejecutarn acciones completas.
Fireworks ya 4. Inicio y edicin desde Flash 5. no es una aplicacin indexada nicamente a Dreamweaver. En esta nueva versin Flash tiende un puente a Fireworks, por lo que podr iniciar y editar contenidos de Fireworks desde Flash 5. En la Biblioteca de smbolos, inicie el archivo original de Fireworks o la imagen de Mapa de bits en Fireworks, edite el grfico y se actualizar automticamente en Flash 5. Como ve Fireworks 4 cuenta con nuevas apuestas. En la figura 1.12 puede ver un smbolo iniciado en Flash 5. 5. Extensin Xtra para Director. Dentro de la integracin entre varias aplicaciones, no poda faltar Director. Con Fireworks ahorre tiempo y esfuerzo en Director importando HTML de Fireworks y el output de imgenes directamente en la ventana del escenario. En este sentido los comportamientos asociados a objetos, como acciones de botones y Rollovers se convertirn en comportamientos Lingo nativos. 6. Insercin automtica de cdigo HTML en A1 principio, Fireworks estuvo integraDreamweaver. do nicamente a Dreamweaver. En esta nueva versin se mantiene la idea que, lejos de debilitarse, recobra fuerza, ya que desde ahora podr insertar, en cuestin de segundos, grficos creados en Fireworks dentro de una sesin con Dreamweaver manteniendo asociado el cdigo
7. Inicie y optimice desde Dreamweaver. Dreamweaver posee una puerta de acceso compartida con Fireworks, desde la que podr optimizar grficos en Fireworks sin necesidad de abrir toda la aplicacin, vase figura 1.13. Esto permite la rpida optimizacin de la imagen mientras se trabaja con Dreamweaver sin interrumpir en ningn momento su trabajo con Dreamweaver, ni aminorar la velocidad de su ordenador. 8. Edicin de tablas.El intercambio de datos entre Fireworks y Dreamweaver es la gran baza de estas aplicaciones. En el modo Tablas completas, podr pasar imgenes creadas en Fireworks a un compaero que use Dreamweaver, ste a su vez podr editarla y devolvrsela despus. Esto significa que podr editar el grfico y actualizarlo sin necesidad de sobrescribir en el cdigo HTML. Como puede ver, es una gran ventaja.
Figura 1.12. Flash 5 tiende un puente entre Fireworks y Flash mediante el uso de Bibliotecas 44 45
HTML.
Figura 1.13. Dreamweaver tambin permite optimizar grficos en Fireworks sin salir de la aplicacin
A estas alturas queda claro qu es Firezuorks y qu nos aporta de nuevo. Explicar nuevamente todo ello ha costado un gran esfuerzo pues, como se ha dicho en ms de una ocasin a lo largo de estas pginas, eso es algo que ya se explic oportunamente. Pero es obvio que haba que repetir aquellas palabras ya que ahora s estamos ante la Gua Prctica de Fireworks 4. Entonces nos atrevimos a ensear esta aplicacin junto a Dreamweaver puesto que, en parte, ambas van de la mano. Esto permite al autor saltarse algunas barreras e interpolar cuestiones de una y otra aplicacin, ya que ambas forman parte de un paquete de estudio. Pero en esta ocasin precisa ensear al lector a manejar l solo Fireworks 4, ya que el uso de Dreamweaver 4 corre a cargo de un compaero de trabajo del que halago su maestra en explicar las cosas. Volviendo al presente, debemos decirle que en el prximo captulo empezar a conocer la Interfaz de trab jo de Fireworks 4 as como a reincidir en sus aspectos bsicos. En dicho captulo conocer virtualmente esta aplicacin, es decir, se acercar un poco ms a ella y tendr una primera imagen global y muy clara de lo que es Fireworks. Como puede comprobar, va adquiriendo 46
Fireworks bsico
2.1. Introduccin
Fireworks, est preparado para trabajar con l. Primeramente deber saber qu se encontrar al iniciar Fireworks, es decir,
deber conocer cada uno de los elementos que lo componen lo que le ayudar a conocer el terreno que pisa. Una vez que conozca los diferentes elementos de Fireworks, aprender a utilizarlos y sabr qu es y qu hace cada una de las herramientas, paneles y funciones del Men, pero ms adelante; por ahora le bastar entender el entorno de trabajo de Fireworks y el modo en que trata los grficos. Esto ltimo se conoce tambin como el concepto bsico de Fireworks. Como todas las aplicaciones de diseo actuales, Fireworks cuenta con un apartado de Mens emergentes, una barra de herramientas y varios paneles flotantes que normalmente son visibles desde el principio. Este entorno se denomina rea de trabajo de diseo grfico, desde donde podr acceder a cualquier funcin de manera rpida y sencilla. La otra caracterstica importante es que tendr un control visual activo en todo momento y que su trasiego en la creacin de un grfico ser, evidentemente, ms sostenible. Fireworks es intuitivo, ya que todas las opciones estn marcadas por iconos fcilmente reconocibles. Pero ahora es el momento de conocer los conceptos bsicos de Fireworks y dejar a un lado halagos que muy bien pueden ser fundados, pero que nos desvan del tema central, que es, repetimos, conocer los principios bsicos de
Fireworks. Fireworks o al menos, qu se va a encontrar tras iniciar Fireworks, como se ha dicho anteriormente. En primer lugar
tendr cono-
cimiento de los diferentes elementos que componen Fireworks pero nada ms, porque en los prximos captulos tendr oportunidad de conocer ms en detalle cada uno de sus elementos. Ahora corresponde tantear muy por encima lo que va a encontrar. Ello le dar una clara idea de Fireworks y de sus amplias posibilidades en el campo del diseo grfico. En definitiva est en la antesala de Fireworks, que es como estar frente a una caja de herramientas ignorando todava para qu sirve cada una de las que hay en su interior.
En ese preciso instante Fireworks no est todava del todo operativo. Para poder activar las opciones o parte de las acciones antes mencionadas, deber abrir un documento nuevo. Por otro lado tendr ms opciones en los Mens contextuales que aparecen tras hacer clic con el botn derecho del ratn, vase figura 2.2, que sern diferentes segn el estado en que se encuentre. Volviendo a los Mens contextuales, cabe decir que los que estn como barra de Mens superior, contienen el resto de las opciones y tambin forman parte del entorno de trabajo de Fireworks. Para finalizar resta decir que los paneles estn compuestos por varias fichas, las que contienen o muestran las propiedades de algunas herramientas bsicas u opciones de herramienta. Ms adelante conocer todos los elementos mencionados aqu en un primer contacto con el entorno de trabajo de Fireworks 4.
de los muchos Mens contextuales que existen en Fireworks pero que no sern activos hasta crear un nuevo documento 51
na del documento, se encontrar las lengetas de cuatro fichas, tres de las cuales estn activas por defecto, la ltima slo est activa cuando exporta una imagen GIF. Cada una de las fichas mencionadas presenta una vista del documento. As, el documento PNG de Fireworks en uso se muestra en la ventana de documento Original. Las tres ventanas siguientes muestran versiones de exportacin del documento. Seguidamente se resumen estas caractersticas:
Figura 2.4. Este es el aspecto de Fireworks una vez creado el documento en el que vamos a trabajar
En principio, en la ventana del documento, la barra de ttulos muestra el nombre del documento y el porcentaje de ampliacin actual. Claro est que lo primero slo estar disponible cuando guarde su documento. Volviendo a la venta52
1. Ventana documento Original. En esta ventana se muestra el grfico o imagen original. Tambin desde esta ventana podr editar, crear o modificar su diseo. Es la ventana principal del documento de Fireworks tal como se puede ver en la figura 2.5. 2. Ventana Presentacin preliminar de documentos. En esta ventana se muestra la imagen tal y cmo aparecera en un navegador Web. Esto le permite tener una idea cierta de cmo quedar su diseo tras la exportacin, vase figura 2.6. Debe saber que los resultados aqu obtenidos dependen de los valores de exportacin del momento.
53
y Tabla de color para modificar la configuracin de exportacin, y as obtendr los resultados de inmediato. En otro orden de cosas estos paneles, junto con la vista de presentacin preliminar, realizan las mismas funciones que el cuadro de dilogo Exportar presentacinde versiones anteriores de Fireworks. Esto significa que as jugar con ventaja a la hora de obtener resultados finales, lo que supone una mejora en el rea de trabajo.
Figura 2.6. Vista del documento previsualizacin 3. Ventana 2-arriba. Extrao ttulo, pensar, y ciertamente es as, sabiendo que lo que se pretende decir en realidad es que est ante una ventana que muestra una vista original y una vista de comparacin de la misma imagen, vase figura 2.7. En este caso tambin el resultado depender de los valores de exportacin elegidos. 4. Ventana 4-arriba. Es una extensin ms de la ventana anterior, salvo que en este caso cuenta con 4 vistas de su imagen tal y cmo se muestra en la figura 2.8. Evidentemente, una imagen original transcendida por tres vistas de exportacin y presentacin preliminar del diseo. Como ha podido observar, el resultado que muestran las vistas indexadas a la original depende en gran medida de los valores de exportacin. Utilice los paneles Optimizar
54
Las barras de herramientas se pueden mostrar u ocultar como sucede con casi cualquier aplicacin, pero adems es posible desacoplar o desplazar cualquiera de las herramientas hacia otra parte del rea de trabajo, convirtindose stas en paneles flotantes. Esa flexibilidad permite al diseador personalizar su rea de trabajo de una forma precisa y eficiente.
Figura 2.9. 56
Figura 2.10.
integra totalmente a las nuevas tcnicas de dibujo y los procesos automatizados como lavaScript, que permite crear, por ejemplo, efectos Rollover de gran calidad.
60
61
constituyen Fireworks. En el siguiente captulo conocer los paneles y sus contenidos. Ser el primer captulo que le ensear el lado prctico de lo que se comenta. En definitiva, tendr el privilegio de empezar a conocer bien Fireworks.
3.1. Introduccin
La parte ms atractiva del rea de trabajo de Fireworks 4, la constituyen sin duda los paneles flotantes, en los que encontrar todas las utilidades y herramientas necesarias para trabajar con l. Es quizs el alma de la aplicacin. En esta leccin conocer todos y cada uno de los paneles que tiene Fireworks cuando est activo. Cada panel est compuesto por varias fichas, con las cuales podr atribuir nuevas propiedades a los grficos. Durante un breve recorrido conocer cun importantes son las funciones que all encuentra. En un primer acercamiento las analizaremos, y se dejar para ms adelante la paleta de herramientas. Esta paleta merece un apartado exclusivamente para ella, ya que contiene las herramientas principales de Fireworks. Debe recordar tambin que los atributos que encuentra en cada panel afectan de forma directa a la herramienta seleccionada en cada momento. Descubrir la indexacin entre ellos despus de alguna prctica; de momento le bastar conocer las propiedades de cada uno por separado. Esto es, deber conocer cada elemento separadamente: los paneles flotantes y ms adelante el contenido de la paleta de herramientas. Cuando conozca todas las propiedades de ambos elementos habr llegado el momento de ver la relacin directa entre los mismos y siempre desde su lado prctico. Hasta aqu la introduccin, que quizs ha resultado demasiado extensa.
63 62
que encontrar son Relleno, Efecto e Informacin. Los atributos de este panel afectan directamente a las lneas y grficos que se realizan a partir de ellos.
2. Panel Optimizar. Este panel posee tres fichas, vase figura 3.3. Si bien parecen no tener relacin alguna los contenidos de las diferentes fichas, no es del todo cierto, ya que la primera opcin Optimizar afecta a la imagen exportada, mientras que puede aadir un comportamiento a dicha imagen optimizada. Las propiedades de este panel estn encabezadas por Optimizar, le siguen Objeto y Comportamiento.
Figura 3.3. Vista Figura 3.1. Cuando inicia Fireworks se muestran los Paneles en cascada
le
1. Panel Trazo. Este panel contiene cuatro fichas, vase figura 3.2. Cada ficha es una extensin del propio panel o un atributo del Trazo en este caso. Las fichas 64
3. Panel Mezclador de colores. En esta ocasin nos encontramos cuatro fichas de diferente contenido y separacin entre ellas, vase figura 3.4. El panel se encabeza con la opcin Paleta que no es ms que un editor de colores. Le siguen las opciones Muestras, Tabla y Opciones. Las tres primeras opciones afectan al color del grfico, mientras la ltima opcin permite 65
4. Panel Estilos. Compuesto por tres opciones, en este panel encontrar tres fichas, vase figura 3.5, en las que ver de nuevo cierta diferencia entre los elementos ubicados en ellas. Los estilos pueden aplicarse a un texto y combinarse con las opciones de los paneles anteriores. Las fichas que le siguen son Biblioteca y URL, con funciones precisas y de gran utilidad, las cuales a pesar de su diferente naturaleza comparten un lugar en el panel.
5. Panel Capas. En este panel encontrar tres opciones o sea, tres fichas, las tres con relacin directa entre s, vase figura 3.6. Con Fireworks puede crear impactantes grficos basados en capas y fotogramas, que permiten crear complejos grficos dinmicos y de diferentes niveles. La creacin de este tipo de grficos puede resultar tan compleja que es obvio tener a mano una herramienta en la que se recojan todos y cada uno de los pasos o cambios experimentados durante el trabajo. La ficha u opcin que recoge esta informacin se denomina Historial, es la tercera ficha.
66
67
6. Panel Buscar y reemplazar. Fireworks aade una opcin muy acertada que es el buscador de textos y grficos. Este panel compuesto por dos opciones, vase figura 3.7, Buscar y reemplazar, y Proyecto, permite recuperar o localizar textos y archivos de forma inmediata, algo que los diseadores agradecen sin duda cuando estn inmersos en complejos diseos artsticos. Este panel es ms un canalizador de trabajo que una herramienta de diseo. En esta primera fase se ha descrito muy brevemente el contenido de cada panel y se ha dado una leve orientacin sobre los mismos. En los siguientes bloques se desglosa cada uno de los paneles y de las fichas a fin de comprender qu efecto tiene realmente cada uno de ellos.
Figura 3.8. Vista del Panel Capas Esto permitir tener localizadas con precisin cada una de las capas, para poder editar su contenido. Fireworks 4 per68
mite editar todos los elementos de las capas desde el propio panel, por lo que el diseador podr personalizar su trabajo en menor tiempo. Todas las funciones de este panel son accesibles bajo el modo hacer clic y arrastrar, y el efecto es totalmente visual. As, si ha optado por disear un mapa de imagen con diversas capas o con varios objetos, podr trabajar en cualquiera de las capas que seleccione valindose de este panel, con total independencia del resto. En otro orden de cosas, desde este panel podr realizar ciertas tareas mejoradas como crear nuevas capas de trabajo, duplicar capas, compartir capas o simplemente borrarlas. El uso de capas es importante a la hora de crear complejos mapas de imagen. Estas capas permiten crear objetos en diferentes zonas del diseo con total libertad. Las rdenes o funciones ms destacadas de este panel que se muestran en un Men emergente tras hacer clic en la parte superiorderecha del panel, son las siguientes: 1. Nueva Imagen. Esta funcin permite aadir un Mapa de Bits. 2. Nueva Capa. Esta funcin permite crear una nueva capa. 3. Duplicar capa. Con un clic del ratn podr duplicar cualquier capa. 4. Compartir esta capa. Puede compartir capas. En este sentido, si se comparte una capa en todos los fotogramas, al actualizar un objeto de esa capa se actualizar en todos los fotogramas. 5. Editar slo una capa. Con esta opcin puede editar el contenido de una sola capa y tambin con esta opcin habilitada podr mover o modificar los objetos de la capa afectada sin modificar el resto. 6. Suprimir capa. Evidentemente, borra y elimina una capa en el rea de trabajo. 7. Ocultar todas. Esta funcin oculta todos los objetos de cada capa. 8. Mostrar todas. Con hacer clic aqu, aparecen de nuevo todos los objetos ocultados en la operacin anterior. 9. Bloquear todas. Como su nombre indica, con esta funcin podr bloquear todo, esto es, que todos los objetos quedarn intactos de manera que no se borren por accidente. l0.Desbloquear todas. Con esta funcin desactivar el bloqueo de objetos en las capas. 69
11.Aadir mscara. La nueva versin de Fireworks prmite aadir mscaras a un objeto. As, dichas mscaras se agregan a los objetos con el fin de crear un efecto de corte en los mismos. 12. Editar mscara. Con esta opcin podr editar la mscara que desee. 13.Suprimir mscara. Esta opcin le permite suprimir una mscara editada. 14.Opciones de miniatura. Si hace clic en esta opcin Fireworks le mostrar un cuadro de dilogo, vase figura 3.9, desde el que podr seleccionar el tamao en que aparecern las imgenes dentro del panel capas.
ra 3.10, es la ventana directa para la creacin paso a paso de una imagen animada, compuesta por una determinada sucesin de fotogramas. Las animaciones se construyen a partir de la creacin de varios fotogramas. El contenido de cada uno de ellos puede ser diferente y verse en el panel fotogramas.
Figura 3.10. Vista del Panel Fotogramas Figura 3.9. Vista de cuadro de dilogo Opciones de miniatura
Antes de concluir este bloque cabe recordar adems, que si bien podr crear cualquier objeto en cualquier capa y modificarlo independientemente en cada capa, no sucede as con la primera capa, denominada La capa de web, ya que dicha capa es la que comparte todos los objetos Web como divisiones y zonas interactivas, que se utilizan para asignar interactividad a los documentos de Fireworks exportados.
Este panel tiene un importante papel de indexado de trabajo, con respecto al panel de capas antes mencionado. Cada fotograma representa una instantnea del trabajo que se est realizando en un tiempo determinado. Sucesivas imgenes en nuevos fotogramas darn vida al dibujo en un fichero final animado. Las principales rdenes de trabajo en este panel, aparecen si hace clic en la parte superior del mismo. Las funciones que se muestran en el Men emergente son las siguientes: 1. Aadir Fotogramas. Es la funcin que permite aadir fotogramas a su animacin. 2. Duplicar Fotogramas. Con esta funcin podr dupli car un fotograma tantas veces como desee. 3. Suprimir Fotograma. Si algn fotograma sobra en su mesa de trabajo, sta es la orden que eliminar todo rastro de l. 71
4.. Copiar en Fotogramas. Esta funcin permite copiar todos los fotogramas. Una buena idea si por ejemplo, necesita repetir escenas animadas. 5. Distribuir en Fotogramas. Con esta funcin podr distribuir cada fotograma segn sus necesidades. 6. Recorte automtico. Esta funcin afecta directamente a opciones de exportacin y el resultado final depende de muchos factores. 7. Diferencia automtica. Esta funcin afecta directamente aOpciones de exportacin y el resultado final muestra una diferencia relativa a muchos factores. 8. Propiedades. Desde aqu podr designar el nmero de fotogramas que desea ver visualizados en su animacin.
2. Mostrar fotograma siguiente. Esta funcin permite visualizar el objeto siguiente al fotograma actual, o de otro modo, podr tener en pantalla el cuadro actual y el que le sigue. 3. Anterior y posterior. Antes y despus, como su nombre indica, si hace uso de esta opcin podr ver o tener en pantalla el fotograma anterior y el posterior al mismo tiempo, para poder comparar ambos estados. 4. Mostrar todos los fotogramas. Con esta funcin podr tener y ver en pantalla "slo en modo lectura, claro est " todos los cuadros y fotogramas de su Cif animado. 5. Personalizar. Cuando haga clic en l, aparecer un cuadro de dilogo denominado papel cebolla, vase figura 3.12, desde donde podr seleccionar cmo se mostrar antes y despus del fotograma.
Paralelamente a este Men desplegable, existe otro Men que se lanza cuando se hace clic en la parte inferior izquierda del panel de Fotogramas, vase figura 3.11 y que contiene las siguientes funciones de trabajo: 1. Sin papel cebolla. Con esta opcin activada no se puede ver el efecto papel cebolla que Flash present inicialmente y que ahora adopta Fireworks.
Ms adelante conocer la forma de crear animaciones haciendo uso extensivo de fotogramas, entonces descubrir tambin que podr compartir capas entre fotogramas. Recuerde que las capas dividen un documento en planos velados, que es como si toda la composicin tomara forma de Sandwich. En las animaciones, las capas sirven para organizar los objetos que forman parte del decorado o del fondo de la animacin. Pero de todo ello se hablar ms adelante. 73
72
es como un Script que le permite realizar una serie de tareas de forma automatizada con slo llamarlo. 4. Borrar marcador. Puede borrar el marcador.
El panel Historial adems de informarle en todo momento sobre los ltimos pasos realizados, le permite reproducir sencilla y eficazmente una serie de pasos previos as como ejecutar una serie de pasos desde un comando creado a tal fin. Esta flexibilidad en el trabajo permite al diseador adquirir velocidad en su trabajo y confianza en el modo de trabajar de
Fireworks 4.
1. Volver a reproducir los pasos seleccionados. Con esta opcin y con slo seleccionar los pasos deseados, los ms recientes, podr reproducirlos automticamente. 2. Copiar pasos. Puede copiar pasos para ganar tiempo en su diseo. 3. Guardar como comando. Los pasos recientes y que marcan un hito en su trabajo puede guardarlos como un comando, vase figura 3.14. Recuerde que un comando 74
75
Curiosamente instalado en el lugar donde convergen los paneles de Biblioteca y URL, he aqu que podr aplicar con un slo clic del ratn un efecto visual agradable a sus ojos. Tambin, desde este panel y haciendo nuevamente clic en la parte posterior derecha, podr acceder a varias funciones con este panel de estilos, como son las siguientes: 1. Nuevo estilo. Con esta opcin y el lanzamiento de una nueva ventana de dilogo, vase figura 3.16, podr crear nuevos estilos a partir de los ya existentes, gracias a sus propiedades y atributos.
4. Importar estilos. Podr importar los estilos que haya creado con anterioridad y guardado bajo la extensin de esta opcin. Otra alternativa es que Macromedia ofrezca en un futuro prximo libreras de estilos Freeware desde su pgina Web, lo que potenciara el efecto extension Manager ya conocido. 5. Exportar estilos. Tambin es posible exportar sus estilos para aplicaciones futuras o bien para uso personal en Fireworks 4. Digamos que es el paso previo para poder realizar la funcin antes descrita. 6. Restablecer estilos. Esta opcin le permite regresar a los estilos que encontr inicialmente en este panel. Si ha habido demasiados cambios y ya no recuerda qu era lo que tena antes, bastar con seleccionar esta opcin. 7. Iconos grandes. Es fcil prever que esta funcin permite aumentar el tamao de los iconos, lo que facilita su bsqueda al tiempo que podr tener una idea ms exacta del estilo que desea aplicar. Los estilos pueden ser aplicados a cualquier objeto, pero con preferencia a textos. Si edita sus propios estilos podr dar a sus textos ese toque personal que no ver repetido en ninguna otra pgina Web. El uso de estilos es visual y su tratamiento excesivamente sencillo. Cuando cree grficos ms adelante usar estos estilos a modo de ejemplo.
2. Editar estilo. Esta funcin es similar a la anteriormente descrita. Desde estos editores que Fireworks le muestra, podr modificar los rellenos, efectos y pinceladas de la imagen. En la figura 3.17 puede ver esta opcin.
3. Suprimir estilos. Como su nombre indica, se emplea para eliminar Estilos. No es aconsejable si se quiere coleccionar todos los tipos de estilo imaginables.
77
76
Normalmente no sucede as, es decir, pocos smbolos tienen elementos no tiles, pero si se da el caso, puede seleccionarlos para editarlos, por ejemplo. 7. Actualizar. Puede actualizar un smbolo que ha sido sometido a la opcin antes descrita, y si ha cometido un error bastar con hacer clic aqu para rectificarlo. 8. Reproducir. Si el smbolo es una animacin, puede verla desde esta opcin. 9. Importar smbolos. Como ya le comentamos, puede importar smbolos desde su disco duro. Bajo esta opcin Fireworks soporta numerosos formatos grficos. Seleccione un objeto desde el cuadro de dilogo, vase figura 3.20 y Fireworks lo incluir en la Biblioteca.
Figura 3.20. Importar smbolos Figura 3.19. Vista del cuadro de dilogo Propiedades Smbolo Nuevo
2. Duplicar. Con esta opcin puede duplicar un smbo lo. 3. Suprimir. Con esta opcin puede suprimir un smbo lo. 4. Editar smbolo. Tras crear el smbolo, Fireworks le permite editarlo de forma independiente desde una nueva ventana de trabajo. 5. Propiedades. Puede conocer en cualquier momento las propiedades del smbolo y de un solo vistazo. Fireworks le muestra estas propiedades en un cuadro de dilogo. 6. Seleccionar elementos no utilizados. Desde aqu pue de seleccionar elementos no utilizados de un smbolo.
78
Figura 3.21. Desde aqu puede exportar los smbolos de una forma sencilla
79
10. Exportar smbolos. Fireworks le permite exportar smbolos de su Biblioteca, para ello le mostrar un nuevo cuadro de dilogo, vase figura 3.21, desde el que podr exportar aquel o aquellos smbolos que crea necesario. Los smbolos exportados en masa o unitariamente se denominarn smbolos persona-lizados y se guardarn bajo la extensin *.Png de Fireworks. El uso de las Bibliotecas le permitir compartir objetos con otros diseadores y desde otras zonas de trabajo. Dreamweaver por ejemplo hace uso de las Bibliotecas. Ya es posible descargar de Internet smbolos para aadir a sus Bibliotecas, esto permite utilizar cada vez mayor nmero de smbolos u objetos de manera eficaz.
1. Aadir a Biblioteca los URL utilizados. Con esta funcin podr aadir direcciones electrnicas a una Bibl ioteca de URL. La Biblioteca de URL conserva tantos vnculos como desee. Puede crear una nueva Biblioteca y guardar en ella los vnculos de forma personalizada. 2. Borrar los URL no utilizados. Con esta opcin podr borrar un URL no utilizado. 3. Aadir URL. Freworks le muestra una ventana de dilogo donde podr escribir una nueva direccin electrnica que se aplicar al objeto seleccionado, es decir, a la divisin o a la zona interactiva. 4. Editar URL. De forma similar a la opcin anterior, con el lanzamiento de una nueva ventana de dilogo, vase figura 3.23, podr editar una direccin electrnica ya existente.
5. Suprimir URL. Si alguna direccin electrnica deja de funcionar o simplemente resulta obsoleta, con esta opcin tiene la posibilidad de borrar el URL no deseado. 6. Nueva Biblioteca de URL. Con esta opcin y con el lanzamiento de una ventana de dilogo para ello, vase figura 3.24, podr crear una nueva librera de direcciones electrnicas, que ser aadida al Historial general. 7. Importar URL. Como su nombre indica, desde esta funcin podr importar un URL. Cuando importa un URL Fireworks le muestra el cuadro de dilogo Abrir tal y cmo se muestra en la figura 3.25. En dicho cuadro de dilogo seleccione un documento HTML y tendr creado un vnculo. 8. Exportar URL. Contrariamente a la opcin anterior, en este caso tendr la posibilidad de exportar direcciones electrnicas como documentos HTML.
Figura 3.22. Vista del Panel URL
81
80
Cada uno de los rellenos queda reflejado en una pequea ventana ubicada en la parte izquierda de este panel, que mostrar el tipo de relleno elegido y cmo quedar despus de aplicado. Desde este panel, adems de aplicar trazos espectaculares, podr determinar el nivel de aplicacin de la textura, el tipo de textura y el porcentaje de aplicacin de esa textura, por lo que tendr que varias decenas de tipos de relleno se pueden convertir en millones de texturas y rellenos espectaculares. Adems, otro Men desplegable le permitir editar y crear nuevas texturas y rellenos. Las opciones son las siguientes: 1. Guardar trazo como. Esta opcin le permite salvar el tipo de relleno deseado con un nuevo nombre, y para ello se le muestra un cuadro de dilogo, vase figura 3.27, desde el cual podr modificar el nombre con el que lo guardar.
El panel URL es muy interesante desde el punto de vista de los vnculos con un Mapa de imagen. Recuerde que con Fireworks puede crear divisiones y zonas interactivas, las cuales pueden tener implcitamente acciones o vnculos directos con otros objetos o con otras pginas. En la actualidad es muy habitual ver un Mapa de imagen con diferentes vnculos con otras pginas.
2. Editar trazo. Como su nombre indica, esta funcin le permite editar un nuevo tipo de relleno partiendo de los ya existentes en el Submen de este panel. Cuando haga clic en esta opcin se le mostrar un nuevo panel de control desde el cual podr modificar valores de profundidad de textura o la composicin de dicha textura entre otros valores no menos importantes, valores que repasaremos brevemente a continuacin. En la figura 3.28 puede ver este editor. Con la pestaa Opciones de este nuevo panel de control podr modificar la cantidad de tinta de la textura con un valor mximo de 100%, modificar los valores de separacin de elementos de la textura entre 0 y 1000%, modificar el porcentaje de la textura o aplicar un efecto en el borde de la textura como un Nen, por citar un ejemplo. En la pestaa Forma de este panel, podr elegir el tamao de la textura, el aspecto y el ngulo de la misma. En el
82
83
apartado Sensibilidad podr modificar las propiedades de la textura editada como iluminacin, contraste, hue y otros valores pticos.
ras cerradas. En esta ocasin se mantienen las mismas texturas y combinaciones que en el panel de trazos. Ello significa que con esta herramienta podr rellenar un cuadro, mientras con la opcin Trazo slo poda crear el borde del cuadro. Aclarados estos conceptos podemos continuar.
3. Cambiar nombre de trazo. Esta funcin le permite nombrar de nuevo un relleno o textura mediante un cuadro de dilogo. 4. Suprimir trazo. Con esta funcin, como su nombre indica, podr borrar el trazo deseado. Los trazos son como las propias lneas, en definitiva son la base o esencia de un dibujo. Con ellos el diseador da vida a un grfico y de alguna manera juega con la unin inteligente de mltiples trazos. Desde este panel tendr la opcin de editar o personalizar los trazos. Trazos que pueden adquirir aspectos muy diversos. Fireworks 4 aporta en este sentido un amplio abanico de atributos para los trazos. Desde este panel podr crear aquellos trazos que slo habitan en su imaginacin.
En este nuevo panel tiene nuevamente once tipos de relleno y otras tantas combinaciones que permiten crear miles de rellenos. Dichas combinaciones son relativas a la seleccin deseada, por ejemplo, puede acceder directamente a un relleno de los once disponibles o elegir una combinacin a partir de los modos Slido, Tramado de Web y Patrn. Estas tres ltimas opciones le permitirn crear combinaciones impactantes y lo ms variadas, como por ejemplo, la opcin Patrn, que le permite trabajar sobre decenas de texturas especiales. Las funciones disponibles en el Men desplegable de este panel le permiten modificar y ejecutar las mismas acciones que las descritas en el panel de Trazo. No obstante, describiremos sus funciones una vez ms, que son las siguientes: 1. Guardar degradado como. Esta opcin permite salvar el tipo de relleno deseado con un nuevo nombre, para ello muestra un cuadro de dilogo, vase figura 3.30, desde el cual puede modificar el nombre.
84
85
2. Editar degradado. Con esta funcin, puede editar un nuevo relleno, para lo cual se muestra una nueva ventana en la que puede modificar el color de relleno a aplicar en la textura elegida.
3. Cambiar nombre de degradado. Esta funcin permite renombrar un relleno o textura mediante un cuadro de dilogo. 4. Suprimir degradado. Con esta funcin, como su nom bre indica, puede borrar el relleno que desee. Las texturas en este panel se denominan degradados, pero en realidad son rellenos. La idea de llamarlos degradados viene de su utilidad para crear rellenos especiales, dado que algunos son espectacularmente precisos en hojas, tierra o hilo entramado. En otro orden de cosas, el contenido de este panel, que a su vez se denomina Ficha del panel trazo, vara en funcin del relleno seleccionado, por lo que tiene delante un editor de propiedades especfico para cada ocasin. Fireworks muestra esa flexibilidad en todas las opciones.
Desde esta opcin podr aplicar un efecto o varios efectos al mismo objeto seleccionado, entre los que se destacan los efectos Bsel y Relieve o Desenfocar ,estoes bordes suavizados o sombra. Cada uno de los efectos puede tener extensiones habilitadas en los Submens del panel. Cada uno de los efectos seleccionados ser aplicado de forma inmediata al objeto seleccionado. Despus de esto el efecto quedar resaltado tambin en la ventana Efecto, marcado con una casilla. En el caso de aplicar mltiples efectos sobre un mismo objeto, en esa ventana se muestran todos los efectos aplicados con su correspondiente casilla habilitada. Mientras trabaja con Fireworks puede aadir o eliminar efectos en un objeto simplemente desactivando cualquiera de las casillas mencionadas. Fireworks mostrar entonces el nuevo cambio de inmediato. Puede aadir tantos efectos como desee y eliminar la accin de cualquiera de ellos hasta conseguir el efecto deseado. Tambin puede acceder a las propiedades del efecto, si hace doble clic en el efecto aplicado. En este caso, se le mostrar una nueva ventana de dilogo en la que podr modificar los atributos del efecto. Como en las opciones anteriores desde este panel tambin podr aplicar una serie de modificaciones que ya conoce y que son las siguientes: 1. Guardar predeterminados. Con esta opcin puede guardar un conjunto de efectos personalizados como un valor predeterminado de la sesin. Esta opcin es interesante cuando necesita hacer uso de un efecto especial ms de una vez. 2. Guardar efecto como. Esta opcin le permite salvar el tipo de efecto deseado con un nuevo nombre, y para 87
ello se le muestra un cuadro de dilogo, vase figura 3.33, desde el cual puede modificar el nombre.
cando a los objetos en construccin. Podr saber los valores en pxeles, pulgadas o centmetros geomtricamente. En el Men emergente podr encontrar las siguientes opciones:
3. Cambiar nombre del efecto. Esta funcin permite nom brar de nuevo un efecto mediante un cuadro de dilogo. 4. Suprimir efecto. Con esta funcin, puede borrar el efec to que tenga en el punto de mira. 5. Todo activado. Si ha incluido varios efectos en la f i -cha Efectos de que se est hablando, y tiene alguno de los efectos desactivados, con esta opcin podr activarlos todos al mismo tiempo. 6. Todo desactivado. Con esta opcin podr desactivar todos los efectos que aadi en un paso anterior, pero no los elimina del escenario. Para recuperarlos bastar que retome la opcin descrita anteriormente. 7. Localizar filtros de conexin. Con esta opcin podr seleccionar la carpeta de filtros de conexin de Photoshop. Recuerde que ahora Fireworks se complementa con Photoshop compartiendo muchas de sus capacidades. En este caso podr cargar los filtros de Photoshop y aumentar as la combinacin de efectos. Note que aqu no se comparte la opcin de editar un efecto, algo que se echa de menos, pero que esperamos sea posible en una versin futura. No obstante, la implementacin de Photoshop de alguna forma puede potenciar sobremanera la capacidad de efectos en Fireworks. Los efectos son tan interesantes e importantes a la vez, que el diseador siempre tendr a mano un buen puado de ellos, puesto que los puede aplicar sobre simples lneas, objetos o textos.
Los valores de los colores quedan fijados por los modos siguientes: 1. Hexadecimal. Con esta opcin se muestra el valor del color en modo Hexadecimal. 2. RVA. Con esta opcin se muestra el valor del color en este modo, es decir, por la regla de tres colores, Rojo, Verde y Azul. 3. CMA. Con esta opcin se muestra el valor del color en este modo. 4. MSB. Con esta opcin se muestra el valor del color en este modo. 5. Pxeles. Se muestran los valores en nmero de pxeles del objeto seleccionado. 6. Pulgadas. Se muestran los valores en pulgadas del objeto seleccionado. 7. Centmetros. Se muestran los valores en centmetros del objeto seleccionado. Como puede ver, en este panel podr tener toda la informacin en todo momento. Aunque es bueno recordar que podr obtener ms informacin acerca de su documento desde otros
paneles como Tablas y Opciones.
del grfico, es decir, zonas interactivas y divisiones, as como el resto del grfico al mismo tiempo. Si desea optimizar divisiones con ajustes individuales deber hacer uso del panel opt mi z ar, vase figura 3.35. En este caso podr optimizar adems el tamao a exportar. Esto es muy importante si cree conveniente que el Gif ocupe el mnimo espacio posible. Cuando se habla de Gif se habla tambin del formato JPEG. Las opciones que encontrar en el Men emergente de este panel son las siguientes:
1. Guardar configuraciones. Puede guardar una confi guracin bajo este modo. 2. Suprimir configuraciones. Puede suprimir configu raciones. 3. Optimizar tamao. Con esta opcin puede optimizar el tamao del objeto al valor que desee. 4. Asistente de exportacin. Fireworks le mostrar desde aqu el asistente de exportacin. Seleccione un formato de exportacin y elija el tamao del archivo. 5. Eliminar colores no utilizados. Con esta opcin, como su nombre indica, se eliminan colores no utilizados. 6. Entrelazado. Desde aqu se activa el modo entrelaza do de colores. 7. JPEG progresivo. Esta opcin slo est disponible si elige un objeto JPEG. En ese caso se optimiza el grfico de forma progresiva. 8. Perfilar bordes JPEG. Puede perfilar los bordes de un grfico JPEG para obtener ms calidad. La explicacin de los contenidos del Men de este panel no ha sido muy explcita, es cierto, pero es evidente que slo necesita una orientacin sobre lo que puede hacer o con qu se encontrar. El resto puede dejarlo a su imaginacin. Para finalizar queda destacar que, desde este panel, Fireworks 90
1. Tipo de divisin. Desde aqu podr elegir el tipo de divisin, es decir, imagen o texto. Si elige la opcin texto, ste aparecer en una celda de la tabla. 2. URL actual. Aqu puede escribir un enlace a otra p gina, archivo o documento. 91
3. Etiqueta alt. En esta ventana podr escribir el mensaje que quiere que aparezca cuando el puntero del ratn alcance la zona interactiva o la divisin. 4. Vincular objeto. Desde aqu podr vincular cmo afectar la etiqueta alt en respuesta al puntero del ratn. Por ejemplo, si escoge la opcin _top, ver cmo la divisin cambia solamente cuando el puntero del ratn est sobre l. Como puede ver, este panel posee un contenido explcito y bastante preciso que responde al objeto seleccionado, de modo que el contenido podr variar de uno a otro objeto, as que hasta ahora la descripcin que se ofrece es relativa. Algo ms que debe saber tambin sobre las opciones de este panel, es que estn vinculadas con el panel Comportamientos.
muestra una imagen distinta cuando el puntero del ratn pasa sobre la zona interactiva. Este panel muestra dos Mens emergentes, uno de los cuales solamente se mostrar si se crea una divisin o una zona interactiva. Existe, adems, un tercer Men emergente que se mostrar cuando edite el comportamiento de un objeto, pero este funcionamiento se explicar ms adelante; ahora las funciones disponibles en cada Men emergente de este panel son las siguientes:
Tambin hay que decir que desde este panel podr aadir una imagen sobre una zona designada como Rollover o zona interactiva. En este caso se le muestra un cuadro de dilogo, vase la figura 3.38, con las opciones de aadir imagen y cmo. Recuerde que un efecto Rollover es aquel que
Figura 3.39. En este caso en vez de utilizar un efecto Rollover se emplea un intercambio de imagen en similitud al mismo
92
93
1. Editar. Desde aqu podr editar, por ejemplo, las propiedades de la imagen en un efecto Rollover. Si hace clic aqu Fireworks le muestra el cuadro de dilogo correspondiente al comportamiento implcito en el objeto. Esto significa que se le mostrar el cuadro de dilogo efecto Rollover si ha elegido este comportamiento. Si no es as, se le mostrar el cuadro de dilogo correspondiente tal y cmo se muestra en la figura 3.39. 2. Suprimir. Con esta opcin puede suprimir un com portamiento. 3. Suprimir todo. Con esta opcin puede suprimir todos los comportamientos de un objeto. Recuerde que un objeto puede tener implcito varios comportamientos. 4. Mostrar todo. Cuando un objeto contiene un compor tamiento, ste puede ser visible desde esta opcin. 5. Desagrupar. Puede dsagrupar los comportamientos de un objeto. En las siguientes lneas se describe el contenido del Men emergente que aparece al hacer clic en el signo "ms" a la izquierda de este panel. 1. Simple Rollover. Con esta opcin puede aadir un efecto Rollover a un botn o imagen. Los Rollover de JavaScript son elementos grficos que cambian de aspecto en un navegador Web cuando el puntero del ratn pasa sobre ellos o cuando se hace clic sobre ellos. El Rollover ms sencillo cambia la imagen presente en el fotograma 1 por la imagen del fotograma 2. 2. Intercambiar imagen. Puede crear efectos Rollover ms complejos que los descritos en el prrafo anterior. Con esta opcin Fireworks le permite intercambiar la imagen del fotograma 1 por la imagen de cualquier otro fotograma. Recuerde que puede insertar varias imgenes en diferentes fotogramas, de este modo un mismo botn repetido podra mostrar diferentes estados de una animacin, por ejemplo. 2.1. Restaurar imagen de intercambio. Como su nombre indica, puede restaurar la imagen de intercambio sin necesidad de regresar al estado Intercambiar imagen o crear efecto Rollover. Dicho de otra manera, reemplaza el contenido de la divisin especificada por el de otro fotograma.
3. Establecer imagen de Bar Nav. Esta opcin determina si una opcin es parte de una barra de navegacin. Esto tambin es aplicable a un botn. Dicho botn quedar resaltado segn el modo Establecer imagenseleccionado. En realidad esta opcin le permitir establecer un grupo de los comportamientos que contienen Bar Nav Sobre, Bar Nav Abajo y Restaurar Bar Nav. 3.1. Bar Nav Sobre. Si elige esta opcin el efecto final es que al colocarse sobre el objeto, la divisin seleccionada mostrar el estado Sobre y abajo. Bar Nav Abajo. Si elige esta opcin el efecto final es que al colocarse sobre el objeto, la divi sin seleccionada mostrar el estado Abajo cuando forme parte de una barra de navegacin. Restaurar Bar Nav. Esta opcin restaura las otras divisiones de la barra de navegacin, y el efecto que se muestra es Arriba.
3.2.
3.3.
4. Establecer Men emergente. Con esta opcin podr aadir un Men emergente a un objeto. Para ello Fireworks le muestra un cuadro de dilogo desde donde podr establecer los parmetros de dicho Men. 5. Establecer el texto de la barra de estado. Desde una nueva ventana de dilogo, vase figura 3.40, esta opcin le permite introducir el texto que quiere que aparezca en
Figura 3.40. Vista del editor establecer texto en barra de estado Sin duda alguna, ste es uno de los paneles ms interesantes de los descritos a lo largo de este captulo. Tambin se dir que algunas cosas no han quedado todava muy claras, dado que las opciones Rollover pueden resultar algo complejas porque incluyen implcitamente ciertos pasos hasta poder crearlas. En principio al hablar de los efectos Rollover lo que se pretende es mostrar el contenido del panel Comportamientos. Ms adelante se explicar cmo 95
94
crear, desde un efecto Rollover simple, hasta un efecto Rollover ms complejo. Pero eso ser mas adelante. Por otro lado cuando se crea un efecto Rollover simple por ejemplo, los posibles comportamientos se muestran en la ventana del panel comportamientos. En el caso de que emplee la opcin Intercambiar imagen, tendr en esta ventana una opcin marcada, es decir, aparecer una pestaa desde donde podr seleccionar el modo en que se activar este comportamiento. Estos modos son los siguientes y se muestran en un Men emergente: 1. OnMouseOver. Esta funcin le permite activar el efecto Rollover cuando el puntero del ratn pasa sobre el objeto. 2. OnMouseOut. La activacin del efecto Rollover, tiene lugar en este caso, cuando el puntero del ratn abandona el objeto. 3. OnClick. Esta funcin permite crear el efecto Rollover 'cuando se hace clic en el objeto. 4. On Load. Esta funcin permite crear el efecto Rollover cuando se carga el botn o grfico.
por lo cual se nos ofrece un muy amplio abanico de posibilidades para crear millones de colores para sus trabajos. Los colores pueden afectar tanto a rellenos como a trazados con slo hacer clic en la casilla correspondiente. En el caso de hacer clic en cualquiera de ellos, Fireworks 4 le mostrar un completo editor de colores desde el que podr crear la combinacin de colorido perfecta para su grfico. Los formatos de colores aceptados son los siguientes: 1. RVA. El color se obtiene por la suma de los tres colores diferenciales Rojo, Verde y Azul. Esta combinacin se utiliza tambin para los tubos de televisin, porque el color resultante es muy vivo. 2. Hexadecimal. Es la opcin de menor efecto pastel en sus colores, esto es, son colores poco degradados o con poca definicin. Cuando seleccione esta opcin observar un gran cambio en la consistencia de los colores en comparacin con el modo RVA. 3. CMA. El color se obtiene por la regla de tres colores, en este caso Cyan, Magenta y Amarillo. 4. MSB. Con esta opcin se consiguen colores pastel muy agradables y muy suavizados. 5. Escala de grises. Se trata de una escala de grises de gran magnitud, es decir, una escala que va del blanco al negro pasando por todas las combinaciones de grises posibles. En la ventana de trabajo de este panel se muestran en todo momento los valores actuales del color, adems de mostrarse el color elegido para el "pincel" por un lado y para el "cubo" por otro. Las propiedades de edicin y guardar un color estn disponibles en la ficha siguiente que es Muestras. En dicha ficha encontrar las opciones de guardar, editar o renombrar.
Entre los diferentes modos de colores que se ofrecen aqu, se destacan las sumas de color en formato R VA, Hexadecimal o escala de grises entre otros. Todos los colores son editables, 96
singular cuentagotas" y hacer clic en el color deseado, en cuyo momento se aplicar al objeto en cuestin. En este panel encontrar las opciones Guardar y Editar que complementan el panel anteriormente descrito y que son las siguientes:
7. Sistema Windows. Con esta opcin se muestra un amplio abanico de colores disponibles en el formato 8. Sistema Macintosh. Como en la funcin anterior, se ofrece un amplio abanico de colores, pero esta vez enfocados al sistema Macintosh. 9. Escala de grises. Desde aqu podr acceder a una es cala de grises en sustitucin de los colores. 10. Paleta de exportacin actual. Desde aqu podr exportar los colores a otras aplicaciones, todo un acierto. 11. Ordenar por colores. Si hace uso de esta opcin podr ordenar los colores cargados previamente si aparecan desordenados. Como se dijo al principio de este bloque, el presente paei es una extensin de la opcin mezclador de colores. Desde aqu podr trabajar directamente con colores personalizados, guardarlos o incluir nuevos colores a partir de objetos Gif. Recuerde que todos los cambios hechos aqu estn disponibles tambin en la paleta de herramientas, ya que Fireworks es una aplicacin que comparte muchas de sus funciones en diferentes lugares a la vez, tal como sucede con Flash 5 por ejemplo.
Windows.
1. Aadir muestras. Como su nombre indica, esta funcin le permite aadir nuevos colores al panel, para ello se muestra la ventana de dilogo Abrir. Desde esta ventana podr cargar extensiones Tavola color "*.act" o Gif. En cualquiera de los casos se absorben los colores que contienen. Por ejemplo, si elige una imagen Gif, todos los colores de este objeto aparecern en el panel como colores disponibles. 2. Reemplazar muestras. Podr sustituir los colores actuales por los que contenga un Gif. Por ejemplo, si carga un Gif el panel le mostrar los colores de este elemento en el panel, obviando los colores disponibles en una sesin anterior. 3. Guardar muestras. Puede guardar muestras de color con esta opcin. Cuando crea un nuevo color o un grupo de ellos mediante la opcin reemplazar, es posible salvarlos como una extensin Tavola color "*.act" de 4. Borrar muestras. Es posible eliminar colores de la paleta de trabajo, aunque no lo recomendamos aqu. 5. Cubos de color. Esta opcin nos muestra los colores adaptados para grficos destinados a diseos de pgina Web, lo que se traduce en colores bsicos. 6. Tono continuo. Esta opcin le muestra una gama de colores con continuacin, es decir, si aparece el color verde, ste se acompaa de todas sus variantes y tonalidades. 98
Fireworks.
99
16. Cargar paleta. Con esta opcin puede cargar una paleta de colores personalizada. 17.Guardar paleta. Con esta opcin puede guardar una paleta de colores para su uso posterior. Como habr podido comprobar el contenido de este panel le permite editar y trabajar a su antojo cada uno de los colores de su documento, al contrario de los otros paneles anteriores que se limitaban al tratamiento del color en modo de disponibilidad.
Figura 3.43. Vista del Panel Tabla
3. Editar color. Puede editar el color que ha seleccionado desde el panel de colores. 4. Suprimir color. Si lo desea, puede suprimir un color previamente seleccionado. 5. Reemplazar entrada de la paleta. Con esta opcin puede reemplazar un color previamente seleccionado por un nuevo color desde el panel editor de colores. 6. Adaptar a Web Safe. Bajo el modo de optimizacin puede adaptar el color a este formato. 7. Transparente. Esta opcin le permite hacer transpa rente un color. 8. Bloquear color. Con esta opcin puede bloquear el color que est editando para no sufrir cambios innecesarios. 9. Desbloquear todos los colores. Si lo desea puede desbloquear todos los colores de la paleta y volver a editarlos, por ejemplo. 10. Ordenar por luminancia. Puede ordenar los colores en funcin de su luminosidad. 11. Ordenar por popularidad. Tambin puede ordenar los colores segn el nmero de colores repetidos. 12. Sin ordenar. Puede mostrar todos los colores sin orden alguno. 13.Mostrar respuesta de la muestra. Cada color en este panel puede presentar diversos smbolos que indican determinadas caractersticas de los colores. Con esta opcin se le mostrarn las caractersticas de cada color de la paleta. 14.Eliminar edicin. Puede eliminar el modo de edicin de un color. 15.Eliminar todas las ediciones. Puede eliminar todas las ediciones que desee. 100
Figura 3.44. Vista del Panel Opciones Por ello y dependiendo de la herramienta seleccionada, tendr unos atributos u otros en este panel. Si por ejemplo, tiene la herramienta Flecha elegida en el panel Opciones, se le mostrarn tres opciones marcadas. La primera opcin le permite resaltar la posicin del ratn, es decir, si se sita sobre un objeto ste se quedar marcado. Puede hacer que no suceda as. A esto se le llama opcin. Si selecciona por ejemplo la herramienta cubo de pintura, en el panel Opciones se le mostrarn ms propiedades que en la herramienta antes descrita. Cabe destacar la opcin de elegir el tipo de borde que desea obtener, tras el relleno de un polgono. Y as podran citarse ejemplos hasta la saciedad. De lo que no cabe duda es que desde este panel podr personalizar las herramientas de trabajo.
101
tana inferior de la propia de atributos, que en ese caso habr elegido Buscar fuente. En este modo, adems de buscar y sustituir fuente, podr hacer lo mismo con el estilo. 3. Desde la ventana de atributos podr elegir tambin el color que desea emplear en el cuerpo del texto. Para ello elija el color en un men inferior y aplique los pasos anteriores. Recuerde que cada vez que se nombra la ventana atributos, se hace referencia a la segunda ventana de este panel. 4. Tambin es posible modificar los atributos de un vn5. Puede buscar colores no WebSafe y cambiarlos por un color WebSafe ms cercano. Los colores Web5afe se denominan tambin colores Web y afectan a objetos GIF. Encontrar estos colores en el panel Optimizar. Las opciones buscar y reemplazar siempre han sido las herramientas ms activas en la creacin de una pgina HTML. Esto es aplicable a Dreamweaver por ejemplo. Sin embargo, tambin se puede aplicar esta opcin a un diseo grfico ya que al igual que el texto, los colores o estilos pueden buscarse y sustituirse. Sin lugar a dudas sta es una opcin muy acertada.
culo URL.
Desde esta funcin podr modificar los valores de contenido de un documento activo, una fila a importar o una parte del mapa de dibujo. Tambin es posible cambiar los atributos del texto, como color o fuente entre otros, como se ha mencionado en lneas precedentes. Tambin hay que destacar que la opcin o atributo texto, le permite cambiar una frase por otra sin necesidad de recurrir al editor de texto. En las siguientes lneas se describen las opciones de este panel: 1. Para la opcin de texto, podr cambiar una frase o lnea con slo escribirla en la ventana denominada Buscar, y si elige Buscar en Documento, en una ventana superior. Ms abajo, en la ventana denominada Cambiar por, podr escribir el nuevo texto que sustituir al anterior si ha escogido la opcin Reemplazar o Reemplazar todo. 2. Tambin podr modificar los valores de tamao o fuen te de texto, con slo elegir una nueva fuente en la ven102
evidente. Cuando aada un objeto bajo este modo podr indexarlo o incluirlo en su diseo. 3. Borrar seleccin. Con esta funcin podr borrar un archivo seleccionado. 4. Borrar todo. Para borrar todos los archivos de este panel.
puede resultarle catico y a veces perturbador. Ahora que ya conoce parte de Fireworks, pasaremos al siguiente captulo, donde conocer la paleta de herramientas Principal. Si, las herramientas de Fireworks con las que crear sus documentos, y con las que compartir desde los paneles descritos.
El panel proyecto le muestra en cada momento todos los pasos ejecutados al crear su documento, pero adems le permite exportar un smbolo personalizado o aadir archivo al panel Historial. Sin duda alguna es una excelente opcin para agilizar el trabajo. En este captulo un tanto extenso, ha conocido los paneles flotantes, esas plataformas con varias pestaas que, a menudo, contienen atributos de una herramienta y en otros casos, prestaciones nuevas que no descubri en otra aplicacin de diseo. Los paneles se han descrito en el orden en que los va a encontrar. Asimismo, cada opcin ha sido descrita como un panel, cuando quizs deban haberse descrito como fichas del panel. Dado que el panel est encabezado por un nombre, el resto deberan ser extensiones o fichas, pero dejmoslo as. De cualquier forma ya sabe qu son los paneles y qu contienen. A lo largo del trabajo con Fireworks har uso extensivo de ellos, de modo que le aconsejamos que los personalice cuando adquiera prctica en su uso. Esa flexibilidad le permitir trabajar con ms comodidad y rapidez. Deje visibles solamente aquellos paneles que le son imprescindibles, ya que tenerlos todos disponibles a la vez
104
105
4.1. Introduccin
Fireworks 4, es decir, ya tiene en mente qu son y qu encontrar
en los diferentes paneles que se han descrito y qu encontrar en gran parte del rea de trabajo de Fireworks. Pero Fireworks contiene ms elementos adems de los propios paneles. En realidad existen elementos todava ms importantes que los paneles flotantes. Hablamos de las herramientas de Fireworks, sin las cuales no podramos hacer nada. Toda aplicacin de diseo se basa en una herramienta de edicin. Por ejemplo, una herramienta de edicin permitir crear una simple lnea o un rectngulo, y a su vez, esta herramienta de edicin ampliada nos permitir cambiar el tamao del objeto as como modificarlo en cualquier otro sentido. En este captulo conocer, o mejor dicho, descubrir cun importantes son las herramientas de Fireworks, pero antes es preciso conocer cmo iniciar Fireworks. Quizs piense que es tarde para explicar a estas alturas cmo iniciar Fireworks, pero es evidente que ste es el momento para hacerlo. En el captulo anterior conoci el contenido de los paneles flotantes, pero en ningn momento tuvo la certeza de que los paneles flotantes eran todo el rea de trabajo de Fireworks. Evidentemente, ellos son un complemento ideal, pero el rea de trabajo de Fireworks muestra muchas cosas ms, y las conocer ahora. Se denomina Toolbox y es la barra de herramientas que aparece en la parte lateral izquierda del entorno de trabajo de Fireworks 4. Es la paleta de herramientas, la base de Fireworks. Esta barra de herramientas le permitir realizar cualquier tarea sobre el lienzo 107
de trabajo tambin llamado documento. Cada una de las funciones de esta paleta puede ir precedida de otras que se muestran en un modo desplegable si se hace clic en el lateral inferior derecho de cada herramienta o botn seleccionado. Es particularmente interesante describir y separar esta barra de herramientas "paleta de herramientas," de las restantes barras de herramientas que ofrece Fireworks. Dichas barras de herramientas son la Principal y la de modificar, y slo sern visibles sise llaman desde el men ventana. Ello significa que son herramientas de segundo orden, pero no menos importantes. En cualquier caso va a conocerlas todas en las pginas siguientes.
Figura 4.1. Cuando inicie Fireworks esto es lo que ver, algo que ya conoce a estas alturas
Figura 4.2. Desde este cuadro de dilogo podr establecer los parmetros de su documento
108
3. Ahora deber inicializar Fireworks y para ello deber abrir un nuevo documento. Seleccione el Men Archi109
vo y seleccione la opcin Nuevo. Fireworks le mostrar ahora un cuadro de dilogo, vase figura 4.2, desde donde podr personalizar su documento. Ms adelante explicaremos cmo personalizar un documento. Ahora limtese a dar por correctos los parmetros interpuestos y haga clic en Aceptar. 4. Observar ahora que la paleta de herramientas se activa al tiempo que se inserta un documento en blanco bajo la barra de Mens, vase figura 4.3. En ese documento podr dibujar y desde l tendr acceso al formato original o a una presentacin preliminar. Ahora ya tiene a Fireworks inicializado. Ms adelante le explicaremos cmo trabajar con un documento.
que se describen en los primeros captulos. Es decir, que si se hace referencia ala herramienta Flecha, sta deber estar activa para poder comprobarlo. Ya ms adelante, cuando conozca todos los elementos que componen Fireworks, llegar el momento de trabajar con Fireworks, pero slo cuando tenga plena seguridad de que sabe cmo es y qu es Fireworks 4.
Figura 4.3. Ahora ya tiene activadas todas las opciones de la paleta de herramientas
Es bien sabido que en los primeros captulos se muestran generalmente los contenidos que se encontrarn en una aplicacin. As lo estamos haciendo, excepto que ya se ha implementado un caso prctico en medio de ellos. Evidentemente deber tener claro que no todos los contenidos son activos si no se crea primero un documento. Slo as podr seleccionar y comprobar todos y cada uno de los elementos 110
1. Puntero. 2. Selector de Sub-objetos. 3. Herramienta Recuadro. 4. Herramienta Lazo. 5. Herramienta Recortar. 111
6. Herramienta Varita mgica. 7. Herramienta Lnea. 8. Herramienta Pluma. 9. Herramienta Rectngulo. 10. Herramienta Texto. 11. Herramienta Lpiz. 12. Herramienta Pincel. 13.Herramienta Escala. 14.Herramienta Estilo libre. 15. Herramienta Cuentagotas. 16. Herramienta Cubo de pintura. 17. Herramienta Borrador. 18. Herramienta Sello. 19. Herramienta Zona interactiva rectangular. 20. Herramienta Divisin. 21. Herramienta Mano. 22. Herramienta Zoom.
Estas son las veintids herramientas que posee Fireworks 4. Todas ellas localizadas como ya se ha dicho, en la paleta de herramientas situada a la izquierda del rea de trabajo de Fzreworks. Algunas de las herramientas nombradas pueden tener herramientas adicionales. Por ejemplo, la Herramienta Rectngulo va seguida de otras como la Herramienta Elipse. Adems, todas las herramientas estn complementadas en el panel opciones, desde el cual podr modificar las propiedades en el modo de trabajar con ellas. Esto le permite crear un entorno de trabajo personalizado y flexible. Todas las herramientas mencionadas son herramientas de trabajo. Fireworks posee entretanto otras herramientas denominadas Principales y de Modificacin. Y se mencionarn ms adelante. En los prrafos siguientes describiremos todas y cada una de las herramientas mencionadas.
Esta herramienta se completa con dos herramientas ms. A continuacin se describe cada una de ellas: 1. Herramienta Puntero. El Puntero selecciona y mueve objetos a travs de todo el lienzo. Este botn es funcional y desplegable y contiene dos opciones ms. 2. Herramienta Seleccionar lo que hay detrs. Esta ampliacin del Puntero principal y que se marca como un Puntero detrs de un objeto, le permite precisamente eso, seleccionar un objeto que se localiza detrs de otro objeto del lienzo. 113
3. Herramienta Exportar rea. Bajo el dibujo de una cmara fotogrfica, esta funcin permite exportar un rea definida por el diseador. Cuando utilice esta herramienta cree un rea de exportacin y al hacer clic en ella dos veces, ver que Fireworks le permite exportar aquella zona que haya seleccionado.
115
zona de "captura" a mano alzada y a golpe de ratn. Con esta herramienta puede copiar, cortar o modificar artsticamente una zona elegida. Por ejemplo, puede seleccionar un rbol de un bosque y copiarlo en otro lugar del documento. 2. Herramienta Lazo polgono. Otra forma de seleccin donde las haya. En este caso el lazo se conforma a medida que se hace clic, siendo al cerrar el lazo cuando se crea la zona de seleccin o rea poligonal.
herramienta es indispensable cuando quiere retocar zonas de una imagen coloreadas o en blanco, cambindolas de color o textura.
1. Herramienta Recortar. Con esta herramienta podr seleccionar una parte del diseo para quedarse nicamente con dicha parte. Esto se consigue creando primero una zona de recorte y haciendo doble clic despus. En ese momento el documento mostrar slo la parte recortada.
1. Herramienta Varita mgica. Con Varita mgica podr hacer una seleccin, en modo imagen, de toda el rea del mismo color e, incluso, si est en blanco. Esta 116
Las herramientas descritas hasta el momento forman parte de un grupo de seis, las cuales nos sorprenden por sus funciones un tanto especiales. Fireworks rene todas las herramientas segn su capacidad o su funcionalidad, lo que se ha visto tambin en los paneles flotantes. En este sentido encontrar diversos grupos de herramientas las cuales tienen una relacin directa entre s. Lo mismo sucede y valga la redundancia con las barras de herramientas. En definitiva, Fireworks tiene bien estructurados todos y cada uno de los elementos de la aplicacin, de manera que el diseador 117
puede trabajar a gusto y con todas las opciones organizadas en su lugar adecuado.
1. Herramienta Pluma. Con esta herramienta podr crear curvas Bezier. Para ser ms exactos, se puede decir que con esta herramienta podr hacer trazados basndose en vrtices, siempre que se mantenga pulsado el botn derecho del ratn mientras se dibuja un punto. Estos trazados se terminan pulsando el botn derecho del ratn.
118
crculo citado, si mantiene pulsada la tecla Maysculas mientras los dibuja. 4. Herramienta Polgono. En realidad pentgonos; con esta herramienta podr crear este tipo de polgono cuyas caras podr modificar si para ello utiliza el Puntero selector de objetos.
ambas herramientas existe una diferencia, y es que si con la herramienta Lnea poda crear una lnea recta, en este caso puede crear una lnea a mano alzada. Esto permite realizar curvas o seguimientos en la lnea, que de otra manera sera imposible realizar. Eso s, para utilizar esta herramienta necesitar algo ms que un pulso magistral.
1. Herramienta Lpiz. Esta es otra de las herramientas indispensables en todo programa de dibujos vectoriales. Con Lpiz puede dibujar a mano alzada de un punto de grosor. Esta opcin es indispensable, como se ha dicho al principio, pero su manejo resulta todava un algo difcil dado lo dbil que es el pulso de la mayora de los mortales. No es descartable que en el futuro, los "lpices" a mano alzada se sustituyan por verdaderos lpices inalmbricos, algo que seguramente ser bien recibido.
una herramienta extendida. o con otras herramientas indexadas al mismo botn. Un pincel siempre permitir pintar a mano alzada todo aquello que se desea. En este caso el grosor del trazo es evidentemente mucho mayor que lo que defineri las herramientas Lnea y Lpiz. Recuerde que se trata de un pincel y como tal est indexado a los atributos del panel Trazo, con lo que puede personalizar su pincel.
Hasta el momento se han descrito las funciones de las herramientas que permiten realizar desde una lnea formada por dos puntos simples, hasta la creacin de formas vectoriales basadas en un solo trazo, como cubos, rectngulos, esferas o formas poligonales. Todas estas formas pueden rellenarse con una textura o color firme. Pero dichas herramientas pertenecen a otro grupo de trabajo denominado Acabado Final que al igual que las herramientas descritas en lneas precedentes, estn todas reunidas en un solo grupo, aunque comparten junto con el resto de herramientas, el espacio de la paleta de herramientas Principal.
1. Herramienta Pincel. La brocha permite trazar lneas a mano alzada con distinto grosor, textura y color. Todos estos valores vienen determinados por el panel Trazo, lo que permite tener un mximo control sobre la brocha. Tambin es posible cambiar o modificar desde el mencionado panel cualquier trazado ya hecho lo que permite una total flexibilidad en el dibujo. 2. Herramienta Volver a dibujar trazado. Esta herramienta cambia un trazado previamente seleccionado para cortarlo a partir del punto que se ha seleccionado. Este punto puede extenderse despus hacia otro lugar del lienzo. Tambin hay que resaltar que esta herramienta permite trazar lneas desde el panel de Trazo. Se utiliza de la manera siguiente: 1. Dibuje un rectngulo con la herramienta Pincel. 2. Seleccione ahora la herramienta Volver a di bujar trazado. 3. Todava tiene el rectngulo marcado por una serie de puntos. Haga clic en cualquier punto de una de las lneas, por ejemplo, la lnea derecha vertical y desde el centro. 4. Dibuje un polgono irregular hacia afuera y regrese con el trazado hasta el otro extremo del rectngulo, por ejemplo a la lnea inferior. Observar ahora que se ha dibujado un nuevo polgono a partir del rectngulo inicial. 122
Con esta herramienta, vase figura 4.17, puede modificar el tamao o la estructura del objeto seleccionado. Esta herramienta se completa con dos opciones ms, que son la herramienta Inclinar ylaherramienta Distorsionar. Con estas herramientas se pueden obtener nuevos ngulos para sus objetos, deformarlos y adaptarlos a sus necesidades. Estas herramientas son las siguientes: 1. Herramienta Escala. Con esta funcin podr transformar el objeto seleccionado o escalarlo en mayor o menor medida. Esto es, podr modificar el tamao del objeto con slo arrastrar las esquinas del objeto seleccionado. En otro orden de cosas, el objeto se encuentra rodeado de esquinas mviles y tiene un punto central desde el cual podr rotar el objeto, con respecto a la situacin del punto central. Esta funcin aade ms dinamismo a sus creaciones. 2. Herramienta Inclinar. Se trata de sesgar o inclinar el objeto o imagen con referencia a un punto imaginario. Este comando le permite tambin rotar la imagen desde un punto de fijacin. La funcin Inclinar le permite introducir desvirtuamientos en su rea de documento, como por ejemplo crear un "temporal" sobre unos rboles dibujados. El punto de inclinado libre le permite modificar " la direccin del viento" desde cualquier punto de vista. 3. Herramienta Distorsionar. La forma libre es la ltima opcin de la herramienta Escalar que en este 123
caso permite modificar la imagen desde cualquiera de los puntos que la bordean. La forma libre o de distorsin permite, desde estirar una esquina hasta solapar varias de ellas, dejando al descubierto un objeto virtuoso. Con esta funcin es posible crear un buen puado de hojas volando durante una ventisca, esto por la uniformidad de la posicin que toman creando distintas perspectivas de visualizacin para cada una de las hojas procesadas.
de forma inmediata y con total flexibilidad. Esta herramienta es una de las ms flexibles de Fireworks, ya que le permite trabajar un trazado a su antojo. Esta herramienta y la anteriormente descrita est indexada al Panel Trazo, con lo que podr determinar el grueso del trazo, el color o las propiedades del mismo. 3. Depurador de trazado aditivo. Se trata de un depurador de trazado que aade relieve al trazo seleccionado. Este efecto slo es visible cuando existe un color de fondo o se ha creado un objeto complejo. 4. Depurador de trazado sustractivo. Es la opcin in versa a la anteriormente descrita.
de la herramienta Escala
Figura 4.18. Vista
124
125
1. Herramienta Cuentagotas. Esta herramienta recoge una muestra del color en el pxel en que se hace clic y lo activa sobre el objeto previamente seleccionado. Esta herramienta le permite adaptar rpidamente los colores de su grfico, con velocidad y precisin es algo que precisamente est buscando el diseador.
se est trabajando con un dibujo vectorial y la herramienta Borrador que aparece como un borrador de colegio, cuando est en modo Mapa de bits. En la figura 4.21 puede ver la herramienta borrador en modo cuchillo. 1. Herramienta Cuchillo. Utilice esta herramienta para cortar un trazado entre dos o ms trazados. 2. Herramienta Borrador. Utilice esta herramienta para eliminar pxeles o para pintar los pxeles con un color diferente. Puede establecer el color del Borrador como transparente, color de relleno, color de trazo o color de lienzo. Tambin podr seleccionar un Borrador redondo o cuadrado.
rrar exteriores y partes de los pxeles, cuando est en modo Mapa de bits u otra forma de borrado imaginable. Esta herramienta es en realidad dos en una; la herramienta Cuchillo que aparece cuando
126
rea que se quiere clonar, y un cursor en forma de sello que seala el lugar donde se va a colocar el duplicado.
permitirle crear zonas poligonales, puede contornear un objeto y delimitar el espacio que ser interactivo.
de la herramienta Sello
de la herramienta Divisin
1. Herramienta Divisin. Con esta herramienta podr dividir una imagen como parte de un objeto activo. Dicho objeto activo puede ser un botn, un enlace o una zona interactiva. En las divisiones puede aadir, adems de todo lo mencionado en una zona interactiva, los famosos efectos Rollover que tanta vida dan a las actuales pginas Web. 2. Herramienta divisin poligonal. Se trata de la misma herramienta antes descrita, salvo que en este caso po129
dr elegir las formas de divisin, es decir, podr crear divisiones adaptadas a sus necesidades personales puesto que no se limita a un simple rectngulo.
Aisladas y sin botn de ejecucin, existen algunas funciones ms a describir en esta paleta de herramientas aunque no sean tales. La primera de ellas est representada por un Lpiz y una ventana desde la cual puede ver el color que se emplea en todo momento para los trazados de pincel. En la siguiente ventana, idntica a la anterior, y situada justo debajo de ella, puede destacar tambin los colores de relleno de objetos y que a su vez est representada tambin en el panel de relleno. Ms abajo se destaca un pequeo botn de efecto visual llamado Establecer colores predeterminados, que muestra los colores de pincel y de relleno en los tonos claro y oscuro. Estos son los colores por defecto que se muestran en esta barra de tareas. y colores que podrn aplicarse sobre cualquier objeto. A la derecha de este botn encontrar la opcin Sin trazo ni Relleno, que como su nombre indica, elimina ambos colores. Y ya para terminar y a la derecha de este ltimo botn descrito, se destaca la presencia de un comando que permitir intercambiar el sentido de los colores de pincel y de relleno de un objeto, con slo hacer clic en l. Hasta aqu se han descrito los principales paneles de trabajo, as como la barra de herramientas, con un texto un tanto sencillo quizs, pero lo cierto es que toda gua tiene una parte simplificada, con descripciones breves del tema y otra parte ms compleja y si cabe ms detallada, en la que se explica cmo trabajar con el programa en determinados momentos, en este caso, con Fireworks 4. Pero antes estudiaremos otras barras de herramientas no menos importantes, que el lector debe conocer antes de lanzarse a la aventura de practicar con
Fireworks 4.
dibujar un rectngulo, tirar una lnea o rellenar un polgono. Ya localiz todas las herramientas en la parte izquierda del rea de trabajo de Fireworks y a la vez sus atributos que estn disponibles en algunos de los paneles flotantes, pero en cualquier caso esas no son todas las herramientas que encontrar en Fireworks. Estas son sencillamente las herramientas de creacin. Ahora tendr que descubrir qu son y dnde estn las herramientas de edicin de Freworks. Las herramientas de edicin le permitirn editar todo lo que haya creado con las anteriores herramientas. Como puede ver son un complemento de las primeras y por lo tanto, tan importantes como ellas. Fireworks posee al menos dos tipos de herramientas en esta nueva categora. Son las herramientas principales y las herramientas de modificacin o edicin. Para acceder a ellas deber hacer lo siguiente: 1. Seleccione el Men Ventana y elija la opcin Barras de herramientas. Fireworks le mostrar ahora un Submen con dos opciones, vase figura 4.27. 2. Haga clic en la primera opcin. Esto es, en Principal. Ahora Fireworks le mostrar la barra de herramientas Principal. 3. Seleccione de nuevo el Men Ventana y en la misma opcin de antes seleccione la opcin Modificar. Fireworks le mostrar ahora la barra de herramientas Modificar. Como puede apreciar, Fireworks tena ocultas herramientas precisas y realmente necesarias. Son opciones que encontrar desde diferentes Mens como las herramientas de la barra Principal, que hallar tambin en el Men Archivo. Pero puede resultar demasiado laborioso recurrir a ellas desde los Mens emergentes y el diseador puede tener a mano las ms importantes dentro de cada clase. Por ejemplo, las opciones ms repetitivas como Abrir, Guardar, Cortar o Copiar estn disponibles desde una de las barras. Si el diseador hace uso continuo de ellas es ms interesante que dichas herramientas estn disponibles en una zona ms prctica. En las siguientes lneas se describir cada una de estas herramientas. 132
Figura 4.27. Desde aqu puede activar las Barras de herramientas Principal y Modificar
te bsicas y las que ms se utilizan en una sesin normal de trabajo. Ligeramente separadas en tres grupos que convergen en la misma barra, con ellas puede realizar, empezando por la izquierda, las siguientes funciones:
1. Nuevo documento. Como su nombre indica, se trata de la funcin que permite crear un nuevo lienzo de trabajo. Cuando pulsa este botn Fireworks le muestra un cuadro de dilogo, desde el cual podr elegir el tamao del lienzo y el color de fondo como principios bsicos del documento a crear. 2. Abrir. Tambin es habitual seguir trabajando con un documento ya existente. En ese caso ste es el botn que, desde una nueva ventana de dilogo, le permite abrir un documento ya existente y se encuentra ubicado en su disco duro. 3. Guardar. Con slo un clic podr guardar aqu su trabajo, eso s, introduciendo previamente un nombre que identifique su documento. 4. Importar. Con esta funcin podr insertar una imagen u objeto en su documento. Esta funcin le permite importar archivos de imagen del tipo TIFF, JPG o GIF entre otros, desde un men desplegable del cuadro de dilogo Abrir. Las imgenes se integran en su documento manteniendo todas las propiedades del cuerpo. Hay que destacar que Fireworks 4 permite importar archivos CDR de Corel Draw, A1 de Adobe Illustrator y PSD de Photoshop entre otros. 5. Exportar. Tambin es posible exportar su documento a otra aplicacin. Para ello elija esta funcin, la cual le permitir exportar su trabajo en otro formato como los del tipo JPG o GIF, como formatos ms comunes. Al elegir esta funcin se le muestra el cuadro dilogo Guardar desde el cual podr elegir el formato Biblioteca de Dreamweaver, Capa CSS, archivo de Macromedia Flash o Photoshop entre otros.
134
6. Imprimir. Si usa esta opcin podr imprimir su docu mento. 7. Deshacer cambios. Representado por una flecha hacia la izquierda, un clic en este icono le permite regresar hasta un mximo de ocho pasos anteriores. Es destacable que los ocho pasos de "deshacer" pueden ser modificados para ms tareas si se accede a la interfaz de preferencias. 8. Rehacer cambios. Representado con una flecha hacia la derecha, este icono le permite realizar precisamente lo contrario de la opcin anteriormente descrita. Esto es, recuperar acciones que han sido previamente eliminadas. 9. Cortar. Con una aplicacin ms extensa que la funcin de borrar los objetos seleccionados, con esta opcin la herramienta cortar le permite copiar el objeto en el portapapeles para pegarlo despus en otro lugar del documento. El objeto cortado desaparecer de su antigua posicin. 10. Copiar. Este botn tambin copiar en el portapapeles el objeto seleccionado, salvo que en este caso el objeto no se borrar en el documento. La opcin Copiar es sumamente til para trasladar textos u objetos de una aplicacin a otra, aunque los dos programas no sean compatibles en cuanto a extensiones de ficheros. 11. Pegar. Esta opcin permite pegar sobre el lienzo de trabajo todo lo que existe en el portapapeles. El contenido del portapapeles se borrar y se sustituir por nuevos datos cada vez que se emplee la opcin de copiar o cortar.
interesantes compuestos por objetos mltiples, que a la hora de exportarse se vern como un nico objeto. Otros modificadores permiten poner delante o detrs un objeto entre otros tantos, as como unirlos o separarlos. Los efectos resultantes suelen ser muy interesantes, adems de que permiten agilizar el trabajo del diseador. Esta barra de tareas contiene trece funciones divididas en cuatro grupos que son los siguientes y que se describen de izquierda a derecha:
Figura 4.29. Vista de la Barra de herramientas Modificar 1. Agrupar. Cuando se crean distintos objetos y tiene que unificarlos todos para crear un solo objeto complejo, este icono, y la funcin agrupar que de l se desprende, le permite integrar todos los objetos seleccionados a fin de crear un solo objeto que se comportar como un nico elemento mientras no se efecte el proceso de desagrupacin. 2. Desagrupar. Es posible que tenga un objeto importado en el documento al que le sobran algunos elementos de dibujo. Con la opcin desagrupar "siempre que no se trate de una imagen JPG o GIF" podr seleccionar o eliminar aquellos elementos u objetos sobrantes que desee. 3. Unir. Con esta funcin es posible unir varios objetos entre s, unificando las propiedades de cada uno en una sola unidad. 4. Separar. Esta funcin permite justamente la opcin contraria a la antes descrita. 5. Situar en primer plano. A menudo, cuando est dibujando, pueden surgirle nuevas ideas como interponer una imagen a otra con el fin de destacarla y dar ms dinamismo a su creacin. Si elige el objeto con el puntero y activa esta herramienta despus, el objeto seleccionado se pondr delante de todos los dems, sobre todos los objetos que dificultan la visualizacin del objeto seleccionado. 6. Traer hacia delante. Esta herramienta presenta una variedad de lo anteriormente descrito. En este caso 136
pone el objeto seleccionado encima del objeto que se encuentra sobre l y en su misma capa, lo que resulta muy til cuando solamente se desea modificar la posicin entre dos objetos en la misma capa. 7. Enviar hacia atrs. Esta funcin realiza la operacin contraria a la antes descrita, es decir, enva hacia atrs el objeto seleccionado. 8. Enviar al fondo. Con esta herramienta puede mandar un objeto al fondo. Esta accin no es enviar ese objeto a la papelera sino ms bien que el objeto se instala por debajo de todos los objetos de su capa, lo que evita de un plumazo tener que seleccionar cada uno de los objetos y situarlos por delante del resto hasta alcanzar el deseado. 9. Alinear. Est compuesto por ocho formas de alineacin desde un men desplegable. Al hacer clic en una pestaa lateral, y una vez seleccionado un grupo de objetos, esta opcin permite alinear los mismos segn el criterio o modo elegido en ese momento. Estas alineaciones pueden ser en sentido horizontal, vertical o de libre efecto. 10.Rotar a la izquierda. Si selecciona un objeto y hace clic en este icono tenga presente que aplica una rotacin de 90 hacia la izquierda para todo el objeto seleccionado, el cual tomar la nueva posicin. 11. Rotar a la derecha. Se trata de la misma funcin antes descrita, pero hacia la derecha y manteniendo el mismo grado de rotacin, es decir 90. 12.Volteado de izquierda a derecha. Es un icono con una funcin bastante til, denominado tambin efecto espejo; esta funcin, con el objeto previamente seleccionado, cambia la posicin con una vuelta completa. 13.Volteado de arriba a abajo. Se trata de una ampliacin de la funcin anteriormente descrita. Esta herramienta le permite obtener el mismo efecto espejo, pero de arriba abajo. Ya conoce el aspecto visual y el contenido de Fireworks 4. A1 principio, cuando inici Fireworks y vio cierta cantidad de objetos flotantes y de paneles quizs se sobresalt. Pero ahora ya sabe de qu se trata y qu contiene cada panel o barra de herramientas que pueden estar presentes en el rea de trabajo de Fireworks 4. Debe saber tambin que an no conoce todas las opciones de Fireworks, ya que todava no se
137
han descrito sus Mens emergentes. Eso ser en el prximo captulo, en el que llegar a un punto central de la obra, puesto que conocer ntegramente Fireworks y tomar una serie de lecciones prcticas que le harn confiar en l. Crear grficos, banners o animaciones con Fireworks es una tarea fcil, no desespere, lo aprender ms adelante. Primero debe conocer su ingenio, su integridad y con lo que se va a enfrentar. Es como el proceso de trabar amistad con una persona, primero la conoce y despus trata con ella. Con las Guas Prcticas sucede lo mismo, primero conoce el producto y despus entra a trabajar con l, a tratarlo y a poner en prctica todo lo asimilado. En el prximo captulo pues, conocer el contenido de los mens emergentes de Fireworks 4 que seguro lo deslumbrarn por su contenido.
5.1. Introduccin
Hasta el momento se han descrito cada uno de los paneles, barras de herramientas y barras de botones disponibles en la Inter faz de este programa de dibujo vectorial, desde los cuales tenemos acceso a todas las funciones que componen la aplicacin, pero es obvio que la base fundamental de toda Interfaz, la protagonizan las barras de men y los Mens emergentes, punto en el que convergen todas las funciones de una aplicacin. Estas funciones estn representadas como pestaas identificativas, ubicadas en la parte superior de la Interfaz de la aplicacin, en este caso de Fireworks 4, y se despliegan como Mens emergentes si hacemos clic en ellas. Ah se encuentran absolutamente todas las funciones de la aplicacin, funciones que podrn ser duplicadas en otros iconos complementarios ubicados en otras zonas de la aplicacin. Pero repetimos una vez ms que es aqu, en estas barras de mens, donde se localizan todas, absolutamente todas las funciones de la aplicacin, incluso aquellas que no estn representadas en otras zonas mencionadas. Como podr ver en las pginas siguientes los contenidos de los mens permiten realizar cosas realmente interesantes. La breve descripcin de cada una de las opciones disponibles en estos mens es un anticipo de sus funciones, y ah acaba todo. Los detalles de cada opcin, las ms destacables por ejemplo, y que merecen una descripcin ms detallada, tendrn su lugar a lo largo de esta Gua Prctica. En este captulo slo le mostraremos lo que encontrar en cada Men emergente, con una breve descripcin de cada contenido. Ms 139
138
adelante, en esta misma obra, profundizaremos en muchas de las opciones de estos mens. Ahora toca acabar de conocer el contenido de Fireworks 4, lo que se har completando el tour por los mens emergentes. Tambin observar que muchas de las opciones que se mencionarn, ya estn disponibles en otras reas del documento activo, es decir, en los paneles o barras de herramientas. Esta observacin le permitir comprobar la flexibilidad de Fireworks a la hora de poner las cosas fciles al diseador. Ahora sin ms prembulo, pasemos directamente a descubrir lo que hay debajo de esas pestaas que comnmente conocemos como Mens emergentes.
En este orden de cosas, las diferentes funciones irn destinadas a ocupar un lugar dentro de cada listado, segn sean sus preferencias de grupo. En la figura 5.1 puede ver el Men Archivo. El primer men descrito en este captulo ser, por tanto, aquel que contiene las preferencias de aplicacin, esto es, el men de funciones raz de toda aplicacin y que son los siguientes: 1. Nuevo. Cuando Fireworks se inicia, lo hace sin ningn documento activo. Para empezar a trabajar con un documento debe utilizar esta opcin, con la que crear un documento nuevo. En la figura 5.2 puede ver el cuadro de dilogo de esta opcin.
Figura 5.2. Desde la opcin Nuevo puede acceder a las propiedades del documento
2. Abrir. La funcin Abrir es una de las funciones prioritarias de cualquier aplicacin. Se trata de poder abrir un nuevo documento o archivo. El tipo de documento admitido vara segn cada aplicacin; en el caso de Fireworks, permite abrir documentos con diversas extensiones conocidas, como imgenes GIF, JPG, BMP u otros documentos de Freehand o Corel Draw entre otros. 3. Digitalizar. Fireworks puede obtener imgenes desde un escner. Esta opcin tambin adoptada por otros programas de diseo grfico o de retoque fotogrfico, ha sido aadida tambin en Fireworks. Ahora ya puede retocar sus fotografas y convertirlas en una imagen interactiva o en un Banner publicitario, por citar
Figura 5.1. Vista del Men Archivo 140 141
7. Guardar una Copia. Y ms funciones para salvar el documento activo. En este caso permite crear una copia del documento activo, es decir, que podr guardar el documento con otro nombre. En realidad esta opcin y la antes descrita pueden pertenecer al mismo grupo de opciones. 8. Actualizar HTML. Con esta opcin podr actualizar una tabla en un archivo HTML existente; para ello Fireworks le mostrar el cuadro de dilogo Abrir, vase figura 5.5.
Figura 5.3. Vista del Submen Digitalizar
4. Cerrar. Cuando quiere crear un documento nuevo o simplemente abrir otro, lo ms recomendable es emplear esta funcin, que permite cerrar el documento activo sin necesidad de salir de la aplicacin. 5. Guardar. Es la opcin ms sensata de toda aplicacin, del tipo que sea. La opcin Guardar le permite guardar su trabajo en el disco duro de su ordenador o en un disquete. Fireworks guarda los documentos con la extensin *.PNG. 6. Guardar como. Una funcin sobre otra. Se trata de guardar un documento como en el caso anterior. Normalmente esta opcin le permite guardar los documentos en otra extensin que la nativa, pero Fireworks utiliza esta opcin para guardar un mismo documento bajo distintos nombres para no afectar as el contenido del documento original. En la figura 5.4 puede ver la ventana de dilogo Guardar como. 142
9. Importar. Esta opcin le permite importar grficos o archivos de otras aplicaciones como Freehand, Corel Draw o Photoshop. Adems, Fireworks soporta numerosas extensiones grficas y en casi todas ellas mantiene las propiedades del documento tras ser importado. 143
10.Exportar. Con esta opcin podr exportar su documento activo como un GIF animado, un botn con efecto Rollover o un archivo TIFF de alta resolucin, as como el cdigo HTML para la pgina Web. Entre las extensiones que permite este modo se encuentran las Bibliotecas de Dreamweaver, archivos Photoshop, Illustrator 7 y Macromedia Flash. Esta funcin merece un aparte por sus caractersticas y le dedicaremos un captulo ms adelante. En la figura 5.6 puede ver el cuadro de dilogo Exportar.
Figura 5.6. Fireworks permite exportar sus trabajos como archivos Photoshop, Illustrator 7 o Macromedia Flash
11. Presentacin preliminar de la exportacin. La opcin descrita anteriormente permite exportar su documento con los valores que dej guardados en el asistente Exportar. Si opta por previsualizar este estado, Fireworks le mostrar el editor de propiedades de la opcin Exportar. Desde este editor podr verla presentacin preliminar de su documento antes de exportarlo. Aqu an est a tiempo de realizar cambios sugerentes. 12.Asistente de exportacin. Se trata de un magnfico asistente que le guiar paso a paso en el proceso de exportacin de un documento activo, vase figura 5.7. Ahora ya ve como muchas de las opciones estn indexadas a otras que contienen la misma funcin. En este caso se trata de una funcin ms de exportar, 144
13. Procesar por lotes. Esta opcin es bastante interesante, vase figura 5.8. Desde aqu podr ejecutar operaciones por lotes en varios archivos. Si selecciona esta opcin Fireworks le mostrar el cuadro de dilogo Abrir. Desde este cuadro podr seleccionar todos los elementos que desea, para ms adelante procesar por lotes todo lo que ha seleccionado. Citemos por ejem145
plo el comando Exportar. En este sentido podr elegir varios archivos con diferentes extensiones y exportarlos todos a una sola extensin, automticamente sin necesidad de recurrir a la previsualizacion y edicin de cada uno de ellos. 14. Ejecutar archivo de comandos. Esta opcin le permite ejecutar un procesamiento por lotes mediante un archivo de comandos. 15.Presentacin preliminar en el navegador. Cuando tiene un documento activo casi terminado, siempre es interesante ver cmo queda despus de exportarlo como un documento HTML. Con esta funcin podr visualizar el documento activo en su navegador habitual. 16.Configurar pgina. Gracias al cuadro Configurar pgina podr cambiar las opciones de impresin, vase figura 5.9.
ra 5.10. Recuerde que Fireworks le permite exportar un documento como contenido HTML. En este sentido le permite configurar las opciones generales, de tabla y de contenido especfico del documento. 19. Salir. Indudablemente se trata del comando que permite salir de la aplicacin, en este caso de Fireworks, por lo que poco ms se puede decir de l.
17.Imprimir. Simple y llanamente se trata de la opcin que permite imprimir su documento en papel. 18. Configuracin de HTML. Con esta opcin Freworks abrir el editor de configuracin de HTML, vase figu146
1. Deshacer. Con esta opcin podr anular la ltima accin realizada. Puede anular hasta ocho pasos. La opcin deshacer siempre se adaptar a la accin realizada en ltima instancia. De ese modo se le indicar qu accin desea deshacer. 2. Rehacer. Con esta opcin puede volver a realizar la accin previamente anulada. 147
3. Cortar. Con esta opcin podr cortar cualquier seleccin y situarla en el portapapeles, por lo que posteriormente podr pegar la seleccin en otro lugar del documento. 4. Copiar. Una funcin determinante que permite copiar texto, objetos o selecciones, copias que quedarn registradas en el portapapeles. 5. Copiar como vectores. Con esta opcin podr copiar datos de vectores en el portapapeles. 6. Copiar cdigo HTML. Con esta opcin podr copiar cdigo HTML en el portapapeles para pegar ms adelante dicho cdigo en archivos HTML, por ejemplo 7. Pegar. Permite pegar en el documento lo que las fun ciones anteriores haban copiado en el portapapeles. 8. Suprimir. Si selecciona un objeto, un texto o un grupo de objetos y despus hace clic en esta funcin, todo lo que ha seleccionado se borrar del documento activo. 9. Pegar como mscara. Esta opcin le permite utilizar los datos del portapapeles para enmascarar el objeto seleccionado en ese momento. 148
Dreamweaver.
10. Pegar dentro. Esta opcin nueva permite pegar el contenido del portapapeles en el objeto seleccionado. 11. Pegar atributos. Esta opcin le permite pegar los atributos del objeto previamente copiado. 12. Seleccionar todo. Si lo necesita, podr seleccionar todos los objetos del documento con slo hacer uso de esta opcin. 13.Seleccionar Similar. Esta opcin le permite seleccionar pxeles con colores similares a los de la seleccin actual. 14. Seleccionar nivel superior. Esta opcin selecciona el grupo o smbolo que contiene la seleccin actual. 15.Seleccionar inferior. Siguiendo la estrategia de los selectores anteriores, con esta opcin podr seleccionar elementos dentro del grupo o smbolo seleccionado. 16.Anular seleccin. Puede anular la seleccin de todos los objetos. 17.Duplicar. Cuando necesite crear un objeto idntico al creado un momento antes lo ideal es hacer un duplicado del mismo, cosa que podr hacer limpiamente con esta opcin. 18. Clonar. Con funciones idnticas a la funcin anterior, sta permite clonar cualquier imagen u objeto seleccionado. En este caso se duplica la seleccin exactamente sobre el original. 19.Buscar y reemplazar. Desde aqu podr activar el panel buscar y reemplazar. 20.Recortar Mapa de bits seleccionado. Esta opcin le permite recortar los bordes de un objeto de Mapa de bits. 21. Recortar documento. Puede recortar el documento por la seleccin actual, es decir, si tiene seleccionado un objeto pequeo, al hacer uso de esta opcin su documento se reducir al tamao de ese objeto seleccionado. 22.Preferencias. Si selecciona esta opcin, Fireworks le mostrar el editor Preferencias, vase figura 5.12, desde donde podr ajustar las preferencias de la opcin Deshacer,
Modificar los colores predeterminados del documento o Modificar otras muchas preferencias, la enumeracin de las cuales no
cabra en este libro. Con esto le invitamos a acceder a este editor para personalizar el modo de trabajar con
Fireworks 4.
149
desde el editor de Mtodos abreviados de teclado segn sus necesidades. En la figura 5.13 puede ver el cuadro de dilogo Mtodos abreviados de teclado.
23.Mtodos abreviados de teclado. Son los denominados atajos de teclado. Recuerde que los atajos de teclado le permiten realizar operaciones de una forma ms directa y ms rpida. Fireworks tiene asignados los atajos de teclado por defecto, pero puede modificarlos 150
1. Aumentar. Si pretende ver mejor ciertas zonas del documento activo, sta es la opcin ideal para aumentar el tamao de los objetos sin tener que modificarlos. 151
2. Reducir. A1 contrario de la opcin anterior, esta funcin reduce el tamao de los objetos observados. De esta forma podr tener una idea exacta de todos los objetos que se encuentran localizados en el documento. 3. Nivel de aumento. Se trata de una aplicacin de Zoom anteriormente descrita, pero de alguna manera magnificada. Si elige el valor 100 % de magnificacin resulta el tamao real de los objetos. La magnificacin permite aumentar el tamao del documento sin tener que desplazarse a lo largo de l para ver los diferentes objetos. En la figura 5.15 puede ver el Submen de esta opcin.
6. Pantalla completa. Desde aqu podr seleccionar la calidad de visualizacin del documento, entre documento completo o visin de trazados nicos sobre el lienzo. En definitiva, esta opcin cambia entre la presentacin a toda pantalla y la presentacin preliminar. 7. Ocultar la seleccin. Esta opcin hace invisible la se leccin. 8. Mostrar todo. Se trata de la aplicacin inversa a la anterior. Con esta opcin se muestran todos los elementos invisibles. 9. Reglas. Una buena idea para quienes maximicen la importancia de la situacin de los objetos. Con esta funcin se muestra una regla de medida sobre el documento activo y a los lados del mismo; si hace clic desde ella hacia los objetos ver unas guas que le facilitarn enormemente la tarea al colocar los objetos.
Figura 5.15. Vista del Submen Nivel de aumento 4. Encajar seleccin. Dentro de las combinaciones de Zoom y como alternativa a esta herramienta, la siguiente aplicacin permite encajar el Zoom del documento en la seleccin, es decir aumentar la seleccin actual para que ocupe la ventana. 5. Encajar todo. Hay veces que el nmero de objetos es identificativo de volumen, y por ello algunos escapan del campo de visin de trabajo. Con esta aplicacin tendr todos los elementos reunidos dentro de un rectngulo adaptado al tamao del documento.
152
Figura 5.16. Vista del Submen Cuadrcula 10. Cuadrcula. Otro gran acierto de Fireworks, es la opcin de mostrar cuadrculas editables sobre la zona de trabajo. Estas cuadriculas son realmente efectivas sobre documentos que contengan mltiples objetos alineados. En la figura 5.16 puede ver el Submen Cuadrcula as como el editor de cuadricula en la figura 5.17.
153
11. Guas. Puede aadir guas a su documento. En la figura 5.18 puede ver el Submen de esta opcin. Tambin desde esta opcin podr editar las propiedades de dichas guas mediante un sencillo editor, vase figura 5.19. 12. Guas de divisin. Cuando estamos creando un mapa de imagen troceada, esto es, dividido en secciones, se muestran sobre la zona de trabajo una serie de guas que identifican cada bloque. Si en determinado momento le resulta molesto verlas, podr ocultarlas con esta funcin. 13. Solapamiento de divisin. Esta opcin muestra u oculta el solapamiento de divisin. 14. Ocultar bordes. Puede mostrar u ocultar los tiradores de la seleccin. 15.Ocultar paneles. Con esta opcin podr mostrar u ocultar todos los paneles. 16. Barra de estado. Puede mostrar u ocultar la barra de estado. Dicha barra se encuentra en la parte inferior de
Fireworks 4.
155
3. Convertir en smbolo. Con esta opcin podr convertir la seleccin en un smbolo. En este caso se muestra de nuevo el cuadro de dilogo antes mencionado. Esta opcin es heredada de Flash 5. 4. Bibliotecas. Fireworks le permite acceder a Bibl iotecas donde encontrar objetos y smbolos ya creados. Una vez abierta la Biblioteca podr seleccionar y arrastrar un smbolo hacia el documento. El uso de Bibliotecas le permite el intercambio de smbolos entre Fireworks, Dreamweaver y Flash. En la figura 5.23 puede ver una de estas Bibliotecas.
2. Nuevo smbolo. Puede insertar un nuevo smbolo. Cuando hace uso de esta opcin Fireworks le muestra un cuadro de dilogo, vase figura 5.22, desde el que podr introducir las propiedades del smbolo. Este editor es idntico al empleado en Flash 5. Puede elegir entre crear un grfico, una animacin o un botn. 156
5. Zona interactiva. Con esta opcin podr crear una zona interactiva con la forma de la seleccin. Una zona interactiva le permite aadir un link de pgina u archivo. Las zonas interactivas permiten aadir com157
portamientos de botn. Un comportamiento puede ser un intercambio de imagen al pasar el puntero del ratn sobre dicha zona. Puede aadir barras de estado o Mens emergentes. 6. Divisin. Esta opcin crea una divisin con la forma de la seleccin. Las zonas de divisin pueden tener implcitos comportamientos de botn; adems de los anteriormente descritos, una divisin puede aadir un efecto Rollover. 7. Men emergente. Con esta opcin podr crear un Men emergente JavaScript. En la figura 5.24 puede ver el
11.Fotograma. Otra de las potencias reconocidas de esta aplicacin 32 Bits, es la creacin y fcil exportacin de Gif animados o Banners publicitarios. Para este tipo de creaciones es obvio incluir la guinda en el pastel, esto es, la posibilidad de trabajar con fotogramas o cuadros. Con esta opcin podr insertar un nuevo fotograma detrs del actual.
8. Imagen. Como en toda aplicacin de dibujo o de retoque fotogrfico, es posible insertar una imagen en el documento. Esto significa que puede insertar imgenes de su disco duro. 9. Mapa de bits vaco. Con esta opcin podr crear un Mapa de bits vaco. 10.Capa. Como se dijo oportunamente, Fireworks es una aplicacin vectorial diseada especialmente para crear documentos interactivos y avanzados para la Web, como ms sencillamente la llamamos. Esto significa que puede crear grficos compuestos por varias capas. Con esta opcin podr insertar una nueva capa despus de la actual.
158
Tambin hay que decir que la mayora de las modificaciones ms empleadas estn disponibles en el men que se
159
despliega cuando se hace clic con el botn derecho del ratn. Pero tambin es importante destacar todas las opciones disponibles desde este Men, que son las siguientes: 1. Tamao de la imagen. Esta opcin cambia de tamao el contenido del documento. Para ello Fireworks le muestra el editor Tamao de imagen, vase figura 5.26, desde donde podr modificar la dimensin en pxeles o el tamao de impresin entre otras cosas.
2. Tamao del lienzo. Esta opcin le permite cambiar los bordes del documento. Una vez ms Fireworks le mostrar un editor de propiedades, vase figura 5.27, desde donde podr modificar el tamao del lienzo desde muchos ngulos y planos. 3. Color del lienzo. Puede cambiar el color de fondo del lienzo. Se le mostrar un pequeo editor, vase figura 5.28, desde donde podr seleccionar el color deseado.
4. Recortar el lienzo. Esta opcin recorta el documento para ajustarse a los pxeles utilizados. 5. Ajustar lienzo. Puede ajustar, el documento a los pxeles utilizados. 6. Rotar lienzo. Esta opcin le permite rotar el lienzo utilizado. Esa rotacin afecta por entero a todo el documento. Puede rotarlo de 90 a 180. En la figura 5.29 puede ver el Submen Rotar. 7. Animar. La primera funcin de esta opcin le permite, por ejemplo, convertir la seleccin en un smbolo de animacin. Cuando entra en el modo Configuracin podr modificar los valores del smbolo de animacin seleccionado. En la figura 5.30 puede ver el Editor
Animar.
seleccin de los pxeles o proporcionar bordes suaves a la seleccin de pxeles. Adems de esto podr expandir, contraer y suavizar la seleccin de pxeles entre otras cosas. En la figura 5.31 puede ver el Submen Recuadro.
8. Smbolo. Con esta opcin podr editar las propiedades del smbolo o crear instancias entre las instancias seleccionadas. Estas funciones estn implcitas en la opcin interpolar. 9. Editar Mapa de bits. Esta opcin activa el modo de Mapa de bits para la imagen seleccionada. 10. Salir del modo Mapa de bits. Esta opcin le permite volver al modo vector. 11.Recuadro. La opcin Recuadro est llena de funciones. As, podr seleccionar pxeles con colores similares a los de la seleccin actual, invertir la 162
12. Mscara. La opcin mscara consta de muchas y variadas funciones tal y como sucede con la opcin anterior. Por ejemplo, en esta ocasin podr rellenar la mscara con pxeles de color blanco, utilizar los datos del portapapeles para enmascarar el objeto seleccionado o conmutar el uso de la mscara por el objeto seleccionado. Las opciones con varias funciones estn provistas de un Men emergente donde encontrar todas las funciones expandidas, vase figura 5.32. 163
14.Convertir en Mapa de bits. Puede fusionar los elementos seleccionados en un nico Mapa de bits. 15. Allanar capas. Esta opcin le permite combinar todas las capas en una sola capa. 16.Transformar. Como indica su nombre, la opcin Transformar le permite transformar un objeto seleccionado entre una gran variedad de ellos. De esta forma y desde un Men emergente, vase figura 5.34, podr escalar, rotar, inclinar o distorsionar el objeto seleccionado.
13.JPEG selectivo. Esta opcin le permite, entre otras cosas, almacenar el recuadro actual de seleccin como el rea de calidad selectiva JPEG as como editar la configuracin de JPEG selectivo. Para ello Fireworks le muestra un pequeo cuadro de dilogo Configuracin JPEG selectivo tal como puede apreciar en la figura 5.33.
17. Organizar. Una curiosa funcin que permite ordenar los diferentes objetos con relacin a su profundidad. Es decir, con esta opcin podr situar los diferentes objetos en distinto plano; as podr poner la seleccin en primer plano, desplazarla hacia delante o enviarla hacia atrs tal como se puede ver en la figura 5.35.
165
18.Alinear. Es posible alinear los diferentes objetos del documento activo, adoptando posiciones concretas y justificndolas. Con esta opcin tendr un nuevo Men emergente, vase figura 5.36, desde donde podr seleccionar desde la opcin alinear los bordes izquierdos de los objetos de seleccin hasta separar los objetos verticalmente de manera uniforme. 19. Unir. Esta opcin le permite unir los objetos para crear un trazado compuesto. 20. Separar. Esta opcin separa los elementos de un trazado compuesto. 21.Combinar. Podr combinar reas de los trazados seleccionados, crear intersecciones o perforar el trazado superior seleccionado. A partir de dos trazos libres, podr obtener resultados realmente espectaculares. En la figura 5.37 puede ver el contenido de esta opcin.
22.Modificar el trazado. Puede modificar todo lo que acontece con los trazados. Por ejemplo, con la primera funcin de esta opcin podr eliminar puntos innecesarios de un trazado. Otras funciones son la posibili167
dad de expandir un trazado para crear una forma cerrada o reducir el contorno de un trazado entre otras cosas. En la figura 5.38 puede ver el Submen Modificar el trazado.
23.Agrupar. Una de las utilidades ms destacables dentro del panel modificaciones es sta. Se trata de seleccionar diferentes objetos y agruparlos en uno solo. Esta funcin es determinante cuando se desea modificar el tamao de un grupo de objetos en una misma proporcin o cuando se desea exportar diversos objetos como un nico fichero. 24.Desagrupar. Contrariamente a la anterior, esta opcin posibilita desagrupar lo antes hecho. Pero cuidado, no permite desagrupar imgenes ya exportadas.
Figura 5.40. Este es el Editor de Texto el cual le simplificar an ms si cabe las cosas 169
168
1. Fuente. A pesar de disponer de un editor para estas cosas, lo cierto es que si selecciona un texto y aplica una nueva fuente desde este men desplegable, vase la figura 5.41, podr aplicar el nuevo formato sin ms.
3. Estilo. El estilo tiene otro importante papel en el rico contenido del texto, ya que desde este men desplegable, vase figura 5.43, tendr nuevamente opcin a elegir entre estilos llanos, itlicos o negritas.
2. Tamao. Tambin puede elegir el tamao del texto desde este men desplegable, vase figura 5.42. 170
4. Alinear. La alineacin del texto es otro factor, no menos importante. Desde este men podr alinear el texto hacia la izquierda, justificadamente o centrarlo, entre otras opciones. En la figura 5.44 puede ver el Submen Alinear. 171
ciones pueden resultar repetitivas en otros momentos del trabajo, pero si utiliza estos comandos acelerar su trabajo. Puede editar todos los comandos, cambiarles el nombre o eliminarlos. En una versin posterior se espera un mayor nfasis en el uso de comandos en todas las aplicaciones de
Macromedia.
5. Editor. Todas las opciones antes mencionadas estn presentes en este editor. Es el editor mencionado al principio y desde el cual normalmente se escribe el texto con todos los parmetros posibles en un mismo entorno de trabajo. Podr modificar un texto sin l pero lo ms recomendable es emplearlo como principio. 6. Unir al trazado. Esta opcin permite que un texto se amolde a un trazado seleccionado. 7. Separar del trazado. Como su nombre indica, esta opcin separa el texto del trazado seleccionado. 8. Orientacin. Esta opcin le permite orientar los caracteres del texto respecto a los trazados. Por ejemplo, si elige la primera opcin del Men emergente, Rotar alrededor del trazado, podr rotar los caracteres del texto en sentido perpendicular al trazado. 9. Invertir direccin. Con esta opcin podr invertir la direccin del texto en un trazado. 10. Convertir en trazados. Podr convertir el texto en trazados editables si emplea esta opcin.
1. Editar lista de comandos. Esta opcin le permite cambiar los nombres de los comandos o eliminarlos. Para ello Fireworks le muestra un cuadro de dilogo, vase figura 5.46, desde donde podr seleccionar un comando determinado y editarlo. 173
2. Conjuntos de diseo de paneles. Desde aqu podr seleccionar el tamao del panel y encontrar tres valores de resolucin. 3. Creativo. En esta opcin encontrar los comandos Convertir a escala de grises, convertir a tonos sepia o crear un marco de foto. Como puede ver, son tareas automatizadas. 4. Diseo de paneles. Con esta opcin podr disear nuevos paneles. Para ello deber nombrar primero su nuevo panel. 5. Documento. Los comandos que encontrar en esta opcin le permiten trabajar directamente con capas y fotogramas. Entre las opciones ms destacadas se encuentran la opcin bloquear otras capas e invertir todos los fotogramas entre otras. 6. Web. Con esta opcin encontrar comandos interesantes que estn directamente asignados a estilos Web. Se destaca por ejemplo la posibilidad de crear una paleta compartida o definir etiquetas ALT.
1. Repetir Xtra. Se trata de una funcin curiosa y a la vez necesaria si lo suyo es repetir varias veces una misma operacin. Esto es, si aplica algn tipo de filtro ptico sobre un objeto seleccionado, ste constar en la funcin Repetir Xtra como valor por defecto. As, la prxima vez que quiera aplicar el mismo efecto ptico que ha olvidado, le bastar con hacer clic aqu para recuperar dicho efecto. 2. Ajustar color. Puede ajustar el color de un objeto muy variadamente . Por ejemplo, modificar el brillo y el contraste, as como ajustar el color de las curvas o invertirlo entre otras opciones. 3. Desenfocar. Los filtros desenfocar tambin desempean un papel importante en el Men Xtras, en este caso podr crear varios tipos de desenfoque del objeto seleccionado. 4. Otro. Dentro de esta opcin encontrar dos opciones como Buscar bordes o Convertir en alfa. 5. Perfilar. Puede perfilar o difuminar una mscara como una variedad ms al crear efectos especiales sobre un objeto seleccionado. 6. Eye Candy 4000 LE. La versin de Fireworks 4 instala esta aplicacin en modo Shareware. Eye Candy 4000 LE, permite crear interesantes efectos visuales sobre los objetos. Pruebe su capacidad desde el editor de Eye Candy.
aplicacin le permitir expandir sus necesidades de retoque fotogrfico. En anteriores versiones de Fireworks exista PhotoOpti(-s donde encontraba todo tipo de filtros pticos, pero una vez que se prueba Eye Candy se da uno cuenta que en ese aspecto, Fireworks 4 tambin ha mejorado mucho. Por ahora describiremos solamente el contenido de este men. 174
ver/ocultar cada uno de los detalles que puede ver en Desktop. Por otro lado, desde este men desplegable, puede tener una idea exacta de qu paneles o barras de tareas estn activas en cada momento, por lo que cualquier cambio en el panel de trabajo, queda automticamente reflejado aqu. En la figura 5.48 puede ver este Men.
3. Herramientas. Esta opcin muestra u oculta la barra de herramientas o paleta de herramientas de Fireworks. 4. Trazo. Esta opcin muestra u oculta el panel Trazo. 5. Relleno. Esta opcin muestra u oculta el panel o f i cha Relleno. 6. Efecto. Esta opcin muestra u oculta el panel o ficha Efecto. 7. Informacin. Esta opcin muestra u oculta el panel o ficha Informacin. 8. Optimizar. Esta opcin muestra u oculta el panel Optimizar. 9. Objeto. Esta opcin muestra u oculta el panel o ficha objeto. l0.Comportamientos. Esta opcin muestra u oculta el panel o ficha Comportamientos. 1l.Mezclador de colores. Esta opcin muestra u oculta el panel Mezclador de colores. 12. Muestras. Esta opcin muestra u oculta el panel o f i -cha Muestras. 13.Tabla de color. Esta opcin muestra u oculta el panel o ficha Tabla de color. 14. Opciones de herramienta. Esta opcin muestra u oculta el panel o f icha Opciones de herramienta. 15. Capas. Esta opcin muestra u oculta el panel Capas. 16.Fotogramas. Esta opcin muestra u oculta el panel o ficha Fotogramas. 17.Historial. Esta opcin muestra u oculta el panel o f i -cha Historial. 18. Estilos. Esta opcin muestra u oculta el panel Estilos. 19.Biblioteca. Esta opcin muestra u oculta el panel o ficha Biblioteca. 20.URL. Esta opcin muestra u oculta el panel o ficha 21. Buscar y reemplazar. Esta opcin muestra u oculta el panel Buscar y reemplazar. 22. Historial de proyecto. Esta opcin muestra u oculta el panel o ficha Historial de proyecto. Como habr visto, no son precisamente abundantes en este caso, los detalles de cada funcin, lo que se debe a que dichas funciones slo afectan a ver/ ocultar el panel o funcin deseada. De ah la escasez del texto, pero era forzoso mencionarlos. 177
URL.
1. Nueva ventana. Lejos de representar un comando ver/ ocultar, con esta accin tendr la posibilidad de crear una nueva ventana con el mismo diseo. 2. Barra de herramientas. Desde aqu podr mostrar u ocultar las barras de herramientas Principal y Modificar. 176
partir del siguiente captulo, sin embargo y valga la redundancia, a medida que aprenda a manejar Fireworks, descubrir nuevos contenidos que lo asombrarn. Por ejemplo, ya conoce la herramienta Trazo y de alguna forma intuye a estas alturas cmo crear un Trazo. Asimismo, seguramente recuerda que la herramienta Trazo est interpolada directamente en el panel Trazos, e indexada a los paneles Relleno y Efecto. Pero esto no significa que conozca realmente la herramienta Trazo y su contenido, o lo que es lo mismo, que sea capaz de hacer con ella algo ms que simples trazos. Cuando llegue el momento de conocer ms a fondo esta herramienta, mientras practica con ella descubrir cun importantes son los atributos de un trazo y hasta dnde puede llegar. En definitiva, queremos transmitirle la conviccin de que an le queda mucho por ver, aunque de entrada ya conoce Fireworks. A que resulta paradjico? Espere pues al siguiente captulo que es algo as como una reincidencia de este pero llevado a la prctica. Cuando lo haga entrar en una nueva dimensin y empezaremos a explicarle de forma magistral cmo dominar Fireworks 4.
Aunque ir descubriendo nuevos contenidos de Fireworks a lo largo de esta Gua Prctica, es evidente que hasta aqu se le ha mostrado de una manera sencilla qu es y qu elementos conforman Fireworks 4. Con esos elementos ya puede empezar a trabajar con esta aplicacin de dibujo. Ello ser a
178
6.1. Introduccin
En este preciso instante acaba el tour y empieza la aventura. Ya conoce cmo es Fireworks 4 y, por lo tanto, es el momento de empezar a trabajar con l. Lo primero es iniciar Fireworks y luego conocer todas las formas posibles para crear un nuevo documento y cmo importar un documento desde otra aplicacin. Conocer estos tres principios bsicos en este captulo. Se ha dicho ms de una vez que el aprendizaje sera progresivo y completamente estructurado porque slo de esa forma le ser posible comprender todo lo que deseamos que entienda. Evidentemente, el final le llevar a un conocimiento total de esta excelente aplicacin. El primer paso es iniciar Fireworks 4. Para ello solamente necesitar un par de clics del ratn y el resto ir solo, aunque es obvio que, por su complejidad, muchas aplicaciones son difciles de entender a primera vista. Fireworks es una de esas aplicaciones que muestran un buen nmero de cosas en pantalla, pero que no son de difcil aplicacin a pesar de dar esa impresin. Sin embargo, de entrada se tiene la sensacin de que no se sabe nada y en parte es cierto, ya que todo el contenido de Fireworks estar desactivado si no se crea un documento nuevo. Esto puede parecer balad, pero intentamos llegar al mayor nmero de lectores ms o menos experimentados en esta aplicacin. A1 final, todos nuestros lectores agradecern nuestra postura a la hora de escribir esta Gua. Fireworks puede partir de un nuevo documento creado 0 bien de una imagen importada. En ambos casos la puesta en escena puede diferir bastante, por ello a lo largo de este captulo caeremos en la tentacin de explicarle algo ms que iniciar Fireworks e importar un documento. En realidad, le 181
revelaremos algunos trucos para adaptar los contenidos al documento de Fireworks. Ello implica conocer el lienzo de trabajo, qu elementos pueden intervenir en el propio documento y qu extensiones reconoce Fireworks. En cualquier caso, las respuestas estn en las pginas que siguen.
Figura 6.1. Puede iniciar Fireworks 4 desde aqu o desde el escritorio de Windows
Figura 6.2. Seguramente sta no sea la nica vez que vea esta presentacin
183
2. Cuando haya iniciado Fireworks observar la paleta de herramientas desactivada y que no podr acceder a su contenido. Esto es porque debe crear un nuevo documento. Para ello seleccione la opcin Nuevo del Men Archivo. En ese momento aparecer el cuadro de propiedades Documento nuevo tal y cmo puede apreciar en la figura 6.2. 3. Introduzca los valores que crea necesarios en las casillas Ancho, Alto y Resolucin de la opcin Tamao del 1 i en z o tal como se puede ver en la figura 6.3. En esta opcin se le mostrarn los valores en pxeles, pulgadas o centmetros. Observar tambin que se le muestra la capacidad del archivo final.
Figura 6.5. Puede seleccionar un color de fondo para su documento Figura 6.3. Introduzca aqu los valores del documento
4. Seleccione cmo quiere que sea el fondo del lienzo en esta opcin. Para ello podr elegir entre Blanco, Transparente o Personalizado, vase figura 6.4.
Ahora ya conoce cmo iniciar Fireworks. Es el primer paso para comenzar a trabajar con l. Ya tiene un documento activo, pero no conoce todava las nuevas capacidades ni otras formas de iniciar Fireworks; eso lo ver ms adelante en este mismo captulo. Antes conozca algunas propiedades de Documento e imagen.
5. Si opta por un color Personalizado haga clic en el icono de color para acceder a la paleta de colores, vase figura 6.5. Seleccione el color deseado y acepte. Ahora ver aparecer el lienzo de trabajo, el cual se sita justo al lado de la paleta de herramientas y debajo de los Mens. Observar que ya est activado el contenido de la paleta de herramientas.
184
dr trabajar con cualquiera de ellos en el momento que desee, as como guardarlos o simplemente cerrarlos sin que esto afecte a otros documentos activos en ese momento. Tambin puede modificar el tamao o las propiedades de un documento activo mientras trabaja con l. Lo ver en el siguiente bloque.
deseado. Sin embargo, los desarrolladores de Macromedia optaron por incluir este conjunto de opciones / funciones en un slo comando llamado Tamao de imagen. Localizada en el men emergente Modificar, esta opcin le permite modificar el tamao de la imagen tanto en el documento como en la versin impresa. Si hace clic en esta opcin ver cmo se lanza una nueva ventana de dilogo, la cual le facilita realizar importantes cambios sobre la imagen seleccionada. As, en la parte superior de este cuadro de dilogo, puede destacar la enumeracin de los pxeles en accin tanto en formato horizontal para cambios nicamente en este sentido, como en formato vertical, para cambios en este otro sentido. Esto significa que tambin podr deformar una imagen.
Debajo, tras la numeracin del nuevo tamao que por defecto ser el original, es posible introducir las medidas exactas de lo que quiere imprimir ms adelante "y que le valdr como resolucin grfica". Para ello se le facilitan datos relativos a medidas en pulgadas, centmetros o pxeles, en este ltimo caso se seala que tambin puede elegir el 187
186
nmero de pxeles por pulgada o por centmetro. En cualquier caso, y aunque ya haya comprendido lo que queremos decir, en las siguientes lneas explicaremos los pasos a seguir para modificar el tamao de una imagen: 1. Seleccione primero la imagen que desea modificar. 2. En el men modificar seleccione la opcin Tamao de la imagen. Fireworks le mostrar ahora el cuadro de dilogo o el editor de propiedades Tamao de imagen tal como puede ver en la figura 6.6. 3. Si desea transformar o modificar el ancho de la imagen, deber insertar un nuevo valor en la ventana Pxeles, en la opcin Dimensin en pxeles si tiene esta opcin activada, vase figura 6.7. En caso contrario tendr activada la opcin Porcentaje. Esta ltima opcin es ms sensible a los cambios.
cierta diferencia con la opcin anterior, ya que ahora los valores se encuentran en pulgadas, en porcentaje o en centmetros. Introduzca los valores necesarios para efectuar los cambios en la imagen. 6. Fjese que al final del cuadro de dilogo o editor, encontrar en la opcin Tamao de impresin la opcin Resolucin. Esto le permite modificar incluso el tipo de resolucin que desea ver impresa. 7. Finalmente, cabe destacar que desde aqu puede restringir las proporciones as como volver a muestrear la imagen cada vez que realice un cambio en ella. El muestreo como tal puede ser bicbico, bilineal, suave o el vecino ms cercano. Como puede ver, los cambios que realice desde aqu le evitarn tener que utilizar herramientas de transformacin que son ms imprecisas.
Figura 6.7. Vista de la opcin Dimensiones en pixeles con los valores Ancho y Alto
4. Si desea modificar la altura de la imagen proceda a insertar los nuevos valores en la ventana que sigue a la antes descrita. Tambin aqu encontrar la opcin pxeles y Porcentaje. 5. En la opcin Tamao de la impresin encontrar de nuevo las mismas ventanas antes descritas, vase figura 6.8, es decir, las que le permiten modificar el ancho y alto de la imagen, pero en ese caso slo en la versin que se va a imprimir. En este sentido notar
188
lice desde este editor. De esa manera podr aumentar la altura del lienzo a partir del borde deseado, es decir, encontrar un anclaje de arriba hacia abajo y de abajo hacia arriba. Esto significa que podr modificar la altura del lienzo con respecto a su contenido y sin perjuicio del mismo. Para terminar con este editor cabe sealar que los valores estndar quedan reflejados en la parte ms baja del editor. En un recuadro se le indican en todo momento los valores actuales del lienzo. En las siguientes lneas tiene un claro ejemplo de cmo modificar el tamao del lienzo. 1. Seleccione la opcin Tamao del lienzo del Men emergente Modificar. Fireworks le mostrar ahora el cuadro de dilogo Tamao del lienzo, vase figura 6.9. Observe que tiene definido el anclaje central.
3. Si, en cambio, desea modificar el lienzo en un sentido u otro, seleccione el anclaje necesario. Por ejemplo, si quiere modificar el ancho del lienzo y mantener la imagen a la izquierda del mismo, deber seleccionar el Anclaje que muestra esta posibilidad y que est a la izquierda del anclaje central.
Figura 6.9. Como se puede adivinar tambin es posible cambiar el tamao del lienzo mientras se est trabajando
2. Si desea que la imagen permanezca en el centro del lienzo cambie los valores de ancho y alto y deje activado el anclaje central. Tras aceptar ver cmo el lienzo ha cambiado de tamao y la imagen permanece en el mismo centro.
190
Figura 6.10. Tambin puede modificar el color del lienzo mientras est trabajando
Cuando seleccione esta opcin, Fireworks le mostrar un cuadro de dilogo desde donde podr seleccionar el nuevo color de fondo del lienzo. Background o fondo por defecto, puede alterarse o sustituirse por cualquiera de los
191
colores que se ofrecen desde este editor de fondo y tras el despliegue del panel Colores. Si elige el modo Transparencia, la imagen se representar sin fondo alguno. Para cambiar el color de fondo del lienzo debe hacer lo siguiente: 1. Seleccione la opcin Color del lienzo, del Men emer gente Modificar. 2. Ahora estar delante de un pequeo editor denominado Color del lienzo y tendr la opcin Blanco activada por defecto, vase figura 6.10. Puede dejarlo as, seleccionar un fondo transparente o seleccionar otro color cualquiera si activa la casilla Personalizado. 3. Si hace clic en el icono de color se le mostrar el panel de colores. Seleccione un color y acepte. El color del lienzo habr cambiado.
1. Inserte una imagen en su documento con la opcin Insertar Imagen. 2. Seleccione ahora la opcin Rotar lienzo del Men Modificar. En el Submen seleccione la opcin Rotar 90 en sentido horario. Ver cmo el lienzo y la imagen acaban de rotar 90 en el sentido de las agujas del reloj, vase figura 6.12.
Figura 6.12.
Figura 6.11. Si tiene ya creada la imagen definitiva puede recortar el lienzo en base a esta 192
3. Seleccione ahora, por ejemplo, Rotar 90 en el sentido contrario. Observar ahora que el lienzo y la imagen retornan a su posicin original. Ahora ya conoce todas las formas de modificar el lienzo de trabajo. Esto le ayudar a personalizar su modo de traba-
jar. Se ha explicado adems cmo modificar tambin las imgenes, lo que lo complementa de forma ideal. Iniciar Fireworks no pasa solamente por crear un documento nuevo; como ha podido ver, la flexibilidad en el trabajo con esta aplicacin le permite acomodarse antes de empezar a trabajar. En las siguientes lneas conocer otros cambios del lienzo, pero slo tienen efecto visual.
Posando el puntero del ratn en la opcin Nivel de aumento, ver cmo aparecen a un lado once posibles aumentos valorados en porcentajes. Habitualmente Fireworks muestra los objetos con una relacin del 50%, pero es importante seleccionar la magnificacin de 100% si quiere tener una idea clara del tamao final de su trabajo. 3. Reglas. Cuando desea crear un dibujo a escala o, simplemente, desea alinear correctamente todos los objetos sobre el lienzo, en el caso de dibujar un plano del interior de una casa por ejemplo, es necesario emplear la opcin Regla para determinar cada una de las posiciones de los objetos. Tambin, en la creacin de imgenes en movimiento es indispensable tener activada esta funcin ya que le permitir colocar con exactitud los nuevos elementos en movimiento. En cualquier caso en la figura 6.14 puede ver esta opcin activa. Esta regla representa el valor exacto que ha elegido al crear el documento nuevo, as si ha elegido la medida en centmetros y se magnifica el lienzo a un valor de 100%, obtendr los valores exactos correspondientes a 1 mm por cada lnea de control. 195
6. Guas de divisin. Cuando est creando un mapa de imagen troceada, esto es, dividida en secciones, se muestra sobre la zona de trabajo una serie de guas que identifican cada bloque. Si en determinados momentos le resulta molesto verlas podr ocultarlas con esta funcin. 7. Ocultar bordes. Puede mostrar u ocultar los tiradores de la seleccin. 8. Ocultar paneles. Con esta opcin podr mostrar u ocultar todos los paneles. Como puede ver, todas las opciones descritas tienen solamente la funcin de ayudar en la tarea del diseo y para nada afectan las propiedades del dibujo. Sin embargo es importante conocerlas, ya que gracias a ellas puede personalizar su modo de trabajar. Cuando se crean dibujos precisos es necesario utilizar el denominado Zoom para entrar en detalles del grfico, como tambin es til usar la Cuadrcula para alinear correctamente los objetos en el lienzo. Describirlos aqu es parte de nuestro propsito de darle a conocer todas las opciones del lienzo. Tras saber cmo iniciar Fireworks, era inevitable implicarse en todas estas opciones que le ayudarn a comprender mejor la flexibilidad de Fireworks 4.
Figura 6.14. Aqu se muestra la Regla en el documento activo, muy til para alinear correctamente varios objetos aunque aqu slo mostramos un personaje
4. Cuadrcula. Tambin denominada tendido elctrico, se trata de una cuadrcula visible sobre el lienzo, vase figura 6.15, con la sana intencin de facilitar al usuario la tarea de colocar objetos sobre el lienzo. Disponible desde el men Ver, esta opcin es indispensable para Mapas de imagen complicados en los que la posicin de los objetos es relevante para su trabajo.
5. Guas. Puede aadir guas a su documento. Tambin desde esta opcin podr editar las propiedades de dichas guas mediante un sencillo editor. 196
197
comportamiento. En ese caso puede modificar tambin el color de la divisin. En los dos casos en que puede cambiar el color, le muestra la paleta de colores. Seguidamente encontrar ejemplos prcticos de cmo realizar cambios en la cuadrcula y en las guas. 1. Para acceder al editor de Cuadrculas seleccione la opcin Editar cuadrcula del Men Ver en la opcin Cuadrcula En la figura 6 16 puede ver el Editor Cuadrcula
Figura 6.17. Aqu se muestra entre nuestro invitado Bobby, el Editor Guas
Figura 6.16. Si lo necesita, puede editar las propiedades de la Cuadrcula desde este Editor
5. Ahora tendr delante un editor algo ms elaborado que el ya descrito. Fjese en los dos bloques que lo componen. En ellos ver la posibilidad de cambiar el color de los bordes o guas y de las divisiones en s. Para modificar, por ejemplo, el color de la divisin haga clic en el icono de color. Le aparecer la paleta de colores ya conocida. Seleccione un nuevo color y acepte. Si tiene activada una divisin ver que el cambio surte efecto. Puede resultar que este bloque no le sea del todo comprensible y es natural, dado que se ha tratado de realizar un ejemplo prctico con una Cuadrcula que s conoce pero con una Gua de divisin que no conoce todava. No se preocupe, ste es slo un ejemplo para mostrarle dnde localizar dichos editores. Ms adelante, cuando est preparado para crear efectos Rollover, volveremos con las Divisiones y entonces ver todo mucho ms claro.
2. Ahora se le mostrar un editor encabezado por un icono de color. Si hace clic en l ver que se le muestra la paleta de colores. Si tiene activada la opcin cuadrcula y selecciona un color nuevo aqu, al aceptar ver cmo la cuadrcula ha cambiado de color. 3. Si quiere modificar la distancia entre las lneas de la cuadrcula, inserte un nuevo valor en las ventanas horizontal y vertical del editor Cuadrcula. Cuando acepte ver los cambios efectuados. 4. Para acceder al editor Guas seleccione la opcin Editar gua del Men Ver en la opcin Guas. En la figura 6.17 puede ver este Editor. 198
tar el lienzo de trabajo. Fjese que empez creando un nuevo documento y luego supo cmo modificar las propiedades del lienzo. Esa es la fase inicial del aprendizaje y un primer paso para llegar a la prctica. Ahora que ya sabe cmo crear un nuevo documento y cmo tratar el lienzo de trabajo, debe conocer de qu otra manera puede empezar a trabajar con Fireworks. Esto implica saber que, adems de partir de un documento cero, puede seguir trabajando con un documento previamente guardado o directamente sobre una imagen importada. En cualquiera de los casos todos los tratados sobre el lienzo son aplicables nuevamente aqu. En las siguientes lneas conocer de qu otras formas puede iniciar Fireworks 4.
puede previsualizar las imgenes y contenidos desde la propia ventana de dilogo ya descrita, vase figura 6.19.
Los grficos abiertos e importados desde este comando pasarn a ser el lienzo completo de la nueva rea de trabajo. La ventana de presentacin o zona del lienzo de trabajo, pasar a adaptarse a las medidas reales del grfico abierto o importado, siendo por tanto slo posible, trabajar sobre el rea de la imagen o grfico. Esto es aplicable a los contenidos creados en las aplicaciones mencionadas. Recuerde que si abre un documento nativo de Fireworks, el lienzo de trabajo ser el mismo que guard, es decir, no se ver limitado al contenido exquisito de la imagen. Para abrir un fichero, slo necesita elegir la opcin Abrir, pero siga las siguientes instrucciones, ms precisas: 1. Seleccione la opcin Abrir del men Archivo. Se lanzar la ventana de dilogo Abrir, vase figura 6.18, desde la cual podr acceder a cualquier directorio de su disco duro en busca de la imagen o fichero que desea abrir. 2. Haga clic en cualquiera de las imgenes o extensio nes aceptadas por Fireworks en esta opcin. Ver que 200
201
3. Ms abajo de la ventana Presentacin preliminar se le indican con precisin los valores en pxeles del grfico abierto "si el grfico est en formato PNG, claro est". Si no es as, y la imagen es de tipo GIF o JPEG por citar un ejemplo, adems de constatar el formato del fichero podr conocer el tamao del mismo. 4. Cuando se decida por un grfico o un documento haga clic en la ventana Abrir. Dicha seleccin se incluir en la ventana Nombre de archivo. Acepte y Fireworks le mostrar la seleccin en un nuevo lienzo de trabajo. Los ficheros y formatos que soporta Fireworks 4, son los siguientes:
Fireworks File Format (*.png): Freehand 7.x /8.x File Format (*.fh, *.ft): Gif (*.gif): JPEG (*.jpg, *.jpe, *.jpeg) TIFF (*.tif, *.Tiff) Targa (*.tga) Photoshop (*.psd): xRes LRG (*.Irg) BMP (*.bmp) Batch Procces Script (*.jsf) Adobe Illustrator File Format (*.ai) RTF Text (* . rtf ) ASCII Text (*.txt) Corel Draw (*.cdr):
jos atractivos que slo los tiene en papel. Atrs quedaron las limitaciones de los grficos y en adelante procede explotar todo el potencial del escner, la WebCam y la cmara digital. En el siguiente ejemplo trataremos de utilizar un escner de mesa. 1. Seleccione la opcin Digitalizar del Men Archivo. 2. Si tiene instalado un escner, seleccione la opcin adquisicin Twain. Esta accin le permitir activar el escner y adquirir la imagen digital. 3. Si no tiene instalado el escner deber seleccionar la opcin Seleccionar Twain. En ese momento se le mostrar el cuadro de dilogo, vase figura 6.20, desde el que podr seleccionar el driver o dispositivo del escner. Normalmente, los diferentes escneres emplearn siempre el driver Twain, pero puede suceder que an empleando este driver, se requiera emplear otro que aporta el propio software del escner. En este caso seleccione el driver indicado en el cuadro de dilnno
mencionado.
rio de su disco duro en busca de la imagen o archivo que tiene intencin de importar. 2. Haga clic en cualquiera de las imgenes o extensiones aceptadas por Fireworks en esta opcin. Ver que puede previsualizar las imgenes y contenidos desde la propia ventana de dilogo descrita. 3. Si se decide por un grfico o un archivo, haga clic sobre l en la ventana Abrir. Dicha seleccin se incluir en laventana Nombre de archivo. Acepte yFireworks le mostrar un ngulo de 90 como puntero de ratn. 4. Mueva este puntero dentro del lienzo hacia el lugar que desee y sobre el documento activo con el que quiere seguir trabajando. En el lugar deseado haga clic y la imagen se incluir en su documento tal como se puede apreciar en la figura 6.22.
Figura 6.21. Puede Importar documentos de otras aplicaciones como Photoshop o Corel Draw
Si en el caso de abrir documento el grfico se coloca en modo de Edicin de imagen y sobre un documento activo aparte, en el modo Importar, puede colocar la imagen donde desee, sobre un documento activo o en una nueva ventana. Para importar un documento debe hacer lo siguiente: 1. Seleccione la opcin importar del men Archivo. Se lanzar la ventana de dilogo Importar, vase figura 6.21, desde la cual podr acceder a cualquier directo204
Figura 6.22. Una Imagen Importada puede mostrarse como documento recortado
opcin es accesible desde el men Insertar haciendo clic en la opcin Imagen. Con esto es posible importar cualquier imagen a su lienzo de trabajo, ubicndola en cualquier rincn del documento activo, tal como se describi en el apartado Importar. En el modo Insertar imagen, tambin hay disponible una nueva ventana de dilogo, desde la cual puede previsualizar los diferentes grficos antes de importarlos. Esta ventana de dilogo es idntica a la empleada en la opcin Importar. Tambin son idnticos los pasos a seguir en esta opcin como puede ver a continuacin. 1. Seleccione la opcin Imagen del men Insertar. Se lanzar la ventana de dilogo Importar, desde la cual podr acceder a cualquier directorio de su disco duro en busca de la imagen o archivo que tiene intencin de importar. 2. Haga clic en cualquiera de las imgenes o extensiones aceptadas por Fireworks en esta opcin. Ver que puede previsualizar las imgenes y contenidos desde la propia ventana de dilogo ya descrita tal como se muestra en la figura 6.23. 3. Cuando se decida por un grfico o archivo, haga clic sobre l en la ventana Abrir. Dicha seleccin se incluir en la ventana Nombre de archivo. Acepte y Fireworks le mostrar un ngulo de 90 como puntero de ratn. 4. Mueva este puntero dentro del lienzo al lugar que desee y sobre el documento activo con el que desea seguir trabajando. En el lugar deseado haga clic y la imagen se incluir en su documento.
Comopuedever, laopcin insertar Imagenesidntica a la opcin importar. Todos los pasos a seguir son los mismos y las extensiones soportadas tambin. Recuerde que puede colocar la nueva imagen dentro del lienzo actual o en otro distinto.
Figura 6.23. En la opcin Insertar Imagen, Fireworks echa mano una vez ms a la opcin Importar 206
obstante, de gran tamao. Sin embargo permite una compresin muy elevada "del 98%" cuando emplea WinZip. Por ello, es el formato adoptado para enviar por Internet grficos de alta calidad. 6. Targa (*.tga): Es un tipo de formato no muy extendi do, pero aceptado por numerosas aplicaciones Viewer. 7. Photoshop (*.psd): Excelente programa de retoque fotogrfico, todo un clsico, con excelente potencia. Photoshop puede aceptarse como plug-ing desde Fireworks, lo que permite ampliar los horizontes de esta aplicacin. El que Fireworks admita la extensin de Photoshop, permite crear espectaculares Web basadas en imgenes fotogrficas de gran calidad. 8. xRes LRG (*.Irg): Es la extensin de una aplicacin de dibujo 3D, lo cual posibilita introducir elementos 3D en sus creaciones. 9. BMP (*.bmp): Es el tipo de extensin que mayor compresin permite con la aplicacin WinZip. Si lo suyo es enviar imgenes por Internet, sta es la extensin adecuada. l0.Batch Procces Script (*.jsf): Es una extensin poco habitual, pero ah est. 11. Adobe Illustrator File Format (*.ai): Freworks admite tambin formatos de esta potente aplicacin de Adobe. La presente aplicacin es toda una competidora en grficos que existe actualmente, y es una buena idea haber aadido esta extensin a los ficheros importables. 12. RTF Text (*.rtf): No slo puede importar grficos, sino tambin le es posible indexar textos. RTF tambin es soportado por Word y normalmente es la extensin de una aplicacin OCR, esto es, el escaneado de texto. 13.ASCII Text (*.txt): La ms comn de todas, se trata de una extensin que soporta nicamente texto y Fireworks la admite como extensin importable. 14.Core1 Draw (*.cdr): Se trata de otra de las aplicaciones reinas del mundo del grfico y el diseo. Corel Draw, que ya corre en su versinl0, es lder en la creacin de grficos avanzados, de modo que Fireworks ha acertado nuevamente al aceptar esta extensin como mdulo importable. En este captulo ha conocido un buen nmero de cosas: desde la manera de iniciar Fireworks hasta los archivos que soporta esta aplicacin. Son las opciones bsicas y, por lo tanto, ya tiene la base. Conoce ya lo que es un documento, 209
un lienzo y cmo insertar imgenes a su lienzo de trabajo. Ello le ha permitido conocer todas las formas en que puede modificar su documento o lienzo de trabajo entre otras cosas, lo que le sita en un lugar privilegiado de la clase. Pero con todo, es insuficiente para dominar por completo Fireworks 4. Todava le quedan por aprender muchas cosas ms. Por eso, y siguiendo la lnea prctica de este captulo, en el siguiente conocer la forma de utilizar las herramientas de diseo. Es decir, aprender a crear trazos, a moverlos y a transformarlos entre otras cosas. Como puede ver, se confirma aqu lo que se dijo sobre aprender de manera progresiva y distributiva, que es la forma ms sencilla y segura de aprender. Fireworks guarda tantas cosas que soltarlas todas de golpe creara un caos. Por ello, si est armado de paciencia contine con el siguiente captulo, en el cual, repetimos, empezar a usar algunas de las herramientas de diseo, y a desarrollar su vena artstica al mismo tiempo.
7.1.Introduccin
Gua Prctica de Flash 5 . Eso implica recuperar algunas pginas de esa Gua, y si ha ledo Flash 5 reconocer muchas de sus frases en este captulo. Es as porque tanto Flash 5 como Fireworks 4
comparten muchas de las herramientas. Hemos dicho en ms de una ocasin que las aplicaciones de Macromedia tienen gran similitud en la presentacin y en los contenidos. Esto dijimos en la Gua Prctica de Flash 5 y lo reiteramos aqu. El que muchas de las herramientas de diseo sean casi las mismas ha permitido recuperar el rico lenguaje que empleamos en aquella ocasin para describirlas en la citada Gua. No obstante, las aplicaciones no comparten la totalidad de las herramientas, por ello dejamos constancia slo de la aplicacin que nos ocupa, es decir, Fireworks 4. Sin embargo, encontrar entre las aplicaciones de ambas "si las conoce", grandes similitudes en la mayora de las herramientas, sobre todo en lo que al tratado de dibujo vectorial se refiere. Flash 5 utiliza comnmente dibujos basados en vectores para crear contenidos multimedia utilizando para ello un bajo ancho de banda. Freworks emplea tambin el uso de dibujos vectoriales, pero debe recordar que Fireworks utiliza el modo de mapa de bits, algo impensable para crear un contenido en Flash ms bien por motivos de tamao, ya que los contenidos multimedia emplean varios elementos al mismo tiempo. Sin embargo, Fireworks adopta nuevos mtodos de optimizacin precisa que le permiten agilizar aquellas zonas de un grfico, a fin de crear smbolos u objetos para la Web que tampoco 210 211
usan un gran ancho de banda. Recuerde que cuando se habla de ancho de banda, se refiere tambin al tamao del archivo. Pero no es ste el momento de considerar si el dibujo por vectores es mejor o peor, sino ms bien de resaltar la similitud de las herramientas de ambas aplicaciones, lo cual nos ha permitido recuperar algunas pginas ya escritas y que vienen bien ahora. Adems de eso hemos aadido aquellas herramientas u opciones que sobresalen en Fireworks. Est claro que alguna diferencia deba haber entre ambas aplicaciones. Similitud no significa identidad, por ello hemos revisado a fondo cada una de las herramientas descritas. En esta leccin aprender a dibujar lneas, valos y rectngulos entre otras cosas como empez haciendo con Flash 5. El comienzo de un nuevo diseo empieza por una simple lnea para ms adelante pasar a los trazos, rellenos y efectos especiales aadidos al grfico final. Ahora iremos por pasos centrndonos en las herramientas principales de diseo. En definitiva, aprender a utilizar las herramientas de dibujo bsicas de Fireworks. Son las herramientas ms sencillas, pero no las menos importantes. La base de una aplicacin de diseo est en conocer, primordialmente, las herramientas bsicas de la aplicacin. Todo, como hemos dicho, parte de una simple lnea, un simple valo o un rectngulo. Conocer la forma de hacerlos es bastante sencillo; sin embargo, modelarlos hasta conseguir un grfico espectacular puede ser toda una odisea. Fireworks posee funciones que le permitirn crear estas situaciones y lo veremos ms adelante. Ahora deber procurar iniciarse con Fireworks de la forma ms sencilla posible. Adems de dibujar una lnea, un valo o un rectngulo, aprender a manipularlos, seleccionarlos, rotarlos, copiarlos o modificar sus atributos, entre otras cosas. El arte del dibujo y la ilustracin empieza en una lnea.
habr empleado otros programas de dibujo vectorial como por ejemplo Flash 5. Sin embargo, es preciso empezar por estas tareas sencillas a fin de crear una gua realmente completa y que toque todos los puntos, desde dibujar una lnea recta hasta crear una pelcula de varias decenas de fotogramas y otros tantos objetos ms o menos complicados.
Figura 7.1. Aqu encontrar la herramienta lnea Fireworks cuenta con las herramientas bsicas para la creacin de dibujos, las cuales permiten crear y modificar formas para ilustrar las pelculas. Dichas herramientas se limitan a tres funciones bsicas de dibujo vectorial, que son las que permiten crear lneas rectas, valos y rectngulos. Para crear una lnea recta en nuestro intento de empezar a trabajar con Fireworks 4 hay que hacer lo siguiente:
1. Seleccione la herramienta Lnea de la paleta de herramientas haciendo clic en ella. Esta funcin est representada por una lnea perpendicular que quedar marcada con cierto relieve. Vase figura 7.1. 2. Ahora el puntero del ratn se transformar en una pequea cruz cuando ste pase por encima del espacio asignado a la pelcula.
213
3. Ahora elija los atributos de trazo y relleno de la lnea que desea dibujar. Estos estn disponibles en los paneles "fichas" Trazo y Relleno. Para ello seleccione las fichas de ambos atributos. Elija unos valores al azar en ambos atributos, as le ser ms fcil empezar. Ms adelante conocer ms con detenimiento estos atributos y su uso. En la figura 7.2, puede ver el panel Trazo.
circunferencia. Si arrastra el puntero del ratn con otro movimiento que no sea en crculo dar lugar a elipses de diferentes formas y tamaos. 3. Para finalizar el crculo, elipse u valo, suelte el botn del ratn. Ahora se mostrar lo que ha dibujado con todos los atributos elegidos, como el color de relleno y el color de la lnea exterior.
4. En cualquier parte del rea de la pelcula haga clic con el botn izquierdo del ratn y, sin soltar, arrastre sobre el escenario en cualquier direccin. 5. Para finalizar la lnea, suelte el botn del ratn. Todava no ver la lnea porque en ese momento tiene activada todava la herramienta lnea. Para ver el aspecto de la lnea haga clic con el botn derecho del ratn. Ahora se le muestra la lnea dibujada con los atributos que haya elegido previamente. De igual forma, para dibujar un valo debe hacer lo siguiente: 1. Seleccione esta vez la herramienta valo de la paleta de herramientas, vase figura 7.3. Para ello haga clic con el botn izquierdo del ratn cuando se encuentre justo sobre el icono Rectngulo, ver cmo se muestran ms polgonos. Arrastre el puntero del ratn y seleccione valo. 2. Elija los atributos de trazo y relleno. Estos atributos se encuentran tambin en la paleta de herramientas y en el panel Relleno, o ficha Relleno. En cualquier parte de la pelcula, haga clic con el botn izquierdo del ratn y sin soltar, arrstrelo en forma circular sobre el escenario. A1 hacerlo conseguir dibujar una elipse o
Finalmente, y una vez ms, para dibujar un rectngulo tendr que hacer lo siguiente: 1. Seleccione en esta ocasin la herramienta Rectngulo de la paleta de herramientas, vase figura 7.4. Recuerde seguir los mismos pasos que dio para seleccionar el valo. 2. Elija los atributos de trazo y relleno. En este caso tambin tendr los mismos atributos en la parte inferior de la paleta de herramientas o en las fichas Trazo y Re l leno. En cualquier parte de la pelcula haga clic con el botn izquierdo del ratn y, sin soltar, arrstrelo en forma de rectngulo sobre el escenario. A1 hacerlo de esta forma conseguir dibujar un rectngulo o un cuadrado, con la forma y tamao que desee. 3. Suelte el botn del ratn y el rectngulo o cuadrado aparecern con los atributos asignados. La figura 7.5 muestra algunos modelos de los trazados vectoriales descritos.
215
214
Figura 7.5. Como observar en esta captura, Fireworks permite dibujar lneas, valos y rectngulos de diferente forma
tipo de polgonos tiene la opcin de elegir el color de relleno y el color de la lnea exterior, con lo cual crea objetos slidos. Para aplicar o establecer los atributos de relleno y de trazo ha de hacer lo siguiente: 1. Seleccione una herramienta de dibujo o pintura de la paleta de herramientas, es decir la herramienta valo o la herramienta Cubo de pintura. Si ha seleccionado directamente una herramienta de dibujo, y citando como ejemplo un valo, antes de proceder a dibujarlo debe elegir el color de relleno y el de la lnea externa, por ejemplo, desde las fichas Trazo y Relleno o fuera de ellas. 2. Para ello, si elige hacerlo fuera de los paneles Trazo y Relleno coloque el puntero del ratn en el modificador de color de relleno situado en la parte baja de la paleta de herramientas y haga clic en l. 3. Ahora se le mostrar una paleta de colores, como ve en la figura 7.6. Si desea aplicar un color slido de los que se muestran en dicho panel de colores slo debe hacer clic en el color elegido. 4. Tras esto, el nuevo color se mostrar en el icono de relleno. Si, por cualquier razn, desea aplicar otro tipo de color, por ejemplo un degradado, deber seleccionarlo en elgane 1 Relleno; en la ventana desplegable encontrar una buena variedad de combinaciones de colores. Elija Radial para colores degradados. Ver cmo cambia sustancialmente el contenido de este panel o ficha. Si los valores de degradado en esta primera ventana no son de su agrado, sepa que podr ampliarlos o sustituirlos por otras combinaciones si hace clic en la ventana situada en la parte inferior de . la ventana antes mencionada. Si desea ver o editar antes el color, deber hacer clic en el botn Editar. Si ha elegido un color slido en esta ventana, sepa que podr crear colores personalizados en otro editor de colores que se encuentra en el panel Paleta como en el icono de color de la paleta de herramientas. 5. Con esta decisin habr llamado una nueva paleta personalizada, desde la cual podr crear y personalizar los colores slidos, vase la figura 7.7. El tratamiento de colores en Fireworks es ms complejo que en Flash 5, ya que con Fireworks podr realizar importantes combinaciones de colores y desde paneles diferentes.
217
Como puede ver, las posibilidades de aadir complejos entramados de color en Fireworks son infinitas. Por ello ms adelante y tal como se ha dicho, dedicaremos un captulo a conocer el panel Relleno as como el Panel Trazo. Todas las propiedades se encuentran compartidas tanto entre paneles como entre otras ubicaciones de Fireworks. Hasta aqu la parte ms sencilla del tema, no obstante puede que se encuentre algo confuso. El tratamiento de los colores en Fireworks requiere una atencin especial ya que puede acceder a ellos a travs de mltiples zonas de trabajo, todas las cuales repercuten siempre en el objeto seleccionado en el momento. Ms adelante, cuando hablemos de ambos paneles y del resto de las propiedades de color por separado, comprender lo que queremos decir.
Figura 7.6. La paleta de colores contiene 221 colores slidos de una sola ojeada
Si ya ha dibujado algunos polgonos o formas y no le agrada su color de relleno por lo que desea sustituir los viejos colores por otros nuevos, debe hacer lo siguiente: 1. Seleccione la herramienta Cubo de pintura de la pale ta de herramientas. 2. Haga clic en la herramienta Color de relleno. Recuerde que est situada en la parte inferior de la paleta de herramientas y que est marcada como un icono de color. Tambin puede obtener el mismo resultado desde el panel Paleta y sobre el mismo icono. 3. Una vez dentro del panel de colores, seleccione un color slido.
Figura 7.7. Fireworks permite crear sus propios degradados tanto en color como en blanco y negro
218
219
4. Ahora el cursor se habr transformado en un cubo de pintura. Site dicho cubo en el polgono al que desea cambiar el color y haga clic en l. 5. El polgono habr cambiado de color. Acabamos de describir cmo modificar o cambiar el color de relleno de un polgono ya dibujado. Ya ve lo sencillo que es. Ahora conocer el funcionamiento de la herramienta Cuentagotas. Esta herramienta va implcita en las acciones de color y, por lo tanto, puede emplearla por ejemplo, para realizar una accin de relleno, en este caso sustituir un relleno previo por otro. Para ello siga los siguientes pasos: 1. Dibuje un Rectngulo. 2. Aada un relleno al mismo. El color que desee. 3. Dibuje un nuevo rectngulo. Esta vez aplique un co lor de relleno diferente. 4. Seleccione el primer rectngulo con la herramienta Puntero. 5. Seleccione ahora la herramienta Cuentagotas. Hecho esto, haga clic en el relleno del segundo rectngulo. Observar cmo el relleno del primer rectngulo es sustituido por el relleno que acaba de seleccionar con la herramienta Cuentagotas.
zontal. Cuando lo crea conveniente, suelte el botn del ratn. En ese momento tendr una lnea recta con un punto central y dos extremos.
3. Site el puntero del ratn (que en realidad muestra la herramienta Pluma) en el lugar que desee, cerca de la lnea que acaba de dibujar. 4. Haga clic una vez y tendr una curva Bezier precisa, un arco o una curva de mayor o menor grado, algo que depende del lugar donde haya hecho clic, vase figura 7.9.
con la que podr crear lneas precisas, tambin denominadas curvas Bezier. El uso de Pluma es bien conocido por los diseadores que han utilizado Illustrator, FreeHand o Photoshop. Con la Pluma podr crear lneas formadas a partir de puntos de referencia. Ms adelante, igualmente con la Pluma, podr aadir puntos de referencia en las lneas, e incluso interconectar varias de ellas formando un relleno. Para comprender el comportamiento de la Pluma realice los siguientes ejercicios. 1. Seleccione para empezar, la herramienta Pluma ha ciendo clic en su icono tal como se ve en la figura 7.8. 2. Con el botn izquierdo del ratn pulsado, arrastre hasta dibujar una lnea completamente recta y hori220
Figura 7.9. En esta captura puede ver una simple curva Bezier
5. Haga clic en otra parte del escenario. Tendr una nue va curva hasta este punto nuevo. Si hace clic una vez 221
ms al lado de esta ltima curva, observar una lnea nueva que trata de cerrar el crculo. 6. Ya tiene una forma cualquiera que deber cerrar. Para ello, site el puntero del ratn en el extremo inicial de la primera lnea que dibuj y haga clic ah. A1 momento, la formase cerrar y de paso se habr rellenado del color que tenga seleccionado, vase figura 7.10.
2. Ahora dibuje otra recta idntica, pero ms a la derecha. En este punto observar una lnea con curvas interconectada con ambas lneas rectas. 3. Cuando suelte el botn del ratn observar que slo la lnea con curvas se queda en el escenario. Como puede ver, con la Pluma podr crear curvas precisas, que con otras herramientas le sera imposible hacer. Si sigue dibujando lneas con Pluma, observar que cada una de ellas se va aadiendo a la lnea anteriormente dibujada. Dentro de dichas curvas Bezier observar los diferentes puntos de control. Si hace clic en ellos podr modificar la posicin de la lnea afectada. Finalmente, podr aadir ms puntos de control si hace clic en las propias lneas o curvas Bezier. Esto le permitir aumentar las propiedades de flexin de las curvas
Bezier.
Figura 7.10. Si crea varias curvas Bezier tendr la opcin de crear rellenos Como podr comprobar, la herramienta Pluma es idnea para crear formas complejas, que deben ser precisas. Formas que con simples valos o rectngulos sera incapaz de obtener. Aunque Fireworks permite modificar los estilos de lnea con la herramienta Flecha, los diseadores agradecern que se haya introducido la herramienta Pluma por muchas razones, entre ellas porque Fireworks ha aadido tambin la herramienta Subseleccin, con la cual podr modificar las formas creadas con la herramienta Pluma con mucha ms precisin, puesto que se comporta como una extensin de la Pluma, aadiendo ms puntos de control en todas las curvas Bezier. Otro ejercicio que podr realizar con la herramienta Pluma, es el siguiente: 1. Dibuje una lnea recta con la Pluma, como lo hizo antes. 222
223
poda mover esa esquina y separarla del objeto principal. Con Fireworks no sucede as, pero a diferencia de otras aplicaciones, la herramienta Puntero es capaz de seleccionar varios objetos al mismo tiempo sin necesidad de rodearlos todos a la vez. Basta con que todos los elementos estn uno al lado del otro. Para seleccionar un objeto completo debe hacer lo siguiente: 1. Seleccione la herramienta Puntero. 2. Haga clic con el botn izquierdo del ratn y dibuje un rectngulo imaginario al borde del objeto que desea seleccionar. Ahora ese acercamiento imaginario se muestra como un rectngulo transparente. 3. Suelte el botn del ratn y el objeto seleccionado quedar marcado en un recuadro de puntos, vase figura 7.11. Recuerde que tambin puede seleccionar objetos con slo hacer clic sobre ellos. 4. Coloque el puntero del ratn en el objeto y haga clic en l sin soltar el botn. Podr mover el objeto en la direccin que desee. Cuando lo haga ver que el objeto se ha movido con todos sus elementos.
1. Seleccione la herramienta Seleccionar detrs. 2. Dibuje una lnea y un recuadro u otro objeto. La idea es que existan varios objetos en escena. 3. Site los objetos uno encima del otro de manera que pueda ver las esquinas de todos ellos. 4. Site el puntero del ratn en uno de los objetos, por ejemplo, sobre el objeto que est encima de los dems. Ver cmo se activan los puntos de unin y trazos de ese objeto, vase figura 7.12. 5. Mueva el cursor hacia el objeto del fondo, ver que se queda marcado tambin. 6. Pulse el botn y mueva el cursor, ver como en realidad el objeto que se mueve es el que est situado detrs del marcado al principio.
225
224
Como se ha comentado en prrafos anteriores, Fireworks no posee la misma flexibilidad para seleccionar objetos que Flash 5, pero s contiene varios modos de seleccin. Despus de Puntero y de seleccionar detrs puede hacer uso de la herramienta Exportar rea. Esta herramienta es una extensin de Puntero y se encuentra despus de la herramienta Seleccionar detrs. El icono que la representa es una cmara fotogrfica. Para trabajar con esta herramienta debe hacer lo siguiente: 1. Seleccione la herramienta Exportar rea del mismo modo que seleccion la herramienta Seleccionar detrs. Recuerde, mantenga pulsado el botn del ratn sobre el icono de la herramienta Puntero y aparecern las otras opciones. 2. Ahora el puntero del ratn se muestra como una c mara fotogrfica. 3. Pulse el botn izquierdo del ratn y arrastre el ratn hasta formar un rea de seleccin. De inmediato se ver esta rea ya que se representa como un rectngulo marcado por gruesas esquinas, vase figura 7.13.
4. Suelte el botn del ratn. En el lienzo tendr una seleccin habilitada. Esto significa que esa zona es la que se exportar ms adelante.
Figura 7.14. En esta captura puede ver el rea exportada en el editor Exportar
5. Para acceder al editor Exportar directamente sitese en el centro de esta seleccin y haga clic dos veces. Fireworks le mostrar ahora el editor Exportar. Fjese que se le muestra slo el rea que seleccion previamente, vase figura 7.14. Estas son las tres principales herramientas de Seleccin. Como ve, son ms que suficientes para su propsito. No se descarta que en una versin futura de Fireworks se introduzcan las mejoras de seleccin de que ya goza Flash 5.
Figura 7.13. Vista del rea seleccionada para exportar con la herramienta Exportar rea 226
No obstante, ha podido comprobar que estas herramientas son ms que suficientes para agrupar, seleccionar y mover objetos segn su peso. Sin embargo Fireworks admite en su paleta de herramientas la herramienta Subseleccin tambin disponible en Flash 5.
227
4. Situ el puntero del ratn en la lnea externa del valo. 5. Haga clic en este momento con el botn izquierdo del ratn. El borde del valo mostrar una serie de puntos de referencia, vase figura 7.15. 6. Site el puntero del ratn en cualquiera de esos puntos de control. Haga clic con el botn izquierdo del ratn y arrastre. Ver cmo se deforma el valo desde este punto, mantenindose el resto intacto tal como se aprecia en la figura 7.16.
Figura 7.16. En este ejemplo puede ver la importancia de la herramienta Subseleccin Figura 7.15. Fireworks
n.
1. El primer paso consiste en dibujar un valo con las propiedades que desee. 2. Seleccione ahora la herramienta Sub s e 1 e c c i 3. Haga clic en el centro del valo, ver que no sucede nada salvo que el objeto queda marcado con unas guas rojas al seleccionarlo y blancas cuando hace clic. Significa que el objeto ha quedado seleccionado.
7. Ahora seleccione el borde del valo por otro lado y haga clic en l, teniendo cuidado de no hacerlo sobre un punto de control. Arrastre el ratn y comprobar que puede desplazar todo el objeto sin que pierda sus propiedades. Como ha podido comprobar, el uso de esta herramienta es extremadamente sencillo y bastante eficaz. Bsicamente, la herramienta Subseleccin est pensada para trabajar conjuntamente con la herramienta Pluma. Por ejemplo, con la herramienta Pluma podr aadir nuevos puntos de control en otras partes del borde del valo descrito, con slo hacer 229
228
clic. Luego, con la herramienta Subs e 1 e c c i n, podr extruir dicha zona afectada por el nuevo punto de control.
de ellos, invadidos por el rea rectangular imaginaria. 2. Haga clic en el objeto con el botn derecho del ratn. 3. Ver cmo Freworks le muestra un nuevo Men emergente en el cual encontrar el comando Copiar dentro de la opcin Edicin, vase figura 7.17. 4. Haga clic en l con el botn izquierdo del ratn, el men desaparecer. Coloque el puntero del ratn en otro lugar del rea de la pelcula y haga clic con el botn derecho del ratn, Fireworks lanza de nuevo el men anterior. 5. Esta vez seleccione el comando Pegar y ver cmo lo que haba seleccionado y copiado antes aparece duplicado en el nuevo destino. El comando Cortar permite, como su propio nombre indica, cortar un objeto, objetos o partes invadidas de estos; pero esas selecciones desaparecen slo aparentemente, ya que en realidad se han copiado en el Portapapeles de Windows. Ms adelante la seleccin cortada podr insertarse en un nuevo destino con el comando Pegar, de la forma antes descrita.
Las funciones escalar, rotar o reflejar las encontrar en la barra de men modi f icar pero, como en el caso anterior, puede activar dichas funciones en cualquier parte del rea de la pelcula gracias al Men emergente y con la opcin Transformar. Para escalar objetos debe hacer lo siguiente: 1. Seleccione el objeto, objetos o partes invadidas de los objetos. 2. Haga clic con el botn derecho del ratn en la seleccin y Fireworks lanzar un nuevo Men emergente con di-
Figura 7.17. En esta captura puede ver el Men emergente en la opcin Edicin
Para copiar y pegar un objeto completo, o una parte de l, deber hacer lo siguiente: 1. Seleccione la herramienta Puntero de la paleta de herramientas y el objeto u objetos deseados o parte 230
231
versas funciones, entre las que debe seleccionar el comando E s c a 1 a. Haga clic en l para seleccionarla. 3. Ahora, la parte o zonas seleccionadas mostrarn un rea rectangular de puntos gruesos que delimitan un cuadro o rectngulo imaginario. 4. Con el puntero del ratn seleccione cualquiera de los vrtices y arrastre el puntero, ver que el objeto aumenta de tamao si ha elegido arrastrar desde un vrtice de esquina, o que se extiende horizontalmente si ha elegido un vrtice lateral, o bien que cambia su altura si ha arrastrado desde un vrtice superior o inferior. En la figura 7.18 ver que un objeto puede escalarse en
est justificado por la rapidez que ofrece para acceder a dichas funciones en cualquier momento.
Figura 7.18. Cuando un objeto est listo para ser escalado, muestra los siguientes vrtices, los que al ser arrastrados modifican el tamao del objeto.
Recuerde que puede acceder ala herramienta Escala directamente desde la paleta de herramientas. Esta herramienta lleva implcita dos herramientas de transformacin ms.Sonlasherramientas Inclinar y Distors ionar. Aunque los ejemplos se realizan mediante el men emergente, pueden realizarse directamente desde el propio panel de herramientas. El uso de este Men emergente 232
Figura 7.19. Observe cmo el objeto est hacia abajo, rodeado de vrtices, dichos vrtices son los que permiten rotar cualquier objeto
233
4. Todo lo seleccionado ha rotado su posicin, suelte el botn del ratn y la rotacin se habr completado satisfactoriamente. En la figura 7.19 puede apreciar distintas rotaciones de un mismo objeto.
ha transformado en una doble flecha, lo que indica que ya puede inclinar el objeto. 5. Arrastre el puntero hacia la derecha, por ejemplo. Ver ahora cmo el objeto se ha inclinado segn su sugerencia. En la figura 7.20 tiene el resultado.
234
en el centro del objeto ver que se convierte en una cruz de cuatro puntas. Esto le permite mover el objeto pero no inclinarlo. Sitese sobre el borde superior de la demarcacin. Ver cmo ahora el puntero se ha transformado en una doble flecha. Esto indica que ya puede dar altura al objeto. 5. Arrastre el puntero hacia arriba, por ejemplo. Ver que el objeto ha recuperado altura a la vez que se deforma en ese sentido, vase figura 7.21.
color. Ello significa que a partir de estas herramientas podr crear ya un dibujo vectorial. Recuerde que Fireworks le permite crear dibujos vectoriales y Mapas de bi t s y que para esto ltimo deber convertirlos en tales. De momento nos quedamos con el dibujo vectorial, es decir, hablaremos de crear lneas, rectngulos y valos, y de su deformacin como se ha mostrado hasta el momento. Ms adelante, trabajaremos los Mapas de bits. En este captulo la intencin ha sido presentarle las herramientas de diseo y edicin de Fireworks, es decir, las herramientas ms empleadas en una sesin de trabajo. Evidentemente no son las nicas herramientas con que cuenta Fireworks, como tampoco se ha profundizado todo lo que desearamos en el trabajo con cada una. En sucesivos captulos conoceremos mas herramientas de Fireworks. En cualquier caso, comprobar una vez ms cmo esta Gua le va mostrando las cosas de manera milimetrada y precisa, es decir, a pequeas dosis dado que Fireworks es tan extenso que de explicarlo todo de una vez se conseguira sencillamente bloquear la mente ms lcida. As, en el captulo que sigue conoceremos el contenido del Panel Trazo en un paso por ir adelante con esta Gua y a su vez aprenderemos a utilizarlo.
Figura 7.21. La herramienta Distorsionar permite deformar los objetos en altura, anchura u otras direcciones
6. Sitese ahora sobre una de las esquinas. Ver cmo la flecha se ha transformado de nuevo en una doble flecha. Arrastre hacia afuera y ver que el objeto se deforma en esa direccin tal como se muestra en la figura 7.22. 7. Repita la misma operacin antes descrita pero desde otra esquina y hacia dentro. Ver cmo sigue distorsionado el objeto.
Fireworks. Conoce las herramientas que le permitirn modificar y
8.1. Introduccin
Ya conoce cmo utilizar la mayora de las herramientas principales de Fireworks. Con esas herramientas, permita que se lo recordemos una vez ms, puede manipular y modificar los objetos. Pero con Fireworks podr crear algo ms que simples polgonos, modificar su aspecto o crear lneas y trazos precisos; en ese sentido Fireworks permite crear trazados especficos desde el propio panel. El contenido del Panel Trazo puede aplicarse a simples tiralneas, polgonos o textos, lo que vamos a demostrar en este captulo partiendo de ejemplos prcticos. Para aprender a trabajar con Fireworks 4 nada mejor que ir presentando ejemplos sencillos que a su vez demuestren el potencial de la herramienta que se utiliza. En este caso se trata de aplicar los atributos del Panel Trazo que le permitirn experimentar con espectaculares efectos visuales. ste bien podra ser un extenso captulo con docenas de pginas y cientos de capturas, con las mltiples combinaciones que permite la opcin Trazo. Este pincel virtual permite crear ese contorno atractivo que bordea los objetos, crear esas lneas camufladas y dar un estilo nuevo a su letra. Pero la tarea de demostrar todas las combinaciones sera poco atractiva, por lo que proponemos que sea el amable lector quien descubra por s mismo todas las combinaciones posibles que le brinda esta opcin. No obstante, aqu explicaremos el modo de acceder a ellas y pondremos algn que otro ejemplo. 239
Figura 8.1. Aqu se muestran los diferentes elementos que necesitamos para nuestra prctica
Llegados a este punto, ya tiene listo el lienzo de traba j o, al cual aplicar diferentes tonos de pincel en los distintos elementos dibujados. Recuerde que el panel Trazo aplica interesantes efectos visuales sobre una simple lnea e, incluso, sobre polgonos y textos. Inicialmente las propiedades del panel Trazo slo seran vlidas para las lneas. No obstante, si experimenta un poco se dar cuenta de que las propiedades de Trazo pueden aplicarse tambin a cualquier objeto.
se ha elegido el pincel denominado Aleatorio, con el valor inicial Confeti y con los valores por defecto. Para realizar esta sencilla prctica seguir los pasos siguientes: 1. Seleccione la lnea antes creada. Las propiedades de esta lnea pueden ser las que quiera. Es decir, dibuje una lnea que ocupe medio lienzo para que pueda ver ms adelante el aspecto del nuevo trazo. Recuerde que ya tiene creada esta lnea, pero puede crear otra para comprobar los cambios. Sea cual sea su eleccin una vez seleccione la lnea tendr unos valores defecto en el Panel Trazo, como los que puede ver en la figura 8 2
3. Ahora ver que las propiedades de Trazo se han aplicado a la lnea seleccionada. En este caso ver una serie de puntos de color situados alrededor de la lnea, vase figura 8.4. Personalmente es el efecto que ms nos impacta.
Figura 8.2. Una lnea simple tendr por defecto estos atributos Figura 8.4. En esta captura puede ver cmo es el resultado de aplicar el Trazo Aleatorio a una simple lnea
Como ha podido ver, aplicar un nuevo trazo sobre una lnea es una operacin realmente sencilla. Sin embargo los resultados son excelentes. Esto demuestra que el trabajo "sucio" o complejo lo realiza ntegramente Fireworks. Puede aplicar texturas a la misma lnea antes creada, puede aplicar diferentes trazos y comprobar cuntos resultados espectaculares le ofrece
Fireworks.
2. Seleccionada la lnea vaya al panel Trazo y seleccione la opcin Aleatorio de la ventana desplegable. Ahora se le mostrarn todas las propiedades de esta opcin como textura, tamao de las puntas y color entre otras tal como puede ver en la figura 8.3. Djelo todo como est.
242
Despus de probar varias combinaciones, llegamos a la conclusin de que nos gusta un buen puado de los pinceles y trazos disponibles, pero es obvio que hay que elegir slo uno. As que despus de varias pruebas y negndonos al hecho de que nos gusta slo uno de los efectos, optamos por el trazo denominado Aergrafo. Para aplicar este trazo debe seguir los siguientes pasos: 1. Seleccione el objeto, en este caso el rectngulo, y desde el panel de Trazo seleccione la opcin Aergrafo. Este tipo de trazo es uno de los muchos disponibles en el men desplegable superior de este panel. Abajo podr desplegar un nuevo men con dos opciones, pero deje el Bsico activado. En la figura 8.5 puede ver las propiedades de esta opcin.
5. Puede ver otro cambio en el trazo realizado y para ello pruebe a deslizar el cursor que est justo al lado de la ventana Puntas. Cuando lo haga observe los resultados segn se muestra en la figura 8.6. Ver cmo se acenta el trazo.
Figura 8.6. En esta captura puede ver cmo se resalta el rectngulo con el Trazo aergrafo
2. En el mismo panel de Seleccin, podr ver reflejado en dos ventanas, el tamao de la punta y el efecto elegido. Deje todos los valores como estn y ver que se aplica este trazo al rectngulo. En este caso el efecto es bastante pobre. 3. Para exagerar este trazo seleccione el calibrador de Puntas. Este calibrador est identificado como una doble flecha vertical. Cuando lo seleccione se le mostrar una barra desde donde podr modificar el tamao de la punta. Cuanto mayor sea el valor, mayor ser la punta reflejada en la ventana Puntas. 4. Suelte este calibrador, es decir deje de pulsar el botn del ratn siempre que haya dado un valor de ms de 30 puntos en ese sentido. Ver como el efecto se ha resaltado considerablemente.
244
Con esta simple operacin ha introducido un efecto impactante en su rectngulo de trazados simples. En su caso el cambio se opera en los bordes del rectngulo, mientras que en el interior del mismo se mantiene el color por defecto, el negro. Si no fuera as puede cambiar el color de relleno con la herramienta Cubo de pintura. En todo caso en el captulo siguiente hablaremos del panel Relleno.
del propio rectngulo, con el fin de descubrirlo en la oscuridad total, al estar escrito en negro sobre fondo negro. Para ello elija el color rojo como color base para que contraste con los bordes del propio rectngulo. El Trazo elegido en este caso es el denominado Lpiz con el nivel 1 del mismo, pero con un grosor de 2 puntos para resaltar el volumen del texto. Los pasos a seguir son los siguientes: 1. Seleccione el texto del interior del rectngulo. Para ello haga clic en el propio texto con el fin de seleccionarlo; automticamente todos los parmetros del texto quedan reflejados en el panel Trazo, en este caso ninguno.
Figura 8.8. En esta captura puede ver cmo se muestra el texto una vez le aplicamos el Trazo Lpiz
2. Para aplicar el efecto Lpiz deber elegir este patrn de la ventana desplegable. El nivel de este pincel est encabezado por el valor 1-Pxel blando, reflejado en un Submen debajo del men Principal de Trazo. Deje este valor por defecto. En la figura 8.7 puede ver los atributos de esta opcin. 3. Para aumentar el volumen de este trazo, deber seleccionar el calibrador lateral derecho del propio panel, desde el cual y con el puntero del ratn, deber elegir el valor 2, de una barra que permite desplazarse sobre una gua vertical, tal como se ha explicado. 4. Cuando haya hecho esto ver cmo el texto resalta en el interior del rectngulo, vase figura 8.8. Aplicar este trazo sobre el texto ha sido tan sencillo como las dems experiencias de este captulo. Ya ve cmo Fireworks es realmente flexible. Aqu slo se ha mostrado un ejemplo, pero puede probar cuantos trazos quiera; ver que existen efectos explcitos y que cada uno de ellos se manifiesta
246
tal, tanto este captulo como los precedentes y los posteriores, pasan por el factor complejidad contando con las mltiples combinaciones que slo pueden verse en la prctica, esto es, desplegando cada una de las ventanas y aplicando nuevos valores, pero siguiendo siempre los mismos pasos para ello. Queremos decir en definitiva, que tiene delante muchas opciones y combinaciones para experimentar con Trazo. Pruebe distintos parmetros y disfrute con ello.
Figura 8.9. Vista de los atributos de la opcin Caligrfico-Hmedo
5. Sitese con el cursor al lado de la ventana Puntas y muvalo hacia arriba. Este cursor permite adaptar la suavidad de los bordes. 6. Ahora ver el resultado sobre el texto seleccionado, vase figura 8.10.
Figura 8.11. Vista de los atributos del Trazo Caligrfico Figura 8.10. Aqu puede ver cmo queda el texto tras aplicarle la opcin Trazo Caligrfico y unos cuantos cambios en los atributos
As de simple es aplicar un trazo y as de simple ha resultado ser su prctica. Pero al margen de una simplicidad to248
3. Haga clic en la flecha lateral de este Panel. Recuerde que cada Panel dispone de una flecha que en realidad es un botn que activa un Men emergente. Si hace esto Fireworks le mostrar el Men emergente, vase figura 8.12.
249
El panel opciones permite modificar prcticamente todos los parmetros de un trazo. Estos son los denominados parmetros generales. As desde este panel podr controlar la cantidad de tinta, el espaciado entre los puntos del trazo, la textura aplicada, la textura de los bordes e, incluso, los efectos aplicados en los bordes. Como puede ver la flexibilidad de este panel permite personalizar los trazos hasta lmites insospechables, como en todo con Fireworks. En las siguientes lneas conocer estos cambios generales:
4. Seleccione la opcin Editar trazo. A1 momento se le mostrar el editor de Trazo, vase figura 8.13. Observar asimismo que este editor est compuesto por tres opciones. Inicialmente se le mostrar la opcin principal denominada opciones, la cual se encarga de los atributos principales como cantidad de tinta, textura o tipo de Punta entre otros. En este Panel podr tener en todo momento una vista preliminar del trazo modificado.
Figura 8.14. Vista de los atributos del Trazo Bamb en modo Caligrfico
Figura 8.15. En esta captura puede ver cmo es por defecto la opcin Bamb 251
1. Seleccione la opcin Editar el trazado Caligrfico-Bamb. Recuerde que debe seleccionar primero este trazo en el panel Trazo y seleccionar despus la opcin Editar trazo. A1 hacerlo se le mostrarn los atributos y parmetros con los que cre este trazo, vase figura 8.14. 2. En la ventana Presentacin preliminar, vase figura 8.15, tiene en todo momento el trazo y los cambios efectuados. Fjese en esta ventana a partir de ahora y en cada nuevo cambio. 3. Sitese sobre la pestaa de la ventana Espaciado y haga clic. Con el botn pulsado desplcese hacia arriba hasta un valor de 55%. Observe ahora el cambio efectuado en el trazado; aparecen algunas gotas debido a que se ha aumentado considerablemente el espaciado entre las puntas. En la figura 8.16 tiene el resultado.
8.17. La textura permite definir en mayor o menor medida la profundidad de color del trazo.
4. Sitese ahora sobre la pestaa de la ventana Textura y haga clic. Con el botn pulsado desplcese hacia arriba hasta un valor prximo al 80%. Ver ahora el nuevo cambio efectuado en el trazo. En esta ocasin se ha modificado la textura del trazo, vase figura 252
5. Seleccione ahora un efecto de borde de la ventana descrita. Por ejemplo el efecto Ondulado y observe el resultado, vase figura 8.18. Los efectos que encontrar aqu son Nen blanco, Hmedo, Nen suave, Ondulado y Nen blanco sin centrar. 6. Sitese ahora sobre la pestaa de la ventana Puntas. Con el botn del ratn pulsado desplcese por la barra vertical. Seleccione por ejemplo un valor de 3. Ver cmo los bordes externos del trazo se suavizan en gran medida. Esto es relativo, ya que la opcin Puntas lo que hace es aumentar o disminuir el nmero de puntas que componen el trazo. Recuerde que un trazo est compuesto por uno o varios puntos espaciados. Si aumenta este parmetro ver cmo los bordes del trazo se suavizan de forma precisa tal como se puede ver en la figura 8.19. 253
7. Sitese ahora sobre la pestaa de la ventana Espaciado entre puntas y elija un valor cualquiera. Ver que el trazo puede deformarse considerablemente, vase figura 8.20. Esto es porque se controla desde aqu el espaciado entre puntas lo que posibilita crear una lnea fina y dura o duplicados de sta colocados aleatoriamente. 8. Puede variar el contenido de las puntas a travs de la ventana variacin. En esta opcin tiene varias posibilidades como crear una variacin aleatoria, uniforme o complementaria entre otras opciones.
Figura 8.20. Esto es lo que sucede si modifica el atributo Espacio entre puntas
Como puede ver el trazo ha cambiado sustancialmente con tan slo modificar los parmetros bsicos. Desde el panel Forma podr cambiar otros aspectos del trazo. Aqu encontrar tan slo tres opciones para modificar, pero con un resultado bastante atrevido. Valo en las siguientes lneas:
Figura 8.19. El resultado de aplicar un cambio en el atributo Puntas 254
1. Seleccione el panel Forma. Para ello bastar con que haga clic en esta pestaa sin tener que salir del editor Trazo.
255
Ahora ver los parmetros de tamao, borde y aspecto. Tambin aqu tendr dos vistas preliminares del trazo. Sigue vigente la vista preliminar del trazo en su totalidad y una vista de la punta del trazo, vase figura 8.21.
2. Para un cambio radical en este aspecto, active la casilla llamada Cuadrada. Ver qu cambio ms radical se muestra en el trazo, vase figura 8.22. Esto es porque todas las puntas son ahora cuadradas. 3. Sitese sobre el cursor del parmetro 'tamao y desplcelo hacia la izquierda para reducir el tamao de las puntas. Ver que el trazo es ms pequeo. 4. Sitese sobre el cursor del parmetro Borde y desplcelo hacia la derecha. Con esta accin est haciendo un fundido del borde. En la vista preliminar ver que el trazo vuelve a modificarse sustancialmente. 5. Sitese sobre el cursor del parmetro Aspecto y desplcelo hacia la izquierda. Observe que mientras lo hace, la punta se va aplastando. Cuando aplique este cambio ver que el trazo ha sufrido una transformacin ms radical an si cabe.
256
6. Puede modificar el ngulo de las puntas que componen un trazo. Para ello haga clic en la pestaa ngulo y elija una rotacin de 300 grados. A1 hacerlo ver otro cambio sustancial en el trazo. En la figura 8.23 puede ver el botn ngulo. Como ha podido comprobar, con este panel ha conseguido excepcionales modificaciones con slo modificar cuatro atributos. En el panel Sensibilidad podr modificar las propiedades del trazo que corresponden a Tamao, ngulo, Cantidad de tinta o Dispersin entre otras. Con todas estas propiedades podr realizar grandes cambios en el trazo, pero son tantas las combinaciones que se pueden hacer, que aqu solamente vislumbrar algunas. 1. Seleccione la opcin Tamao, de la ventana Propiedades del trazo. Ver inmediatamente los valores de este parmetro, que tambin se muestra por defecto. En la figura 8.24 puede ver esta opcin.
257
2. Sitese sobre la pestaa de la ventana Presin y deslice el cursor hacia arriba hasta alcanzar un valor bastante elevado. Ver cmo el trazo es ahora un dibujo abstracto. 3. Sitese sobre la pestaa de la ventana Aleatorio y deslice el cursor hacia arriba hasta un valor prximo a 90. Ver ahora cmo ms que un dibujo abstracto parece un dibujo al carboncillo. Como ve, los cambios son radicales. 4. Seleccione ahora la opcin ngulo de la ventana Propiedad del trazo. Ver cmo todos los valores de este parmetro difieren del antes descrito. Estn todos a cero. Sitese sobre la pestaa de la ventana Presin y deslice el cursor hacia arriba hasta alcanzar un valor elevado. Ver cmo el dibujo abstracto pasa a ser ahora una sucesin de crculos. En realidad tendr la sensacin de que ms que un trazo est haciendo un dibujo a mano alzada. 5. Sitese sobre la pestaa de la ventana Aleatorio y repita la operacin antes descrita. Ahora volver a ver en la ventana preliminar un dibujo abstracto. Fjese que lo que se pretende aqu es mostrar la capacidad de modificacin de un trazo. 6. Para finalizar, seleccione la opcin Dispersin de la ventana Propiedad del trazo. Hecho esto sitese sobre la pestaa de la ventana Presin y de nuevo deslice el cursor hasta un valor alto. Ahora ver como el dibujo abstracto se convierte en un cmulo de puntos dispersos con una total uniformidad 7. Para crear una dispersin Aleatoria sitese sobre la pestaa de la ventana Aleatorio y seleccione un valor alto segn el mtodo tantas veces expuesto. Ver ahora una aleatoria dispersin de puntos. En la figura 8.25 tiene un claro ejemplo de esta opcin. Muy a nuestro pesar hemos dejado en el tintero muchos ejemplos, pero mostrar aqu todas las combinaciones sera sencillamente imposible, as que nos remitimos al lector para invitarle a que juegue con esas posibilidades. La opcin Editar Trazo le permite crear trazos nuevos tan sofisticados como los propios dibujos. Puede combinar los trazos con texturas y con eso potenciar an ms si cabe, la capacidad de Fireworks. Ahora que ya conoce cmo trabajar en profundidad con Trazo ms all de su sola implementacin en lneas, es el momento de conocer otras propieda259
Figura 8.24. Vista de los parmetros de la opcin Sensibilidad del Editor Trazo 258
des de Fireworks. En el siguiente captulo ver los contenidos del panel Relleno. Imagine lo que le espera.
El Panel de Rellenos
9.1. Introduccin
Fireworks ofrece un amplio conjunto de opciones a la hora de elegir los colores de un objeto grfico, como qued sobradamente demostrado en el captulo anterior. Las opciones de Trazo para los objetos grficos de Fireworks abarcan desde lneas finas hasta otras bastante gruesas. Sin embargo, se ha demostrado que pueden emplearse los textos como estos trazos, as como los trazos o bordes de un polgono, pero no es suficiente. En los elementos grficos existe lo que se denomina zonas de relleno. Fireworks cuenta con el panel Rellenos desde donde es posible seleccionar el tipo de relleno que se desea aadir. Las opciones de relleno incluyen colores slidos, degradados multicolores y patrones de Mapas de bits. Tambin se puede aadir textura a los trazos y rellenos, as como editarlos en la zona de trabajo. En cualquier caso, y a un paso de describir los mltiples efectos de Fireworks, se puede ver que esta aplicacin es toda una bomba de relojera en el mejor de los sentidos, ya que adems posibilita guardar todos los rellenos editables en estilos. Esto nos ha motivado para crear diferentes captulos en los que se estudia cada una de las ms interesantes opciones de Fireworks, aunque no las nicas. Es una tarea ardua y un tanto difcil tratar de aprender, estudiando simplemente un manual. Por ello queremos recordarle que no se trata aqu de un simple manual, sino ms bien de un conjunto de captulos que le permitirn dominar Fireworks 4 en poco tiempo. Si en el captulo anterior aprendi a utilizar el panel Trazo, en esta ocasin aprender a emplear el panel Rellenos. Explorar su belleza y tendr constancia de la potencia de la presente aplicacin.
Figura 8.25. Vista de uno de los cambios de esta ventana del Editor Trazo, en este caso Dispersin
261
Para ello hemos preparado una prctica nueva que le muestre sencillamente la forma de implementar zonas con relleno sobre un documento activo. Al efecto se ha elegido crear un fondo bordado dentro de unas elipses con relleno diferente, a fin de que de una sola pasada pueda vislumbrar la enorme variedad de que dispone con Fireworks 4.
de pintura. En este momento se le mostrar la paleta de colores, vase figura 9.1. 2. Seleccione un nuevo color. 3. Dibuje por ejemplo un rectngulo. Ver como este rectngulo cuenta ya con el color de relleno seleccionado Dreviamente.
Figura 9.1. A travs de esta opcin podr modificar directamente los colores de Relleno
ste es uno de los atajos rpidos, recuerde que ellos le permitirn realizar una prueba igualmente rpida y directa. Por supuesto, no siempre se trata de un atajo rpido, pero que ste lo es se nota por su sola descripcin. La manera en que concebimos esta Gua nos permite crear un texto que llegue a todos los usuarios, tanto experimentados como noveles, y en definitiva nos permite presentar las novedades de Fireworks 4 y ensearle cmo funciona esta aplicacin. Ahora le sugerimos otro de los atajos rpidos; los cambios de relleno permiten crear trazados que combinen solidez, transparencia, trama y degradados entre otros. Esto permite crear patrones espectaculares en los que intervienen elementos de fantasa como arrugas y pliegues que embellecen el relleno. Tambin pueden cambiarse los atributos de relleno como por ejemplo el color y la textura y, asimismo, 263
puede guardar estos rellenos personalizados como estilos propios para emplearlos ms adelante. Los dems atajos rpidos deber encontrarlos el propio lector.
Como quiera que sea, un documento activo al que se le va a integrar un simple polgono rellenado con algn tipo de textura o color, resulta en gran medida vaco y poco prctico. Por ello hemos elegido una figura simblica del momento que nos ocupa, un curioso personaje llamado "Bobby", vase figura 9.2, para avivar la zona de trabajo. La idea es colocar este personaje en un lugar privilegiado del lienzo y aadirle la forma elptica, la que recibir el efecto de relleno. Para ello deber hacer lo siguiente: 1. Cree primero un documento nuevo con la opcin Crear documento nuevo. Elija unas propiedades suficientemente altas ya que este ejemplo requiere un amplio espacio de trabajo. Recuerde que insertar a su invitado Bobby que es de un tamao respetable. 2. Seleccione la opcin Imagen, del men Insertar, que le permitir localizar y seleccionar a su invitado Bobby. Bsquelo en la pgina http: / www.anayamultimedia.es. Seleccionando sucesivamente los mens: Atencin al cliente, Complementos, Guas Prcticas y Fireworks 4. En la figura 9.3 puede ver a nuestro invitado Bobby.
Figura 9.2. Con la opcin Insertar-Imagen podr cargar a Bobby en el documento 264
3. Dibuje ahora una Elipse de gran tamao sobre su invitado. Si Bobby resultara demasiado grande, reduzca su tamao con la herramienta Escalar. Recuerde que se trata de colocar a su invitado en una esquina de la elipse. 4. Ahora ver cmo la elipse tapa total o parcialmente a Bobby. Esto significa que deber enviar el polgono hacia atrs. Para ello haga clic con el botn derecho del ratn para entrar en el Men emergente de Fireworks. Una vez dentro seleccione la opcin Organizar. Ahora se le mostrar un Submen donde podr seleccionar la funcin Enviar atrs. Esto colocar el polgono detrs de su invitado, vase figura 9.4.
Figura 9.4. Aqu puede ver crno la elipse se ha colocado detrs de Bobby
Bobby est ahora en un lugar privilegiado del lienzo de trabajo y va a supervisar todos los rellenos que aplique a la enorme elipse. Dentro de esa elipse introducir otras elipses ms pequeas de manera que pueda aadir diferentes rellenos en cada una de ellas. Y esto ser a partir de ahora.
266
4. Como las elipses tendrn ya un color de relleno por defecto, el negro o cualquier otro color, desde este panel podr constatar si es as, desde una ventana que muestra el color, situada a la derecha de la ventana Categora de relleno. La ventana que muestra el color posee una pestaa desde la cual podr lanzar la paleta de colores, vase figura 9.6. Recuerde que desde aqu podr seleccionar un nuevo color. Cuando eso ocurra, el color elegido se aplicar al objeto seleccionado previamente, en este caso la elipse. 5. Seleccione cada una de las elipses, incluida la elipse grande, y aplique un color diferente en cada caso. Para seleccionar cada una de las elipses deber utilizar la herramienta Puntero. Cuando seleccione una elipse sta quedar marcada y el color de relleno se mostrar en la ventana antes descrita. Seleccione la paleta de colores para aplicar un color nuevo. En la figura 9.7 puede ver
Figura 9.5. Dibuje ahora tres nuevas elipses y colquelas tal como se muestran aqu. Vea como las elipses tienen el mismo color que la elipse mayor
Figura 9.7. Una vez que haya aadido nuevos rellenos a las diferentes elipses podr diferenciarlos fcilmente Figura 9.6. Desde esta paleta de colores podr modificar el color de relleno para diferenciar todas las elipses 268
Puede parecerle pesado que en este bloque hayamos repetido muchos de los pasos que ya conoce, puesto que po269
dramos haberle dicho por ejemplo, que creara varias elipses en lugar de detallar todo el proceso. Pero es imprescindible que reincidamos alguna que otra vez, a fin de que se sienta ms y ms cmodo, pues podra ser que accidentalmente le fallara la memoria. Ante el hecho eventual de tener que ir a pginas anteriores, aqu tiene la solucin. En cualquier caso esperamos que le venga bien al lector nuestro ocasional recordatorio.
Figura 9.8. Si elige el relleno ninguno tendr este resultado, es decir, elipse vaca
271
3. Abra de nuevo la ventana Categora de Relleno, esta vez para seleccionar la opcin Lineal. Ahora ver como el color Rojo se presenta junto a un color ms oscuro de forma lineal, vase figura 9.9. Para saber con qu color se est solapando, haga clic en el botn Editar. 4. Fireworks le muestra ahora el editor de color, en este caso la opcin Lineal. Ver dos cursores, en su caso el color Rojo y el Negro. Mueva el cursor de color Rojo hacia el centro de la ventana de color. Ver como se ha modificado el color. 5. Para las restantes elipses, aplique tambin el ef ec to Lineal, haciendo clic sobre cada una de las elipses y aplicando esta opcin para ver los resultados. En la figura 9.10 puede ver el resultado.
guientes opciones que permiten aumentar, si cabe, el resultado final de estos degradados. 1. Puede aplicar texturas al color Lineal. Por ejemplo seleccione la textura Teclas de piano desde esta ventana tal como se muestra en la figura 9.11. Fireworks aplicar dicha textura sobre el color de relleno Lineal. Observe como se mantiene el degradado del color aunque se haya aplicado una textura sobre el mismo. 2. Tambin puede controlar la cantidad de textura. Es el botn que est a la derecha de la ventana Textura. Seleccione por ejemplo un valor de 90%. Recuerde que para hacerlo deber mantener pulsado el botn del ratn mientras desliza el cursor hacia arriba. Ahora ver como la textura se fusiona con el degradado. 3. Para efectuar un nuevo cambio sobre el relleno seleccione una opcin en la ventana Conjunto de preestablecido, de degradado del color. Seleccione por ejemplo Azul, Amarillo, Azul. Este degradado le dar un efecto impresionante al relleno creado. Ahora el degradado est en funcin de estos tres colores y la textura antes aplicada
Figura 9.10. En esta captura puede observar como se muestran los cambios tras aplicar la opcin Lineal en un relleno Slido
Como ha podido comprobar los colores slidos pueden dar mucho ms de lo que en un principio se crea de ellos, y todo gracias al efecto de degradado que se puede aplicar sobre los mismos. Otros claros ejemplos de ello son las si2'12
Figura 9.11. Fireworks permite realizar magia con los colores sencillos gracias a las texturas
273
Adems de los descritos puede aplicar otros rellenos especficos que encontrar en la ventana desplegable Categora de relleno. Si antes eligi la opcin Lineal, elija ahora la opcin
Pliegues.
Con esta opcin introduce uno de los efectos ms espectaculares dentro de los colores slidos, ya que desde el men desplegable Textura puede aplicar diferentes texturas tan interesantes como Susurro o Remolinos con slo hacer clic en ellos. En la figura 9.12 puede ver un ejemplo. La lista de tipos de degradado es un tanto larga, y las combinaciones posibles la hacen ms larga an, por ello cumpliremos nuestro cometido comentando que las diferentes degradaciones de color disponibles se completan con efectos cuadrados, cnicos o de abultamiento, aadiendo a eso las diferentes texturas que permiten aplicar un nuevo men de efectos. Lo que pretendemos decir es que no es factible mostrar aqu todas las combinaciones posibles. Juegue con las texturas y las categoras de relleno y se sorprender.
Figura 9.13. Con solo seleccionar el relleno Tramado Web tendr este resultado Figura 9.12. Aqu puede ver otra de las texturas aplicadas al relleno Pliegues
2. Para crear los nuevos colores haga clic al lado de las ventanas que muestran los colores por defecto, tras lo 275
274
cual se lanzarn las paletas de los colores disponibles. La suma de los dos colores elegidos de esta paleta ser el color que se aplicar al objeto. 3. Seleccione un color en cada una de las casillas. Por ejemplo, Verde brillante y Rojo encendido. Cuando lo haga observar un color verde oscuro en la ventana central. Significa que ste es el color que se aplicar al relleno de la elipse seleccionada. Recuerde que los cambios de relleno siempre se hacen sobre la elipse mayor para ver mejor los detalles. 4. La opcin Tramado Web le permite aplicar diferencias en el borde de la elipse o del objeto seleccionado. Para verlo seleccione por ejemplo la opcin Fundido de laventana desplegable Borde. Observar como los bordes se funden con el resto del documento.
especie de nube dado el intenso nivel de fundido que se ha aplicado. En la figura 9.14 puede ver el resultado. Como puede ver la opcin Tramado Web es bastante sencilla. Se trata nicamente de jugar con dos colores, los que al mezclarse dan un resultado nuevo. Esta opcin no es la misma que la Lineal ni que la Radial. Cada opcin le permite jugar con los colores de forma diferente. Puede aplicar aqu los rellenos especiales como Pliegues, antes tratado. Seleccione esta categora de Rellenos y ver el resultado. La elipse ahora se muestra con este efecto y a su vez ha cambiado de color. Si accede al editor de colores observar que puede modificar dos colores, el verde y la mezcla de los colores seleccionados anteriormente. Esto es slo un ejemplo ms de las posibilidades que ofrece Fireworks en cuanto al tratamiento de los colores para el relleno de objetos. El resto depende de su imaginacin.
Figura 9.14. En esta captura puede ver como la Elipse se muestra como una nube tras aplicar un fundido en el borde
5. Puede aumentar el efecto de fundido. Para ello haga clic sobre el cursor que est al lado de la ventana Borde y arrastre el puntero hasta un valor de 60%. Observar ahora como la Elipse se transforma en una 276
Figura 9.15. Con slo seleccionar el relleno Patrn puede suceder esto
Figura 9.16. Si antes aplic la textura Rayado 5 y ahora el patrn Burbujas obtendr esto
4. Ahora aplique diferentes patrones sobre el conjunto de elipses pequeas que han venido dndole servicio durante toda el captulo, haga clic en cada una de ellas y aplique diferentes patrones. Fireworks le ofrece una muestra de cada patrn cada vez que sita el puntero del ratn sobre ellas. Los patrones son los rellenos ms espectaculares que puede aplicar a sus objetos simples. Juegue con las texturas y el fundido de los bordes y conseguir efectos impresionantes. Todava no ha llegado al panel Efectos y fjese lo que est consiguiendo! En el siguiente ejemplo ver cmo se comporta el fundido de una textura con un patrn: 1. Seleccione la elipse mayor y aplique sobre la misma el patrn Burbujas. Como ve este Relleno es impresionante, vase figura 9.16. Sin embargo, el verdadero rostro del patrn elegido parece quedar oculto por la textura antes seleccionada. 2. Seleccione la Textura ADN. Ahora ver como el patrn Burbujas se acerca ms a la muestra que vio al seleccionar este patrn.
3. Elija un valor de 80% de fundido de la textura, con el cursor deslizante que est situado junto a la ventana Textura. Observar ahora un cambio radical en la presentacin de Burbuj as, vase figura 9.17. 4. Seleccione ahora un valor de fundido de 10%. Observe el nuevo resultado. Como ve, los patrones pueden experimentar grandes cambios cuando interactan con las texturas y su profundidad. Ello permite crear otros patrones ms sofisticados a partir de los patrones base. Queda ms que demostrada la supremaca de Fireworks a la hora de aplicar relleno a los objetos. Estos rellenos han sido simples, medianos y complejos. Podra escribirse todo un libro sobre ellos solamente, pero no es ese el cometido de esta obra sino ensear globalmente cmo funciona Fireworks 4. No obstante, cerramos este captulo con la desagradable sensacin de que han quedado cosas en el tintero aunque realmente no es as. Es el efecto que provoca el uso de texturas, patrones y combinaciones de relleno. Son tantas las combinaciones posibles que cortan la respiracin de puro asombro. Creemos que la capacidad de crear colores y relle279
nos especficos de Fireworks supera con creces a la de otras aplicaciones competidoras. Le recomendamos que pruebe todas las combinaciones y experimente con las texturas y los rellenos, es realmente un gozo tratar con ambos. Hasta su invitado Bobby ha quedado sorprendido! Ahora que ya conoce los rellenos y cmo aplicarlos es el momento de pasar alpanel Efectos. Ser en el captulo siguiente.
10.1. Introduccin
Acorde con el espritu de esta Gua Prctica, el lector est ya en el punto en que conoce la interfaz de trabajo de Fireworks, las herramientas, el panel Trazos y el panel Rellenos entre otras cosas, y fiel a ese espritu, en este nuevo captulo conocer el contenido y el modo de trabajar con el panel Efectos. Es un paso ms para que conozca la integridad de Fireworks, aunque todava le queda bastante por conocer. A diferencia con las otras aplicaciones, va conociendo la potencia y flexibilidad de Fireworks, una aplicacin de dibujo vectorial y Mapa de bi t s que har volar su imaginacin. En lo que respecta a las combinaciones con trazos y rellenos, tiene delante las herramientas ms importantes que le permitirn alcanzar al mximo el nivel de combinaciones y efectos en un proceso de personalizacin. Para trabajar a buen ritmo el diseador requiere herramientas adecuadas, y tratndose de dibujo, el color y los efectos son la esencia de ellas. Con esta base Fireworks integra mltiples combinaciones desde los citados paneles, que constituyen la paleta del pintor por excelencia. Adems de eso, Fireworks permite al diseador aadir efectos a los objetos de una manera sencilla y automatizada, potenciando las combinaciones y los efectos en el resultado final. Pronto las aplicaciones de dibujo que bsicamente se crean en 2D podrn crearse en un entorno 3D, gracias a los efectos especiales que pueden implicarse en ellos. Esto anima al diseador y da soltura a su trabajo. Efectos de relieve y perspectiva es lo que los diseadores denominan un toque de magia en su dibujo. Fireworks permite acercarse a los contenidos 3D des281
Figura 9.17. Si juega con los atributos de fundido y textura puede obtener resultados como este
280
de el panel Efectos, pero espere, que tambin puede acercarse al retoque fotogrfico gracias a los filtros pticos. Desde los propios paneles Trazos y Rellenos puede destacarla citada opcin de Efectos, que, por cierto, le permitir crear espectaculares muestras artsticas a partir de un simple texto. Este ser el caso de los ejemplos en este captulo. Sin embargo, todos los rellenos y tipos de trazo mencionados en los captulos precedentes, as como los efectos que a continuacin se revelarn, son operativos con cualquier tipo de objeto o imagen; esto es, se pueden aplicar a todo lo que tenga cabida en su documento. Nuestra inmediata intencin en la prctica que sigue, es mostrarle los diferentes efectos sobre un mismo objeto y sus resultados. De esta forma podr comprobar los distintos cambios que se operan en el objeto. Y le reiteramos aqu, que el resto queda al servicio de su imaginacin.
mitir acceder al editor de Texto. Recuerde que desde ah podr escribir el texto, vase figura 10.1. Ms adelante tratar el contenido de este editor con ms profundidad. Una vez escrito el texto antes mencionado acepte y Fireworks lo trasladar al lienzo de trabajo.
Figura 10.1. El primer paso consiste en escribir una frase para despus aplicar cualquier efecto sobre l
2. Como observar, el texto es demasiado pequeo para ver los resultados de cualquier efecto que se le aplique. Necesitar aumentarlo de tamao a fin de obtener un rea visible mucho mayor. Puede aumentar el tamao del texto desde el Men emergente y la opcin Tamao, o directamente con la herramienta Escala. 3. Si selecciona la opcin Tamao sepa que puede modificar el tamao del texto en proporcin a unos valores preestablecidos. Para ello haga clic en el botn derecho del ratn cuando est sobre el texto para extender el Men emergente y seleccione la opcin Tamao, tal como se muestra en la figura 10.2. En el Submen de esta opcin ver diferentes valores. Seleccione un valor alto para establecer un nuevo tamao del texto. 283
clic en esta ventana. Fireworks le mostrar ahora un Men emergente con los efectos disponibles. Seleccione la opcin Bisel y Relieve. Nada ms situarse sobre ella se le mostrarn las combinaciones de este efecto. Haga clic por ejemplo sobre el efecto Bisel interior y Fireworks lo aplicar automticamente y en tiempo real. En la figura 10.3 puede ver el resultado.
Figura 10.2. Antes de nada debe aumentar el tamao del texto para que se puedan ver claramente los resultados
4. Si desea tener ms control sobre el tamao del texto deber emplear la herramienta Escala. En versiones anteriores de Fireworks deba emplear esta herramienta casi obligatoriamente ya que el texto deba convertirse en una imagen para poder aplicarle efectos. En esta nueva versin de Fireworks bastar con que aplique directamente el efecto deseado. Volviendo ala herramienta Escala asegrese detenerla seleccionada y aplique el cambio de tamao con esta opcin. Recuerde que para hacerlo bastar hacer clic sobre el texto y arrastrar desde una de las esquinas para modificar el tamao. 5. Ahora ya tiene disponible el texto para aplicarle el primer efecto. En este caso uno de los varios posibles dentro del denominado Bisel y Relieve, algo as como biselados y relieves en todas sus versiones. Para ello, seleccione de nuevo el texto con el puntero del ratn, y con eso podr asignar un efecto a la seleccin. 6. Seleccione el Panel Efectos. Ver como en esta ocasin no hay ningn efecto aplicado. De esta forma se le mostrar la opcin Ninguno, en la ventana Aadir efectos. Para seleccionar un efecto haga
284
Figura 10.3. Nada mas empezar hemos aplicado el efecto Bisel interior y este es el resultado
Observe que el efecto aplicado resulta bastante interesante. En este caso se ha aplicado un bisel interior que permite crear un efecto de relieve en el cuerpo del texto. Sin embargo no es ms impresionante por ello el efecto de relieve. Aplicar otra vez y sobre el mismo texto seleccionado, un nuevo tipo de relieve, en este caso un Bisel exterior. Para ello haga lo siguiente: 1. Seleccione de nuevo el texto con la herramienta Puntero. Nuevamente el texto queda dispuesto para recibir un efecto. 2. Ahora s observar un contenido en el panel Efectos. En este caso ver que se le indica que tiene aplica do el efecto Bisel interior. Se distingue
285
perfectamente ya que est indicado en modo texto y con una cuadrcula marcada. Sepa que puede aplicar o eliminar efectos con slo marcar o no esta casilla. En la figura 10.4 puede ver el Panel Efecto en este estado.
Puede eliminar el efecto Bisel interior con slo desmarcar la casilla de este efecto y aparecer el resultado automticamente. En este caso observar tambin un cambio radical en el texto. Con el efecto anteriormente descrito lo que se consigue es que los bordes del objeto seleccionado aparezcan redondeados y con profundidad que inspira un efecto tridimensional, es decir, lo que se conoce en el mundo del diseo como 3D. Este efecto est muy indicado para aplicar en ttulos. Y ahora en vez de alabanzas pasaremos a describir un poco ms el contenido de este efecto. Sabe a estas alturas que aplicar un efecto no consiste solamente en hacer clic y ya; detrs de esa sencilla accin se esconde el editor de efectos. Cada efecto tiene implcito un editor y unas propiedades diferentes. Por ejemplo, no todos los efectos son de relieve, hay tambin efectos pticos de los que hablaremos aqu. Pero tome como ejemplo el efecto Bisel exterior y estudie un poco lo que hay detrs de ese efecto. Para ello siga los pasos siguientes.
Figura 10.4. Vista del Panel Efecto con el efecto Bisel interior aplicado
Figura 10.5. El efecto Bisel exterior es uno de los ms interesantes de este Panel
3. Haga clic otra vez sobre la ventana Aadir efectos. En este caso seleccione el efecto Bisel exterior. Ver como ahora el efecto es impresionante, vase figura 10.5. 286
1. Seleccione el texto que tiene implcito el efecto Bisel exterior. Esto le permitir ver que dicho efecto est evidentemente aplicado al objeto, en este caso 287
el texto seleccionado. Fjese en la ventana Efectos y ver como el efecto mencionado est marcado en la casilla. Si desactiva esta casilla, Fireworks anular el efecto. Puede aplicar diferentes efectos uno tras otro y desactivarlos despus a su gusto. 2. Entre el nombre del efecto aplicado y la casilla activada ver una "i" latina. Haga clic en el efecto y Fireworks le mostrar ahora las propiedades de este efecto, vase figura 10.6. Se destaca principalmente la ventana Forma del borde Bisel. Desde ah podr seleccionar varias opciones aadidas a este efecto. 3. De la ventana Forma del borde Bisel seleccione cualquier otra forma y compruebe el resultado en tiempo real. Como ve, el Bisel exterior puede representarse de varias formas no menos atractivas que el valor por defecto. En la figura 10.7 puede ver el resultado.
cal desde la cual podr desplazar el cursor hacia arriba, por ejemplo. En este caso elija un valor superior a 50. Observar como el Bisel es considerablemente ancho y el efecto sorprendente, vase figura 10.8.
Figura 10.8. En esta captura se muestra el resultado tras modificar la propiedad Anchura
puede ver con slo cambiar la Forma del borde del Bisel podemos obtener resultados sorprendentes 4. Desde este editor de propiedades puede modificar la anchura del B i s e 1 aplicado. Para ello sitese en la pestaa de la ventana Anchura y haga clic con el botn del ratn. Ahora se le mostrar una barra verti-
5. Otros atributos o parmetros de este efecto que puede modificar son el contraste, la suavidad y el ngulo entre otras cosas. Pruebe a modificar estos valores y observe los resultados en tiempo real. Puede ver que Fireworks admite cambios pticos en el relieve. En este caso los cambios pticos responden a los modos en que se puede mostrar el efecto aplicado y slo uno de ellos, el contraste, acta a modo de filtro. 6. Puede cambiar el color del efecto Bisel exterior. Esto le permitir crear combinaciones interesantes de lo que se ve por encima y el Bisel que lo acompaa. Es decir, el texto puede tener un color mientras que el B i s e 1 se desmarca con otro color. Para comprobarlo haga clic en el icono de color. Fireworks le mostrar ahora la paleta de colores tantas veces mencionada. En la figura 10.9 puede ver esta paleta. 289
288
Seleccione un color cualquiera, ver como el relieve se destaca del resto porque ha cambiado de color. Esto le permitir ver los cambios a la hora de utilizar la opcin Estado preestablecido, que es el ltimo atributo de este efecto.
El verdadero mensaje es demostrar cmo trabajar con el panel Efecto. Y es cierto en parte. Lo descrito es perfectamente vlido para los efectos de relieve, pero no as para los efectos pticos ni para los filtros de imagen. En ese sentido notaremos la ausencia del panel Editar. No obstante, recobrar la confianza con el e f e c to Pe r f lar. Navegar un poco por el contenido de este panel y a cada momento descubrir los atributos de cada efecto y cmo emplearlos en su favor.
Figura 10.9. Puede cambiar el color del Bisel desde la paleta de colores de una forma sencilla y rpida 7. Desde la ventana Estado preestablecido podr seleccionar varios modos de visualizar el e f ec to Bi -sel exterior. En el paso anterior modific el color del propio B i s e 1, dejando intacto el color del texto. Pruebe ahora a aplicar el Estado preestablecido invertido. Observar como los colores de Bisel y del texto se relevan. Como puede ver, un efecto no descansa sobre un valor predeterminado, sino que puede personalizarlo a su capricho. Esto le permite trabajar con soltura y rapidez. Ya conoce casi todo sobre el efecto Bisel exterior, lo que le permite aplicar este efecto de inmediato. Pero el mensaje de este primer bloque no reside en dar a conocer nicamente este tipo de efectos. Conocer algunos ms adelante, que le permitirn aumentar sus conocimientos en ese sentido. 290 Figura 10.10. Dos en uno, aqu se muestra el Submen Sombrear y el efecto Sombra aplicado 1. Seleccione de nuevo el texto que cre al principio. Ob viamente, ahora estar adornado con el Bisel ex291
terior antes aplicado. Puede deshabilitar este efecto si as lo desea. Para ello bastar hacer clic en la casilla del efecto antes citado. Pero de momento djelo habilitado. 2. Haga clic en la ventana Aadir efectos. Del Men emergente seleccione el efecto Sombrear e iluminar. Del Submen seleccione sombra. Fireworks habr aplicado ya el efecto Sombra al texto. En la figura 10.10 puede ver el efecto Sombra aplicado y el Submen efecto Sombrear e iluminar desplegado. 3. Puede suceder que los valores predeterminados no sean suficientes para destacarse entre los Biseles. En este sentido sepa que puede modificar el aspecto de la sombra as como el ngulo de su proyeccin.
modificar la proyeccin de la sombra. Para ello haga clic en esta ventana y deslice el cursor hacia arriba. Por ejemplo seleccione un valor de 30%. Ahora ver que la sombra se ha desplazado notablemente, vase figura 10.12.
Figura 10.12. Si modifica el parmetro Distancia puede desplazar la proyeccin de la sombra como puede ver aqu
4. Para acceder alas propiedades del efecto Sombra haga clic en el icono Informacin de este efecto. Fireworks le mostrar ahora dichas propiedades de una forma similar a la antes descrita, vase figura 10.11. En la esquina superior izquierda encontrar el parmetro Distancia. Este parmetro le permite
292
5. Puede alterar otros valores de este efecto como opacidad, suavidad y ngulo. Pruebe por ejemplo a modificar el valor del atributo suavidad. Para ello haga clic sobre esta opcin y deslice el cursor hacia arriba. Fireworks aplicar el resultado de forma automtica. Como podr ver, la sombra est ahora difuminada. 6. Descubra ahora el atributo ngulo. Para ello haga clic en este atributo. Se le mostrar un botn rotatorio. Con el puntero del ratn mueva ese cursor. Ver como la proyeccin de la sombra vara en funcin de ese botn. 7. Puede cambiar el color de la sombra que por defecto es negro, evidentemente. Pero si desea cambiar este color bastar con que haga clic en el icono de color y seleccione un nuevo color de la paleta de colores.
293
8. Otra opcin interesante con este efecto es que puede mostrar slo la sombra proyectada. Para ello marque la casiHa Slo sombra. Ahora Fireworks le mostrar nicamente la sombra tal como se puede apreciar en la
dad de elevacin puede controlarse mediante una barra vertical ubicada en este mismo panel. La elevacin del texto permite crear un efecto ptico realmente interesante ya que le da una perspectiva como si se mirara desde arriba. Para aplicar correctamente este efecto debe hacer lo siguiente: 1. Seleccione de nuevo el texto para estas prcticas. Al momento se le mostrarn todos los efectos antes aplicados al texto. Recuerde que la forma de mostrar que tiene un efecto aplicado al texto se representa en el panel- Efectos, con las casillas marcadas. Si desactiva estas casillas, los efectos asignados a ellas carecern de efecto sobre el texto. 2. Desactive primero los efectos anteriormente aplicados al texto y para ello desactive las casillas antes mencionadas
Acaba de conocer un efecto ms de este panel. Un efecto tan sencillo como mostrar la sombra del objeto seleccionado, pero un efecto interesante. Dentro de la opcin Sombrear e iluminar encontrar otros efectos no menos interesantes como crear una sombra interior o realzar el texto seleccionado con una iluminacin especial. Si aplica el efecto Iluminado ver como el texto y la sombra se fusionan bajo el mismo color. Tambin tiene aqu la opcin de modificar los atributos de este efecto, pero es mejor que pruebe cada de una de las combinaciones para saber el resultado.
Figura 10.14. Aqu puede ver los valores por defecto de la opcin Relieve elevado que aqu apenas se distingue
3. Haga clic en la ventana Aadir efectos para seleccionar del Men emergente las opciones Bisel y Relieve. Del Submen de estas opciones seleccione elefecto Relieve elevado. Esaaccinlepermitir aplicar este efecto con los valores por defecto, vase figura 10.14.
295
4. Puede acentuar el efecto Relieve slo con habilitar un valor alto en la opcin Anchura del mismo. Para ello haga clic en esta opcin con el botn izquierdo del ratn. Se le mostrar un cursor sobre una barra vertical. Arrastre el ratn y site este cursor en un valor alto. Ahora observar como el texto puede verse en relieve desde arriba, vase figura 10.15. Esto es porque el ngulo seleccionado est fijado a 129. Si vara el ngulo variar tambin el ngulo de visualizacin del texto.
Despus haga lo siguiente: 1. Seleccione de nuevo el texto al que le ha aplicado el efecto Relieve, pero no desactive este efecto. 2. Seleccione la opcin Relieve hundido y acepte los valores predefinidos. Ver como el texto se hunde levemente entre el cuerpo del relieve, vase figura 10.16. 3. Desactive ahora la casilla mostrar objeto. !El re sultado es sorprendente! Valo en Fireworks
Figura 10.15. Con slo aumentar el valor del parmetro Anchura obtenemos este resultado
Figura 10.16. En esta captura puede ver el resultado de aplicar el efecto Relieve hundido
Este efecto es realmente interesante, pero como siempre, se mostrar con mayor nitidez si se aplica directamente a un texto. Recuerde que los efectos pueden aplicarse a cualquier tipo de objeto pero que observar diferencia entre aplicar un efecto a un texto y aplicar ese mismo efecto a un objeto de imagen. Para finalizar este bloque queda decirle que experimente con la opcin Mostrar objeto de este efecto. Para un ejemplo rpido, desactive esta casilla en este momento. Ver como el relieve del objeto se fusiona con el mismo objeto, es decir, que todo se muestra como un nico objeto de una sola pieza. No dude en comprobarlo.
296
anillos de Tolkien, pero nada ms lejos de la realidad. Por ello, con realizar el primer ejemplo y experimentar despus, tiene ms que suficiente para descubrir todas las posibilidades que existen. Para aplicar el efecto Iluminacin haga lo siguiente: 1. Seleccione de nuevo el texto y una vez ms, no desactive los efectos anteriormente aplicados. 2. Ahora seleccione el efecto Iluminado del principal Sombrear e iluminar. En este momento se aplicar dicho efecto con los valores predeterminados, vase figura 10.17. De cualquier forma, observar un cambio radical en la presentacin del texto seleccionado, ya que dicho texto queda iluminado con un color ya definido
Figura 10.18. Aqu puede ver como se representa el efecto Iluminado sobre el texto que venimos utilizando desde el principio
Figura 10.17. En esta captura puede ver el efecto Iluminado y el Submen Sombrear e Iluminar
3. Para intensificar este efecto haga clic en el parmetro Anchura y modifique su valor. Recuerde que para modificar los valores de estos parmetros deber mantener pulsado el botn del ratn mientras lo arrastra hacia arriba o hacia abajo. Una vez ms elija un valor alto. El efecto Iluminado permitir ver ese efecto de luz alrededor del objeto seleccionado tal como se aprecia en la figura 10.18.
298
Figura 10.19. Como puede ver puede modificar la posicin del halo y este es el resultado 299
4. Para realzar an ms este efecto y ver la diferencia de lo que se est aplicando a un texto ya de por s repleto de efectos, seleccione un valor alto en la propiedad Desplazamiento del Halo. Esto le permitir desplazar el halo lumnico ms all del objeto seleccionado y lograr as un resultado impactante, vase figura 10.19.
to est activo o no, va tambin acompaada de una casilla de informacin. Si activa estas casillas acceder a las propiedades del efecto, es decir, a todos sus atributos. Significa que es posible modificar los parmetros del efecto, esto es, editarlos. Los efectos aplicados quedarn guardados siempre que su documento est guardado en formato nativo de Fireworks. Si no guarda los ltimos cambios, no aparecern en este panel.
Con el puntero del ratn marque la casilla situada al lado del efecto ms notable. Si el efecto est activo en ese momento dejar de estarlo cuando la casilla quede deshabilitada. Si se trata de un efecto ya deshabilitado, ste se aplicar de nuevo al objeto seleccionado. Recuerde que para que todos los efectos estn disponibles en el mismo panel, deber tener ya seleccionado el objeto. Por otro lado, cada casilla que indica si un efec300
Figura 10.21. Algunos efectos tambin estn disponibles desde el men Xtras
301
Los denominamos filtros de imagen porque permiten modificar valores tales como brillo, contraste y desenfoque entre otros. Estos filtros de imagen estn presentes en dos lugares a la vez. En el men mencionado y en el panel E f ec to s, por lo que los filtros de imagen se consideran tambin efectos en toda su extensin.
Acaba de aplicar los controles de Brillo y de Contraste, los cuales permiten modificar estos atributos que, a primera vista, parecen ser ms que suficientes. La idea de aplicar estos filtros a un texto simple no es quizs muy buena, pero s la ms fcil de indicar. Recuerde que los filtros sern ms visibles si se aplican sobre imgenes. Mientras tanto emplear el filtro Curvas en los prrafos que siguen. 1. Para aplicar el filtro Curvas deber seleccionarlo del panel Efectos o del men Xtras. Este filtro est ubicado inmediatamente despus del filtro antes descrito.
2. Cuando llame a este filtro se le mostrar un editor de propiedades del color, vase figura 10.23. Este editor muestra una curva que se puede desplazar y mover con el puntero del ratn. Todos los cambios en esta curva afectan directamente al color.
303
3. Puede seleccionar el canal que desea modificar. Fireworks le mostrar el canal RVA por defecto. Significa que si arrastra Curva hacia abajo los tres colores RVA modificarn sus propiedades al unsono. 4. Haga clic en la ventana Canales de color que desea editar y seleccione uno de los tres colores. Por ejemplo el rojo. Si desplaza Curva en este caso, el cambio se efecta slo en este color. Recuerde que, aunque el texto seleccionado sea de color rojo, ste est compuesto por una combinacin de rojo, verde y azul. Como puede ver, gracias a este filtro, Fireworks le permite modificar las propiedades de los canales de color en conjunto o por separado. Los cambios sern ms visibles en imgenes. El siguiente filtro disponible en el mismo Submen es Invertir, el que como su nombre indica, lo nico que le permite hacer, es invertir el espectro del color de la imagen seleccionada. Para ello haga lo siguiente: 1. Seleccione el texto que hasta el momento le ha servido de base. 2. Aplique el f i 1 t r o Invertir con slo seleccionar loenelSubmen de la opcin Ajustar color. 3. Fireworks aplicar de inmediato el filtro Invers i n. Observe como el color rojo del texto es ahora verde claro. La inversin no es del tipo blanco y negro ni de diapositiva, pero es una inversin que vara en funcin del color base. El filtro que sigue a los anteriores es el filtro Matiz/ Saturacin. Con este filtro podr modificar la saturacin de los colores y el matiz de los mismos. Esto implica que podr cambiar los colores desde esta opcin sin necesidad de recurrir a la paleta de colores. Para aplicar este filtro haga lo siguiente: 1. Haga clic en la ventana Aadir efectos para desplegar el Men emergente de este panel. En la opcin Ajustar color observar un Submen con los filtros de color disponibles 2. Seleccione el filtro Matiz/ Saturacin. Fireworks le muestra ahora un sencillo editor, vase figura 10.24, desde el que podr modificar los niveles de matiz, saturacin y luminosidad del objeto seleccionado, en este caso el texto. Cercirese una vez ms de que tiene, por ejemplo, el color rojo aplicado al mismo.
3. Puede desplazar los cursores de los valores antes indicados slo con la ayuda del ratn. Por ejemplo desplace el cursor del matiz hacia un valor de -144. En este caso podr observar como el color rojo pasa a ser azul. 4. Desplace ahora el cursor del matiz hacia un valor de 75. Observar ahora como el color presente en el texto es el verde. 5. Desplace ahora el cursor de saturacin hasta un valor por debajo de 0. Observar como el rojo se transforma en granate, debido a que se modifica en esta ocasin la saturacin del color. 6. Desplcese ahora hasta un valor bajo y tras volver al valor 0, el cursor de saturacin y el cursor de luminosidad. Ver como el texto se oscurece. Como ha visto, el filtro anterior le ha permitido cambiar bruscamente el matiz del color, as como controlar los parmetros de luminosidad y saturacin. En dicho editor existe una casilla llamada colorear, la cual si la activa le muestra unos valores por defecto que permiten aplicar un color distinto al texto. El siguiente filtro que va a tratar en esta opcines el filtro Relleno de color. Dicho filtro no es el ltimo de la opcin Ajustar color pero s uno de los ms interesantes. Para aplicar este filtro al texto seleccionado haga lo siguiente: 1. Seleccione de nuevo el texto como objeto principal. 2. Del filtro Ajustar color seleccione Relleno de color. En este momento se le mostrarn los atributos de este filtro. Observar un icono de color inmediatamente. Esto significa que desde aqu podr cambiar el color de relleno. 3. Haga clic en el icono de color y se le mostrar la paleta de colores, vase figura 10.25. Seleccione el nuevo color que desea aplicar.
305
4. En la ventana Modo de, seleccione el tipo de relleno que desea. Observe, una vez desplegado el men de esta ventana, que puede elegir entre una gran variedad de rellenos, algunos de los cuales permiten aclarar u oscurecer el relleno.
directamente sobre el espectro del color en todas sus variantes. El nuevo filtro denominado De s e n f o c ar contiene filtros para desenfocar el objeto. Aunque este filtro incluye tres opciones, con todas ellas se obtiene igual resultado, es decir, un desenfoque del objeto. Por ello, si desea el desenfoque normal de un objeto bastar con que aplique este filtro sobre el objeto seleccionado. Recuerde que el objeto sigue siendo el texto antes mencionado y utilizado en los primeros filtros. Para aplicar el filtro ms intenso, es decir, el desenfoque Gaussiano, deber hacer lo siguiente: 1. Seleccione el texto como objeto al que aplicar el f i 1tro Gauss ano. Recuerde que an debe mantener el texto que ants le sirvi de conejillo de indias. 2. De la opcin Desenfocar del panel de Efectos o del men XtrasseleccioneDesenfoque Gaussiano. En ese momento se le mostrar un simple editor, vase figura 10.26, desde donde podr controlar el radio de desenfoque. 3. Desplace el cursor de la barra Radio de desenfoque hacia la derecha. Observar como el texto queda intensamente desenfocado.
Figura 10.25. Uno de los efectos ms sencillos es el relleno de color, algo que tambin podemos hacer desde el Panel Relleno
Como ve, los filtros de color le permiten crear una variedad de combinaciones con los rellenos de un objeto. En este ltimo caso la potencia de la combinacin se eleva considerablemente. Fireworks est lleno de combinaciones, es decir, puede crear miles de rellenos especficos, as como aplicar en este caso gran variedad de filtros que nada tienen que envidiar a otras aplicaciones como Photoshop. Pero como siempre decimos, aqu slo exponemos los ejemplos ms sencillos, los dems quedan para poner a prueba la paciencia e imaginacin del lector.
Como ha podido ver, este es el filtro ms sencillo de todos los que ha utilizado, aunque no el nico. En realidad todos los filtros son sencillos de aplicar y por supuesto de entender, ya que su respuesta es inmediata, dado que los efectos o filtros se aplican en tiempo real.
se aplica dicho efecto y es el segundo y ltimo de los dos efectos disponibles desde la opcin otro. En esta misma opcin encontrar el filtro Buscar bordes, el cual tras aplicarse al objeto, marca sus bordes y transfiere el color central a un negativo, como sucede en el caso anterior. Para aplicar ambos efectos bastar con que seleccione el objeto o en este caso el texto y uno de los efectos mencionados. Fireworks se encargar de aplicar el resultado automticamente.
308
309
11.1. Introduccin
Hasta el momento se han descrito a grandes rasgos todas las funciones bsicas para trabajar con Fireworks 4 de manera rpida y efectiva. En un esfuerzo por continuar con el mismo ritmo y claridad de ideas, en este captulo seguimos con las diferentes funciones de esta aplicacin de dibujo vectorial para pginas Web. En esta ocasin toca aadir texto al documento activo. Esta accin ya la aplic en captulos anteriores, pero aqu la tratar por separado. Procuraremos explicarle cmo aplicar y cmo incluir texto en su trabajo de una manera sencilla, as como las maravillas que puede hacer con el texto que cre en ese primer paso. Hemos de decirle tambin que en el presente captulo, en las prximas prcticas, aplicar algunos de los estilos disponibles desde el ya mencionado men Efectos. Puede parecer ms bien que est reincidiendo en una herramienta que ya prcticamente conoce porque la ha usado en algn ejemplo anterior; pero es cierto que no la ha trabajado en profundidad. Bien es cierto que podra describirse en cuatro palabras todo el funcionamiento de Fireworks, pero no es nuestra intencin hacerlo as, y por ello estudiar progresivamente cada una de las herramientas de Fireworks. Debe recordar que est en la recta final de esta Gua Prctica, y que, por lo tanto, poco le queda por aprender sobre Fireworks, entre otras cosas porque ya sabe usar todas o casi todas sus herramientas. En sucesivos captulos estudiar la forma de crear efectos Ro llover y animaciones entre otras cosas. 311
Ahora, reiteramos, estudiar detalladamente la herramienta Texto, y la implicar en el panel Estilos. Si bien en captulos anteriores trat los atributos trazos, rellenos y efectos, ahora es el turno de estilos, que a nadie dejan indiferente.
todos los pasos cuidadosamente, y para ello debe hacer lo siguiente: 1. Seleccione la herramienta Texto. 2. Site el puntero del ratn all donde desea insertar el texto. 3. Con esta operacin habr llamado al editor de Texto que se desplegar como si se tratara de un nuevo programa o aplicacin, vase figura 11.1. Este completsimo editor le permitir saber en todo momento el tipo de letra empleado, el alineamiento, el tamao y otros valores no menos importantes. 4. Escriba una frase cualquiera dentro del rea del editor de Texto y acepte los valores por defecto. Ahora ver el texto, vase figura 11.2, en la zona que antes eligi.
Tras hacer clic en esta opcin el puntero del ratn se transformar en una especie de cursor, que podr mover a lo largo y ancho del lienzo de trabajo. Una vez que ha decidido el lugar donde ubicar el futuro texto, har un simple clic para llamar al editor Texto. Hemos resumido en unas pocas palabras cmo utilizar la herramienta Texto, pero no lo dejaremos ah; intentaremos que profundice en 312
Figura 11.2. Tras escribir el texto acepte y Fireworks lo colocar en el lienzo de trabajo
Como ve, escribir un texto es tan sencillo como hacerlo en el papel, como decir, coja un bolgrafo y escriba. Pero es slo un paso importante, ya que en este captulo conocer cmo trabajar con este completo editor o mejor dicho, cmo utilizar correctamente su contenido. Para ello y como primer paso 313
debe familiarizarse con l; as, una vez lanzado el nuevo entorno de trabajo, ver que en su interior parpadea un cursor, que indica el lugar donde se insertar el texto que introduzca normalmente desde el teclado. Para escribir el texto haga lo siguiente: 1. Escriba desde el teclado la frase "La Gua Prctica de 2. Como ver, el texto queda escrito con toda normalidad en la ventana de este editor y en el rea del documento activo; es posible que el estilo aplicado en ese momento o el tamao no sean los adecuados para su trabajo. Para modificar o alterar esos valores hay disponible una serie de botones activos en la parte superior del nuevo editor. 3. Imagine por un momento que quiere cambiar la Fuente del texto. Para ello, y seleccionando todo el texto con el puntero del ratn, proceder a hacer clic en la ventana Fuente situada en primera lnea, a un lado del editor.
Fireworks 4".
Figura 11.3. Desde el Editor Texto puede seleccionar la Fuente que necesite
nada ms hacer clic en ella. Por otro lado, observar dichas fuentes en una ventana que aparecer justo al lado del listado de la ventana Fuente. Tan importante es el tamao del texto como la propia tipografa, por ello se ha cubierto esa necesidad con un Submen situado al lado mismo de la ventana Fuente, que le permite elegir el tamao de todo el texto o de parte de l, segn sea la seleccin hecha en principio. Esto ltimo permite crear textos combinados y de diferentes fuentes y tamaos, an tratndose de una misma frase. Tambin es importante introducir el color adecuado a su texto, acentuando con un color ms llamativo por ejemplo, el encabezamiento de las frases. Para ello elija la primera letra y despus el color adecuado, disponible en la paleta de colores que ya se ha mencionado y descrito en captulos anteriores. En la figura 11.4 puede ver este ejemplo. El texto tambin puede escribirse en negrita o cursiva segn elija, con los botones al efecto situados dentro y a la derecha del mismo editor. Debajo de ellos encontrar varias opciones para escribir un texto largo, para el que puede adoptar las formas de interlineado, centrado, o justificado a la derecha o a la izquierda. Y como sucede con los grandes procesadores de texto ms avanzados, el texto o parte del mismo puede tratarse de forma un tanto especial con respecto al resto. Estamos hablando de la posibilidad de modificar la posicin, la altura o el ancho de una letra o conjunto de ellas, con slo seleccionar la letra y aplicar un valor nuevo activado en cualquiera de las restantes ventanas que llenan el editor de texto. El efecto resultante o el que se va a aplicar queda bien reflejado en el dibujo de los botones, lo que resume la sencillez de estas nuevas funciones. Funciones y cambios que quedarn reflejados en el propio editor si as se ha elegido en las ventanas de visualizacin que llenan el resto del editor. Una vez escrito y modificado convenientemente el texto, puede incrustarlo en el documento activo con slo hacer clic en el botn Aceptar. Lo sencillo que resulta trabajar con este editor no deja paso a extensas pginas de complicadas demostraciones grficas, por lo que pensamos que con lo descrito anteriormente ser suficiente en la mayora de los casos. No obstante, le ofrecemos seguidamente un resumen de cada una de las acciones. 315
4. Desde este men desplegable, vase figura 11.3, pue de elegir cualquier Fuente nueva, la cual se aplicar
1. Para cambiar el tamao del texto seleccione todo el texto o parte de l con el puntero del ratn. 2. Site el cursor sobre la pestaa de la ventana Tamao y haga clic para desplazar el cursor de esta opcin. 3. Cuando realice esta operacin observar como el texto cambia de tamao dentro del rea de este editor tal como se puede apreciar en la figura 11.5. Puede modificar el tamao directamente introduciendo un valor en la 4. Para poner en negrita el texto seleccionado slo deber hacer clic en el botn Negrita. En ese momento observar el cambio realizado. 5. De igual forma podr poner el texto en cursiva o subrayarlo. Para ello deber pulsar los botones Cursivos y Subrayados. Tambin aqu observar los cambios en el rea de texto del propio editor.
ventana Tamao.
Figura 11.4. Desde el Editor Texto puede seleccionar palabras sueltas para aumentar su tamao o cambiar el color
Figura 11.6. En esta captura puede ver cmo es posible separar las letras en base a la opcin Ajuste entre caracteres
Figura 11.5. Con la opcin Tamao puede combinar diferentes tamaos en cada letra de la frase 316
6. Para modificar la separacin o ajuste entre caracteres deber desplazar el cursor de esta opcin, vase figura 11.6. Recuerde que debe hacer clic en l y arrastrar el ratn mientras presiona. En este caso el cambio se
317
ver reflejado directamente sobre el texto del documento activo y no en el texto del presente editor. 7. Puede modificar la escala horizontal o la lnea de base efectuando el recorrido a travs de la barra de estos atributos, tal como lo hizo en pasos anteriores. Los resultados tambin se reflejarn en el documento activo, pero no se implantarn hasta que se acepten esos cambios. En la figura 11.7 puede ver un momento en este parmetro.
editar los vrtices que bordean el texto, como formas capaces de aceptar cambios libres en ellos. De este modo se pierde la informacin sobre la Fuente del texto elegido, pero se puede personalizar, como se ha dicho antes, como un trazado apto para recibir rotaciones y otros cambios que afectan a los objetos. Para realizar este cambio deber hacer lo siguiente: 1. Seleccione el texto del documento activo. 2. Seleccione la opcin Convertir en trazado, del men Texto. En ese momento el texto se habr convertido en un objeto que podr apreciar a simple vista. En la figura 11.8 puede ver este momento.
aquella parte del texto que desea, y aplicar los cambios con slo un clic en un atributo. En las siguientes lneas explicaremos cmo introducir otros cambios en el texto.
Como puede ver, trabajar con las propiedades del edi tor Texto es realmente sencillo, ya que todo se basa en seleccionar
Figura 11.8. Fireworks permite convertir un texto en un trazado como un simple objeto
Ahora el texto se habr convertido en un trazado simple que podr cambiar de aspecto y forma con ayuda de las nuevas herramientas que se describen a continuacin.
pecto del texto convertido en trazado y lograr una presentacin ms atractiva. La modificacin que va a realizar ser una rotacin del texto. Para ello deber hacer lo siguiente: 1. Seleccione el texto que antes convirti en trazado. 2. Haga clic con el botn derecho del ratn, y se le mos trar un Men emergente. 3. Sitese sobre la opcin Transformar. Se le mostrar un Submen con transformaciones libres. En este Submen encontrar las opciones Escalar, Inclinar, Distorsionar y Rotar entre otras tal como se puede ver en la figura 11.9.
Figura 11.10. Si desea acceder a la opcin Transformacin libre deber acceder al Men Modificar
4. Seleccione la opcin Rotar 180. Ver que el texto rota en ese orden sobre el documento activo. 5. Tambin puede rotar el texto libremente, es decir, sin la opcin anterior que limita la rotacin a un valor prefijado. Para ello seleccione la opcin Transformacin libre, del men Modificar-Transf ormar. Note que esta opcin no apareca en el Men emergente antes mencionado. En la figura 11.10 puede ver esta opcin. 320
6. Los oportunos vrtices son claramente identificables porque rodean el objeto o trazado seleccionado. Tambin el puntero del ratn tiene un papel importante adoptando un modo diferente segn donde est situado el cursor. As, cabe destacar que si el puntero entra en la zona del objeto o trazado, ste se convertir en una cruz que indica que si hace clic desde ese punto, lo que har ser mover el objeto. 7. Si por el contrario el puntero del ratn pasa por cualquiera de los laterales o por la parte superior o inferior del objeto, ste tomar la forma de doble flecha, la cual indica que el objeto podr ensancharse o variar de altitud sin tener en cuenta los valores numricos. 8. Por otro lado, si sita el puntero fuera del objeto, ste adoptar la forma de una flecha curva, indicio de que el objeto rotar a la par del movimiento del puntero. Los pasos antes descritos le han permitido rotar el texto, as como transformarlo libremente en cuanto a escala, tamao y relacin. De modo que ms que cmo rotar el objeto, lo que se describe es cmo modificar libremente el texto. Tambin hay que destacar que el puntero an puede tomar nue321
quierdo y arrastrando hacia dentro. Esto le permitir crear el efecto de perspectiva. En la figura 11.11 puede ver un ejemplo.
Figura 11.11. Si utiliza la herramienta Distorsionar podr crear situaciones cmo sta
Para ello deber hacer lo siguiente: 1. Seleccione el texto, en este caso el texto convertido en trazado. 2. Seleccione la herramienta Distorsionar. Cuando mueva el ratn observar como el puntero cambia de forma segn sea el vrtice invadido. 3. Sitese sobre el vrtice superior derecho y arrastre hacia la derecha. Ahora el texto toma cierta inclinacin y se deforma en ese sentido. 322
que directamente el efecto deseado. Volviendo a la herramienta Escalar, asegrese de tenerla seleccionada y aplique el cambio de tamao con esta opcin. Recuerde que para hacerlo bastar hacer clic sobre el texto y arrastrar desde una de las esquinas para modificar el tamao. 5. Ahora ya tiene disponible el texto para aplicarle el primer efecto. En este caso uno de los varios posibles dentro del denominado Bisel y Relieve, algo as como biselados y relieves en todas sus versiones. Para ello seleccione de nuevo el texto con el puntero del ratn, y con eso podr asignar un efecto a la seleccin.
por ejemplo sobre el efecto Bisel interior y Fireworks lo aplicar automticamente y en tiempo real. En la figura 11.12 puede ver este ejemplo. Observe que el efecto aplicado resulta bastante interesante. En este caso ha aplicado Bisel interior que permite crear el efecto de relieve en el cuerpo del texto. Sin embargo no es por ello ms impresionante este efecto de relieve. Aplicar esta vez un nuevo tipo de relieve sobre el mismo texto seleccionado, en este caso Bisel exterior. Para ello haga lo siguiente: 1. Seleccione de nuevo el texto con la herramienta Puntero. Otra vez el texto queda dispuesto para recibir un efecto. 2. Ahora s observar un contenido en el panel Efectos. En este caso se le indica que tiene aplicado el efecto Bisel interior. Se distingue perfectamente, ya que est indicado en modo Texto y con una cuadrcula marcada. Sepa que puede aplicar o eliminar efectos con slo marcar o no esta casilla.
Figura 11.12. Al igual que en el captulo anterior aqu hacemos uso del efecto Bisel Interior
6. Seleccione el panel Efectos. Ver como en esta ocasin no hay ningn efecto aplicado. De esta forma se le mostrar la opcin Ninguno, en la ventana Aadir efectos. Para seleccionar un efecto haga clic en esta ventana. Fireworks le mostrar ahora un Men emergente con los efectos disponibles. Seleccione la opcin Bisel y Relieve. Nada ms situarse sobre ella se le mostrarn las combinaciones de este efecto. Haga clic
324
Figura 11.13. Cmo ya sucedi en el captulo Efectos aplicar el efecto Bisel Exterior es toda una grandeza
3. Haga clic otra vez sobre la ventana Aadir efectos. En este caso seleccione el efecto Bisel exterior. Ver que
325
ahora el efecto es impresionante. Puede eliminar el efecto Bisel interior con slo desmarcar la casilla de este efecto y aparecer el resultado automticamente. En este caso observar tambin un cambio radical en el texto, vase figura 11.13. Con el efecto anteriormente descrito lo que se consigue es que los bordes del objeto seleccionado aparezcan redondeados y con la profundidad que inspira un efecto tridimensional, es decir, lo que se conoce en el mundo del diseo como 3D. Algo que ya se record en el captulo anterior. Este efecto est muy indicado para aplicar en los ttulos. Y ahora en lugar de alabanzas, pasaremos a describir un poco ms el contenido de este efecto. A estas alturas sabe que aplicar un efecto no consiste en hacer clic y nada ms; detrs de esa sencilla accin se esconde el editor Efectos. Cada efecto tiene implcito un editor y uas propiedades diferentes. Por ejemplo, no todos los efectos son de relieve, hay igualmente efectos pticos de los que tambin hablaremos aqu. Pero tome como ejemplo el efecto Bisel exterior y estudie un poco lo que hay detrs de ese efecto. Para ello siga los pasos siguientes. 1. Seleccione el texto que tiene implcito el efecto Bisel exterior. Esto le permitir ver que dicho efecto est evidentemente aplicado al objeto, en este caso el texto seleccionado. Fjese en la ventana Efectos y ver que el efecto mencionado est marcado en la casilla. Si desactiva esta casilla, Fireworks anular el efecto. Puede aplicar diferentes efectos uno tras otro y desactivarlos despus a su gusto. 2. Entre el nombre del efecto aplicado y la casilla activada ver una 'i' latina. Haga clic en el efecto y Fireworks le mostrar ahora las propiedades de ese efecto. Se destaca principalmente la ventana Forma del borde, Bisel. Desde ah podr seleccionar varias opciones aadidas a este efecto. 3. De la ventana Forma del borde, Bisel, seleccione cualquier otra forma y compruebe el resultado en tiempo real. Como ve, el Bisel exterior puede presentarse de varias formas no menos atractivas que el valor por defecto. 4. Desde este editor de propiedades puede modificar el ancho del Bisel aplicado. Para ello sitese en la pestaa de la ventana Anchura y haga clic con el botn 326
del ratn. Ahora se le mostrar una barra vertical desde la cual podr desplazar el cursor, hacia arriba por ejemplo. En este caso elija un valor superior a 50. Observar cmo el Bisel se ensancha considerablemente y el efecto es sorprendente. En la figura 11.14 puede ver el resultado.
Figura 11.14. Una vez ms, recordar cmo aplicar interesantes efectos al texto es algo mas que divertido
Parte de esta prctica ha sido rescatada de un captulo anterior. Se trata del captulo donde se habla del contenido del panel Efecto. En aquella ocasin tambin practic cmo imprimir un efecto al texto, aqu lo ha recordado y, de paso, el uso de otras herramientas. En estos momentos est ms que preparado para utilizar cualquier herramienta de Fireworks 4. En cuanto al texto puede elegir cualquiera de las frases ms repetidas de esta Gua como Fireworks o Gua Prctica de Fireworks 4, para realizar estos ejemplos. En el siguiente bloque estudiar la forma de aplicar estilos al texto y ser por lo tanto el ltimo en que se describa el uso de las herramientas bsicas as como el contenido de los paneles de Fireworks. En adelante aprender a crear situaciones ms complejas con los efectos Rollover y animacin. Pero repetimos, ser ms adelante. 327
las combinaciones de relleno y efecto. En cualquier caso sta no debera serle una tarea compleja, ya que en los captulos anteriores aprendi a utilizar estos paneles. Juegue con las combinaciones que Fireworks le brinda y cree nuevos estilos personalizados.
Figura 11.15. En esta captura podemos ver cmo se ha aplicado un estilo al texto seleccionado y he aqu el resultado
En este captulo ha profundizado en el conocimiento de la herramienta Texto, una herramienta en la que, a pesar de haberla utilizado en captulos anteriores, era imprescindible insistir dado que desconoca el contenido total del editor Texto. Ahora que ya lo conoce correctamente es oportuno que pase a contenidos ms complejos, porque en definitiva se trata de apreciar el verdadero potencial de Fireworks. Recuerde que Fireworks es una aplicacin de dibujo vectorial y de mapa de bits que permite crear objetos Web muy sofisticados; esto es, objetos dinmicos e interactivos. En ese sentido Fireworks le permitir crear Mapas de imagen, animaciones y botones con efecto Rol 1 over entre otras cosas, y ese ser el contenido del captulo siguiente.
329
12.1. Introduccin
El plato fuerte de toda aplicacin destinada a la creacin de grficos para la gran Web, sern sin duda los nuevos conceptos Javascript que implican zonas activas de imagen y efectos Rol lover y, por supuesto, los grficos animados, tambin llamados GIF 9 6. Todos pilares de esta aplicacin. Bajo el sugestivo ttulo "Creando Mapas de imagen, Rollover y Animaciones GIF," en esta ocasin nos centraremos en la especialidad de Fireworks 4 en todo su esplendor. O sea, un grfico dividido en secciones activas o con enlaces, un botn con una accin implcita o un GIF que es capaz de mostrar una animacin sencilla pero efectiva. Quizs la explicacin no sea del todo satisfactoria, de ah el deseo de mostrarle cuanto antes en la prctica qu son exactamente un Mapa de imagen, un efecto Rol lover con evento y una simple animacin. Aunque tambin, dicho sea de paso, antes de pasar a la prctica es obligado aclarar algo ms qu es un Mapa de imagen, un efecto Rollover y un Gif animado. Ese es nuestro propsito y pasamos a cumplirlo Un Mapa de imagen es la capacidad de "seccionar" en bloques el contenido total de la imagen. Cada uno de estos bloques puede contener un enlace con otra pgina o con un efecto Rol lover. Tambin el efecto "recortes" se emplea para reducir el tiempo de descarga en la Web de una imagen grande, ya que sta se encuentra dividida en varios bloques. El efecto Rollover permite crear una zona activa all donde se encuentre. Por ejemplo puede hacer que el grfico 0 el botn seleccionado sea sustituido por otro grfico o por 331
un texto. Los botones Rollover son el paso previo a una animacin, pero en este caso, en base al estado del puntero del ratn, ya que acta cuando est sobre el objeto al hacer clic en l o cuando se aleja. Un Gif animado es un grfico optimizado que permite tener implcitos varios Fotogramas y contenidos diferentes, obtenindose as una animacin real cuando estos Fotogramas se muestran sincrnicamente. As, un Gif animado puede representar una imagen en movimiento o un Banner publicitario. En ambos casos debe utilizar el contenido de Fotogramas, pero el resultado es bien diferente. Cabe decir que las animaciones GIF son las ms empleadas en las pginas Web, aunque la tendencia a su implantacin es trasladar estas animaciones al formato de Flash. Sin embargo debe saber diferenciar entre un GIF y una animacin de Flash, ya que por su naturaleza los Gif animados siguen siendo empleados todava en todas las pginas Web del mundo por su eficacia y su sencillez. Los contenidos animados de Flash estn ms orientados a presentaciones profesionales y de multimedia que requieren gran calidad en el acabado, pero que utilizan un ancho de banda ms bien bajo. Es lo que se denomina Streaming, mientras que los Gif animados utilizan la proyeccin de Fotogramas del obj eto, lo que reduce considerablemente el espacio que ocupan en la pgina Web. En los prrafos que siguen describiremos cmo crear cada uno de los ejemplos citados. Para ello nos valdremos de una prctica rpida y sencilla de realizar. En realidad sta pudiera ser la seccin ms divertida de toda la Gua puesto que ms que experimentar estar jugando. Finalmente, y antes de dar con los datos, debemos recordarle que estas acciones llevan implcitas acciones de Exportacin, lo que se explicar y diferenciar en el prximo captulo. En cualquier caso, comprender ambos conceptos en muy poco tiempo.
rio opte por esta solucin de Macromedia. Se trata de generar grficos optimizados para la Web. Para comenzar, debe tener en cuenta que lo que va a crear en los pasos siguientes es un Mapa de imagen, esto es, un grfico desde el cual puede acceder a diferentes pginas HTML haciendo clic en las zonas activadas para tal fin. Zonas que pueden estar en cualquier parte del grfico. Ello no significa que un enlace sea lo nico que se pueda aplicar a una zona interactiva, es posible tambin aadir intercambios de imagen o Mens emergentes entre otras cosas.
Figura 12.1. En esta captura puede ver un ejemplo de un grafico con atributos adecuados para crear zonas interactivas El primer paso para crear zonas interactivas con enlace a otras pginas HTML, es colocar un grfico adecuado en el documento activo, con la opcin Insertar imagen, del men Insertar. El grfico deber cumplir con unos mnimos requisitos y tener calidad para ser vlido para su creacin. Esos requisitos pasan por advertir que el grfico debe ser lo suficientemente grande como para ocupar ms de la mitad de la pantalla de su monitor. Adems, es obvio que debe incluir algn tipo de texto identificativo de que lo lleva a algn lugar. En la figura 12.1 puede ver un ejemplo de ello. 333
Una vez que ha obtenido un grfico idneo para su nueva experiencia, debe realizar los siguientes pasos: 1. Lo primero es seleccionar la herramienta Zona interactiva directamente desde la paleta de herramientas o mediante el men Insertar Zona interactiva. Tras esto el puntero del ratn pasa a convertirse en una diminuta cruz, con la cual podr crear una zona activa. 2. Ahora dibuje un rectngulo imaginario con esta herramienta all donde desee crear una zona interactiva. Hecho esto observar como el rectngulo imaginario se rellena de un color pastel para identificar la zona activa tal como se muestra en la figura 12 2
Figura 12.3. Observe cmo en el centro de la zona interactiva se muestra un icono que identifica esta zona
Figura 12.2. Aqu puede ver cmo se muestra una zona interactiva
3. Ahora seleccione la herramienta Puntero y haga clic en el centro de la zona interactiva que acaba de crear. Observar un pequeo icono en su centro, vase figura 12.3. Significa que acaba de seleccionar una zona activa. 4. Sitese sobre esta zona y haga clic con el botn derecho del ratn. Es la forma ms rpida de acceder a los comportamientos de objeto. Ahora Fireworks le mostrar el Men emergente, vase figura 12.4, con los comportamientos que podr aplicar a la zona interactiva.
334
5. En el panel Objeto aparecer la correspondiente informacin sobre la zona activa, que en este caso carecer completamente de contenido, esto es, no se mostrar enlace alguno ni comportamiento aadido, puesto que no existen.
8. Ahora, para comprobar los resultados, seleccione la opcin Presentacin preliminar en el navegador y podr comprobarlos en su navegador habitual. Cuando pase el puntero del ratn sobre la zona interactiva ver que se muestra el mensaje mencionado. Por otro lado si hace clic en dicha zona ver que el navegador busca la nueva pgina Web, es decir, el enlace implcito en esa zona interactiva. En la figura 12.7, puede ver una instantnea que lamentablemente no muestra dicho mensaje, debido a que el capturador no lo reconoce.
6. Ahora deber crear el enlace en la zona interactiva creada, de modo que escriba la direccin de una pgina Web en la actual ventana URL, del panel Obj e t o mencionado antes. Por ejemplo escriba "www.claudio.com". Con esto le habr indicado a Fireworks que esta zona interactiva lleva implcito ese enlace que se har efectivo cuando haga clic en la zona interactiva. En la figura 12.5 puede ver esta URL en el 7. Tambin puede introducir una etiqueta Alt, es decir, puede mostrar un mensaje cuando el puntero del ratn pase sobre la zona interactiva. Para ello escriba una frase en la ventana Alt del panel Obj eto. Con esto le habr indicado a Fireworks que esa zona interactiva debe mostrar el mensaje escrito cuando el puntero del ratn pase sobre ella. En la figura 12.6 puede ver un ejemplo.
336
Panel Objeto.
Figura 12.7. En esta captura puede ver el resultado final, el puntero convertido en mano demuestra que la etiqueta Alt est activa 337
Como ha visto, crear una zona interactiva no resulta excesivamente complicado, ms bien es una accin sencillsima. Como se ha dicho anteriormente una zona interactiva no slo permite tener implcita una accin de enlace, tambin puede mostrar, por ejemplo, un mensaje en la Barra de estado. Para ello realice los pasos siguientes. 1. Seleccione una zona interactiva, digamos la antes descrita, o cree una zona nueva. Esta accin le permitir aadir un comportamiento donde desee. 2. Sitese sobre la zona interactiva y haga clic con el botn derecho del ratn. Fireworks le mostrar el Men emergente con las opciones disponibles para la zona interactiva. Para las zonas interactivas y las divisiones existe una diferencia en el contenido de este Men emergente. Por ejemplo se destaca la ausencia del efecto 3. Seleccione la opcin Aadir mensaje, de la Barra de es tado. Se le mostrar el cuadro de dilogo de esta opcin tal como se muestra en la figura 12.8. Escriba un mensaje en este cuadro de dilogo.
Rol lover.
4. Para comprobar, seleccione ahora la opcin Presentacin preliminar en el navegador, y podr ver los resultados en su navegador habitual. En este caso observar que todava no tiene el mensaje visible en la Barra de estado del navegador. Para que se cumpla deber pasar el puntero del ratn sobre la zona interactiva y observar que el mensaje aparece en la Barra de estado, vase figura 12.9.
Figura 12.9. En esta captura puede ver dicho mensaje en la barra de estado del navegador, en este caso Explorer
Figura 12.8. En este ejemplo insertar un mensaje en la barra de estado de su navegador 338
Aadir un comportamiento en la zona interactiva sigue siendo exponencialmente una operacin sencilla. Acaba de descubrir cmo insertar texto en la Barra de es tado y ha sido una experiencia excelente! Antes de finalizar este ejemplo, cabe recordar que el mensaje aparecer segn lo que se decida en el panel Comportamiento, es decir, cuando llame una accin de este tipo en el panel Comportamiento podr elegir cundo ha detener lugar ese comportamiento. O sea que en este caso tiene la posibilidad de elegir el modo de activar el texto. Estos modos son: On MouseOver, OnMouseOut, OnClick y OnLoad, o lo que es lo mismo, cuando pasa el puntero del ratn por encima y se aleja, haciendo clic en la zona interactiva, se carga la pgina Web.
339
Ahora descubrir otros comportamientos para las zonas interactivas que en principio no resultan ya tan sencillos de realizar, sobre todo cuando tienen que ver con la opcin Divisin en todo ese entramado. Para que comprenda lo que queremos decir, lo mejor es que siga el ejemplo: 1. Este ejemplo consiste en aplicar el comportamiento Aadir comportamiento Intercambiar imagen. En un principio se resuelve simplemente aadiendo esta accin a la zona interactiva, es decir, seleccione la opcin Aadir Comportamiento Intercambiar imagen, del Men emergente y seleccione, una vez dentro del cuadro de dilogo Intercambiar imagen, una imagen de su disco duro. Esta accin debera permitirle ver la nueva imagen seleccionada all donde cre o dibuj la zona interactiva, pero no sucede as. Para que ello ocurra deber cambiar algunas cosas y aadir otras.
alrededor del texto. En la figura 12.10 puede ver esta zona interactiva aplicada.
3. Cree ahora una zona o divisin con la herramienta Divisin. Esta accin le permite implicar el comportamiento Es decir, si no crea la divisin no tendr el resultado esperado. En la figura 12.11 puede ver esta Divisin. 4. Sitese sobre la zona interactiva creada y haga clic en ella con el botn derecho del ratn. Se le mostrar el Men emergente con los comportamientos soportados, vase figura 12.12. Seleccione el comportamiento Aadir comportamiento Intercambiar imagen. En ese momento se le mostrar el cuadro de dilogo Intercambiar imagen en cuya ventana principal podr identificarla zona denominada Seleccin, vase figura 12.13. Es decir, en ese cuadro de dilogo se le mostrar la zona que cre como Divi s in. 341
Intercambiar imagen.
Figura 12.10. Aqu puede ver una nueva zona interactiva que permitir, ms adelante, mostrar otra imagen en una Divisin
2. Cree una zona interactiva con la herramienta zona interactiva. Esta accin le permite crear una zona interactiva a la que podr aplicar el Comportamien340
6. Haga clic en la carpeta Archivo de Imagen. Se le mostrar el cuadro de dilogo Abrir, vase figura 12.14, desde donde podr seleccionar otra imagen. Observe antes que en la ventana Fotograma se le indica que tiene activos dos Fotogramas. Significa que aunque no las vea, en realidad tiene dos imgenes cargadas en dos Fotogramas diferentes.
Figura 12.12. Como puede ver el contenido del men emergente de la opcin Divisin contiene ms comportamientos
Figura 12.14. Vista del cuadro de dilogo Abrir en el modo Intercambiar imagen
5. Seleccione dicha Divisin directamente haciendo clic sobre el texto que lo identifica en la primera ventana. Ahora la zona Divisin quedar activada as como la
ventana Archivo de Imagen. 342
Figura 12.15. Aqu puede ver cmo la zona interactiva y la Divisin estn ligadas mediante un enlace 343
7. Cuando seleccione la nueva imagen y acepte este cuadro de dilogo observar al volver a su documento como ambas zonas, la interactiva y la Divisin estn relacionadas mediante una lnea, vase figura 12.15. Significa que la zona interactiva queda relacionada directamente con el contenido de la Divisin creada. 8. Para comprobar, seleccione ahora la opcin Presentacin preliminar en el navegador, ypodr ver los resultados en su navegador habitual. Una vez cargado el navegador site el puntero del ratn sobre la zona interactiva del grfico, observar como'en la zona Divisin se muestra la imagen que eligi en pasos anteriores.
utilizar tambin una Divi s in. En ese sentido est entrando en el efecto Rol lover. En otro orden de cosas, si desea aadir el comportamiento Aadir Men emergente, ste s ser un comportamiento sencillo de aadir a la zona interactiva, sin necesidad de echar mano a una Divisin como antes sucedi. Para este ejemplo realice los pasos siguientes:
1. Sobre la imagen dibuje una zona interactiva con el procedimiento conocido. 2. Sitese en esta zona y haga clic con el botn derecho del ratn para acceder al Men emergente, Comportamientos.
un mayor conocimiento, ya que aunque se muestra la posibilidad de crear este comportamiento en una zona interactiva de forma directa, realmente no sucede as. Recuerde que si utiliza este comportamiento slo para la zona interactiva, el resultado final es nulo ya que para ello deber 344
Figura 12.17.
3. Seleccione la opcin Aadir Men emergente. Ahora Fireworks le mostrar el cuadro de dilogo Establecer Men emergente. En la figura 12.17 puede ver el editor Establecer men emergente. 345
4. En la ventana Texto escriba lo que quiere que aparezca en el primer escaln del Men. Tras esto haga clic en el botn + del cuadro de dilogo situado en la parte superior. Esta accin le ha permitido aadir un peldao al Men y habilitar esta accin. Aada varios peldaos ms. 5. Puede escribir un vnculo implcito en este peldao del nuevo men. Para ello escriba una direccin electrnica en la ventana vnculo. En la figura 12.18 puede ver las propiedades del futuro men emergente.
Figura 12.19. En este caso tenemos delante los atributos posibles del men emergente
Figura 12.18. En esta instantnea puede ver los atributos del nuevo men emergente
6. Ahora haga clic en el botn Siguiente. Con esta accin podr acceder a las propiedades del Men emergente, es decir, el tipo de letra a emplear, el color de la celda o el texto en sus diferentes estados, Arriba y Sobre. Si desea modificar cualquiera de los colores del texto o de la celda en sus diferentes estados bastar con que seleccione un nuevo color de la paleta de colores en los iconos que representan estos estados. Adems, tendr delante una Presentacin preliminar dentro de ese mismo cuadro de dilogo. Si le convence el aspecto del Men emergente haga clic en el botn Finalizar. En la figura 12.19 puede ver estas propiedades de cerca. 346
Figura 12.20. Aqu puede ver los resultados del ejemplo aplicar men emergente
7. Para comprobar, seleccione la opcin Presentacin preliminar en el navegador, y podr verlos resul347
tados en su navegador habitual. Cuando el navegador le muestre la imagen con estos comportamientos implcitos pruebe a desplazar el cursor del ratn sobre la imagen. Observar que cuando se sita sobre la zona interactiva se muestra inmediatamente el Men emergente con las propiedades antes indicadas. Si ha optado por aadir este comportamiento a los comportamientos anteriores habr observado la posibilidad de combinar varios comportamientos a la vez. Este comportamiento puede aplicarse directamente a una zona interactiva o en combinacin con divisiones de la imagen. Esto permite crear situaciones avanzadas y sofisticadas sin demasiado coste, ya que Fireworks sacrifica tiempo y dedicacin en pos de usar
lavaScript.
Figura 12.21. En esta captura puede ver la imagen y la opcin aadir Fotograma 3. Sitese en el segundo Fotograma y aada all una segunda Imagen. En la figura 12.22 puede ver esa imagen nueva.
349
Figura 12.22. Esta es la segunda imagen elegida para el Fotograma 2, una imagen que ya conoce
4. Ahora seleccione la herramienta Divisin y cree un rea imaginaria en el Fotograma 1. Esta rea actuar como ventana ya que un efecto Rol lover s imp 1 e es tan sencillo como mirar a travs de esa ventana lo que hay debajo del puntero del ratn, en este caso la imagen o parte de la imagen que se encuentra en el Fotograma 2. Esto es porque el contenido del Fotograma 1 acta como contenido sobre, mientras que el contenido del Fotograma 2 acta como contenido debajo. En la figura 12.23 puede ver esta Divisin. ~. Sitese sobre Divi s i n y haga clic con el botn derecho del ratn para llamar al Men emergente, Comportamientos. Recuerde que tambin puede acceder directamente al contenido de comportamientos mediante el panel Comportamientos. Por ejemplo esta vez hgalo desde este panel; haga clic en el botn +, Fireworks le mostrar ahora el contenido de comportamientos, es decir, el Men emergente. En la figura 12.24 puede ver este men emergente surgiendo del Panel comportamiento.
Figura 12.23. Aqu se puede ver la Divisin creada, que es ms o menos el 70% de la imagen 350
Figura 12.24. Recuerde que puede acceder a los comportamientos directamente desde el Panel Comportamiento 351
6. Seleccione la opcin Rollover Simple. Ahora tendr este Comportamiento asignado en la ventana del panel Comportamientos. Observar que se le indica que dicho comportamiento tendr efecto cuando pase el puntero del ratn sobre la imagen, esto es modo OnMouseOver. 7. Ahora para comprobar los resultados seleccione la opcin Presentacin preliminar en el navegador, y podr comprobar los resultados en su navegador habitual. Cuando el navegador le muestre la imagen desplace el puntero del ratn sobre l, ver que cuando pasa sobre Divisin, se mostrar parte de la imagen que estaba oculta. En la figura 12.25 puede ver el resultado.
cer un efecto Rollover a travs del comportamiento Intercambiar diferente para cada estado del puntero del ratn, es decir, cuando ste est sobre Divisin o cuando se hace clic. El resultado se puede mostrar en la divisin que se desee permitiendo as crear Rollover complejos a partir de un Rollover simple. Como el que sigue por ejemplo. 1. Repita los pasos descritos. Recuerde que se trataba de crear una Divisin y de insertar dos imgenes diferentes en Fotogramas diferentes. 2. Ahora cree otra nueva Divisin debajo de la anterior tal como se muestra en la figura 12.26. Esta accin le permitir establecer la opcin BarNav. En este caso como ha creado dos Divisiones sobre una misma imagen tendr la opcin de modificar el contenido a mostrar en el rea Sobre o Abajo.
Imagen o establecer imagen de BarNav. Este comportamiento permite asignar una imagen
Figura 12.25. Como puede ver en esta captura el efecto Rollover permite mostrar la imagen que estaba oculta en el Fotograma 2
Un efecto Rol lover puede mostrar un estado diferente, no slo por donde pasa el puntero del ratn, sino ms all. En este sentido hay que destacar tambin que es posible crear efectos Rol lover ms complejos en los que intervienen varios Fotogramas ocultos. Como tambin es posible estable352
Figura 12.26. El siguiente paso consiste en aplicar otra Divisin sobre la imagen principal
3. Haga clic en el botn + del panel Comportamientos. Ahora se le mostrar el Men emergente con todos los comportamientos disponibles. Seleccione la
353
opcin Establecer imagen de BarNav Sobre. Selemostrarelcuadro de dilogo Establecer imagen de BarNav Sobre. En dicho cuadro de dilogo, vase figura 12.27, se le mostrarn las dos Divisiones que tiene activas. Seleccione, por ejemplo, la Divisin inferior. Esta accin le permite modificar el contenido de esta Divisin tras hacer clic en ella.
era sencillo es ahora ms sofisticado. En este sentido puede restablecer las imgenes o acceder a las Divisiones directamente para modificar su contenido. En cualquier caso como puede ver, un efecto Rol lover puede simplificarse o complicarse segn sus necesidades, pero en ningn caso le resultar difcil comprender su funcionamiento. Como ve, Fireworks es una herramienta flexible y sencilla, til an en situaciones difciles.
Figura 12.27. Vista del editor Establecer imagen de Bar Nav 4. Recuerde que debe cargar la nueva imagen desde la ventana Archivo de imagen de este cuadro de dilogo antes de Aceptar. 5. Ahora para comprobar el resultado seleccione la opcin Presentacin preliminar enelnavegador, y lo podr comprobar en su navegador habitual. En este caso observar una accin de efecto Rollover simple cuando el puntero del ratn pase sobre las Divisiones. Sin embargo si hace clic en la Divisin superior, observar como en la Divisin inferior se muestra el contenido de una tercera imagen. En la figura 12.28 puede ver el resultado. El comportamiento descrito puede manifestarse de diferentes maneras, es decir, puede aadir dicho efecto cuantas veces quiera y siempre desde una visin diferente. Por ejemplo, si ya ha creado un comportamiento de este tipo, al volver a cargar otro comportamiento idntico encontrar la sugerencia de que aada ms Fotogramas, ya que el comportamiento que inicialmente 354 355
Figura 12.28. Aqu se muestra una vez ms el resultado, en este caso de aplicar BarNav Sobre
animacin automatizada de Fireworks le permitir crear sofisticadas animaciones de manera rpida y fcil.
Los pasos mencionados anteriormente son esenciales para crear una animacin paso a paso, aunque es cierto que Fireworks 4 permite prescindir de esto ya que puede crear una animacin de manera directa con slo introducir los parmetros de destino en un editor Animacin; tambin debe recordar aqu que se puede realizar una animacin de igual forma prescindiendo de las automatizaciones de Fireworks. Con ello queremos recordarle que combinar los modos de animacin manual con las avanzadas tcnicas de 356
Figura 12.29. En esta captura puede ver algo tan sencillo como el texto en el que se aplicar una animacin
357
3. Seleccione la opcin Duplicar Fotograma. Se le mostrar el cuadro de dilogo, vase figura 12.31, desde donde podr seleccionar el nmero de Fotogramas a duplicar y dnde.
4. Puede introducir directamente el nmero de Fotogramas duplicados introduciendo un valor en la ventana Nmero o bien a travs de la barra de desplazamiento de esta opcin. Recuerde que estas barras se activan haciendo clic sobre ellas mientras arrastra el puntero del ratn.
Figura 12.30. Aqu puede ver el contenido del men del Panel Fotogramas 358
5. Seleccione la opcin Despus, del Fotograma actual. Esta accin le permitir aadir los Fotogramas duplicados despus del ltimo Fotograma. Con esa accin ya habr completado este paso. En la figura 12.32 puede ver la lista de Fotogramas.
de aqu podr modificar interesantes propiedades de esta funcin. Por ejemplo, podr seleccionar el modo de reproduccin, es decir, si desea reproducir la animacin una sola vez o en modo Bucle. 3. En la ventana Demora de Fotograma puede introducir un valor que le permitir establecer un retardo o tiempo de demora entre Fotogramas. Esta accin le permite ajustar las distintas fases de la animacin.
Figura 12.33. Desde el editor Exportar podr modificar los tiempos existentes entre cada Fotograma entre otras cosas
Hasta aqu este primer ejemplo. Una vez decidido a dejar algunas propiedades bsicas en la animacin, es el momento de aceptar esos cambios y efectuar la exportacin de forma directa, lo que se detallar en el prximo captulo. Ahora pasemos al modo de animacin por interpolacin.
reposa en la santa paciencia de crear Fotogramas repetidos. Ahora nos llega un nuevo mtodo para crear animaciones con un mnimo esfuerzo. Se trata del mtodo Tweening o Interpolado. Un mtodo en el que el diseador elige dnde empieza y dnde acaba su animacin, sin ms all que crear un objeto simple. Pero, por supuesto, el movimiento ser nicamente de desplazamiento y no de movimiento de parte de los objetos, lo que ya es algo. No obstante, Fireworks ha tenido en cuenta esa circunstancia y ha introducido la opcin Animar que s permite crear interpolados ms sofisticados, pero eso para ms adelante. A continuacin intentaremos describir cmo realizar con xito un proceso Tweening sencillo.
vertir el objeto en un smbolo. Para ello bastar con elegir el objeto y aplicar la funcin Insertar / Convertir en smbolo. Se le mostrar el cuadro de dilogo Propiedades de smbolo. Active de aqu la casilla Animacin, vase figura 12.34. Esta accin le permite indicar a Fireworks que el smbolo debe soportar el efecto animacin. Cuando acepte, Fireworks le mostrar el editor Animar, vase figura 12.35. Haga clic en el botn Cancelar. Con esto, el objeto seleccionado mostrar un signo + en la esquina izquierda, lo que indica que ya es un smbolo. 2. Duplicando el smbolo. El siguiente paso es duplicar el objeto. Para ello emplee la opcin Editar/Duplicar, desde el men Editar. Este nuevo objeto estar identificado por una pequea flecha en la esquina inferior izquierda. Ahora debe colocar el nuevo objeto en el lugar deseado con ayuda de la herramienta Puntero.
Figura 12.36. Para crear el efecto interpolado deber seleccionar ambos smbolos con la herramienta Puntero
1. Transformando un objeto en smbolo. Para crear un efecto Tweening, lo primero que deber hacer es con362
3. Generando el Tweening. Ahora proceder a generar el fenmeno Tweening; para ello seleccione ambos objetos, vase figura 12.36, y aplique la funcin Modificar,
363
Smbolo, Entre instancias. Aparecer una nueva ventana de dilogo, vase figura 12.37, desde la cual podr introducir el nmero de Fotogramas deseado. Mientras ms Fotogramas, menor ser la velocidad de transicin. El efecto Tweening permite crear movimientos de objetos con una realidad envidiable, ya que permite optimizar el recorrido del objeto con bastante fidelidad, mientras que si la animacin se realizara manualmente podra caerse en un demasiado falso concepto del movimiento. Finalmente, en este cuadro de dilogo active la opcin Distribuir en fotogramas. Despus, acepte.
4. La prueba final. Ahora deber comprobar los resultados. Fireworks le permite ver los resultados desde el documento de trabajo. Para ello debe hacer clic en el botn Reproducir que encontrar en la parte inferior del lienzo. Observar como en este caso el objeto se desplaza por el lienzo de trabajo. En la figura 12.38 puede ver todos los Fotogramas a la vez. Como ha podido ver, crear una animacin interpolada es una tarea verdaderamente sencilla. En este caso hemos descrito una animacin realmente simple en la que interviene el efecto Interpolar que tanto Fireworks como Flash soportan. La animacin basada en la interpolacin de formas permite crear animaciones desde un objeto inicial y desde otro denominado final. As ha sido en este ejemplo, sin embargo y como decamos anteriormente, Fireworks ha aadido en esta nueva versin ms dinamismo y eficacia a la opcin animar, por lo que es posible crear animaciones interpoladas ms sofisticadas y complejas a partir de un nico objeto inicial. En el siguiente bloque trataremos esta necesidad.
Figura 12.38. La opcin animacin permite ver todos los Fotogramas sin el efecto papel cebolla 364
direccin deseada. En la figura 12.40 puede ver una direccin al azar. 7. En la ventana Escala introduzca un valor por debajo de 30 por ejemplo. Esta accin le indica a Fireworks que el smbolo debe cambiar de tamao mientras se desplaza. 8. Introduzca un valor de 50 en la ventana opacidad. Esta opcin le permite aadir opacidad al smbolo mientras ste se desplaza o se mueve. 9. En la ventana Rotar seleccione un valor de 85 por ejemplo. Esta propiedad le indica a Fireworks que el smbolo debe rotar en la direccin indicada y en proporcin al valor introducido. En la figura 12.41 puede ver todos los valores descritos introducidos.
Figura 12.39. Vista del editor Animar
4. En la ventana Fotogramas introduzca el valor 30. Esta accin le permite aadir 29 Fotogramas ms al actual. 5. Haga clic en el botn de la ventana Mover y arrastre el puntero del ratn hacia arriba. Esta accin le ha permitido atribuir la distancia de movimiento de la animacin. En esta ventana deje un valor superior al 100.
6. Haga clic en el botn de la ventana Direccin. Observar que se le muestra un botn capaz de rotar y elegir la direccin de desplazamiento del smbolo. Si deja el valor 0 el desplazamiento ser lateral, es decir, hacia la derecha y en lnea recta. Seleccione aqu la 366
10.Ahora debe observar el resultado y para ello acepte estos cambios. Fireworks le muestra un mensaje recordndole que la animacin sobrepasa al ltimo Fotograma. Acepte y Fireworks aadir los Fotogramas que faltan para crear la animacin. En este momento se le mostrarn todos los Fotogramas disponibles en el panel Fotogramas. Adems, el smbolo quedar marcado por una serie de crculos azules que indican la direccin de la animacin, vase figura 12.42. Al final de estos crculos azules encontrar un crculo rojo, que indica el final de la animacin. Para comprobar la animacin haga clic en el botn Reproducir. Ver qu sorprendente! Tendr la sensacin de que el smbolo ha sido lanzado por una mano invisible. 367
Figura 12.42. Antes de proceder a hacer clic en el botn Play esto es lo que ver en el lienzo de trabajo En este ejemplo ha podido ver que Fireworks es capaz de crear animaciones de forma automatizada y con poco esfuerzo. Ahora Fireworks est ms cerca de la filosofa de trabajo de Flash 5. Esto permite crear animaciones complejas y exportarlas tambin a dicho formato sin necesidad de recurrir a Flash ni a combinaciones con ste para potenciar los resultados. Ahora ya conoce las diversas formas de crear animaciones con Fireworks, las cuales bastan para que sea capaz de obtener excelentes resultados. El siguiente paso en este sentido ser que Macromedia introduzca comportamientos a los smbolos animados, aunque tambin es cierto que puede combinarlos. Repase lo que aprendi en los primeros bloques de este captulo y aplquelo aqu.
12.9.
animado, debe tener en cuenta que normalmente este tipo de ficheros van destinados a Internet. Esto quiere decir que los ficheros no pueden excederse en su tamao, por lo que es obvio que las animaciones deben ser lo ms sencillas posibles, esto es, con un mnimo de Fotogramas, los suficientes para crear el efecto de animacin. El Gif animado normalmente no posee ms de 256 colores, por lo que ese es el nmero tope aceptable para mantener la compresin/ velocidad en la Red. Fireworks permite "mediante su opcin Adapta tive" optimizar al mximo la relacin ya citada. Cuando cree un Gif animado, debe tener en cuenta que no siempre es necesario el movimiento completo, por lo que con tres Fotogramas, podra darse por terminado el Gif. Por otro lado, los grficos deben ser lo ms reducidos posibles. Si trata de crear un Banner publicitario, lo ideal sera mantener siempre el mismo fondo en cada cambio de imagen, y emplear texto a su vez para mostrar el movimiento, si lo que desea es que el Banner se cargue rpidamente. Una vez ms, debe recordar que hay que eliminar los Fotogramas innecesarios. Otra recomendacin importante, y ya para finalizar, es sugerirle el empleo de utilidades externas que permitan Mesgranar" otros Gif animados, con el fin de obtener Fotogramas vlidos para su creacin y lo que es ms importante, emplear todas las opciones de "Efectos" que permitan incluir este tipo de utilidades externas, entre las que destacamos Animagic. Est ya preludiando el final, dado que va agotndose el contenido de esta Gua. Conoce ya todos los conceptos de Fireworks y sus posibilidades, y materialmente la Gua est completa. Ha sido un rpido recorrido durante el cual ha aprendido a crear desde una sencilla animacin hasta la ms elaborada y compleja, sin dejar de lado los mapas de imagen ni los efectos Rollover. Ya sabe lo que es una interpolacin, cmo crear una animacin inmediata y lo que es un efecto Rol lover simple entre otras cosas. Ahora pasar a conocer cmo exportar en Fireworks los diferentes resultados, de lo que ha estado muy cerca en todo momento; ser en el prximo captulo que cierra esta Gua acelerada sobre Fireworks 4 y que complementa ste que acaba de terminar.
Despus de ver con la suma facilidad que puede crear un simple Gif animado, slo nos resta hacerle algunas recomendaciones antes de finalizar el captulo. A1 crear un Gif 368
369
13.1. Introduccin
ste podra ser un largo captulo, dado que las formas de exportacin en la presente aplicacin son innumerables y citarlas todas aqu sera una tarea ardua y tediosa. Las funciones de exportacin en Fireworks 4 llevan a generar pdginas HTML, animaciones, ficheros JPG optimizados y botones Rol lover. De modo que hemos decidido tratar cada uno de los modos de exportacin en captulos diferentes y concretar en ste nicamente las funciones de exportacin. Atrs queda la descripcin de cmo crear grficos animados, Mapas de imagen y efectos Rollover, rondando siempre la palabra exportacin. Esas prcticas son el mejor ejemplo de exportar con Fireworks en sus ms variadas formas. Ello significa que la funcin Exportar est implcita en las funciones de crear efectos Rollover y Divisiones an cuando no seamos conscientes de ello y, de hecho, complementan este captulo. Es cierto tambin que en la versin 1.0 de Fireworks, los mtodos de exportacin estaban mejor diferenciados, con rutas distintas para cada tipo de grfico por exportar. En una segunda versin de Fireworks, los modos de exportacin se multiplicaron, pero tambin se complicaron las operaciones a realizar para lograr el efecto deseado. En la versin 4 de Fireworks, el proceso de exportar est mejor distribuido ya que esta opcin puede ir implcita en la propia accin. Significa que los diseadores pueden optar por diferentes formas de exportar su trabajo, y as pueden exportar una divisin directamente o pasar por el
asistente Exportar.
En todo caso este captulo se centrar especialmente en la funcin Exportar y, con l, concluir paralelamente esta Gua Prctica hasta una nueva cita con Macromedia.Una
371
vez que conozca ntegramente todas las opciones de Exportar, se dar cuenta de que durante las prcticas del captulo precedente en ms de una ocasin estuvo muy cerca de los modos Exportar. As pues, este captulo viene a complementar indirectamente al anterior.
Figura 13.2. Cuando insertamos una imagen no siempre estar adaptada a nuestro lienzo
Figura 13.1. En esta captura se muestra un tipo de imagen cargada para exportarla despus
1. Inserte una imagen en su documento con la opcin Insertar imagen. Recuerde que la imagen debe estar completa, es decir, una fotografa o una imagen como la que puede ver en la figura 13.1. 2. Es muy probable que la imagen no est bien integrada en su documento actual, es decir, que la imagen sea demasiado grande o pequea para el tamao actual del documento tal como se demuestra en la figura 13.2. En este caso debe ajustar la imagen al lienzo de trabajo.
372
3. Para ello seleccione la opcin Ajustar lienzo, del Men modificar. Ahora el lienzo de trabajo se adaptar a su grfico, vase figura 13.3. 4. Antes de exportar el grfico en la forma que desea, puede convertir la imagen en un Mapa de bits. Para ello bastar hacer doble clic sobre la imagen. Ahora Fireworks le mostrar la imagen como un Mapa de bits, en el que podr editar cualquier parte de ella. En la figura 13.4 puede ver el grafico convertido en un Mapa de bits. A partir de aqu podr agregar o modificar elementos en la imagen, pero en este caso lo que va a hacer es exportar directamente el grfico a fin de demostrar cmo se realiza el proceso de exportacin optimizado. La idea podra parecer un tanto absurda, pero la finalidad de esta Gua es ensear al profano en la materia todo aquello que se relacione con trabajar con Fireworks y desde todos los ngulos posibles. Siguiendo con el presente captulo haga lo siguiente: 1. Seleccione la opcin Exportar, del men Archivo. Esta opcin le permite exportar el documento actual. Fireworks le mostrar ahora el cuadro de dilogo Exportar, vase figura 13.5, momento en el que debe asignar un nombre a lo que va a exportar.
373
Figura 13.3. En esta captura el lienzo se encuentra ajustado al tamao del grafico Importado
Figura 13.5. Vista rpida del cuadro de dilogo Exportar en modo Slo imgenes
Como ve, la tarea de exportar una imagen es quizs una de las ms sencillas de Fireworks, pero no se engae, en esta nueva versin de Fireworks el modo de exportar ha cambiado sustancialmente con respecto a versiones anteriores. Si bien siempre se mostr el editor Exportar de manera directa, en esta nueva versin tiene diferentes opciones de exportar directamente a una extensin determinada, y el editor slo ser visible cuando emplea el asistente Exportar. El uso de este asistente determina cmo quedar mejor su trabajo. Del asistente Exportar hablaremos ms adelante. Ahora cntrese en el primero de los dos modos de exportar que existen en la nueva versin de
Fireworks 4.
2. Cuando asigne un nombre a la imagen que desea exportar seleccione en qu modo desea exportarla. Si deja la opcin por defecto slo imgenes, Fireworks la
374
3. Volviendo al ejemplo antes descrito, en lugar de exportar la imagen como slo imagen, podr exportar dicha imagen en otro formato aparte del nativo de Fireworks. Por ejemplo, podr exportarla como documento de Flash. Esto implica aadir la extensin *.SWF. Para exportar la imagen en este formato deber seleccionar Macromedia Flash SWF de la ventana Guardar como archivos de tipo. En la figura 13.6 se puede ver esta seleccin.
375
tn Opciones, del cuadro de dilogo Exportar. Fireworks le mostrar el editor opciones de exportacin, de Macromedia Flash tal como se muestra en la figura 13.7. Aqu podr alterar la calidad JPEG, mantener el trazado de los objetos o, simplemente, modificar la velocidad en Fotogramas si est exportando una animacin completa. 5. Puede exportar la imagen como documento de Photoshop. Para ello elija la opcin Photoshop PSD de laventana Guardar como archivo de tipos. En esta ocasin podr alterar ms propiedades que con el modo antes descrito. As, por ejemplo, podr alterar las propiedades de Configuracin, Objetos, Efectos y Texto. Estas opciones estarn activas en dependencia de la imagen que est exportando en ese momento. Si conoce bien Photoshop obviamente sabr qu configuracin determinar en este paso, si no es as lo tendr muy complicado. Pero a Photoshop le corresponde otra Gua de esta misma coleccin. En la figura 13.8 puede ver el modo Exportar en formato Photoshop.
Figura 13.7. Vista de las opciones de exportar como Flash 4. Ahora Fireworks estar preparado para exportar la imagen en este formato, pero antes podr modificar las opciones del formato. Para ello haga clic en el bo376
Figura 13.8. Fireworks permite exportar grficos en formato Photoshop para mayor flexibilidad 6. Tambin destacan las opciones Director o HTML e imgenes. En ambos casos entrar en accin el editor Configuracin de HTML, desde el cual podr seleccionar 377
los atributos generales del documento a exportar y los valores de tabla, as como contenidos especficos del documento. En este caso lo remitimos a Dreamweaver. Si conoce Dreamweaver conoce entonces todas las propiedades de HTML. En la figura 13.9 se muestra esta opcin.
Figura 13.9. Otra de las caractersticas fuertes de Fireworks es que tambin nos permite exportar grficos como HTML
Una vez ms recalcamos la diferencia en el modo Exportar entre las diferentes versiones de Fireworks. Si bien en un principio y dada su limitacin, la opcin Exportar se haca directamente desde el editor Exportar, en esta nueva versin de Fireworks este editor slo estar disponible si emplea el asistente Exportar, ya que si exporta directamente, Freworks es capaz de atribuir los valores adecuados a los diferentes formatos exportados, eso s, previo conocimiento del lenguaje HTML, CSS y los factores a tener en cuenta de otras aplicaciones como Flash, Illustrator o Photoshop. De lo contrario, si no domina otras aplicaciones aparte de Fireworks, deber echar mano al asistente Exportar. De ello hablaremos a continuacin.
nes, ya que Fireworks puede exportarlas a esas otras aplicaciones como Photoshop o Flash entre otras. Indudablemente, esto requiere conocer ciertos criterios de los formatos soportados, algo que no siempre se tiene en cuenta. Sin embargo, si se ve en apuros, Fireworks le ofrece la posibilidad de utilizar el asistente Exportar. De ese modo exportar un trabajo ser una tarea sencilla incluso si lo hace para otras aplicaciones que no sean directamente una pgina Web. En la pgina Web que posee la editorial Anaya Multimedia en Internet, concretamente en la direccin: ht tp : / /www. anayamul t media. es, seleccionando sucesivamente los mens: Atencin al cliente, Complementos, Guas Prcticas, Fireworks 4 podr localizar y descargar en formato PDF el contenido de este apartado. Descrgelo y descubrir la opcin Editar del asistente Exportar. Tambincaberecordaraqu,aunque est fuera de lugar, que desde dicha pgina podr localizar y descargar tambin los ejemplos y prcticas de esta Gua. ste ha resultado despus de todo, el captulo ms corto de cuantos contiene esta Gua. Es tambin el tradicional captulo de despedida de nuestras dos Guas anteriores sobre productos de Macromedia. Se repiten aqu el nmero 13 y la brevedad del texto, y ello no significa que en los ltimos momentos hayamos recortado el texto por falta de espacio, sino que ha sido ms bien producto del azar. De cualquier manera, en esta ocasin ha quedado bien explicado una vez ms el concepto Exportar. Si bien en otras versiones de Fireworks la tarea resultaba difcil, ahora se ha simplificado notablemente y el resultado es un captulo rpido, sencillo y prcticamente corto. Y sin extendernos ms, damos por terminada nuestra tercera Gua Prctica sobre un producto de Macromedia. Antes fueron Flash 5 y Dreamweaver-Course Builder, ahora ha sido Fireworks 4 y una vez ms le decimos como siempre: Hasta la prxima!