Inicio





"Disseño, edición y publicación de páginas Web"


Solucionario de las prácticas de la unidad 3:
Los programas de edición de imágenes fijas y animadas

 

Práctica 1 (gamma, selección y JPEG)
Práctica 2 (redimensionar, filtros ycoloers)
Práctica 3 (selección irregular, copiar y enganchar)
Práctica 4 (similitud iy transparencias)
Práctica 5 (animación con el asistente)
Práctica 6 (animación con efectos)
(2003)

 

 

 

Pràctica 1 (gamma, seleccions, JPG):

1. Retocar la Gamma de la foto del edificio de Torre Damians con el fin de hacerla un poco más clara .

  1. Se ha tenido que instalar preiamente el programa Paint Shop Pro.
  2. Es necesario tener abierto el navegador d'Internet (Internet Explorer 4.0) yel programa Paint Shop Pro (Inicio/Programas/Paint Shop Pro/Paint Shop Pro 5)
  3. Situar el cursor sobre la foto del efificio de Torre Damiansy hacer click con el botón de la derecha del ratón , escoger Copiar del menú contextual.
  4. Ir al programa Paint Shop Pro (seleccionando el botón que ha aparecer a la barra de tareas inferior de la pantalla).
  5. Seleccionar el menú Editar/Pegar como nueva Imagen.
  6. Ya tenemos la imagen disponible para manipularla desde el programa de retoque fotográfico.
  7. Comprobar el tamaño y número de colores de la imagen, situando el cursor sobre la imagen y mirando la zona inferior derecha de la pantalla. También se puede ver información sobre la fotografia actual desde el menú Ver/Información sobre la imagen.
  8. Para aclarar la fotografía hay que elegirColores/Ajustar/Corrección Gamma
  9. Haer pruebas con los comandos deslizantes hasta conseguir el efecto de clareado deseado. Se puede ver una simulación de cómo quedará la foto final si está activada la casilla Prueba automática.
  10. Vover a probar desde el punto 8. para conseguir pequeñas rectificaciones.
  11. Apretar el botón deshacer, o el menú Editar/Deshacer, para deshacer las últimas modificaciones y volver a la foto original.

2. Recortar la foto de tal manera que no se vea el coche que hay en la parte inferior izquierda.
  1. Antes de recortar la foto hay que aprender a variar el zoom con el que observaremos la imagen ( sólo se trata de la vista de la imagen para trabajar , no cambia el tamaño rea de la imagen). Para cambiar la escala de la visión de trabajo podemos escoger la herramienta Lupa, después , clicando sobre la imagen con el botón izquierdo del ratón , la imagen se verá ampliada , en cambio si se clica el botón de la derecha la imagen se verá reducida.
  2. Definir la visión de la imagen a escala 1x1, con la técnica del punto 1.
  3. Escoger la herramienta de selecció rectangular, desde la barra deherramientas normalmente situada a la izquierda.
  4. Situarese justo sobre el techo del coche (comprobar como el cursor ha cambiado de forma) y mientras se mantiene pulsado el botón izquierdo del ratón se selecciona hacia la parte superior y derecha de la imagen hasta tener seleccionada la zona que nos interesa. No dejar de apretar elel botón del ratón hasta que la zona seleccionada sea la que nos interesa.
  5. Para recortar y conservar la imagen al tamaño de la selección actual hay que escoger Imagen/Recortar en Selección
  6. Deshacer la última operación con el botón de deshacer.
  7. Volvemos a seleccionar otra zona de la imagen. Para desactivar la selección hecha se puede, simplemente, seleccionar otra zona o bien ir al menú Selecciones/No seleccionar.
  8. Para eliminar una zona seleccionada y conservar el resto de la imagen: seleccionamos una zona de la foto (por ejemplo la zona del cielo y el coche), procurando iniciar la selección lo más ajustada a los extremos de la fotografia. Después, para invertir la selecció escogemos Selecciones/Invertir. Esto nos selecciona el área complementaria a la seleccionada inicialmente, es decir ahora tenemos seleccionada la zona que queremos conservar , entonces podemos proceder como en el punto 5.
 

 

3. Guardar la imagen en format. JPEG con diversos niveles de compresión.
  1. Una vez que la imagen ya está editada adecuadamente , hay que guardarla en el disco.
  2. Para guardar r una fotografia (de la misma manera que en cualquier otro programa de Windows) hay que ir l menú Archivo/Guardar como.
  3. Si es la primera vez que guardamos imágenes , es muy posible que queramos crear una carpeta personal para conservarlas. Es recomendable tener la carpeta personal cogada del directorio principal del disco C. Elejiremos Guardar en: y la unidad C:, desde aquí crearemos la carpeta personal si no existe. Para crear una carpeta personal escogemos el botón Crear Carpeta. Hay que observan atentamente a qué directorio se guardan las imágenes y recordar el camino para poderlas recuperar en una nueva sesión de trabajo.
  4. En primer lugar para guardar la imagen , hay que elejirel tipo de archivo con el que queremos guardar . Elegimos el formato JPEG.
  5. Después elejimos el botón Opciones para definir el nivel de compresión con el que queremos guardar la imagen en formato JPG. Elegimos Compresión Estandar y el porcentajee de compresión deseado. Un JPG con porcentaje de compresión bajo , generará ficheros de gran tamaño, pero con gran cualidad de imagen; en cambio ficheros , con un porcentaje de compresión altos serán pequeños de tamaño ( rápidos para ser transmitidos por Internet) pero de calidad baja.
  6. Finalmente, escribiremos el nombre del fichero de la imagen y apretaremos el botón Guardar.
  7. Guardaeros los ficheros tre veces cada una con un porcentaje de compresión diferente (20%, 50% i 80%). Por tanto será necesario repetir las operaciones dede el 4.
  8. Cuando hayamos guardado los tres ficheros . Saldremos del programa Paint Shop Pro desde el menú Archivo/Salir.
  9. Escogemos Mi PC desde el escritorio , abriremos el disco C: y buscaremos la carpeta personal que hemos creado en el paso.
  10. Aparecerá la ventana con el contenido de la carpeta personal. Activaremos la opción Ver/Detalles y comprobaremos el tamaño de los diferentes ficheros: a menor compresión , fichero más grande, a major compressión, fichero más pequeño.
 

 

 

 

Pràctica 2 (redimensionar, filtros y colores):

1. Redimensionar la imagen del edificio de la caller Ermengarda a un 50% del su tamaño original. Salvar esta imagen pequeña en formato .JPG.
  1. Hay que tener abiertos paralelamente, el navegador de Internet (Internet Explorer 4.0) yel programa Paint Shop Pro (Inicio/Programas/Paint Shop Pro/Paint Shop Pro 5)
  2. Situar el cursor sobre la foto del edificio de Ermengarda y hacer click con el botón de la derecha del ratón , elehirCopiar del menú contextual.
  3. Ir al programa Paint Shop Pro (seleccionando el botón que ha de aparecer en la barra de tareas inferior de la pantalla).
  4. Seleccionar el menú Editar/Pegar como nueva Imagen.
  5. Ja tenemos la imagen disponible per manipularla desde el programa de retoque fotográfico.
  6. Para modificar el tamaño real de la imagen (no la visión de la presentación per pantalla), hay que elegir Imagen/Modificar tamaño y entonces decidir qué tipo de reducción se quiere hacer : por pixels o porcentual. Reduciremos la imagen a un 50 % del tamaño original desde Porcentage del original y poniendo 50 al campo Ancho. Comprobaremos que el campo altura también cambia automàticamente a 50 %; eso es debido a que la casillaMantener la relacion de aspecto está activada.
  7. Podemos comprobar el nuevo tamaño de la imagen, poniendo el cursor encima de ellay viendo la información que hay a la parte inferior derecha de la ventana o bien consultando el menú Ver/Información sobre la imagen.
  8. Salvar la imagen con formato JPG, como se ha estudiado a la práctia 1, apartado 3.
2. Utilizar la imatge original y aplicarli filtros artísticos
  1. Recuperar la imatge original bien volviendo a copiarla, o deshaciendo los cambios de tamaño de apartado anterior, con el botón deshacer.
  2. Probar cada una de las deformaciones, efectos o filtros disponibles. Després de probar cada uno de los efectos y comprobar los resultados, podeis anular la modificación con el botón deshacer. Así podreis probar un nuevo fitro a partir de la imagen original.
3. Utilitzar la imagen grande original y reducir el número de coloresa 256
  1. Recuperar la imatge original.
  2. Comprob el número de vcolores de la imagenVer/Información de la imagen
  3. Elejirr Colores/Reducir la profundidad de color/256 colores
  4. Seleccionar la paleta estandar i difusió de l'error. Esta es la paleta y el tipo de reducción que tendremos que utilizar siempre que sea posible.
  5. Comprobar la perdida de calidad de la imagen respecto a la imagen de 16 millones de colores.
  6. Volver a reducir los colores dede el paso 3, pero ahora elejir Paleta óptima y difusión del error. Ahora la cualidad de la imagen es superior, pero la paleta de colores de cada imagen es diferente, provocando distorsiones de los colores si las intentesemos ver todas juntas en una página Web.

 

 

Pràctica 3 (selección irregular, copiar y enganchar):

1. Seleccionar les vocals que aparecen a la izquierda de la caricatura de Pelé copiarlas y pegarla una poco más abajo, tapando el hiero azul.
  1. Hay que tener abiertos paralelamente, el navegador de Internet (Internet Explorer 4.0) yel programa Paint Shop Pro (Inicio/Programas/Paint Shop Pro/Paint Shop Pro 5)
  2. Situar el cursor sobre la foto del grafiti de Pele y hacer clickcon el botón derecho del ratón, eelejirCopiar del menú contextual.
  3. Ir al programa Paint Shop Pro (seleccionando el botón que ha de aparecer en la barra de tareas inferior de la pantalla).
  4. Seleccionar el menú Editar/Pegar como nueva Imagen.
  5. Elejir la herramienta de selección irregular Mano libre
  6. Seleccionar aproximadamente la zona de las vocales del grafiti del Pele
  7. Hacer la copia de la zona seleccionada con Editar/Copiar. Con esta opción la selección irregular hecha pasa al portapapeles de la memoria de windows y estará disponible para pegarla más adelante.
  8. Pegar la selección copiada en el portapapeles en el paso anterior con la opción Editar/Pegar/Como una nueva selección
  9. Mover el cursor con la selección pegada y situarla sobre el hierro diagonal de la izquierda de la foto, tapando una buena parte de él. Repetir el proceso desde el paso 6 hasta tapar completamente el hierro diagonal.
 

 

 

2. Seleccionar "Pele"y con eso construir una nueva imagen.
  1. Activar la ventana de controles de herramientas con Ver/Barras de Herramientas/Paleta de controles
  2. Elegir la herramienta de selección irregular Mano libre
  3. En la Paleta de Controles, seleccionar atenuar 8 puntos i antiarrugas
  4. Ahora situarse dentro de la imagen y reseleccionar las palabras "Joan Pelegrí" del grafiti lo más aproximadamente possible.
  5. Copiar la selección en el portapapeles con Editar/Copiar
  6. Pegar lo copiado como una nueva imagen con Editar/Pegar/Como nueva imagen
  7. Comprobar el efecto desvanecimiento de los bordes de la imagen .

 

 

 

Pràctica 4 (selección por similitud y i transparencias):

1. Aumentar el contraste de esta imagen para conseguir colores más vivos.
  1. Hay que tener abiertos paralelamente, el navegador de Internet (Internet Explorer 4.0) yel programa Paint Shop Pro (Inicio/Programas/Paint Shop Pro/Paint Shop Pro 5)
  2. Situar el cursor sobre la foto del grafiti de Pele y hacer click con el botón derecho del ratón, eelegir Copiar del menú contextual.
  3. Ir al programa Paint Shop Pro (seleccionando el botón que ha de aparecer en la barra de tareas inferior de la pantalla).
  4. Seleccionar el menú Editar/Pegar como nueva Imagen.
  5. Comprobar que la imagen es de 16 millones de coloers con Ver/Información sobre la imagen. Si no fuese de 16 millones de colores, sería necesario aumentar la profundidtd de color, Colores/Aumentar la profundidad de color/16 millones de colores.
  6. Para aumentar el contraste de los coloros, elegimos Colores/Ajustar/Tonalidad/Saturación/Claridad
  7. Si aún queremos jugar un poco más con la gamma de colores podemos retocarla con Colores/Ajustar/Corrección gamma

 

2. Crear una selección utilizando la herramienta de selección per similitud
  1. Trabajaremos con la imagen de color real y de tonos subidos.
  2. Reducimos la imagen del polloal al 50 % conImagen/Modificar Tamaño al 50 %
  3. Elegimos la herramienta de selecció per similitud (vareta màgica).
  4. Activamos la visión de la paleta de controles (si no es visible) Ver/Barras de herramientas/Paleta de controles.
  5. En la paleta de control de la barita májica, elegimos tolerància 5.

  1. Después clicamos sobre el fondo blanco de la imagen del pollo. Observamos como immediatamente aparece seleccionada toda la zona blanca del fondo.
  2. Para seleccionar el pollo en lugar del fondo se ha invertir la selección, con Selecciones/Invertir.
  3. Ahora dejaremos el pollo y escogeremos la imagen que nos vervirá de fondo
  4. Iremos a l'Internet Explorer, a la página web de la unidad 3 y seleccionaremos la imagen de la practica 2 (la del edificio de Infantil i Primària). Clicaremos con el botón de la derecha sovre ella iy escogeremos Copiar del menú contextual.
  5. Saltaremos al Paint Shop Pro y Copiaremos la foto de a Escola amb Editar/Pegar como nueva imagen.
  6. Seleccionaremos ahora de nuevo la foto del pollocon Ventana/Gallo
  7. Recortamos el pollo, todavia lo hemos de tener seleccionado, y lo copiamos al portapapelescon Edición/Copiar.
  8. Seleccionamos la foto de la Escola de Ermengarda.
  9. Ahora telegimosEditar/Pegar/Como nueva selección... eso hará aparecer el pollo en medio del patio. Situarlo al lugar adecuado para que juegue al futbol con la calavera....

Salvaremos la imagen en formato JPG y factor de compressión del 50 %.

 

3. Convertir la imagen a 256 colores. Hacer que el color blanco del fondo sea transparente y comprobar el efecto transparencia transparència.
  1. Trebajaremoscon la imagen de color real i tonos subidos y contrastados.
  2. Convertiremos la imagen a 256 colores con la paleta estandar y difusión de errores (pràctica 2, apartat 3)
  3. Los pasos siguientes oermiten configurar la transparencia:
    1. Comprobar que enla paleta de colores, en segundo plano está el color blanco. Si no fuese el color blanco, lo tendremos que seleccionarsimplemente clicando sobre la pastilla del color de segundo planoy seleccionandolo de la muestra.
    2. Entonces elegirColores/Configurar Transparencia de la paleta
    3. Seleccionaremos Configurar el valor de la transparencia segun el color actual del segundo plano.
    4. Apretaremos el botón Probar.
    5. Finalmente elegimos Colores/Ver Transparencia de la paleta y observaremos como el fondo blanco se ha vuelto transparente.

 

 

 

 

 

 

Pràctica 5 (animación simple con el assistente):

1. Captura las imageness JPG de la fila superior.
  1. Es necesario tener el abierto el navegador de Internet (Internet Explorer 4.0) en la hoja de la unidad 3.
  2. Situar el cursor sobre cada uno de los fotogramas y clicar el botón de la derecha del ratón sobre cada uno .Elegimos el botón Guardar imagen. Guardar la imatge en el directorio c:\animaciones (la primera vezse tendrá que cear con el botón creación de directorios de la ventana de guardar).
  3. Repetir la operación 2 hasta que se tengan guardados todos los fotogramas.
2. Transformalas con el Paint Shop Pro a formato gif, consiguiendo que el fondo blanco sea transparente. Guardalas con un nombre que describa la secuencia.
  1. Abrir el programa Paint Shop Pro.
  2. Recuperar cada uno de los fotogramasy determinar el fondo blanco como transparente (tal como hemos hecho en la práctica pràctica 4, apartat 3)
  3. Guardar cada uno de los fotogramas como un fitxer GIF amb el fons transparent.
  4. Repetir las operaciones 5 y 6 hasta que se hayan convertido todos los fotogramas originales de formato JPG al nuevo formato GIF con fondo transparente.

 

3. Monta los fotogramas con el programa Animation Shop Pro, utilizando el assistente. Asigna a cada fotograma una duración de 10 o 15 centésimas de segundo.
  1. Abrir el programa Animation Shop haciendot Inicio/Programas/Paint Shop Pro/Animation Shop
  2. Observar el entorno de trabajo del programa.
  3. Escoger la opción Archivo/Asistente de Animaciones.
  4. Seguir las indicaciones del assistent con el orden y opciones de las ilustraciones siguientes, despues de elegir las opciones en cada pantalla apretaremos el botón siguiente:
  5.  

En el primer paso se define el tamaño de la animación . Si todos los fotogramas son del mismo tamaño, podemos estalecer por defecto el del primer cuadro, en un otro caso se pude poner a mano.

Aprovecharemos el hecho que hemos creado los fotogramas con fondo transparente para que la animación deje ver el fondo de la pantalla. Podriamos también fijar un fondo opaco por la zona que los fotogramas tienen transparente.

Si los fotogramas no son todos del mismo tamaño , el programa demana qué criterio ha de seguir para situarlos y redimensionarlosdentro de la animación.

La animación se ha de repetir indefinidamente o bien sólo se ha de repetir una vez . El tiempo de durada de cada frame acelera ( si el número es más pequeño) o se ralentiza ( si el número es más grande)la animación.

En esta ventana nos pide cuales serán los fotogramas que formaran parte denuestra animación . Apretantdo el botón Agregar Imagen se accede a la ventana de gestión de ficheros siguiente.

Desde esta ventana se puede buscar el directorio donde estan guardados los fotogramas. Se pueden cargar uno a uno o bien manteniendo apretada la teclala tecla Control ir seleccionandontodos los ficheros gráficos que contienen ada uno de los fotogramas. Cuando ja están todos seleccionados se apreta Abrir.

Ahora aparecen todos los fotogramas que formaran parte de la animación . Si el orden no es correcto se puede seleccionar aquel que se ha de mover y ponerlo en el lugar adecuado con los botones de Subir o Bajar.

El asistente de animaciones ja ha acabado su gestión y está a punto de mostrarnos el resultado final.

  • Finalmente volvemos a la zona de trabajo del Animation Shop donde se pueden ver las ventanas, una donde está la secuencia de fotogramas que forman parte de la animación y otra donde está la animación en marcha ( esta última es necesario abrirla con el botón enmarcado por el círculo amarillo).
  • Comprobamos la transparencia de la imagen virndo que por abajo de la bola aparece una zona con quadrados blancos y grises, eso indica que esta zona será transparente.
4. Guarda la animación en formato gif animado en una carpeta nueva préviamente creada.
  1. Para salvar la animación acabada de crear escogemos como siempre, Archivo/Guardar
  2. El proceso para guardar el fchero es una poco más largo de lo normal:

 

En primer lugar hay que asignar un nombre a la animació. Además hay que comprobar que el fichero que salvamos es de e tipo GIF, que es el que admiten todos los navegadores de internet como imagen animada por defecto.

Ahora hay que determinarla cualidad y i el tamaño de la animación. Como siempre, mayor cualidad quiere decir más tamaño y por tanto más tiempo de transmisión por la red.

Se llevan a cabo todas las operaciones de creación de paletas optimizadas y compilación final de la animación.

Se nos comunica el tamñofinal de la animación y el tiempo que tardará en cargarse según cual sea la velocidad de transmisión de la red.

 

 

Pràctica 6 (animación con efectos de transición):

1. Captura los fotogramas que anuncian los Ciclos Formativos de Grado Superior en la Escuela.
  1. Hay que tener abierto el navegador de Internet (Internet Explorer 4.0) en la página de la unidad 3.
  2. Situar el cursor encima de cada uno de los fotogramas y clicar el botón de la derecha del ratón encima de cada uno . Escoger el botónGuardar imagen. Guardar la imagen en el directorio C:\animaciones.

 

2. Utilitza el programa Animation Shop Pro para muntarlos.
  1. Motar la animación con el assistente de animaciones como se describe en la práctica 5.
  2. Obtendremos una primera animación tal como muestra esta figura

3. Entre un fotograma y otro utiliza algún efecto de transición sencillol.
  1. Seleccionaremos ahora el primer fotograma de la película y escogeremos la opción Efectos/Transiciones de imagen
  2. Entonces aparecerá la ventana de diseño de transiciones:
  3. Escogemos la transición de tipo Disolver, con una duración de 0,1 segundos y 10 cuadrro por segundo. Confirmaremos con Aceptar.
  4. Repetir los pasos 6 i 7 des de los fotogramas 3, 5 i 7. Se puede incorporar el efectode trnsición que querais.

 

4. Guarda la animacióncon diversos grados de compresión, comprobando la cualidad final del banner en cada caso.
  1. Guardaremos la animación tal como hemos descrito en la práctica 5. El resultado tendria que ser alguna cosa semejante a esta:
  2. Vuelve a salvar la imagen con un nombre nuevo. Después activa Archivo/Asistente de optimización para comprimir más la animación. Cuando tengas salvada de nuevo la animación con otro nivel de compresión, ves a la carpeta c:\animacions y comprueba el tamaño diferent de cada uno de los ficheros gifs resultantes.

 

 

 


Si tienes alguna duda respecto a las prácticas puedes enviarme un e-mail.



Cursos