Este documento proporciona instrucciones paso a paso para crear un logotipo de empresa utilizando el programa Adobe Fireworks. Explica cómo crear un nuevo archivo, agregar texto, aplicar estilos y filtros al texto, guardar la imagen en formatos .gif y .png, y exportar botones similares. El objetivo es enseñar las funciones básicas de Fireworks necesarias para diseñar elementos gráficos simples como logotipos y botones de navegación para un sitio web.

1. NOMBRE: MERALIN NAVARRETE LECCA
SECCION:4 B
Hoy aprenderemos como utilizar el programa de Adobe Fireworks con los
siguientes pasos:

2. Una imagen de la bandera de empresa "logo" se encuentra comúnmente en la página principal de
la mayoría de sitios web. Al crear un sitio web para una empresa, es más fácil de escanear el
logotipo de la organización de sus folletos o material promocional y guarde la imagen del logotipo
escaneado como un archivo gif o jpg. Si no hay folletos u otros materiales disponibles, una
aplicación gráfica como Adobe Fireworks se puede utilizar para crear una bandera.
Este tutorial te guiará en la creación de un logotipo de la empresa bandera. Comience con el
lanzamiento de fuegos artificiales.
Haga clic en la imagen para ver una versión más grande de la captura de pantalla.
No te preocupes si te sientes un poco intimidado por todas las ventanas y paneles que
aparecen.Nos centraremos en las funciones necesarias para crear un logotipo de la empresa
bandera. Cuando usted desea aprender más acerca de los fuegos artificiales, pruebe la opción
Fireworks Centro de soporte se encuentra en "Ayuda" en el menú superior barra de herramientas
principal o considere tomar un curso sobre los gráficos. Cuando esté listo, continúe con el tutoria

3. Crear una nueva Imagen
Para crear una nueva imagen, seleccione Archivo> Nuevo. Su pantalla debe ser similar a la pantalla que
se muestra a continuación.

4. El cuadro de diálogo "Nuevo documento" aparece en el centro de la pantalla. Esto se utiliza para configurar los
ajustes para el nuevo documento. Nos gustaría que nuestra bandera sea de 950 píxeles de ancho, 100 píxeles de alto,
tiene 96 ppp de resolución (por defecto), y tienen un fondo transparente (lienzo de color).
Modifique el cuadro "Nuevo documento" de diálogo con estos ajustes.
Haga clic en "Aceptar". Fireworks crea el nuevo lienzo de la imagen de acuerdo a sus especificaciones, como se
muestra a continuación.
Haga clic en la imagen para ver una versión más grande de la captura de pantalla.
Tome un minuto para familiarizarse con la pantalla.
El "Untitled-1" en la barra de título es el nombre del archivo en este punto.
Esta imagen es un png - el formato de imagen nativo para Fireworks. (Nota: usted aprenderá cómo exportar su
imagen a un formato .gif o .jpg más adelante en este tutorial.)
El patrón de tablero de ajedrez en la ventana indica un lienzo transparente de fondo - no se preocupe su imagen final
no tendrá un fondo de tablero de ajedrez.
La pestaña "Original" se selecciona inicialmente y indica que la imagen puede ser editado. Vamos a trabajar con
"Vista previa" más adelante.
Si nos fijamos en la parte inferior derecha de esta ventana se dará cuenta el tamaño del documento (950x100),
aumento de la pantalla (en la actualidad 100%) y una serie de iconos.
Continúe con la siguiente página para comenzar a editar su empresa logotipo de la pancarta.

5. Panel de herramientas de Fireworks
Observe el panel de herramientas en la parte izquierda de la aplicación Fireworks. La
herramienta seleccionada es la "Herramienta Puntero" - el puntero del cursor estándar.Coloca el
ratón sobre los otros iconos de herramientas para una breve descripción de cada uno.
Usted va a utilizar el icono de "Herramienta de texto" en el panel de herramientas en este
tutorial. Tome un momento y encontrarlo. (Sugerencia: Busque la letra "T" en el área de
vectores en el panel de herramientas.)
También se le utiliza el área de colores que se encuentra en una sección inferior del panel de
herramientas. Que va a utilizar esta área para cambiar el color del objeto que se está
trabajando.
Herramienta Main Bar
Mientras usted está examinando la pantalla, echar un vistazo en la barra de herramientas
principal en la parte superior de la ventana de Fireworks.
Cómo Deshacer
Es útil saber cómo deshacer una acción al usar fuegos artificiales en caso de que
cometa un error. Usted puede deshacer rápidamente la acción más reciente - los
usuarios de Windows, pulse las teclas Ctrl y Z al mismo tiempo; Los usuarios de Mac
pulse el ⌘ teclas Comando y Z al mismo tiempo. También hay una opción Deshacer se
encuentra debajo de la opción Editar en la barra de herramientas principal.
Continuar para realmente crear el logotipo de la empresa bandera.

6. Utilizando el panel de herramientas de Fireworks
Seleccione la herramienta Texto en el Área vectorial en el panel Herramientas.
Su cursor se convierte en una "I Beam".
Haga clic en el lienzo de tablero de ajedrez. Aparece un contorno azul para un área de
texto. Ver la imagen de abajo.
Observe el panel Inspector de propiedades en el centro inferior de la ventana. El
inspector de propiedades permite configurar las propiedades del área de texto.
Coloca el cursor en el área de texto azul y escriba "Diseño Web Acmé".
Su texto puede tener un aspecto diferente de la muestra se
muestra arriba. Eso está bien, usted configura su texto en un
momento. Usted se dará cuenta el texto de la muestra pasa a
comenzar en la parte izquierda del lienzo. Mover el texto más
cerca de la parte izquierda del lienzo de la imagen (como se
muestra en la siguiente captura de pantalla) seleccionando
Seleccione la herramienta Puntero (ver página 2), utilizándolo para
seleccionar el área de texto, y arrastrando el área de texto más
cerca de la izquierda lado del lienzo de la imagen.

7. Ahora vas a configurar el texto para ser apropiado para un logotipo de la empresa bandera. Examine el
Inspector de propiedades muestra a continuación. Hay controles que configuran las propiedades del texto,
incluyendo el tipo de letra, tamaño, color, estilo (negrita, cursiva o subrayado), y la orientación (horizontal o
vertical).
Seleccione el área de texto en la imagen y configurar el Inspector de propiedades como se muestra a
continuación:
Fuente Arial,
tamaño 64,
un tono de azul
itálico
Observe que el texto en el lienzo de la imagen se ha cambiado para que coincida con su
configuración. Puede que tenga que utilizar la herramienta Puntero de nuevo para colocar su texto para que
muestre por completo. Su imagen Lona debe ser similar al que se muestra a continuación.
Vamos a ajustar el espaciado manual de 0 a 100 - esto
proporcionará más espacio entre las letras del
logotipo. Ver el panel Inspector de propiedades a
continuación.

8. Su imagen Lona debe ser similar al que se muestra a continuación.
Continuar para personalizar aún más su logotipo de la bandera de la empresa.
Personaliza tu Company Logo Banner
A continuación, se le aplicará un filtro para su texto. Mira la pantalla y observe la etiqueta de filtro
seguido por el signo + en el Inspector de propiedades. Haga clic en el signo + para mostrar los filtros
disponibles. Vea la siguiente figura.

9. Aplicar el filtro Bisel exterior
Seleccione "bisel y relieve".
Usted notará una serie de opciones aparecen.
Seleccione "Bisel exterior" como se muestra a la
derecha.
Su imagen Lona debe ser similar al que se muestra a
continuación.
Observe el filtro Bisel exterior aparece ahora en el
Inspector de propiedades bajo la etiqueta de filtro.
Consulte la figura de la izquierda.
Haga doble clic sobre el texto "Bisel exterior" para
que aparezca un cuadro de diálogo que se puede
utilizar para configurar el filtro.
Consulte la figura de la izquierda.

10. Modifique el filtro Bisel exterior
El color del filtro de bisel exterior es de color rojo. Usted puede cambiarlo si lo prefiere. Pruebe un color
turquesa (# 3399CC).Experimente con los ajustes. Para un efecto más sutil, cambie el ancho de 10 a 5.
Pruebe diferentes tipos de efectos. Se encuentra actualmente en "Raised" - tratar "invertido" o "destacado"
para una mirada diferente. Intente cambiar el contraste, la suavidad y el ángulo si se siente atrevida.
Pare cuando usted es feliz con su texto. Recuerde Edición, Deshacer (o las teclas Ctrl + Z) puede ayudar a
corregir los errores. Su imagen Lona ahora puede verse como el que se muestra a continuación.
El texto anterior se configura con el valor que se muestra a continuación:
Continuar para salvar su imagen para la Web.

11. Save Your Company Logo Banner
Puede utilizar la ficha Vista previa en la ventana Lienzo Imagen para mostrar cómo su imagen se verá
en una página web. Haga clic en la ficha Vista previa. Su pantalla debe ser similar al que se muestra a
continuación.
Haga clic en la imagen para ampliar captura de pantalla.
Mira la barra de estado inferior izquierda del panel - Fireworks le indica el tamaño del archivo de la imagen
y el tiempo de descarga aproximada, y el tipo de imagen sugerida. Observe cómo hay un rectángulo de
espacio en blanco alrededor del texto en la imagen. Esto dejará automáticamente espacio en blanco
alrededor del texto cuando se muestra la imagen en una página web.
Haga clic en la ficha original de seguir para editar la imagen.
Si a usted le gustaría reducir las dimensiones de la imagen a la anchura y la altura necesaria para mostrar
el texto (sin un área vacía bordeando el texto), que tendrá que recortar el lienzo seleccionando Modificar>
Lienzo> Recortar lienzo como se muestra en la siguiente figura.

12. Si recortado el lienzo alrededor de la imagen, el área de trabajo de Fireworks ahora debe ser similar al que
se muestra a continuación.
Utilice el Asistente para exportación. Seleccione Archivo> aparecerá Asistente para exportación y el siguiente cuadro de
diálogo.

13. Esto le permite seleccionar un formato para la exportación (a veces tiene que elegir entre gif y jpg) y apuntar a un
tamaño de archivo de exportación. Haga clic en el botón Continuar.
Seleccione el destino final para su imagen. Haga clic en el botón de radio junto a "La web" si no está ya
seleccionada. Haga clic en Continuar. Haga clic en Salir para ver tus previstas. Aparecerá el cuadro de diálogo
preliminar de la exportación y se muestra a continuación.

14. Haga clic en la imagen para ampliar captura de pantalla.
Observe que se muestran tanto imágenes JPG y GIF. Los tamaños de archivo y tiempos de descarga se
indican para cada uno. Hay muchas opciones en este cuadro de diálogo que se pueden configurar,
incluyendo la paleta de colores utilizado por las imágenes. Se puede ver que se puede tomar un buen tiempo
para alcanzar la competencia usando Fireworks, Por ahora, haga clic en la imagen gif para seleccionarlo y
configurarlo para utilizar Alfa La transparencia como se muestra a continuación.

15. Ahora haga clic en el botón "Exportar". Aparecerá el cuadro de diálogo Guardar archivo de
exportación. Guarde el archivo en su disco duro o medios portátiles de almacenamiento (CD-R,
memoria USB, etc.). Nombre del logo.gif archivo. Compruebe que la configuración de exportación es
"sólo imágenes". Haga clic en Guardar. Ahora ha grabado su logotipo en un formato que se utiliza
ampliamente en la Web.
Ahora, guarde el archivo de trabajo. Seleccione Archivo> Guardar como y guarde el archivo como
logo.png en su disco duro o medios de almacenamiento portátiles.
Cerrar fuegos artificiales. Seleccione Archivo> Salir.
Nota - salvó dos versiones de su gráfico:
El archivo .gif se mostrará en las páginas web.
El archivo .png se guarda y se puede utilizar si es necesario modificar el logotipo o crear una imagen
del logotipo similar en el futuro.
El archivo .png contiene el objeto de texto editable y se puede modificar fácilmente. El archivo .gif no
se puede modificar fácilmente.
Continuar a la página siguiente para obtener información sobre cómo abrir el archivo en Fireworks y
en los botones de la creación.
Apertura de archivos existentes y Más ...
Has salvado el logotipo de su bandera compañía en dos archivos separados: logo.gif y logo.png. El archivo
logo.gif se ha optimizado para visualizar en una página web. Si lo abre en Fireworks (Launch Fireworks,
seleccione Archivo, seleccione Abrir y elija su logo.gif) usted encontrará que mientras que usted puede
agregar objetos a la misma, no se puede editar directamente o cambiar el objeto de texto "Acme Web
Design".
El archivo logo.png se guarda en un formato de archivo que permiten editar objetos. Cierre el archivo
logo.gif y abra el archivo logo.png. Tenga en cuenta que si hace doble clic sobre el texto se puede editar y
formatear sin embargo que usted desea. Es una gran idea para guardar los archivos en los formatos - en
caso de tener que volver atrás y modificar una imagen.

16. Creación de botones con fuegos artificiales
Hay una serie de métodos que puede utilizar para crear botones con fuegos artificiales. Un método muy
simple es crear una nueva imagen con las dimensiones apropiadas y color de fondo. A continuación, añadir
texto a él.
La siguiente sección le guiará a través de la creación de un botón de "Inicio". Cierre todas las imágenes
abiertas en Fireworks. (Sugerencia: Al crear una serie de botones de navegación para un sitio web crean el
que muestra el texto más largo primero)
Crear una nueva imagen.
Seleccione Archivo> Nuevo. Aparecerá el cuadro de diálogo Nuevo documento.
Configurarlo para que la imagen es:
150 píxeles de ancho
50 píxeles de alto
tiene un tono de azul para el color de fondo.
Haga clic en Aceptar.
Su imagen Lona será similar al que se muestra a
continuación:

17. Añadir el texto "Inicio" para el botón. (Sugerencia: elegir el texto Tool.from el menú de herramientas,
consulte las páginas anteriores de este tutorial si es necesario.) Utilice el panel Propiedades para
configurar el color del texto (#FFFFFF), tamaño (30), fuente (Arial), negrita y cursiva.
Su imagen Lona será similar al que se muestra a continuación:
Utilice el Asistente para exportación y guarde el archivo en su disco duro o medios de almacenamiento portátiles
como home1.gif.
A veces es necesario dos versiones del mismo botón con colores ligeramente diferentes de texto. La forma más
sencilla de hacerlo es crear el segundo botón en este momento. Seleccione el texto, cambiar el color, y utilizar el
Asistente de exportación para crear el segundo botón. Llámalo home2.gif.
Para prepararse para futuras modificaciones (nunca se sabe cuando sus clientes o director del proyecto va a cambiar
su mente), guarde el archivo como home.png para permitir un fácil mantenimiento.
Las muestras de home1.gif y home2.gif se muestran a continuación:
Si usted está pensando, "Realmente no hay mucho que aprender sobre el uso de aplicaciones gráficas." - estás en lo
correcto.
Considere tomar un curso de gráficos en algún momento en el futuro. Algunos desarrolladores web técnicos
externalizar su trabajo gráfico para especialistas gráficos.
Proyectos web a gran escala por lo general tienen al menos un diseñador gráfico en el equipo. Esto permite a los
desarrolladores concentrarse en el código HTML y script.

18. ALUMNA:MERALIN JARITZA MARIAN CIELO NAVARRETE LECCA
SECCIO Y GRADO : 4B