NOMBRE: MERALIN NAVARRETE LECCA

TUTORIAL ADOBE FIREWORKS

SECCION :4 B

Hoy aprenderemos como utilizar el programa de Adobe Fireworks con los siguientes pasos:

PASO 1 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

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

PASO 3 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.

PASO 4 Panel de herramientas de FireworksObserve 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 BarMientras 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 DeshacerEs ú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.

PASO 5 Utilizando el panel de herramientas de FireworksSeleccione 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.

PASO 6 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 azulitá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.

PASO 7 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 BannerA 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.

PASO 8 Aplicar el filtro Bisel exteriorSeleccione "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.

PASO 9 Modifique el filtro Bisel exteriorEl 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.

Save Your Company Logo BannerPuede 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.

PASO 10

PASO 11 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.

PASO 12 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.

PASO 13 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.

PASO 14Ahora 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.

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 ancho50 píxeles de altotiene 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:

PASO 15

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:

PASO 16

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.

BUENO ESTO ES EL FINAL DEL TUTORIAL ESPERO

LES HAIGA GUSTADO

ALUMNA:MERALIN JARITZA MARIAN CIELO NAVARRETE LECCA

SECCIO Y GRADO : 4B