Este documento proporciona instrucciones paso a paso para crear un titular web y sitio web básico utilizando Adobe Fireworks. Explica cómo crear una figura de curvas con texto, aplicar estilos de texto, sombras y texturas. También muestra cómo agregar botones de navegación, publicidad, contenido y galerías de imágenes.

1. Adobe
Fireworks

2. Crear Titular web
En este ejercicio aprenderás a crear un titular Web utilizando las herramientas
vectoriales más conocidas.
1. Abre un nuevo documento de 750 x 250.
2. Selecciona la herramienta PLUMA
3. Visualiza la reglas presionan la combinación CTRL+ ALT+R.
4. Arrastra una línea recta desde la regla horizontal hacia la parte superior del
rectángulo celeste, pero dentro del diseño.
5. Con la herramienta pluma haz clic en dos puntos de esta regla para crear una línea
recta.
6. Haz clic en un tercer punto y arrastra creando una curva Bezier como se muestra
en la siguiente imagen:

3. 7. Haz clic en un cuerto estirando la cuerda creando otra curva Blezier.
8. Haz clic en un quinto punto estirando la cuerda, creando una curva Bezier.

4. 9. Cierra la imagen haciendo clic en el punto de inicio.
10. Haciendo clic con la herramienta de subselección puedes ver todos los nodos que
has creado.
11.Aplica como color de fondo la combinación: #009933

5. 12. Dibuja un rectángulo de 750 x 150, ubicación (0,0), color de fondo #009AFF. Ubica
este rectángulo detrás de la capa 1.
13. Inserta el texto: “Amazonas Resort” como esta en la siguiente imagen.
Fuente: Broadway
Tamaño: 35

6. Aplicando Texturas
1. Selecciona la figura de curvas Bezier.
2. Haz clic en el comando Color de Relleno.
3. Selecciona Patrón.
4. Selecciona Impresionista-Verde.

7. 5. Cambia el ángulo y la dimensión de los nodos de dirección de la siguiente forma:
6. Elimina el borde de la figura.

8. Aplicando el Efecto de Sombra
Utilizaremos el efecto de sombra paralela.
1. Mantén seleccionada la figura.
2. Haz clic en la lista de efectos y selecciona Sombrear e iluminar
2. Mantén las mismas propiedades que se muestran a continuación.

9. 4. El resultado lo puedes ver a continuación:
5. Abre la imagen de muestra: Desierto (modifícala para quede del tamaño 750 x 150).
6. Luego agrégala al diseño anterior.

10. 7. Ubica la capa de la imagen sobre la última capa y alinéala hacia la parte superior
para que toma la siguiente apariencia:
8. Aplica el ajuste de color efecto Niveles con las medidas. Filtros / Ajustar color /
Niveles.

11. 9. Aparece la siguiente ventana las cual modificaremos de la siguiente forma

12. Utilizando la Mascara de Capa
1. Agrega una mascara de capa a la capa de la figura superior.
2. Selecciona la herramienta de Relleno degradado. Haz clic en el extremo derecho
de la figura y arrastra hacia el extremo izquierdo pasando por el centro.
Comandos / Creativo / Mascara de Vector Automático

13. Creando la Barra de Navegación
1. Dibuja un rectángulo sobre la imagen de 750 x 20 que se presenta a continuación.
Procura que el color de la barra sea de una tonalidad verdosa para que vaya con el
contorno.

14. 2. Sobre este botón, inserta un botón de 75 x 20 con las siguientes características:
3. Agrégale una mascara de capa al rectángulo del botón.
4. Utiliza el comando de Relleno de Degradado para darle este efecto al rectángulo
desde la derecha hasta la izquierda y Efectos a su gusto .
5. Luego agrégalo al escenario principal y crea 3 botones mas, con los nombres:
• Acerca de
• Habitaciones
• Paquetes
• Puedes clonar los botones con CTRL +SHIFt + D y cambiales el nombre.

15. 6. A la derecha de la barra escribe la palabra ENGLISH que servirá de enlace para le
versión inglés de esta Web.

16. 7. Agrandamos nuestro lienzo 750 x 600.
8. Con la ayuda de la regla hacemos las divisiones para nuestra pagina. Titular
Publicidad
Contenido
El titular ya fue creado, lo que haremos a continuación es insertar las imágenes para las
columnas de los extremos que están definidas como áreas publicitarias.

17. 9. Importa una imagen de Colegio.
10. En la parte inferior de la imagen coloca el siguiente texto:
“Visite nuestra galería virtual de fotografías del Liceo Javier.”
11. Dibuja un rectángulo con color de borde gris y sin color de relleno.
12. Ordena el rectángulo detrás de la fotografía como se muestra a continuación:
“Visite nuestra galería
virtual de fotografías del
Liceo Javier.”

18. 13. En el lado izquierdo coloca el titulo “Galerías de Imágenes” y coloca 6 imágenes
como se muestra a continuación.
“Visite nuestra galería virtual de fotografías
del Liceo Javier.”

19. Insertando el Contenido
1. El contenido será una promoción de un paquete turístico de verano.
2. Dibuja un rectángulo de 410 x 300, color de borde Gris / color de relleno: #FFFFCC
3. Inserta las siguientes palabras de la misma forma:
3 días y 2 noches
En el misterioso Amazonas
Por Q.5000.00
“Visite nuestra galería virtual de
fotografías del Liceo Javier.”
Todos los impuestos pagados.
Haga su reservación.

20. 4. Importa dos imágenes del Amazonas (Agrégales sombras a las imágenes).
“Visite nuestra galería virtual de fotografías del Liceo
Javier.”