Práctica # 6 - Licenciado en Sistemas Computacionales

No se puede mostrar la imagen. Puede que su equipo no tenga suficiente memoria para abrir la imagen o que ésta esté dañada. Reinicie el equipo y,a continuación, abra el archivo de nuevo. Si sigue apareciendo la x roja, puede que tenga que borrar la imagen e insertarla de nuevo.Fecha de efectividad: __________________Formato para prácticas de laboratorioUNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIAFACULTAD DE INGENIERÍA (UNIDAD MEXICALI)DOCUMENTO DEL SISTEMA DE CALIDADCARRERAPLAN DEESTUDIOCLAVEASIGNATURALSC 2009-2 12008NOMBRE DE LA ASIGNATURATemas Selectos de SistemasComputacionalesPRÁCTICANo.6LABORATORIODENOMBRE DE LAPRÁCTICALicenciado en Sistemas ComputacionalesDURACIÓN(HORA)Introducción al Fireworks 21. INTRODUCCIÓNEs importante que el alumno del programa de Licenciado en Sistemas Computacionales tenga lasbases necesarias para la creación de imágenes para posteriormente poder usar sus propiosrecursos en el diseño de sus páginas web, esto lo logrará a través de la herramienta de Adobellamada Fireworks CS5.2. OBJETIVO (COMPETENCIA)El alumno creará imágenes aplicando las herramientas de Adobe Fireworks CS5 para utilizarlas eninternet con perseverancia, de manera ordenada.FormulóM.C. MónicaCristina Lam MoraRevisóIng. Josefina MariscalCamachoAprobóAutorizóDr. David Isaías RosasAlmeidaMaestroResponsable dePrograma EducativoGestión de la CalidadDirector de la Facultad3. FUNDAMENTO¿Qué es Fireworks?Fireworks CS5 es un editor de imágenes desarrollado por Macromedia, posteriormente adquirido porAdobe. Sus características se centran en los gráficos para la publicación en Internet, que incluye archivosGIF animados, PNG, JPG, entre otros formatos de alta compresión.Pantalla que presenta Fireworks al iniciar a trabajar con él. Aquí se pueden crear nuevos documentos, abrirdocumentos recientemente utilizados, etc.Código GC-N4-017 .Página 1 de 7Revisión 1 .

No se puede mostrar la imagen. Puede que su equipo no tenga suficiente memoria para abrir la imagen o que ésta esté dañada. Reinicie el equipo y,a continuación, abra el archivo de nuevo. Si sigue apareciendo la x roja, puede que tenga que borrar la imagen e insertarla de nuevo.Fecha de efectividad: __________________Formato para prácticas de laboratorioUNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIAFACULTAD DE INGENIERÍA (UNIDAD MEXICALI)DOCUMENTO DEL SISTEMA DE CALIDADPara crear un nuevo documento en Fireworks1. Abrir Fireworks y una vez visualizada la pantalla anterior, presionar la opción Crear documento deFireworks en PNG.2. Posteriormente deberemos elegir el tamaño apropiado para nuestra imagen en una pantalla comoestá, donde debemos especificar el ancho y alto de la pantalla, resolución, color del fondo del áreade trabajo, etc.1. Y ahí depende de lo que se desee trabajar serán las herramientas que se tendrán que utilizar.Código GC-N4-017 .Página 2 de 7Revisión 1 .

No se puede mostrar la imagen. Puede que su equipo no tenga suficiente memoria para abrir la imagen o que ésta esté dañada. Reinicie el equipo y,a continuación, abra el archivo de nuevo. Si sigue apareciendo la x roja, puede que tenga que borrar la imagen e insertarla de nuevo.Fecha de efectividad: __________________Formato para prácticas de laboratorioUNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIAFACULTAD DE INGENIERÍA (UNIDAD MEXICALI)DOCUMENTO DEL SISTEMA DE CALIDADPaleta de herramientasHerramienta de selección: incluye también la herramienta de"subselección", que sirve para seleccionar elementos que están"tapados" por otros cuando estás trabajando con muchoselementos.Herramienta para escalar: sirve para modificar proporcionalmenteel tamaño de los elementos. Las herramientas de Skew y Distortsirven para distorsionar la forma del elemento seleccionado.El Crop sirve para seleccionar un área que será cortada, y laherramienta que lo acompaña sirve para seleccionar unáreadeterminada y exportarla independientemente del resto de unaimagen.Las herramientas de Marquee sirven para seleccionar un áreadeterminada de la imagen, ya sea para copíarla, ya sea paratrabajar en ella sin modificar el resto de la imagen.Las herramientas de Lasso y Polygon Lasso son variantes deMarquee, y sirven para seleccionar áreas a mano alzada opoligonales respectivamente.La herramienta Paint Bucket es simplemente la herramienta derelleno, y su variante, la Gradient Tool, es para rellenosdegradados. Las opciones de ese degradado se configuran luegodesde el panel de propiedades.La herramienta Pen sirve dibujar elementos con sólo hacer clic ytrazar sus lados.Esta acompañada por la Vector Path, que sirve para trazos dedistintos tipos (bambú, cinta, aerógrafo, etc); y la Redraw PathTool, que permite redibujar o agrandar un dibujo, conservando lascaracterísticas de trazo o configuración.Bueno, es obvio que estas herramientas son para dibujar distintasformas.Eraser Tool: para borrar.Brush Tool: para dibujar trazos.Line Tool: para dibujar líneas rectas.Código GC-N4-017 .Página 3 de 7Revisión 1 .

No se puede mostrar la imagen. Puede que su equipo no tenga suficiente memoria para abrir la imagen o que ésta esté dañada. Reinicie el equipo y,a continuación, abra el archivo de nuevo. Si sigue apareciendo la x roja, puede que tenga que borrar la imagen e insertarla de nuevo.Fecha de efectividad: __________________Formato para prácticas de laboratorioUNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIAFACULTAD DE INGENIERÍA (UNIDAD MEXICALI)DOCUMENTO DEL SISTEMA DE CALIDADPencil Tool: para dibujar líneas a mano alzadaSubselection Tool: para trabajar con los nodos de trazosvectoriales.Text Tool: herramienta de texto.Herramienta de bordes.Herramienta de relleno.Barra de Propiedades.No la describiremos en detalle aquí porque cambia constantemente, según el elemento que tengamosseleccionado.Paneles colapsables.Respecto a ellos tampoco haremos una descripción detallada en estaprimera parte ya que tienen muy diversas funciones que iremosrecorrriendo a lo largo de este curso.Bástenos saber el modo de manejarlos.Los puntos que están encerrados en el círculo amarillo forman el áreadesde la cual, haciendo clic y sin soltar el mouse, podemos arrastrar elpanel fuera del área donde se encuentra, y dejarlo "flotante" en cualquierlugar de la pantalla.Fíjate ahora en las áreas encerradas en el círculo verde. En el panel de"Optimize" la flecha indica hacia abajo, y es porque el panel estádesplegado. En el panel de "Colors" y en los demás, la flecha indica haciael costado porque los paneles están "colapsados" o cerrados. Haciendoclic en estas area los podemos expander.Código GC-N4-017 .Página 4 de 7Revisión 1 .

No se puede mostrar la imagen. Puede que su equipo no tenga suficiente memoria para abrir la imagen o que ésta esté dañada. Reinicie el equipo y,a continuación, abra el archivo de nuevo. Si sigue apareciendo la x roja, puede que tenga que borrar la imagen e insertarla de nuevo.Fecha de efectividad: __________________Formato para prácticas de laboratorioUNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIAFACULTAD DE INGENIERÍA (UNIDAD MEXICALI)DOCUMENTO DEL SISTEMA DE CALIDAD4. PROCEDIMIENTO (DESCRIPCIÓN)A) EQUIPO NECESARIO MATERIAL DE APOYOComputadora con cualquier Adobe Fireworks CS5Prácticainstalado.B) DESARROLLO DE LA PRÁCTICACreación de Botones en Fireworks:1. Inicie el software Adobe Fireworks.2. Agregue un nuevo documento con las siguientes características 180 pixeles de ancho por 80 pixeles dealto, con un color de canvas transparente, resolución de 100.3. Agregue de la caja de herramientas un rectángulo con las siguientes características 180 pixeles deancho por 80 pixeles de alto, con un de color de fondo de #3C2F23.4. Utilizar la herramienta Texto y poner el mensaje “INICIO”, con las siguientes característicascolor de letra #FFFFFF, tamaño regular 35, y tipo de fuente Myriad Web Pro, además deberá agregarun iluminado blanco, el cual se encuentrá en la opción de filters (filtros) ,presionar el signo + y en el menú seleccionar la opción Shadow and Glow (sombra e iluminado),entrar a Glow (iluminado) y poner el color blanco, hasta que se vea, así:1. Una vez terminado deberá guardar su botón con el nombre Inicio, y en dos formatos png y gif.2. Para el segundo botón cuando este presionado deberá, crear un nuevo documento, con las siguientescaracterísticas 180 px de ancho por 80 px de alto, con un color de canvas transparente, resolución de100.3. Agregue de la caja de herramientas un rectángulo con las siguientes características 180 pixeles deancho por 80 pixeles de alto, con un de color de fondo de #3C2F23, solo que está vez en laspropiedades modifique donde aparece la palabra solid (solido) y seleccione Gradient (gradiente), detipo radial, el gradiente debe ser con blanco.4. Utilizar la herramienta Texto y poner el mensaje “INICIO”, con las siguientes característicascolor de letra #5D4F36, tamaño regular 35, y tipo de fuente Myriad Web Pro, hasta que se vea, así:Código GC-N4-017 .Página 5 de 7Revisión 1 .

No se puede mostrar la imagen. Puede que su equipo no tenga suficiente memoria para abrir la imagen o que ésta esté dañada. Reinicie el equipo y,a continuación, abra el archivo de nuevo. Si sigue apareciendo la x roja, puede que tenga que borrar la imagen e insertarla de nuevo.Fecha de efectividad: __________________Formato para prácticas de laboratorioUNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIAFACULTAD DE INGENIERÍA (UNIDAD MEXICALI)DOCUMENTO DEL SISTEMA DE CALIDAD5. Una vez terminado deberá guardar su botón con el nombre de Inicio_Sobre y en dos formatos png ygif.Con el mismo procedimiento deberá crear los siguientes botones quedando de la siguiente manera,procurando siempre dejar ambos archivos gif y png:EmpresaProductosPaquetesContactoBorrar fondos de imágenes en Fireworks:1. Inicie el software Adobe Fireworks.2. Abrir el archivo del cual se desea quitar el fondo, para agregarle la transparencia.3. Una vez abierto el archivo, seleccionar la parte que se desea recortar con la herramienta de MagicWand Tool (Varita Mágica)con lo que se desea recortar., y posteriormente presionar la tecle delete (borrar), hasta finalizar4. Para guardar el archivo con transparencia ir al menú Optimize (Optimizar) , una vezdesplegada la opción seleccione Animated GIF WebSnap 128, Animated GIF, Alpha Transparency,posteriormente ir al menú File (Archivo), Save As (Guardar Como), agregar el nombre del archivo yponer el tipo de archivo Animate Gif (Gif Animado).5.Código GC-N4-017 .Página 6 de 7Revisión 1 .

No se puede mostrar la imagen. Puede que su equipo no tenga suficiente memoria para abrir la imagen o que ésta esté dañada. Reinicie el equipo y,a continuación, abra el archivo de nuevo. Si sigue apareciendo la x roja, puede que tenga que borrar la imagen e insertarla de nuevo.Fecha de efectividad: __________________Formato para prácticas de laboratorioUNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIAFACULTAD DE INGENIERÍA (UNIDAD MEXICALI)DOCUMENTO DEL SISTEMA DE CALIDADCreación de Banner en Fireworks:1. Inicie el software Adobe Fireworks.2. Agregue un nuevo documento con las siguientes características 900 pixeles de ancho por 200 pixelesde alto, con un color de canvas #3C2F23, resolución de 100.3. Agregue sobre esté rectángulos de 40 px de ancho por 200 px de alto, con un color de #DEDEDE,estos quedarán separados un de otro igual por 40 px.4. Al final agregar la imagen del logo de la pastelería, hasta que se visualice de la siguiente manera.C) CÁLCULOS Y REPORTEPreguntas sobre la práctica de forma INDIVIDUAL, que hará el maestro al finalizar la práctica a cadaalumno.5. RESULTADOS Y CONCLUSIONESLos resultados serán solo a nivel de visualización, no serán impresos, estos podrán variardependiendo de los datos de entrada que el alumno introduzca.6. ANEXOS7. REFERENCIASEl recurso para está practica deberá descargarlo de:http://lsc.mxl.uabc.mx/~monica/imagenes/logo_pasteleria.jpgCódigo GC-N4-017 .Página 7 de 7Revisión 1 .