Escolar Documentos
Profissional Documentos
Cultura Documentos
Capítulo MAQUETACIÓN
CON FIREWORKS CS5
Considerado por muchos diseñadores como el mejor editor de
gráficos para dispositivos tecnológicos y web, Adobe Fireworks
CS5 logra destacarse entre otros programas por su buen
desempeño y gran compatibilidad.
Es un programa muy útil, ya sea para crear pequeños botones o para lograr interfaces de usuario. Permite una
separación de imágenes indispensable para maquetación, una renderización de píxeles perfecta y excelentes
herramientas para el retoque de fotografías.
La dupla Fireworks y Dreamweaver es ideal, se pueden exportar ficheros HTML y retocar menús Javascript de manera
más fácil y rápida. El programa permite también exportar en PDF, crear interfaces para Adobe Air (una plataforma
para ejecutar aplicaciones sin un navegador) y guardar los proyectos como plantillas para poder compartirlos con
otros diseñadores y editarlos todas las veces que necesitemos.
Una de las características importantes es que habiendo realizado nuestros diseños ya sea en Adobe Photoshop CS5 o
Illustrator CS5 la suite nos permite cargar dichos trabajos desde Fireworks CS5 manteniendo por ejemplo las capas y
otras características que hay en el diseño original, entonces eso ayuda a que muchos diseñadores les permite crear
sus páginas y después poder usar Fireworks para maquetarlos, eso es lo que vamos a aprender en este capítulo.
Bueno para poder ingresar a este programa que es parte de la suite de Adobe, podemos realizarlo buscando la ruta
Observación
Mostrándose en cualquiera de los casos el siguiente logo el cual nos indica que está cargando el programa:
Aquí se muestra nuestra ventana inicial de Fireworks, desde aquí trabajaremos nuestros diseños:
Por ejemplo si su diseño esta realizado en Photoshop o Illustrator podemos simplemente abrirlo como si fuese
cualquiera de los programas mencionados anteriormente, en este caso se ha realizado el diseño en el mismo
Fireworks.
1.- Seleccionamos la imagen que será nuestro botón, si usted creo el diseño del botón a parte no hay problema
simplemente impórtelo a Fireworks (menú Archivo/importar), en cualquier caso seleccionaremos la imagen.
2.- Convertiremos dicha imagen en símbolo botón, puede ser de dos maneras: mediante menú Modificar/ símbolo/
convertir en símbolo, o la otra forma simplemente pulsamos la tecla F8, en cualquier caso aparecerá el siguiente
mensaje
Note lo siguiente
3.- Ahora si deseamos editar nuestro botón, es decir, colocarle las respectivas animaciones según nuestro estado,
bastara hacer doble clic y nuestro ambiente de trabajo ha cambiado, pasando a editar botones, veamos:
Estado Arriba, es el estado por defecto es decir el estado inicial que se mostrara al cargar nuestra página
Web.
Estado Sobre, este estado se activa cuando pasamos el mouse por encima del botón y se regresa al estado
anterior cuando el mouse esta fuera del botón.
Estado Abajo, dicho estado se activa cuando hemos presionado sobre dicho botón.
Estado Sobre y Abajo, este estado se activa solo cuando el botón haya sido pulsado, es decir, si está siendo
utilizado y pasamos el mouse por encima de dicho botón.
Estado Zona activa, en particular esta última opción solo sirve para definir que área nos servirá para vincular,
el tratamiento es similar a lo ya realizado en Dreamweaver al cual denominamos Zona interactiva.
Por ejemplo en nuestro ejercicio, tenemos el estado Arriba, le colocaremos un contorno nada más.
Vamos a pulsar copiar grafico Arriba, y modificarlo, en este caso simplemente lo haremos un poco mas grande.
Así sucesivamente todos los estados, tenga en cuenta que no es obligatorio modificarlos todos, eso depende en
este caso de usted.
Por ejemplo en el estado Abajo, vamos a modificar el degradado, en el estado Sobre y Abajo, vamos a modificar un
poco el color, y el ultimo zona interactiva, no vamos a realizar nada.
Ahora para poder ver como quedo nuestro botón podemos presionar la tecla F12 para poder visualizarlo en un
navegador.
5.- Crearemos ahora nuestra botonera, solo duplicaremos cada botón pulsando la tecla ALT y arrastrándolo
6.- Ahora nos falta colocar los nombres a cada uno de nuestros botones, para ello solo buscaremos crear una capa y
colocar allí los textos, tenga presente que como hemos creado nuestros botones a partir de uno de ellos solo
duplicándolo si modificamos alguno de ellos automáticamente se modificara los demás, por eso optaremos por crear
una capa, pero si en el caso suyo quisiera modificar cada botón debe crear uno por uno.
Ahora debemos crear un mapa de bits que es justo donde se colocara los textos.
Procedemos a escribir los textos para nuestros botones con la herramienta texto :
Bueno hasta allí ya tenemos nuestra botonera de nuestra página Web, ahora para poder ver como ha quedado
nuestro diseño bastara hacer una prueba en el navegador, recordando era pulsar la tecla F12.
Ahora para poder generar el archivo HTML, elegimos menú Archivo/Exportar, nos mostrara la siguiente ventana.
Una vez exportado se mostrara un archivo HTML y una carpeta con sus respectivas imágenes, si desea ver la
información por ejemplo puede abrirlo con Dreamweaver.
Pasos a seguir:
2.- Vamos a definir sus enlaces o vínculos de cada botón, para ello trabajaremos en el panel de propiedades teniendo
presente que botón hemos seleccionado:
Tenga presente que hemos escrito inicio.htm mas no inicio.html esto se debe a que Fireworks va a crear las páginas
con la extensión htm, pero eso no es problema si creamos nuestro enlace por ejemplo inicio.html o inicio.php,
inicio.aspx, etc. lo único que debemos hacer es renombrar la páginas creadas con la extensión requerida, pero en
nuestro caso vamos a evitarnos dicho problema escribiéndolas con la extensión htm, solo es por el motivo de dicho
material.
Al igual podemos también colocar el destino donde deseamos que se abra nuestra página, es decir, puede aplicar
todo lo aprendido en el capítulo de vínculos.
Observación (importante)
Cuando escribamos el nombre de nuestras páginas
debemos tener presente las mayúsculas y minúsculas,
como también la extensión, y uno de los errores más
comunes es no digitar bien el nombre, por eso una
sugerencia después de haber escrito todos los enlaces
volver a revisar nuevamente la extensión y los
nombres.
3.- Ahora en Fireworks vamos abrir en panel páginas, sino lo ubica ir a menú ventana/paginas o simplemente pulsar
la tecla F5, en cualquiera de los casos se mostrara el siguiente panel.
4.- Definamos ahora la página maestra, dicha página nos servirá como plantilla, para ello haremos clic derecho en la
imagen que aparece en el panel páginas.
5.- Ahora ya estamos listos para crear el resto de páginas, vamos a crear nuestra primera página se le sugiere que
dichas páginas tengan el nombre de los botones para que sea más fácil organizarlos, como se mostraba en la
observación anterior hay que tener cuidado con colocar los nombres, ello debe ser igual a los colocados en los
vínculos, no colocar extensiones, ello se crear por defecto.
Note que al crear así estamos creando una nueva página denominada inicio.htm, entonces ahora haga los mismo
para el resto de las páginas, siguiendo el mismo procedimiento, quedando así:
6.- Para ver la diferencia entre una página y otra vamos a modificar cada una de ellas colocándole su respectivo
nombre, ahora ya depende de usted que desea modificar.
Para poder realizar modificar cada página solo debemos seleccionarlo del panel páginas, veamos:
7.- Finalmente ahora solo nos falta crear el archivo HTML, para ello solo debemos tener presente los pasos a seguir ya
que es uno de los errores que normalmente se equivocan, evitaremos esos errores siguiendo los siguientes pasos:
8.- Haga clic en Guardar (Save) y ya está listo haga la prueba para que vea el resultado.