1

Tutorial bsico de diseo grfico

Este tutorial describe las tareas bsicas de diseo grfico con Macromedia Fireworks MX 2004.
Ayuda a obtener experiencia prctica en la aplicacin de grficos Web ms utilizada del mercado y
a aprender con ello conceptos bsicos de diseo grfico.
Si ya est familiarizado con el diseo grfico en Fireworks, quiz prefiera continuar con el
Tutorial bsico de diseo Web, donde aprender a disear pginas Web con Fireworks.
Contenido
Con este tutorial, en menos de una hora terminar las tareas necesarias para crear un anuncio de
alquiler de coches antiguos con Fireworks. Aprender lo siguiente:
Visualizacin del archivo finalizado
Creacin y almacenamiento de un documento nuevo
Examen del entorno de trabajo de Fireworks
Creacin y modificacin de objetos vectoriales
Importacin de un mapa de bits y seleccin de pxeles
Adicin y edicin de efectos automticos
Utilizacin de capas y objetos
Creacin y modificacin de una mscara
Creacin y modificacin de texto
Exportacin del documento
Conocimientos necesarios
Aunque este tutorial est diseado para usuarios sin experiencia en Fireworks, incluye numerosas
funciones nuevas del programa, por lo que tambin los usuarios experimentados pueden
beneficiarse de l. No es necesario ser diseador grfico para estudiar el tutorial, pero s hacen falta
conocimientos informticos bsicos y ser capaz de utilizar aplicaciones habituales de autoedicin.
Esto incluye saber buscar archivos y carpetas en el disco duro.
2 Tutorial bsico de diseo grfico
Visualizacin del archivo finalizado
Abra el archivo de tutorial terminado para ver el aspecto final del proyecto.
Nota: si est utilizando Windows, asegrese de descomprimir los archivos que ha descargado para
este tutorial antes de continuar. (En Macintosh, StuffIt Expander descomprime los archivos
automticamente.)
1 Inicie el navegador Web.
2 Desplcese al archivo final.jpg en su disco duro. El archivo se encuentra ubicado en la carpeta
Complete (dentro de la carpeta Tutorial1 que ha descargado del sitio Web de Macromedia).
Nota: de forma predeterminada, algunas versiones de Microsoft Windows ocultan la extensin de
los tipos de archivos conocidos. Si no ha modificado este parmetro, los archivos de la carpeta
Complete aparecern sin extensin. Cuando se trata de grficos Web, es mejor ver las
extensiones de archivo. Consulte la Ayuda de Windows si desea informarse sobre el modo de
activar la visualizacin de extensiones.
3 Seleccione el archivo final.jpg y arrstrelo a la ventana abierta del navegador.
En este tutorial utilizar Fireworks para disear y exportar una copia del anuncio de coches
antiguos de alquiler.
Nota: la carpeta Complete tambin incluye el documento de Fireworks utilizado para generar el
archivo JPEG. Para ver el documento, haga doble clic sobre final.png.
Creacin y almacenamiento de un documento nuevo
Despus de ver el archivo final.jpg, ya est preparado para empezar el proyecto.
1 En Fireworks, elija Archivo > Nuevo.
Se abre el cuadro de dilogo Nuevo documento.
2 Introduzca 480 en Anchura y 214 en Altura. Cercirese de que ambas medidas estn en pxeles
y de que el color del lienzo es blanco, y despus haga clic en Aceptar.
Se abre una ventana de documento con una barra de ttulo que indica Sin ttulo-1.png
(Windows) o Sin ttulo-1 (Macintosh).
3 Si la ventana de documento no est maximizada, o sea, si no ocupa por completo el centro de
la pantalla, haga clic en el botn Maximizar (Windows) o el cuadro Ampliar/Reducir
(Macintosh) situado en la parte superior de la ventana de documento. De este modo tendr
espacio suficiente para trabajar.
Creacin y almacenamiento de un documento nuevo 3
4 Elija Archivo > Guardar como.
Se abre el cuadro de dilogo Guardar como (Windows) o Guardar (Macintosh).
5 Desplcese a la carpeta Tutorial1 en el disco duro.
6 Escriba Vintage como nombre del archivo.
7 Elija la opcin Aadir extensin de archivo si an no la ha seleccionado (slo Macintosh).
8 Haga clic en Guardar.
La barra de ttulo muestra el nombre del archivo nuevo con la extensin PNG. PNG es el
formato de archivo nativo de Fireworks. El archivo PNG es el archivo de origen y donde va a
realizar las tareas con Fireworks. Al final del tutorial aprender a exportar el documento a otro
formato para utilizarlo en la Web.
Conforme avance con el tutorial, recuerde guardar regularmente el trabajo con Archivo >
Guardar.
Nota: es posible que durante el tutorial necesite deshacer algn cambio realizado. Fireworks puede
deshacer varios de sus cambios recientes, dependiendo del nmero de niveles de deshacer
definidos en Preferencias. Para deshacer el cambio ms reciente, seleccione Edicin > Deshacer.
4 Tutorial bsico de diseo grfico
Examen del entorno de trabajo de Fireworks
Antes de continuar, examine los elementos del entorno de trabajo de Fireworks:
En el centro de la pantalla se encuentra la ventana de documento. En el centro de la ventana de
documento se encuentra el lienzo. Aqu es donde se muestra el documento de Fireworks y las
imgenes creadas.
En la parte superior de la pantalla hay una barra de mens. La mayora de los comandos de
Fireworks son accesibles desde la barra de mens.
En la izquierda de la pantalla se encuentra el panel Herramientas. Si el panel Herramientas no
est visible, elija Ventana > Herramientas. El panel Herramientas contiene las herramientas
para seleccionar, crear y modificar diversos elementos grficos y objetos Web.
En la parte inferior de la pantalla se encuentra el Inspector de propiedades. Si el Inspector de
propiedades no est visible, elija Ventana > Propiedades. El Inspector de propiedades presenta
las propiedades del objeto o la herramienta seleccionados. Estas propiedades pueden cambiarse.
Si no se ha seleccionado ningn objeto ni herramienta, indica las propiedades del documento.
El Inspector de propiedades muestra dos o cuatro filas de propiedades. Si est a media altura, es
decir, si slo muestra dos filas, es posible hacer clic en la flecha de ampliacin del ngulo
inferior derecho para ver todas las propiedades.
Flecha de ampliacin en estado de media altura
Creacin y modificacin de objetos vectoriales 5
En la derecha de la pantalla hay varios paneles, como Capas y Optimizar. stos y otros paneles
pueden abrirse desde el men Ventana.
Desplace el puntero por los distintos elementos de la interfaz. Si detiene el puntero sobre un
elemento de la interfaz durante unos segundos, aparecer un mensaje de la ayuda emergente.
Los mensajes de la ayuda emergente identifican herramientas, mens, botones y otros rasgos de
la interfaz en todo el programa. Desaparecen al retirar el puntero de los elementos en cuestin.
Conocer ms detalles sobre estos elementos a medida que avance con el tutorial.
Creacin y modificacin de objetos vectoriales
Con Fireworks puede crear y editar dos tipos de grficos: objetos vectoriales e imgenes de mapas
de bits.
Un objeto vectorial es una descripcin matemtica de una forma geomtrica. Los trazados de
vectores se definen con puntos. Su calidad no se degrada cuando se amplan, reducen o cambian
de escala. La hoja de la siguiente ilustracin es un conjunto de objetos vectoriales. Observe la
suavidad de los bordes incluso en la ampliacin.
Por su parte, la imagen de mapa de bits est compuesta por una cuadrcula de pxeles de color. Las
imgenes con variaciones complejas de color, como las fotografas, suelen ser imgenes de mapa de
bits.
As como otras aplicaciones ofrecen herramientas para editar formas vectoriales o imgenes de
mapa de bits, Fireworks permite trabajar con ambos tipos de elementos grficos. En esta seccin
va a trabajar con objetos vectoriales.
6 Tutorial bsico de diseo grfico
Creacin de objetos vectoriales
Ahora va a crear dos elementos grficos para el documento. En primer lugar, crear un rectngulo
azul que colocar en la parte inferior del documento. Despus crear un rectngulo que ser el
borde del contenido del lienzo.
1 Elija la herramienta Rectngulo en la seccin Vector del panel Herramientas.
2 En el Inspector de propiedades, haga clic sobre el cuadro de color de relleno.
Se abre la ventana emergente de color de relleno.
3 Introduzca 333366 en el cuadro de texto situado en la parte superior de la ventana y, a
continuacin, pulse Intro.
El cuadro de color de relleno cambia a azul oscuro para reflejar la eleccin.
4 En el Inspector de propiedades, haga clic sobre el cuadro Color del trazo.
Se abre la ventana emergente Color del trazo.
5 En la ventana emergente Color del trazo, haga clic sobre Botn transparente.
Creacin y modificacin de objetos vectoriales 7
6 En la ventana de documento, coloque el puntero en cruz sobre el lienzo y arrstrelo hacia abajo
y a la derecha para crear un rectngulo. Puede dibujar el rectngulo en cualquier lugar del lienzo.
Ms adelante lo cambiar de lugar y de tamao.
7 Al soltar el botn del ratn, aparece un rectngulo azul oscuro seleccionado en el rea definida.
Un objeto est seleccionado cuando tiene puntos azules en los vrtices. La mayora de los
objetos tambin tienen los bordes resaltados en azul, pero los rectngulos son una excepcin.
8 En la esquina inferior izquierda del Inspector de propiedades, introduzca 480 en el cuadro de
anchura y 15 en el cuadro de altura. A continuacin, pulse Intro.
El rectngulo cambia de tamao para ajustarse a las dimensiones especificadas.
9 Elija la herramienta Puntero en la seccin Seleccionar del panel Herramientas.
10 Arrastre el rectngulo hasta colocarlo en la parte inferior del lienzo como se muestra a
continuacin. Utilice las teclas de flecha para colocarlo con exactitud.
11 Vuelva a elegir la herramienta Rectngulo y dibuje un segundo rectngulo. Dibjelo en
cualquier parte del lienzo y asgnele el tamao que desee. En la prxima seccin cambiar sus
propiedades y posicin.
8 Tutorial bsico de diseo grfico
Definicin de las propiedades de objeto
Ahora va a modificar el segundo rectngulo cambiando su tamao, posicin y color en el
Inspector de propiedades.
1 Con el rectngulo an seleccionado, haga clic en el cuadro Color del trazo del Inspector de
propiedades e introduzca CCCCCC como valor de color. Pulse Intro para aplicar el cambio.
2 Establezca el tamao de la punta en 1 arrastrando el deslizador emergente o indicndolo en el
cuadro de texto.
3 Haga clic en el cuadro de color de relleno del Inspector de propiedades y despus en Botn
transparente.
4 En el Inspector de propiedades, introduzca los siguientes valores de anchura, altura y
coordenadas. A continuacin haga clic fuera del Inspector de propiedades para aplicar los
cambios.
Anchura: 480
Altura: 215
X: 0
Y: 0
El rectngulo se convierte en un borde gris que recorre los bordes del lienzo.
Si el sistema utiliza gris como color de fondo de ventanas, quiz resulte difcil ver el rectngulo
en este momento. No se preocupe, el rectngulo est ah.
5 Elija la herramienta Puntero y haga clic fuera del rectngulo para anular su seleccin.
Nota: puede anular la seleccin de un objeto haciendo clic fuera de l. En este caso, el rectngulo
ocupa todo el espacio de trabajo, por tanto, debe hacer clic sobre el rea gris que rodea el lienzo.
Los datos del Inspector de propiedades cambian. Al no haber objetos seleccionados, ahora
indica las propiedades del documento y no las del objeto.
Importacin de un mapa de bits y seleccin de pxeles 9
Importacin de un mapa de bits y seleccin de pxeles
A continuacin va a importar una imagen de mapa de bits y a crear una seleccin flotante a partir
de sus pxeles.
Importacin de una imagen
Va a modificar la imagen de un automvil antiguo. En primer lugar debe importar la imagen.
1 Elija Archivo > Importar y desplcese a la carpeta Tutorial1 que ha descargado del sitio Web de
Macromedia. Desplcese a la carpeta Tutorial1/Assets.
2 Seleccione car.jpg y haga clic en Abrir.
3 Alinee el puntero de insercin con el ngulo superior izquierdo del lienzo, como se muestra en
la siguiente ilustracin, y haga clic.
La imagen aparece seleccionada en el lienzo.
4 Haga clic en cualquier punto externo a la imagen seleccionada para anular su seleccin.
Creacin de una seleccin de pxeles
Ahora va a seleccionar los pxeles que componen el coche de la imagen importada y a copiarlos y
pegarlos como un objeto nuevo.
1 Elija la herramienta Zoom en la seccin Ver del panel Herramientas.
2 Haga clic una vez sobre la imagen.
La imagen se ampla al 150%. La ampliacin permite ver y controlar mejor lo que se
selecciona.
Herramienta Zoom
10 Tutorial bsico de diseo grfico
3 Haga clic y mantenga pulsado el botn del ratn sobre la herramienta Lazo de la seccin Mapa
de bits del panel Herramientas. Elija la herramienta Lazo polgono en el men emergente.
La herramienta Lazo polgono permite seleccionar pxeles con varias lneas rectas. Es la
herramienta con la que va a seleccionar los pxeles que componen la imagen del coche.
4 En el Inspector de propiedades, ajuste la opcin Borde en Suavizado.
5 Haga clic con el puntero Lazo polgono en el borde superior del coche y siga haciendo clic a lo
largo del borde para continuar con la seleccin.
6 Finalice la seleccin colocando el puntero en el punto inicial. Junto al puntero Lazo polgono
aparece un pequeo cuadrado gris para indicar que la seleccin est a punto de finalizar. Haga
clic para finalizar la seleccin.
Alrededor de los pxeles seleccionados aparece el borde de un recuadro.
7 Elija Edicin > Copiar.
La seleccin se copia en el Portapapeles.
8 Elija Edicin > Pegar.
Un nuevo objeto de mapa de bits de la imagen del coche se pega sobre la imagen original.
9 Elija la herramienta Puntero y haga doble clic en cualquier punto fuera del mapa de bits para
anular su seleccin.
10 Haga clic en el men emergente Establecer nivel de aumento, situado en la parte inferior de la
ventana de documento, y restablezca la vista en 100%.
Adicin y edicin de efectos automticos 11
Adicin y edicin de efectos automticos
Ahora va a aplicar efectos automticos a la imagen original de mapa de bits. Cambiar el matiz y
la saturacin de la imagen y la desenfocar.
1 Haga clic en cualquier punto de la imagen del desierto para seleccionarla. (Asegrese de no hacer
clic sobre el coche.)
2 En el Inspector de propiedades, haga clic en el botn Aadir efectos (el que tiene el signo ms
(+)).
3 Elija Ajustar color > Matiz/Saturacin en el men emergente de efectos.
Se abre el cuadro de dilogo Matiz/Saturacin.
4 Elija la opcin Colorear y haga clic en Aceptar.
La imagen se colorea en el lienzo y el efecto se aade a la lista de efectos automticos del
Inspector de propiedades. Los efectos automticos pueden modificarse; adems, es posible
aadir efectos a la lista, eliminar efectos o modificarlos.
Botn de supresin de efectos
Botn de adicin de efectos
12 Tutorial bsico de diseo grfico
5 Haga doble clic en el efecto Matiz/Saturacin para modificarlo.
Sugerencia: tambin puede hacer clic sobre el botn de informacin que se encuentra junto al
efecto.
Vuelve a aparecer el cuadro de dilogo Matiz/Saturacin.
6 Cambie el matiz a 25 y la saturacin a 20. A continuacin, haga clic en Aceptar.
Los niveles de matiz y saturacin han cambiado para mostrar un tono sepia, como si fuera una
fotografa antigua.
7 Haga clic de nuevo en el botn Aadir efectos para aadir otro efecto automtico.
8 Elija Desenfocar > Desenfocar ms en el men emergente de efectos.
Los pxeles del mapa de bits seleccionado se desenfocan y el nuevo efecto se aade a la lista de
efectos automticos del Inspector de propiedades.
Utilizacin de capas y objetos
Las capas dividen los documentos de Fireworks en planos distintos. Un documento puede estar
compuesto por muchas capas y cada una contener muchos objetos. En Fireworks, el panel Capas
muestra una lista de las capas y los objetos contenidos en cada capa.
Mediante el panel Capas es posible asignar nombre, ocultar, ver y cambiar el orden de apilamiento
de capas y objetos, as como fusionar mapas de bits y aplicar mscaras de mapa de bits. En el panel
Capas tambin es posible aadir y eliminar capas.
En esta parte del tutorial va a utilizar el panel Capas para fusionar las dos imgenes de mapa de
bits. Despus asignar nombre a los objetos del documento. Tambin va a utilizar el panel Capas
para cambiar el orden de apilamiento de los objetos.
Ms adelante utilizar el panel Capas para aplicar una mscara a la imagen fusionada.
Fusin de mapa de bits
Despus de aplicar efectos automticos a la imagen de fondo, va a fusionarla con la imagen del
coche en escala de grises para crear un solo mapa de bits.
Utilizacin de capas y objetos 13
1 Si el panel Capas est minimizado o no est visible, haga clic en su flecha de ampliacin o elija
Ventana > Capas.
2 Haga clic en la miniatura del coche en escala de grises que aparece en el panel Capas.
3 Con la imagen del coche seleccionada, haga clic en el icono del men emergente de opciones
situado en el ngulo superior derecho del panel Capas.
Flecha de ampliacin
Icono del men
emergente de opciones
14 Tutorial bsico de diseo grfico
4 Elija Fusionar con inferior.
En el panel Capas, los dos objetos de mapa de bits se fusionan en un solo mapa de bits.
En el Inspector de propiedades ya no hay efectos en la lista de efectos automticos. Esto se debe
a que Fusionar con inferior combina los pxeles de todos los mapas de bits e impide su
modificacin por separado. Los efectos automticos aplicados a un objeto o mapa de bits ya no
pueden modificarse tras fusionarlo con otro objeto inferior de mapa de bits.
Asignacin de nombre a los objetos
Es aconsejable asignar nombre a los objetos para poder identificarlos fcilmente despus. Cuando
un documento aumenta y contiene muchos objetos, a veces es difcil manejarlo si los objetos no
tienen nombre propio.
Ahora va a asignar nombre a los objetos del documento mediante el panel Capas y el Inspector de
propiedades.
1 Haga doble clic en las palabras Mapa de bits que figuran junto a la imagen en miniatura en el
panel Capas.
Aparece un cuadro de texto.
2 Escriba Classic Car en cuadro de texto y pulse Intro.
El nombre nuevo designa el objeto de mapa de bits.
3 En la ventana de documento, seleccione el rectngulo gris que bordea el documento. Si es
demasiado difcil localizarlo sobre el lienzo, seleccinelo en el panel Capas.
Esta vez asignar el nombre con el Inspector de propiedades.
Utilizacin de capas y objetos 15
4 Escriba Borde en el cuadro para el nombre del objeto en el Inspector de propiedades y pulse
Intro.
El nombre introducido tambin aparece junto a la miniatura del objeto en el panel Capas.
5 Introduzca un nombre para el objeto rectangular que queda mediante el panel Capas o el
Inspector de propiedades. Emplee el nombre que prefiera, pero recuerde que debe ser
representativo para que despus resulte fcil identificar y gestionar los objetos del documento.
Cambio del orden de apilamiento de los objetos
La imagen de mapa de bits fusionada se superpone al borde y al rectngulo azul. El borde y el
rectngulo azul deben quedar en primer plano, por lo que va a utilizar el panel Capas para
cambiar el orden de apilamiento de los objetos del documento.
1 Haga clic en la miniatura del rectngulo azul del panel Capas para seleccionarla.
2 Arrstrela hasta el lugar anterior a Capa 1, sobre la miniatura Classic Car.
Nota: la capa superior del panel Capas es siempre la Capa de Web. Conocer ms detalles sobre
la Capa de Web en el Tutorial bsico de diseo Web.
Al arrastrar, el puntero cambia para reflejar que est arrastrando un objeto (slo en Windows).
En el panel Capas aparece una lnea negra que indica dnde se colocar el objeto si suelta el
botn del ratn en ese momento.
3 Suelte el botn del ratn.
El rectngulo azul se coloca inmediatamente por encima del objeto de mapa de bits en el panel
Capas. El orden de apilamiento de los objetos tambin cambia en el lienzo. Ahora el rectngulo
azul se superpone al objeto de mapa de bits y al borde.
16 Tutorial bsico de diseo grfico
4 El borde debe ser el objeto que quede en primer plano, por lo que ha de seleccionar su miniatura
y arrastrarla hasta la parte superior del panel Capas, por encima del rectngulo azul.
Creacin y modificacin de una mscara
Ya ha introducido diversas modificaciones en la imagen del coche antiguo; con este ltimo
procedimiento va a lograr el efecto de una transparencia gradual.
Con Fireworks puede aplicar dos tipos de mscaras: mscaras de vector y mscaras de mapa de
bits. En este tutorial va a aplicar una sencilla mscara de mapa de bits a la imagen del coche.
Despus la modificar con un relleno degradado. Los pxeles de la mscara mostrarn u ocultarn
la imagen del coche, segn el valor de escala de grises.
Aplicacin de una mscara
En primer lugar va a aplicar una mscara de mapa de bits blanca y vaca a la imagen del coche.
Una mscara blanca muestra el objeto o imagen seleccionados, mientras que una mscara de
pxeles negros los oculta.
Tambin va a pintar la mscara para que la imagen del coche parezca desvanecerse en el fondo.
1 Con la herramienta Puntero, seleccione la imagen de mapa de bits.
2 Haga clic en el botn Aadir mscara situado en la parte inferior del panel Capas.
Creacin y modificacin de una mscara 17
A la imagen seleccionada se le aade una mscara transparente vaca. Puede comprobar que la
mscara se ha aadido porque su miniatura se incorpora al panel Capas. El resaltado amarillo
alrededor de la miniatura de la mscara indica que est seleccionada.
Edicin de la mscara
Ahora va a darle a la imagen de mapa de bits un aspecto transparente al aadir un relleno
degradado a la mscara.
1 Con la miniatura de la mscara seleccionada en el panel Capas, haga clic y mantenga pulsado el
botn del ratn sobre la herramienta Cubo de pintura de la seccin Mapa de bits del panel
Herramientas. Elija la herramienta Degradado en el men emergente.
2 Haga clic en el cuadro Color de relleno del Inspector de propiedades.
Se abre la ventana emergente Editar degradado.
3 Elija Negro, blanco en el men emergente Preestablecido.
El degradado y las muestras de color cambian para reflejar el nuevo ajuste. Las muestras de
color situadas inmediatamente debajo del degradado permiten modificar los colores de ste.
4 Arrastre la muestra de color izquierda (blanco) aproximadamente 1/4 de la distancia hacia la
derecha para ajustar el degradado.
5 Haga clic fuera de la ventana emergente Editar degradado para cerrarla.
Miniatura de la mscara
Objeto de mscara
Degradado de color
Muestras de color
18 Tutorial bsico de diseo grfico
6 En el lienzo, arrastre el puntero Degradado por la imagen de mapa de bits como se muestra en
la siguiente ilustracin. La pantalla muestra el efecto a travs de una lnea, lo que permite definir
mejor el ngulo y la distancia en que debe aplicarse el degradado.
7 Suelte el botn del ratn.
La mscara cambia segn el relleno degradado creado. La mscara aporta a la imagen del coche
una apariencia transparente graduada. En el panel Capas, la miniatura de la mscara muestra el
relleno degradado que ha sido aplicado.
8 Elija la herramienta Puntero y haga clic en la miniatura de la mscara en el panel Capas.
El Inspector de propiedades muestra que la mscara se ha aplicado con su aspecto de escala de
grises. Los pxeles ms oscuros de la mscara ocultan la imagen del coche, mientras que los ms
claros permiten verlo.
Creacin y modificacin de texto
A continuacin va a aadir texto al documento y a aplicar propiedades de texto con el Inspector
de propiedades. Crear cuatro bloques de texto, dos para el ttulo del anuncio y dos para el texto
principal.
Creacin del texto del ttulo
En primer lugar va a crear el texto del ttulo del anuncio de alquiler de coches.
1 Elija la herramienta Texto en la seccin Vector del panel Herramientas y desplace el puntero
por la ventana de documento.
El puntero se transforma y el Inspector de propiedades muestra las propiedades de texto.
Fuente
Tamao
Color de relleno
Botones de estilo
Botones de alineacin
Interlineado
Escala horizontal
Creacin y modificacin de texto 19
2 En el inspector de propiedades, siga este procedimiento:
Elija Times New Roman en el men emergente de fuentes.
Introduzca 85 para el tamao de fuente.
Haga clic en el cuadro de color de relleno. El puntero adopta la forma de cuentagotas. Haga
clic con el puntero de cuentagotas sobre el rectngulo azul del lienzo.
La ventana emergente de color se cierra y el cuadro de color de relleno cambia para reflejar el
color elegido.
Asegrese de que ninguno de los botones de estilo (Negrita, Cursiva, Subrayado) estn
seleccionados.
Haga clic en el botn Alinear a la izquierda.
3 Con el puntero de texto, haga clic una vez en el centro del lienzo.
Se crea un bloque de texto vaco.
El crculo hueco del ngulo superior derecho del bloque de texto indica que el tamao del
bloque se ajusta automticamente. En Fireworks, los bloques de texto con ajuste automtico de
tamao adaptan su anchura a la lnea ms larga de texto en el bloque.
4 Escriba Vintage en el bloque de texto.
La anchura del bloque de texto se ampla a medida que escribe.
5 Haga clic una vez fuera del bloque de texto para aplicar el texto introducido.
El bloque de texto permanece seleccionado y la herramienta Texto sigue siendo la herramienta
seleccionada. El crculo hueco del bloque de texto ya no est visible. Este indicador slo puede
verse mientras se introduce o modifica texto.
Indicador de tamao automtico
20 Tutorial bsico de diseo grfico
6 Elija la herramienta Puntero y arrastre el texto para colocarlo como se muestra en la siguiente
ilustracin.
7 Haga clic fuera del bloque de texto para anular su seleccin y vuelva a elegir la herramienta
Texto.
8 En el Inspector de propiedades, elija Arial como fuente y 12 como tamao de fuente.
9 Vuelva a hacer clic sobre el lienzo en algn punto debajo del bloque de texto recin creado y
escriba CLASSIC RENTALS en maysculas.
10 Elija la herramienta Puntero para aplicar el texto introducido.
El texto introducido o las modificaciones realizadas se aplican igual que haciendo clic fuera del
bloque de texto al cambiar a otra herramienta del panel Herramientas. Tambin se obtiene el
mismo resultado con la tecla Esc.
11 Arrastre el nuevo bloque de texto hasta colocarlo justo debajo del bloque de texto Vintage como
se muestra en la siguiente ilustracin.
12 Haga clic fuera del bloque de texto para anular su seleccin.
Creacin y modificacin de texto 21
Creacin del texto principal
Ahora va a crear dos bloques de texto que constituyan el texto principal del anuncio.
1 Elija la herramienta Texto.
2 Esta vez, en lugar de limitarse a hacer clic sobre el lienzo, arrastre el puntero de texto para dibujar
un recuadro como se muestra en la siguiente ilustracin.
Aparece un bloque de texto. El cuadrado hueco del ngulo superior derecho indica que el
bloque de texto tiene una anchura fija definida por el recuadro dibujado. Los bloques de texto
de anchura fija conservan la anchura especificada sea cual sea la cantidad de texto que se
escriba. El tirador de esquina hueco es alternante. Al hacer doble clic sobre un bloque de texto,
ste pasar de tener un ajuste automtico a tener anchura fija, y viceversa.
3 Escriba el texto siguiente sin introducir saltos de lnea:
Indulge yourself by traveling in a Vintage classic automobile, with a chauffeur to whisk you
to any destination.
Sugerencia: si est estudiando el tutorial en lnea, puede sencillamente copiar el texto y pegarlo
en el bloque de texto en Fireworks.
El texto se ajusta al bloque de texto. El bloque de texto crece verticalmente, pero no
horizontalmente.
4 Elija la herramienta Puntero y haga clic fuera del bloque de texto para anular su seleccin. Ahora
vuelva a elegir la herramienta Texto.
5 En el Inspector de propiedades, haga clic en el cuadro de color de relleno y elija blanco como
color del texto.
6 Haga clic en el ngulo inferior izquierdo del lienzo.
Sobre el rectngulo azul aparece un nuevo bloque de texto.
22 Tutorial bsico de diseo grfico
7 Escriba lo siguiente en maysculas sin introducir saltos de lnea:
SPORTS - LUXURY - CONVERTIBLE - LIMOUSINE - ANTIQUE - NEO-CLASSIC -
EXOTIC - ROADSTER
Sugerencia: si est estudiando el tutorial en lnea, puede sencillamente copiar el texto y pegarlo.
8 Elija la herramienta Puntero y coloque el bloque de texto como se muestra a continuacin.
Nota: si no consigue colocar de nuevo el bloque de texto, elija Ver > Guas > Ajustar a guas para
anular la seleccin de Ajustar a guas.
Los textos creados en Fireworks pueden modificarse como en un programa de tratamiento de
texto. Para modificar un texto, haga doble clic en el bloque correspondiente con la herramienta
Puntero, resalte el texto que desee cambiar y escriba sobre l. Para aadir texto nuevo, haga clic
con el puntero de texto en cualquier punto del bloque de texto.
Definicin de las propiedades del texto
Una vez creados los bloques de texto, va a utilizar el Inspector de propiedades para cambiar
algunas propiedades del texto.
1 Seleccione el bloque de texto Vintage.
Sus propiedades aparecen en el Inspector de propiedades. Estas propiedades son similares a las
que aparecen cuando se selecciona la herramienta Texto.
2 En el inspector de propiedades, siga este procedimiento:
Elija Suavizado tenue en el men emergente Nivel de suavizado si no est ya seleccionado. El
suavizado suaviza los bordes del texto para que los caracteres estn ms ntidos y sean ms
legibles.
En general, las fuentes serif como Times New Roman se leen mejor si se define el suavizado
tenue cuando tienen un tamao superior a 45 puntos. Igualmente, las fuentes sans serif
como Arial se leen mejor si se define el suavizado tenue cuando tienen un tamao superior a
32 puntos.
Sugerencia: el trmino serif se refiere a las pequeas lneas (se les suele llamar pies) que se
proyectan en ngulos de los trazos de las letras de fuentes tales como Times New Roman. Arial
se considera una fuente sans serif puesto que los caracteres no llevan serifs.
Ajuste la opcin Escala horizontal del Inspector de propiedades en 89% y pulse Intro.
Creacin y modificacin de texto 23
Los caracteres del bloque de texto Vintage se volvern ms finos. Escala horizontal estira o
encoge los caracteres del texto seleccionado en sentido horizontal. El valor predeterminado es
100%. Un valor superior estirara el texto en sentido horizontal y un valor inferior reducira su
anchura.
3 Arrastre el bloque de texto Vintage hasta colocarlo como se muestra en la siguiente ilustracin.
4 Seleccione el bloque de texto Classic Rentals.
5 En el inspector de propiedades, siga este procedimiento:
Haga clic en el cuadro de color de relleno, introduzca FF6600 como valor de color y pulse
Intro.
Haga clic en el botn Negrita.
Elija Suavizado ntido en el men emergente Nivel de suavizado.
En general, las fuentes sans serif como Arial se leen mejor si se define el suavizado ntido
cuando tienen un tamao de entre 12 y 18 puntos. Igualmente, las fuentes serif se leen mejor si
se define el suavizado ntido cuando tienen un tamao de entre 24 y 32 puntos.
6 Arrastre el bloque de texto hasta colocarlo como se muestra a continuacin.
7 Seleccione el bloque de texto Indulge.
8 En el inspector de propiedades, siga este procedimiento:
Ajuste el tamao de fuente en 13.
Elija negro como color del texto.
Haga clic en el botn Alinear a la derecha.
Elija Suavizado ntido en el men emergente Nivel de suavizado.
Ajuste la opcin Escala horizontal en 88%.
24 Tutorial bsico de diseo grfico
Ajuste la opcin Interlineado en 150% y pulse Intro. El interlineado define el espacio entre
las lneas del texto. El interlineado habitual es del 100%. Los valores superiores al 100%
aumentan el espacio entre lneas, mientras que los valores inferiores acercan las lneas entre
s.
9 Arrastre uno de los tiradores de esquina del bloque de texto hacia afuera para cambiar su tamao,
de forma que el texto quede como se muestra a continuacin. Si es necesario, arrastre todo el
bloque de texto para cambiarlo de posicin en su totalidad.
10 Seleccione el bloque de texto de la parte inferior del documento.
11 En el inspector de propiedades, siga este procedimiento:
Ajuste el tamao de fuente en 13.
Elija Suavizado ntido en el men emergente Nivel de suavizado.
Ajuste la opcin Escala horizontal en 75% y pulse Intro.
12 Si es necesario, cambie el bloque de texto de posicin.
Adicin de una sombra
Al texto pueden aplicrsele efectos automticos. Ahora va a aadir una sombra al texto Vintage
con los controles de efectos automticos del Inspector de propiedades.
1 Seleccione el bloque de texto Vintage.
2 Haga clic en el botn Aadir efectos del Inspector de propiedades. Elija Sombrear e iluminar >
Sombra en el men emergente de efectos.
Aparece una ventana emergente con las opciones del nuevo efecto.
3 Introduzca 5 en Distancia y 60% en Opacidad. Haga clic fuera de la ventana emergente para
cerrarla.
Al bloque de texto Vintage se le aade un efecto de sombra.
Exportacin del documento 25
4 Haga clic en un rea vaca de la ventana de documento para anular la seleccin del bloque de
texto.
Exportacin del documento
Ha creado un objeto vectorial y ha modificado sus propiedades, ha importado una imagen de
mapa de bits y ha alterado sus pxeles, y finalmente ha creado y modificado texto. Ya puede
optimizar y exportar el documento.
Optimizacin de la imagen
Antes de exportar un documento de Fireworks, primero siempre hay que optimizarlo. La
optimizacin garantiza que la imagen se exporte con el mejor equilibrio posible entre compresin
y calidad.
1 Siga uno de estos procedimientos para abrir el panel Optimizar si an no est abierto:
Elija Ventana > Optimizar.
Si el panel est minimizado en la parte derecha de la pantalla, haga clic en la flecha de
ampliacin para ver el panel completo.
2 Elija JPEG Calidad superior en el men emergente Configuracin.
Las opciones del panel cambian para reflejar la nueva configuracin.
Estos ajustes pueden modificarse, pero en este tutorial va a utilizar los valores predeterminados.
3 Haga clic en el botn Vista previa de la parte superior de la ventana de documento.
26 Tutorial bsico de diseo grfico
Se muestra el documento tal y como aparecer cuando se exporte con los valores actuales.
Fireworks muestra en la parte inferior izquierda de la ventana el tamao del archivo exportado
y el tiempo aproximado que tardar en mostrarse en la Web.
Tamao de archivo
Tiempo de descarga
Exportacin del documento 27
Exportacin de la imagen
Una vez optimizada la imagen, ya puede exportarla como archivo JPEG.
1 Seleccione Archivo > Exportar.
Se abre el cuadro de dilogo Exportar.
El nombre de archivo aparece con la extensin .jpg. Fireworks elige este formato de archivo
porque es el seleccionado en el panel Optimizar.
2 Desplcese a la carpeta Tutorial1 que ha descargado del sitio Web de Macromedia y sitese en
Tutorial1/Export.
3 Asegrese de que el men emergente Tipo (Windows) o Guardar como (Macintosh) indica Slo
imgenes y haga clic en Guardar.
El archivo JPEG se exporta a la ubicacin especificada.
Recuerde que el archivo PNG es el archivo de origen o archivo de trabajo. Aunque ha
exportado el documento en formato JPEG, tambin debe guardar el archivo PNG para que
todos los cambios introducidos se reflejen igualmente en el archivo de origen.
4 Elija Archivo> Guardar para guardar los cambios en el archivo PNG.
5 Elija Archivo > Cerrar.
28 Tutorial bsico de diseo grfico
Visualizacin del documento exportado
El nuevo archivo creado durante el proceso de exportacin se encuentra en la carpeta especificada.
1 En Fireworks, elija Archivo > Abrir y desplcese a la carpeta Export.
Fireworks ha creado un archivo en esta ubicacin denominado vintage.jpg.
2 Seleccione vintage.jpg y haga clic en Abrir.
La imagen se abre en una nueva ventana de documento de Fireworks. En el panel Capas todos
los objetos estn planos. Cuando los objetos estn planos, se fusionan en un solo objeto y ya no
pueden editarse por separado.
El Inspector de propiedades muestra las propiedades de un mapa de bits. Todos los efectos
automticos y los dems atributos aplicados con el Inspector de propiedades ya no estn
disponibles para el mapa de bits seleccionado.
El documento tiene este aspecto porque Fireworks ha tenido que allanar la imagen y todas sus
propiedades cuando eligi la exportacin en formato JPEG. Sin embargo, an dispone del
archivo de origen PNG, por lo que, cuando necesite modificar el diseo, puede abrir el archivo
PNG y editar todos los objetos.
3 Elija Archivo > Abrir y seleccione vintage.png en la carpeta Tutorial1. Haga clic en Abrir.
En el panel Capas, todos los objetos estn disponibles de nuevo como objetos independientes.
Todos los objetos pueden modificarse, al igual que sus propiedades.
4 Haga clic en todos los objetos.
El Inspector de propiedades muestra las diversas opciones de cada objeto seleccionado.
5 Seleccione el texto Vintage en el lienzo.
En el Inspector de propiedades aparece el efecto automtico de sombra de este objeto de texto.
Pasos siguientes 29
Ahora puede ver la ventaja de utilizar el archivo PNG de Fireworks como archivo de origen.
Siempre podr introducir cambios en un documento, aun cuando decida exportarlo en otro
formato, como JPEG.
Pasos siguientes
Ha llevado a cabo las tareas necesarias para crear elementos grficos en Fireworks. Ha aprendido a
crear y guardar un documento nuevo y a aadirle objetos vectoriales e imgenes de mapa de bits.
Tambin ha aplicado efectos automticos, ha utilizado capas, ha creado una mscara y ha aadido
texto. Finalmente, ha aprendido a exportar la imagen finalizada.
Si desea informacin ms detallada sobre las funciones tratadas en el tutorial y sobre otras
funciones de Fireworks, consulte el ndice del manual Utilizacin de Fireworks o busque en los
temas de Ayuda de Fireworks.
Si desea aprender a utilizar Fireworks para crear pginas Web interactivas, consulte el Tutorial
bsico de diseo Web. Utilizar la imagen JPEG que ha exportado en este documento y la
importar a una pgina Web. Tambin aprender a crear interactividad Web con botones,
rollovers y mens emergentes.
30 Tutorial bsico de diseo grfico