Unidad Didáctica 01: Adobe Fireworks CS6

¿QUE ES DISEÑO WEB?

El diseño web es una actividad que consiste en la planificación, diseño e implementación

de sitios web. Un diseñador web tiene que ver con cómo crear y desarrollar una página
web así también como los clientes interactúan con ella. Los buenos diseñadores web
saben cómo poner juntos los principios de diseño para crear un sitio que se vea muy
bien. También entienden acerca de la usabilidad y cómo crear un sitio que los clientes
quieren navegar alrededor de porque es tan fácil de hacer.

Requiere tener en cuenta la navegabilidad, interactividad, usabilidad, arquitectura de la

información y la interacción de medios como el audio, texto, imagen, enlaces y vídeo.
Se lo considera dentro del diseño multimedia.

La unión de un buen diseño con una jerarquía bien elaborada de contenidos, aumenta
la eficiencia de la web como canal de comunicación e intercambio de datos, que brinda
posibilidades como el contacto directo entre el productor y el consumidor de contenidos,
característica destacable del medio.

El diseño web ha visto amplia aplicación en los sectores comerciales de Internet

especialmente en la World Wide Web. Asimismo, a menudo la web se utiliza como
medio de expresión plástica en sí. Artistas y creadores hacen de las páginas en Internet
un medio más para ofrecer sus producciones y utilizarlas como un canal más de difusión
de su obra.

Los diseñadores web necesitan crean prototipos antes de poder llevar en vivo sus
creaciones para así poder recibir la aprobación o feedback del cliente. Estos prototipos
son mayormente creados a través del uso de herramientas como HTML, CSS, Java,
Ilustrador o Photoshop.

Las etapas más fundamentales de un Diseñador de web para poder crear una página
web son las siguientes:

1. La primera, es el diseño visual de la información que se desea editar. En esta

etapa se trabaja distribuyendo el texto, los gráficos, los vínculos a otros
documentos y otros objetos multimedia que se consideren pertinentes. Es
importante que antes de trabajar sobre el computador se realice un boceto o pre
diseño sobre el papel. Esto facilitará tener un orden claro sobre el diseño.
2. La segunda, es la estructura y relación jerárquica de las páginas del sitio web,
una vez que se tiene este boceto se pasa a ‘escribir’ la página web. Para esto, y
fundamentalmente para manejar los vínculos entre documentos, se creó el
lenguaje de marcación de hipertexto o HTML.
3. La tercera, etapa consiste en el posicionamiento en buscadores o SEO. Ésta
consiste en optimizar la estructura del contenido para mejorar la posición en que
aparece la página en determinada búsqueda. Etapa no gustosa por los
diseñadores gráficos, porque a diferencia del texto, aún para el año 2012 no se
pueden tener nuevos resultados en los buscadores con sitios muy gráficos.
Actualmente, los diseñadores web se están especializando en especificas áreas de
diseño. En particular se resalta los diseñadores en UI (interfaz del usuario) y UX
(experiencia del usuario).

Espero este articulo haya sido de tu agrado y fácil de entender.

Diseño de Página Web -1- Prof. Daniel Rumrrill

Unidad Didáctica 01: Adobe Fireworks CS6

Hoja Informativa 01: Adobe Fireworks

Adobe Fireworks (anteriormente llamado Macromedia Fireworks) es un programa
versátil para crear, editar y optimizar gráficos Web. Permite crear y editar imágenes de
mapa de bits y vectoriales, diseñar efectos Web, como rollovers y menús emergentes,
recortar y optimizar elementos gráficos para reducir su tamaño de archivo y automatizar
tareas repetitivas para ahorrar tiempo. Es posible exportar o guardar un documento
como un archivo JPEG, un archivo GIF o un archivo de otro formato. Estos archivos
pueden guardarse junto con archivos HTML que contengan tablas HTML y código
JavaScript para facilitar su uso en Internet.

Dibujar y editar objetos vectoriales y de mapas de bits

El panel Herramientas de Fireworks presenta diferentes secciones que contienen
herramientas de dibujo y edición de vectores y mapas de bits. La herramienta
seleccionada determina si el objeto creado es un vector o un mapa de bits. Una vez
dibujado un objeto o texto, puede utilizar una gran variedad de herramientas, efectos,
comandos y técnicas para realzar las imágenes o para crear botones de navegación
interactivos.
También puede importar y editar imágenes en JPEG, GIF, PNG, PSD y muchos otros
formatos de archivo.

Añadir interactividad a las imágenes

Las divisiones y zonas interactivas son objetos Web que definen áreas interactivas en
un gráfico Web. Las divisiones cortan la imagen en secciones exportables, a las que es
posible aplicar comportamientos de rollover, animación y vínculos URL (Uniform
Resource Locator). En la página web, cada división se muestra como la celda de una
tabla.

Utilice los tiradores de rollover de arrastrar y colocar en divisiones y zonas interactivas

para asignar rápidamente comportamientos de intercambio de imagen y de rollover a
las imágenes. Utilice el editor de botones de Fireworks y el Editor de menú emergente
para crear imágenes interactivas especiales a fin de desplazarse por sitios Web.

Optimizar y exportar imágenes

Utilice las versátiles funciones de optimización de Fireworks para conseguir el equilibrio
exacto entre tamaño de archivo y calidad visual para las imágenes exportadas. El tipo
de optimización que elija variará en función de las necesidades de los usuarios y del
contenido.
Una vez optimizadas las imágenes, el paso siguiente consiste en exportarlas para
utilizarlas en la Web. Puede exportar el documento de origen PNG de Fireworks a varios
tipos de archivo, como JPEG, GIF, GIF animado y tablas HTML con imágenes divididas
en varios tipos de archivo.

Imágenes vectoriales y de mapa de bits

Los sistemas informáticos muestran las imágenes en formato vectorial o de mapa de
bits. Entender la diferencia entre los dos formatos ayuda a comprender el programa, que

Diseño de Página Web -2- Prof. Daniel Rumrrill

Unidad Didáctica 01: Adobe Fireworks CS6

contiene herramientas vectoriales y de mapa de bits y es capaz de abrir e importar

ambos formatos.

Acerca de las imágenes vectoriales

Las imágenes vectoriales representan las imágenes mediante líneas y curvas (vectores)
que contienen información de color y posición. Por ejemplo, la imagen de una hoja
puede definirse por medio de un conjunto de puntos que describen su contorno. El color
de la hoja queda determinado por el color de su contorno (trazo) y el del área que
encierra este contorno (relleno).

Las imágenes vectoriales son independientes de la resolución. Esto implica que la

calidad del aspecto de una imagen vectorial no se modificará si se cambia su color; se
mueve, cambia de tamaño o de forma; tampoco cambiará si se modifica la resolución
del dispositivo de salida.

Acerca de las imágenes de mapa de bits

Las imágenes de mapa de bits están formadas por puntos (píxeles) organizados en una
cuadrícula. La pantalla del equipo es una gran cuadrícula de píxeles. En la versión de
mapa de bits de la hoja, la imagen está determinada por la posición y el valor de color
de cada píxel de la cuadrícula. Cada píxel tiene asignado un color. Cuando se presentan
con la resolución adecuada, los puntos encajan entre sí como las teselas de un mosaico.

Cuando se edita una imagen de mapa de bits, se modifican los píxeles, no las líneas y
curvas. Las imágenes de mapa de bits dependen de la resolución, es decir, los datos
que las definen están fijos en una cuadrícula que tiene un tamaño determinado. Cuando
se aumenta el tamaño de un elemento gráfico de mapa de bits, los píxeles se
redistribuyen en la cuadrícula, lo que puede dar lugar a que sus bordes queden
desiguales. La visualización de un elemento gráfico de mapa de bits en un dispositivo
de salida con menor resolución que la propia imagen también puede reducir su calidad.

Diseño de Página Web -3- Prof. Daniel Rumrrill

Unidad Didáctica 01: Adobe Fireworks CS6

Fundamentos Fireworks CS6: Conociendo el entorno de trabajo

A pesar de Fireworks CS6 fue la última versión de esta aplicación lanzada al mercado,
como programa para procesar imágenes para la web continúa siendo muy eficaz.
Particularmente cuenta con un set de herramientas que nos permiten editar de una
manera sencilla dichas imágenes. En el presente tutorial describiremos los aspectos
generales del entorno de trabajo para conocer el tipo de trabajos que podemos realizar
desde Fireworks CS6.

Reconociendo el Entorno de Trabajo

1. Herramientas

La barra de herramientas está dividida en 3 secciones: Sección de herramientas de

selección, sección de herramientas de imágenes, sección para crear objetos vectoriales
y la sección de herramientas web. Cubriremos las opciones básicas las cuales serán
suficientes para poder utilizar la aplicación.
Herramientas de selección: como su nombre lo indica este set de herramientas nos
permite seleccionar elementos o áreas específicas del área de trabajo.

Diseño de Página Web -4- Prof. Daniel Rumrrill

Unidad Didáctica 01: Adobe Fireworks CS6

Herramientas de imágenes: con este set de herramientas podremos editar imágenes

con una serie de opciones similares a las que ofrece Photoshop.
Herramientas vectoriales: a través de este set de herramientas es posible crear
elementos vectoriales.

Herramientas web: nos permite crear secciones para exportar a imágenes o crear
zonas a las que se les puede aplicar un hipervínculo.
Herramientas de color: será posible seleccionar el color de relleno y contorno de las
selecciones o de los objetos vectoriales.
Herramientas de vistas: las herramientas de esta sección nos permitirán administrar
de qué forma veremos el entorno de trabajo, zonas específicas a las queramos hacer
acercamiento o simplemente movernos por el espacio de trabajo sin mover los
elementos.

A) Es la herramienta de selección principal y nos servirá para seleccionar o mover

cualquier elemento en el espacio de trabajo. Si hacemos click sostenido en el ícono de
la herramienta se desplegará otra modalidad de esta herramienta. Acceso directo V.

Diseño de Página Web -5- Prof. Daniel Rumrrill

Unidad Didáctica 01: Adobe Fireworks CS6

B) Con esta herramienta podremos seleccionar una parte específica de una forma, un
nodo de la misma o seleccionar algún objeto perteneciente a un grupo. Acceso directo
A.

C) El Bézier nos permite crear objetos vectoriales de la forma que deseemos. Acceso
directo P

D) La herramienta de texto nos permite crear recuadros en donde colocaremos

información textual. Acceso directo T.

E) Esta herramienta nos permite crear formas geométricas básicas de una manera
rápida. Acceso directo U.

F) La herramienta de acercamiento nos permitirá acercas o alejar el campo de visión de

nuestro espacio de trabajo. Acceso directo Z.

2. Espacio de trabajo

Como en la gran mayoría de aplicaciones de la suite de Adobe, en esta área crearemos

y ubicaremos los objetos que compondrán nuestro diseño.

3. Panel de propiedades

A través de este panel podremos controlar las características del objeto que tengamos
seleccionado, ya sean las características tipográficas de las cajas de texto, la apariencia
de los objetos vectoriales creados, la ubicación de las imágenes o en el caso de no tener
seleccionado algún objeto en el espacio de trabajo, las características y configuración
de nuestro espacio de trabajo.

Configuraciones a las cajas de texto

Diseño de Página Web -6- Prof. Daniel Rumrrill

Unidad Didáctica 01: Adobe Fireworks CS6

Configuraciones de objetos vectoriales

Configuraciones del espacio de trabajo

4. Sección de paneles

Cubriremos los paneles básicos que no servirán para la creación de futuros proyectos
en Fireworks CS6.

A) Panel Alinear: Esta serie de opciones nos permiten alinear un objeto con relación o
a otro que se encuentre presente en el espacio de trabajo o con respecto al espacio de
trabajo en sí mismo. Podremos seleccionar con respecto a que queremos alinear un
objeto desde el ícono que se ilustra en la imagen mostrada.

Diseño de Página Web -7- Prof. Daniel Rumrrill

Unidad Didáctica 01: Adobe Fireworks CS6

B) Panel Capas: En este panel podremos gestionar el orden de las capas para organizar
de mejor forma los tipos de elementos. Adicionalmente es posible crear máscaras para los
objetos que se encuentran en el espacio de trabajo.

C) Panel muestras: Podremos seleccionar una serie colores predeterminados para las
formas vectoriales que queramos crear o para las selecciones que vayamos a modificar.

D) Panel de trazos: A través de este panel es posible combinar formas vectoriales, editar
nodos específicos, designar el acabado de las formas y seleccionar series de nodos.

Diseño de Página Web -8- Prof. Daniel Rumrrill

Unidad Didáctica 01: Adobe Fireworks CS6

A partir de ahora conocemos las características básicas del entorno de trabajo de Fireworks
CS6 y estamos preparados para realizar nuestro primer proyecto en la aplicación. Es muy
importante saber que el programa está diseñado únicamente para crear o modificar
imágenes para la web y no cuenta con opciones o configuraciones para realizar impresos.

Creación de un documento nuevo de Fireworks

Los documentos nuevos de Fireworks se guardan como documentos PNG (Portable

Network Graphic). PNG es el formato de archivo nativo de Fireworks.
Las imágenes que se crean en Fireworks pueden exportarse o guardarse en varios
formatos Web y formatos gráficos. Independientemente de los parámetros de
optimización y exportación elegidos, el archivo PNG original de Fireworks se conserva
para facilitar ediciones posteriores.

Crear un documento nuevo

1 Seleccione Archivo > Nuevo.
Se abre el cuadro de diálogo Nuevo documento.

Diseño de Página Web -9- Prof. Daniel Rumrrill

Unidad Didáctica 01: Adobe Fireworks CS6

2 Especifique los parámetros del documento y haga clic en Aceptar.

Nota: utilice la ventana emergente del cuadro de colores personalizados
para seleccionar un color de lienzo personalizado.

Definición de dimensiones predeterminadas para nuevos documentos

Cuando se abre Fireworks por primera vez, aparecen los siguientes valores
predeterminados para las dimensiones en el cuadro de diálogo Nuevo documento:
• 660 x 440 (Windows)
• 500 x 500 (Mac)
Los valores de configuración del cuadro de diálogo Nuevo documento no se modifican
cuando cambia el tamaño del lienzo en Fireworks.
La configuración predeterminada cambia cuando se copia un objeto. Las dimensiones
del objeto copiado (en el portapapeles) se utilizan automáticamente para las
dimensiones del cuadro de diálogo Nuevo documento.
Para borrar las dimensiones del objeto del portapapeles, realice lo siguiente
(Windows):
1 Cree un documento con las dimensiones deseadas.
2 Guarde el documento y cierre Fireworks.
3 Vuelva a abrir Fireworks y cree un documento.
Las dimensiones del documento guardado anteriormente aparecen en el
cuadro de diálogo Nuevo documento.

Para crear un documento nuevo del mismo tamaño que un objeto

existente:

1. Copie un objeto en el Portapapeles de:

Otro documento de Fireworks.

Un navegador Web.
Cualquiera de las aplicaciones soportadas por Fireworks, que se
verán en la sección Inserción de objetos.
2. Elija Archivo > Nuevo. Se abre el cuadro de diálogo Documento
nuevo, en el que aparecen la altura y la anchura del objeto situado
en el Portapapeles.
3. Establezca la resolución y el color del lienzo y haga clic en Aceptar.
4. Elija Editar > Pegar para pegar el objeto del Portapapeles en el
documento nuevo.

Para abrir un documento existente:

1. Elija Archivo > Abrir. Aparece el cuadro de diálogo Abrir.

2. Seleccione el archivo y haga clic en Abrir.

Diseño de Página Web - 10 - Prof. Daniel Rumrrill