Fireworks CS4 – Opciones de Exportación

0 comments

Posted on 27th Mayo 2009 by jluisfg in Fireworks

Fireworks CS4 nos ofrece una variedad de maneras de exportar un sitio web creado en este programa (un HTML muy sencillo). Con estas opciones podremos crear desde nuestro sitio interactivo, o un pdf o hasta una pequeña galería que nos permitira tener un preview del diseño de un sitio.

Exportar HTML e Imágenes – Menu File –> Export. Enseguida no sale una ventana que nos preguntara donde deseamos exportar nuestra página. En la parte de abajo de donde ponemos el nombre del archivo, y debe quedar como el siguiente:

Esta opción lo que exportara sera todas nuestras páginas, incluyendo la Página Maestra, y las imágenes que incluyen. Ahora podremos checar nuestros HTML que exportamos, y los links funcionaran perfectamente.

Exportar CSS and Images – Menu File –> Export. En vez de elegir HTML and Images, esta vez escogeremos CSS and Images, lo cuál exportara una hoja de Estilos (CSS) la cuál contendra un código que definira el color, tamaño, peso y tipo de letra para cada texto, asi también lo hara con las imagenes y HTML en general, es decir, establece por medio del código CSS un estilo a cada parte del HTML (etiquetas, divs, etc).

Esta opción nos va a permitir mas tarde editar nuestros archivos HTML desde Dreamweaver u otro editor de código y cambiar textos sin afectar el estilo de los mismos.

Aprobación de diseño

Muchas veces nos encontramos con el problema de obtener la aprobación de un cliente o un jefe acerca del diseño de una página. Para esto es conveniente crear vistas previas o demos, y asi no desgastar sus esfuerzos en la programación antes de tiempo.

PDF
El PDF se ha convertido en uno de los archivos mas livianos de nuestros tiempos, por lo que esta opción nos permitira crear un PDF y asi enviarlo por correo electronico facilmente para la aprobación del diseño.

Esta opcion se encuentra en el menú File –> Export y simplemente elegimos el tipo PDF, esto exportara el archivo PDF, pero con la ventaja de que tendra interacción entre las páginas, es decir, que si nosotros tenemos links en nuestras páginas, el PDF tendrá estos mismos vinculos.

DEMO
Fireworks CS4 viene con un Script o comando integrado, el cual nos va a ayudar a crear un demos o galeria de lo que va a ser el diseño de una pagina.

Esta opción se encuentra en el menu Commands –> Demo Current Object. Despues nos preguntara las páginas que deseamos incluir en el demo, aceptamos y listo. Se han exportado un serie de archivos, que conformaran nuestra galería, que simplemente podriamos subir a un dominio temporal y enviar el link al cliente para la aprobación del diseño.

Ejemplo

Estas son algunas de las principales opciones de exportación de Fireworks CS4.

Fireworks CS4 – Agregando interacción a nuestra página

0 comments

Posted on 19th Mayo 2009 by jluisfg in Fireworks

Teniendo el diseño de la que va a ser nuestra página web, falta agregarla 2 cosas:

Botones
Para la creación de un botón simplemente basta con dibujar nuestro Boton.

y presionar la tecla F8 o ir al menu Modify –> Symbol –> Convert to Symbol. Despues seleccionamos el tipo de simbolo como Boton.

Despues para editar los 4 estados de nuestro boton (Up, Over, Down, Over While Down), simplemente damos doble clic sobre el boton y podremos editar cada uno de los estados seleccionandolo en el panel de propiedades.

Agregar mas páginas

Para poder agregar mas páginas a nuestro sitio, podemos seguir los siguiente pasos:

  1. Crear una pagina Maestra – la página maestra funcionara como nuestra plantilla, es decir, esta contendra los elementos que todas las demas página también deberan contener (menu, banners, footers, etc.). Para convertir una página normal en página maestra vamos al menu del panel pages (páginas) y seleccionamos Set as Master Page.
  2. Agregar páginas – En el menu del panel pages (páginas), podemos seleccionar New page o nueva página, esto agregara una nueva página con los elementos de la págna Maestra unicamente.
  3. Para agregar interacción entre las páginas que hemos creado, vamos a la página maestra (donde debe estar nuestro menu) y al seleccionar cada boton, en el panel de propiedades podemos seleccionar la página a la que corresponde en donde dice Link.

Fireworks CS4 – Opciones Creativas de Texto

0 comments

Posted on 18th Mayo 2009 by jluisfg in Fireworks

Estas son algunas maneras creatvas de utilizar las opciones que Fireworks CS4 nos ofrece:

Lorem Ipsum automatico: el loremo ipsum es un texto utilizado comunmente para la simulacion de parrafos en el diseño de una página Web.

Fireworks CS4 cuenta con un generador automatico de Lorem en el menu Commands –> Text –> Lorem Ipsum. Esta opción genera automaticamente un parrafo de texto simulado.

Texto desde un archivo de texto (.txt): En Fireworks podemos importar de la misma manera que importamos una foto un texto (File –> Import) y seleccionamos un archivo de texto, despues solo con hacer un clic, el texto es insertado en el lienzo y es totalmente editable.

Text in Path – Esta opción es una herramienta que nos permitira integrar el texto a una forma, es decir, podremos crear una figura con la pluma o un simple cuadrado y en el menu Text–>Attach in Path adaptara el texto a la figura.

Text on Path – Con esta opción podremos pegar un texto a una linea, es decir, podemos dibujar una linea curva con la pluma y despues seleccionar el texto y la linea e ir al menu Text–Attach to Path hara que el texto tome la orientación de la linea que hayamos trazado.

Texto como mascara – Para utilizar el texto como mascara simplemente debemos poner el texto que deseamos sea nuestra mascara sobre la foto o forma, cortar el texto (Ctrl + X) y dar clic derecho sobre la foto o forma ir a Edit –> Paste as Mask y el texto se convertira en una mascara.

fireworks creative text uses usos creativos de texto en fireworks text as mask, in path, on path

Fireworks CS4 – Interface

0 comments

Posted on 18th Mayo 2009 by jluisfg in Adobe |Fireworks

La siguiente es nuestra interface en Fireworks CS4:


haz clic para agrandar la imagen


Nuestra barra de herramientas (ubicada del lado izquierdo) se encuentra dividida de la siguiente manera:

- Herramientas de selección: estas herramientas nos permitirán seleccionar objetos en nuestro documento, o en su caso, segmentos de un vector. También encontramos en esta sección herramienta Crop Tool que nos permitirá recorta una imagen al tamaño que deseemos.

- Herramientas de mapas de Bits: Estas nos ayudaran para realizar pequeños ajustes a fotografías que importemos a nuestro documento, desde seleccionar pixeles de color similar (Magic Wand) hasta reemplazar un color en la imagen o aplicar efectos sencillos como el blur, smudge, burn, dodge y sharpen.

- Herramientas de Vectores: Los vectores son segmentos con longitud, dirección y sentido definidos, es decir, que por mas grande que se hagan, no se pixelearan como sucede con los mapas de bits. Entre las herramientas de esta división están la pluma, las formas, texto, y el cuchillo que es una herramienta que cortara un segmento en 2 partes.

- Herramientas Web: las herramientas Web son las que nos permite crear hotspots o slices, que serán espacios activos que más tarde podrán tener un link o una acción en el rollover. En esta división podemos escoger si queremos ver o no las slices y hotspots.

- Herramientas de Color: entre las herramientas de color tenemos el gotero que nos permite tomar un color de cualquier lado, para después aplicarlo en una forma, la cubeta, el color de contorno y el color de relleno.

- Herramientas de Vista: Las herramientas de vista son opciones para quitar la barra de herramientas y trabajar solo en el canvas, o para quitar todos los menus y paneles y que solo aparezcan cuando nos posicionamos cerca de la orilla de la pantalla. También encontramos la mano que nos permitirá desplazarnos por nuestro documento sin mover nada del canvas y la lupa que nos permitirá hacer un zoom dentro del documento.

Dentro de los paneles principales encontramos los siguientes:

- Alineación – El panel de alineación nos permitirá alinear como su nombre lo dice, objetos entre si, u objetos respecto al escenario, también nos permite distribuirlos o repartir el espacio entre ellos.

- Estados (states) – el panel de states o fotogramas nos permitirá crear animaciones simples cuadro por cuadro para después poder exportarlas como gif animado.

- Capas (Layers) – En este panel podremos mantener organizado nuestro documento en capas y carpetas, asimismo, se creara una carpeta aparte para las slices y los hotspots (objetos web).

- Páginas (pages) – en el panel de páginas podremos crear diferentes páginas de un mismo sitios, dentro de un mismo archivo de Fireworks (.png). También podremos crear una Master Page o página maestra, la cual funcionara como plantilla para las siguientes páginas.

- Librería del documento (document library) – en este panel se guardaran todos los símbolos que creemos dentro de nuestro archivo de Fireworks, para así poder utilizar varias instancias del mismo.

- Librería Comun (Common library) – en la librería comun encontraremos objetos predeterminados como botones, objetos HTML, animaciones, sonidos, barras de menú, etc. Para utilizarlas simplemente debemos arrastrarlas a nuestro escenarios.

- Propiedades – el panel de propiedades será el panel más importante al trabajar en Fireworks, pues en el siempre encontraremos opciones para el objeto seleccionado, ya sea un texto o una forma, tendrán diferentes opciones que podremos modificar mientras trabajemos en Fireworks.