ADOBE FIREWORKS CS5

Adobe Fireworks es un programa de diseño enfocado íntegramente a las tecnologías web.
Adobe  Fireworks permite crear gráficos expresivos y altamente optimizados para la Web o prácticamente cualquier otro dispositivo: desde teléfonos inteligentes a quioscos y pantallas incrustadas. Se puede crear sitios web, interfaces de usuario y prototipos sofisticados que son editables tanto en modo vectorial como de mapa de bits.

Fireworks es una gran herramienta para diseño web, software de gráficos. Permite trabajar tanto con imágenes de trama (como fotos, etc), así como imágenes vectoriales (que puede cambiar el tamaño sin perder calidad).

1.


2.




CREAR UN NUEVO DOCUMENTO

Para crear un nuevo documento hacemos lo siguiente:

Cuando se lo abre por primera vez, aparece una plantilla como la imagen y hacemos clik sobre "documento de fireworks" y aparecera la interfaz con las especificaciones que queramos colocar, en este caso:

Caso contrario, vamos a archivo>nuevo en el menú principal, escogemos los parámetros y damos clik en aceptar.

Un nuevo nuevo documento en blanco se abrirá y ésta se encontrara distribuida de la siguiente manera:

 Cuando se guarda el documento, éste lo hace con la extensión .png que es el archivo de origen de fireworks.

HERRAMIENTAS DE FIREWORKS
 
Usted se dará cuenta de que las herramientas se dividen en las siguientes categorías:

• Select : Seleccionar - Herramientas de selección
• Bitmap o mapa de bits: Herramientas de edición de imágenes raster
• Vector:  Vector edición de forma
• Web: Herramientas de optimización de imágenes para web
• Colors: Color herramientas de selección
• View: Diseño de herramientas de visualización y movimiento

Va a encontrar más herramientas haciendo clic en el pequeño triángulo a continuación algunas de las herramientas.




CREACIÓN DE MENÚ PRINCIPAL

Se puede crear cualquier diseño que uno desee para una página web, para este blog se hara una creación de menú con fines educativos.

 Entonces, vamos a crear el área de menú principal, utilizando la herramienta de forma rectangular.  Hagamos un rectángulo negro. 

Con la herramienta de texto de un color vistoso se agrega el menú:

Como se puede apreciar se ha utilizado la capa Rectángulo perteneciente a la figura geométrica y manipulado sus propiedades. De la misma manera se puede hacer clik sobre las diferentes capas para modificarlas a gusto.

Como se ha realizado el menú, se pueden hacer diferentes cosas como un pie de página con cualquier información, o copyright, etc.

INSERTAR TEXTO

Para insertar texto de una manera rápida, se hace lo que en la imagen:

Entonces queda algo asì:

De ahí se puede modificar el texto en Propiedades.

INSERTAR IMAGEN EN FIREWORKS

Se hace lo siguiente:

1. Archivo
2. Importar
3. Seleccionar el archivo de imagen
4. El cursor cambia y se escoge desde y hasta donde va la imagen deseada formando una figura desde la esquina superior izquierda hasta la inferior derecha.

RECORTANDO IMAGEN

Se escoge la herramienta de selecciòn, se da clik sobre la esquina superior izquierda y luego la herramienta cortar del cuadro de herramientas. Se selecciona el cuadro que se desee y se hace doble clik y queda el producto final.

Hay que tomar en cuenta que si se quiere conservar una imagen en la web se tiene que decidir sobre que formato será el mejor ya que depende de esto que tan rápida sera la web y para ello se necesita optimizarlas.

Se pondrá atención a:

• Las imágenes con colores planos será el mejor optimizada como. Gif. Gif files also allow transparency. Gif también permiten la transparencia, también pueden ser animados.
• Las imágenes con muchos colores, por ejemplo fotos, será mejor optimizado. Jpg.
• . Png puede retener información vectorial y la transparencia 

Se puede cambiar el aspecto de la imagen mediante las capas y las diferentes opciones que nos presenta la pestaña inferior de Capas.


En la imagen se ha hecho clik sobre la capa de la segunda imagen  y sobre el efecto "disolver" .

MENÚ DESPLEGABLE

Un menú suele tener distintas opciones dentro de su menú principal y para lograr esto se hará lo siguiente, CREAR UN SECTOR:

Luego: clic derecho sobre la división y elegir "Añadir menú emergente"






Haga clic en el signo "+" en el editor de pop-up menú para añadir el número de opciones del submenú que se va a crear.

Se procede a escribir el nombre de cada opción del submenú. Todo esto en la pestaña "Contenido"

Damos clic sobre "Siguiente" y se modifica la interfaz según se desee:

Se continuan con los pasos y una vez terminado se da clic sobre "Listo"

Luego una vez terminado, vas a "Archivo">"Exportar"

Con esto la página web está lista, cuyos archivos se subirán en un servidor de alojamiento y así poder visualizarla desde un explorador.

También puedes hacer clik sobre la opción deseada en la parte superior derecha del blog.

1 Entradas y 9 Comentarios