"Disseny, edició i publicació de planes Web"


Solucionari de les pràctiques de la unitat 3:
Els programes d'edició d'imatges fixes i animades

 

Pràctica 1 (gamma, selecció i JPEG)
Pràctica 2 (redimensionar, filtres i colors)
Pràctica 3 (selecció irregular, copiar i enganxar)
Pràctica 4 (similitud i transparències)
Pràctica 5 (animació amb l'assistent)
Pràctica 6 (animació amb efectes)
(2003)

 

 

 

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

1. Retocar la Gamma de la foto de l'edifici de Torre Damians per tal de fer-la una mica més clara.

  1. S'ha d'haver instal.lat prèviament el programa Paint Shop Pro.
  2. Cal tenir oberts, en paral.lel el navegador d'Internet (Internet Explorer 4.0) i el programa Paint Shop Pro (Inicio/Programas/Paint Shop Pro/Paint Shop Pro 5)
  3. Situar el cursor damunt de la foto de l'edifici de Torre Damians i fer click amb el boto de la dreta del ratolí, triar Copiar del menú contextual.
  4. Anar al programa Paint Shop Pro (seleccionant el boto que ha d'aparèixer a la barra de tasques inferior de la pantalla).
  5. Seleccionar el menú Editar/Pegar como nueva Imagen.
  6. Ja tenim la imatge disponible per manipular-la des del programa de retoc fotogràfic.
  7. Comprovar el tamany i número de colors de la imatge, situant el cursor damunt d'aquesta i mirant la zona inferior dreta de la pantalla. També es pot veure informació sobre la fotografia actual des del menú Ver/Información sobre la imagen.
  8. Per aclarir la fotografia cal triar Colores/Ajustar/Corrección Gamma
    9.
  9. Fer proves amb els comandaments lliscants fins aconseguir l'efecte d'aclariment adequat. Es pot veure una simulació de com quedarà la foto final si esta activada la casella Prueba automática.
    10.
  10. Tornar a provar des del punt 8. per tal d'aconseguir petites rectificacions.
  11. Premer el botó de desfer, o el menú Editar/Deshacer, per desfer els darrers canvis i tornar a la foto original.

2. Retallar la foto de tal manera que no es vegi el cotxe que hi ha a la part inferior esquerra.
  1. Abans de retallar la imatge cal aprendre a variar el zoom amb el que observem la imatge (només es tracta de la vista de la imatge per treballar, no pas del tamany real de la imatge). Per canviar l'escala de la visió de treball podem triar l'eina Lupa, llavors, clicant damunt de la imatge amb el boto esquerre del ratolí, la imatge es veurà ampliada, en canvi si es clica el boto de la dreta, la imatge es veurà reuduïda.
  2. Definir la visió de la imatge a escala 1x1, amb la tècnica del punt 1.
  3. Triar l'eina de selecció rectangular, des de la barra d'eines normalment situada a l'esquerra.
  4. Situar-se just damunt del sostre del cotxe (comprovar com el cursor ha canviat de forma) i mentre es manté pulsat el botó esquerre del ratolí es selecciona cap a la part superior i la dreta de la imatge fins tenir seleccionada la zona que ens interessa. No deixar de premer el botó del ratolí fins que la zona seleccionada és la que ens interessa.
  5. Per retallar i conservar la imatge al tamany de la selecció actual cal triar Imagen/Recortar en Selección
    6.
  6. Desfer la darrera operació amb el botó de desfer.
  7. Tornem a seleccionar una altra zona de la imatge. Per desactivar la selecció feta es pot, simplement, seleccionar una altra zona o bé anar al menú Selecciones/No seleccionar.
  8. Per eliminar una zona seleccionada i conservar tota la resta de la imatge: seleccionem una zona de la foto (per exemple la zona del cel i el cotxe), procurant iniciar la selecció el més ajustat als extrems de la fotografia. Després, per invertir la selecció triem Selecciones/Invertir. Això ens selecciona l'àrea complementària a la triada inicialment, es a dir ara tenir seleccionada la zona que volem conservar, llavors podem procedir com al punt 5.
  

 
3. Salvar la imatge en format JPEG amb diversos nivells de compressió.
  1. Una vegada la imatge ja està editada adequadament, cal salvar-la al disc.
  2. Per guardar una fotografia (de la mateixa manera que amb qualsevol altre programa Windows) cal anar al menú Archivo/Guardar como.
  3. Si es la primera vegada que salvem imatges, es molt probable que vulguem crear una carpeta personal on conservar-les. Es recomanable tenir la carpeta personal penjada directament al directori principal del disc C:. Triarem Guardar en: i la unitat C:, des d'aqui crearem la carpeta personal si encara no existeix. Per crear una carpeta personal triarem el boto de Crear Carpeta. Cal observar atentament a quin directori es guarden les imatges i recordar el seu itinerari per poder recuperar el treball en una propera sessió de treball.
  4. En primer lloc, per salvar la imatge, cal triar el tipus d'arxiu amb el que la volem guardar. Triarem el format JPEG.
    5.

  5. Després triarem el boto Opciones per definir el nivell de compressió amb el que volem guardar la imatge amb format JPG. Triarem Compresión Estandar i el percentatge de compressió desitjat. Un JPG amb percentatge de compressió baix, generarà fitxers de gran tamany, però amb gran qualitat d'imatge; en canvi, fitxers amb un percentatge de compressió alt seran petit de tamany (ràpids per ser transmesos per Internet), però de qualitat baixa.
  6. Finalment, escriurem el nom del fitxer de la imatge i premerem el botó Guardar.
  7. Salvarem el fitxer tres vegades, cadascuna amb un nom diferent i amb un nivell de compressió diferent (20%, 50% i 80%). Per tant caldrà repetir les operacions des de 4.
  8. Quan hàgim salvat els tres fitxers. Sortirem del programa Paint Shop Pro des del menú Archivo/Salir.
  9. Triarem Mi PC des de l'escriptori, obrirem el disc C: i buscarem la carpeta personal que hem creat al pas 3.
  10. Apareixerà la finestra amb el contingut de la carpeta personal. Activarem l'opció Ver/Detalles i comprovarem el tamany dels diferents fitxers: a menor compressió, fitxer més gran; a major compressió, fitxer més petit.
  

 

 

 

Pràctica 2 (redimensionar, filtres i colors):

1. Redimensionar la imatge de l'edifici del carrer Ermengarda a un 50% del seu tamany original. Salvar aquesta imatge petita amb format .JPG.
  1. Cal tenir oberts, en paral.lel el navegador d'Internet (Internet Explorer 4.0) i el programa Paint Shop Pro (Inicio/Programas/Paint Shop Pro/Paint Shop Pro 5)
  2. Situar el cursor damunt de la foto de l'edifici d'Ermengarda i fer click amb el boto de la dreta del ratolí, triar Copiar del menú contextual.
  3. Anar al programa Paint Shop Pro (seleccionant el boto que ha d'aparèixer a la barra de tasques inferior de la pantalla).
  4. Seleccionar el menú Editar/Pegar como nueva Imagen.
  5. Ja tenim la imatge disponible per manipular-la des del programa de retoc fotogràfic.
  6. Per modificar el tamany real de la imatge (no la visió de la presentació per pantalla), cal triar Imagen/Modificar tamaño i llavors decidir-se per quin tipus de reducció es vol fer: per pixels o percentual. Reduirem la imatge a un 50 % del tamany original des de Porcentage del original i posant 50 al camp Ancho. Comprovarem que el camp altura també canvia automàticament a 50 %; això és degut a que la casella Mantener la relacion de aspecto està activada.

  7. Podem comprovar el nou tamany de la imatge, posant el cursor damunt d'ella i veient la informació que hi ha a la part inferior dreta de la finestra o bé consultant el menú Ver/Información sobre la imagen.
  8. Salvar la imatge amb format JPG, segons el que s'ha estudiat a la pràctica 1, apartat 3.
2. Utilitzar la imatge original i aplicar-li filtres artístics
  1. Recuperar la imatge original bé tornant-la a copiar, bé desfent els canvis de tamany de l'apartat anterior, amb el botó de desfer.

  2. Provar cadascuna de les deformacions, efectes o filtres disponibles. Després de provar cadascun dels efectes i comprovar els resultats, podeu anular la modificació amb el botó de desfer. Així podreu provar un nou filtre a partir de la imatge original.
3. Utilitzar la imatge gran original i reduir el nombre de colors a 256
  1. Recuperar la imatge original.
  2. Comprovar el nombre de colors de la imatge Ver/Información de la imagen
    3.
  3. Triar Colores/Reducir la profundidad de color/256 colores
    4.
  4. Seleccionar la paleta estandar i difusió de l'error. Aquesta és la paleta i el tipus de reducció de colors que haurem d'utilitzar sempre que sigui possible.
    5.

  5. Comprovar la pèrdua de qualitat de la imatge respecte a la imatge de 16 milions de colors.
  6. Desfer la reducció de colors amb el botó de desfer.
  7. Tornar a reduir els colors des del pas 3, però ara triar Paleta òptima i difusió de l'error. Ara la qualitat de la imatge és superior, però la paleta de colors de cada imatge seria diferent, provocant distorsions dels colors si les intentéssim veure totes juntes en una plana web.

 

 

Pràctica 3 (selecció irregular, copiar i enganxar):

1. Seleccionar les vocals que apareixen a l'esquerra de la caricatura del Pele, copiar-les i empastar-les una mica més avall, tapant el ferro blau.
  1. Cal tenir oberts, en paral.lel el navegador d'Internet (Internet Explorer 4.0) i el programa Paint Shop Pro (Inicio/Programas/Paint Shop Pro/Paint Shop Pro 5)
  2. Situar el cursor damunt de la foto del grafiti del Pele i fer click amb el boto de la dreta del ratolí, triar Copiar del menú contextual.
  3. Anar al programa Paint Shop Pro (seleccionant el boto que ha d'aparèixer a la barra de tasques inferior de la pantalla).
  4. Seleccionar el menú Editar/Pegar como nueva Imagen.
  5. Triar l'eina de selecció irregular Mano libre
    6.
  6. Seleccionar aproximadament la zona de les vocals del grafiti del Pele
  7. Fer la copia de la zona seleccionada amb Editar/Copiar. Amb aquesta opció la selecció irregular feta passa al portapapers de la memoria de windows i serà disponible per empastar-la més endavant.
  8. Empastar la selecció copiada al portapapers al pas anterior amb l'opció Editar/Pegar/Como una nueva selección
    9.
  9. Moure el cursor amb la selecció empastada i situar-la damunt del ferro diagonal de l'esquerra de la foto, tapant una bona part d'ell. Repetir el procés des del pas 6 fins tapar completament el ferro diagonal.
  

 

 
2. Seleccionar "Pele" i amb això construir una nova imatge.
  1. Activar la finestra de controls d'eines amb Ver/Barras de Herramientas/Paleta de controles
    2.
  2. Triar l'eina de selecció irregular Mano libre
    3.
  3. A la Paleta de Controles, seleccionar atenuar 8 punts i antiarrugas
    4.

  4. Ara situar-se dins de la imatge i seleccionar les paraules "Joan Pelegrí" del grafiti el més aproximadament possible.
  5. Copiar la selecció al portapapers amb Editar/Copiar
    6.
  6. Empastar el copiat com una nova imatge amb Editar/Pegar/Como nueva imagen
    7.
  7. Comprovar l'efecte d'esvaïment de la vora de la imatge

 

 

 

Pràctica 4 (selecció per similitud i transparències):

1. Augmentar el contrast d'aquesta imatge per aconseguir colors més vius.
  1. Cal tenir oberts, en paral.lel el navegador d'Internet (Internet Explorer 4.0) i el programa Paint Shop Pro (Inicio/Programas/Paint Shop Pro/Paint Shop Pro 5)
  2. Situar el cursor damunt de la foto del grafiti del Pele i fer click amb el boto de la dreta del ratolí, triar Copiar del menú contextual.
  3. Anar al programa Paint Shop Pro (seleccionant el boto que ha d'aparèixer a la barra de tasques inferior de la pantalla).
  4. Seleccionar el menú Editar/Pegar como nueva Imagen.
  5. Comprovar que la imatge es de 16 milions de colors amb Ver/Información sobre la imagen. Si no fos de 16 milions de colors, caldria augmentar la profunditat de color, Colores/Aumentar la profundidad de color/16 millones de colores.
  6. Per augmentar el contrast dels colors, triarem Colores/Ajustar/Tonalidad/Saturación/Claridad
    7.
  7. Si encara volem jugar una mica amb la gamma de colors podem retocar-la amb Colores/Ajustar/Corrección gamma

 
2. Crear una selecció utilitzant l'eina de selecció per similitud
  1. Treballarem amb la imatge de color real i de tons pujats.
  2. Reduïm la imatge del pollastre al 50 % amb Imagen/Modificar Tamaño al 50 %
    3.
  3. Triarem l'eina de selecció per similitud (vareta màgica).
  4. Activem la visió de la paleta de controls (si no es visible) Ver/Barras de herramientas/Paleta de controles.
  5. A la paleta de control de la vareta màgica, triem com a tolerància 5.
  1. Després cliquem sobre el fons blanc de la imatge del pollastre. Observem com immediatament apareix seleccionada tota la zona blanca del fons.
  2. Per seleccionar el pollastre en lloc del fons, cal invertir la selecció, amb Selecciones/Invertir.
  3. Ara deixarem el pollastre i triarem la imatge que ens servirà de fons...
  4. Anirem a l'Internet Explorer, a la plana web de la unitat 3 i seleccionarem la imatge de la practica 2 (la de l'edifici de Infantil i Primària). Clicarem amb el boto de la dreta damunt d'ella i triarem Copiar del menú contextual.
  5. Saltarem al Paint Shop Pro i Copiarem la foto de l'Escola amb Editar/Pegar como nueva imagen.
  6. Seleccionarem ara de nou la foto del pollastre amb Ventana/Gallo
    7.
  7. Retallarem el pollastre, encara l'hem de tenir seleccionat, i el copiarem al portapapers amb Edición/Copiar.
    8.
  8. Seleccionem la foto de l'Escola d'Ermengarda.
  9. Ara triem Editar/Pegar/Como nueva selección... això farà apareixer el pollastre al mig del pati. Situar-lo al lloc adequat per a que jugui al futbol amb la calavera...

Salvarem la imatge amb format JPG i factor de compressió del 50 %.

  

3. Convertir la imatge a 256 colors. Fer que el color blanc del fons sigui transparent i comprovar l'efecte de la transparència.
  1. Treballarem amb la imatge de color real i tons pujats i contrastats.
  2. Convertirem la imatge a 256 colors amb la paleta estandar i difusió dels errors (pràctica 2, apartat 3)
  3. Els pasos següents permetran configurar la transparència:
    1. Comprovar que a la paleta de colors, en segon pla hi ha el color blanc. Si no hi fos el color blanc, caldrà que el seleccionem simplement clicant damunt de la pastilla del color del segon pla i seleccionant-lo de la mostra.
    2. Llavors triar Colores/Configurar Transparencia de la paleta
      3.
    3. Seleccionarem Configurar el valor de la transparencia segun el color actual del segundo plano.
      4.

    4. Premerem el botó Probar.
    5. Finalment triarem Colores/Ver Transparencia de la paleta i observarem com el fons blanc s'ha tornat transparent.

 

  

 

 

 

 

Pràctica 5 (animació simple amb l'assistent):

1. Captura les imatges JPG de la fila superior.
  1. Cal tenir obert el navegador d'Internet (Internet Explorer 4.0) a la plana de la unitat 3.
    2.

  2. Situar el cursor damunt de cadascún dels dels fotogrames i clicar el botó de la dreta del ratolí damunt de cadascun. Triar el boto Guardar imagen. Guardar la imatge al directori c:\animacions (la primera vegada caldrà crear-lo amb el botó de creació de directoris de la finestra de guardar).
    3.

  3. Repetir l'operació 2 fins que es tinguin guardats tots els fotogrames.
2. Transforma-les amb el Paint Shop Pro a format gif, aconseguint que el fons blanc sigui transparent. Salva-les amb un nom que descrigui clarament la seqüència.
  1. Obrir el programa Paint Shop Pro.
  2. Cridar cadascun dels fotogrames i determinar el fons blanc com a transparent (tal com hem fet a la pràctica 4, apartat 3)
  3. Guardar cadascun dels fotogrames com un fitxer GIF amb el fons transparent.
  4. Repetir les operacions 5 i 6 fins que s'hagin convertit tots els fotogrames originals en format JPG al nou format GIF amb fons transparent.

 
3. Munta els fotogrames amb el programa Animation Shop Pro, utilitzant l'assistent. Assigna a cada fotograma una durada de 10 o 15 centèsims de segon.
  1. Obrir el programa Animation Shop fent Inicio/Programas/Paint Shop Pro/Animation Shop
    2.
  2. Observar l'entorn de treball del programa.
  3. Triar l'opció Archivo/Asistente de Animaciones.
  4. Seguir les indicacions de l'assistent amb l'ordre i opcions de les ilustracions següents, després de triar les opcions a cada pantalla premerem el botó siguiente:
    5.

     

En el primer pas es defineix el tamany de l'animació. Si tots els fotogrames són del mateix tamany, podem establir per defecte el del primer quadre, en un altre cas es pot fixar a mà.

Aprofitarem el fet que hem creat els fotogrames amb fons transparent per tal de que l'animació deixi veure el fons de la pantalla. Podríem també fixar un fons opac per la zona que els fotogrames tenen transparent

Si els fotogrames no són tots del mateix tamany, el programa demana quin criteri cal seguir per tal de situar-los i redimensionar-los dins de l'animació.

L'animació s'ha de repetir indefinidament o bé només s'ha de veure una vegada. El temps de durada de cada frame accelera (si el número és més petit) o arrelenteix (si el número es més gran) l'animació.

En aquesta finestra ens demana quins seran els fotogrames que formaran part de la nostra animació. Prement el botó Agregar Imagen s'accedeix a la finestra de gestió de fitxers següent.

Des d'aquesta finestra es pot buscar el directori on estan guardats els fotogrames. Es poden carregar un a un o bé mantenint premuda la tecla Control anar seleccionant tots els fitxers gràfics que contenen cadascun dels fotogrames. Quan ja estan tots seleccionats es prem Abrir.

Ara apareixen tots els fotogrames que formaran part de l'animació. Si l'ordre no és el correcte es pot seleccionar aquell que s'ha de moure i posar-lo al lloc adequat amb els botons de Subir o Bajar.

L'assistent d'animacions ja ha acabat la seva gestió i està a punt de mostrar-nos el resultat final.

  • Finalment tornem a la zona de treball de l'Animation Shop on podem veure dos finestres, una on hi ha la seqüència de fotogrames que formen part de l'animació i un altra on hi ha l'animació en marxa (aquesta darrera finestra cal obrir-la amb el botó emmarcat pel cercle groc).
  • Comprovem la transparència de la imatge en veure que per sota de la bola apareix una zona amb quadrats blancs i grisos, això indica que aquesta zona serà transparent.
4. Guarda la animació en format gif animat a una carpeta nova prèviament creada.
  1. Per salvar l'animació acabada de crear triarem, com sempre, Archivo/Guardar
    2.
  2. El procés per guardar el fitxer és una mica mes llarg del normal:

 

En primer lloc cal que assignem un nom a l'animació. A més, cal que comprovem que el fitxer que salvem es de tipus GIF, que és que admeten tots els navegadors d'internet com a imatge animada per defecte.

Ara cal determinar la qualitat i el tamany de l'animació. Com sempre, major qualitat vol dir més tamany i per tant més temps de transmissió per la xarxa.

Es porten a terme totes les operacions de creació de paletes optimitzades i compilació final de l'animació.

Se'ns comunica el tamany final de l'animació i el temps que trigarà en carregar-se segons quina sigui la velocitat de transmissió de la xarxa.

 

 

Pràctica 6 (animació amb efectes de transició):

1. Captura els fotogrames que anuncien els Cicles Formatius de Grau Superior a l'Escola.
  1. Cal tenir obert el navegador d'Internet (Internet Explorer 4.0) a la plana de la unitat 3.
  2. Situar el cursor damunt de cadascun dels fotogrames i clicar el botó de la dreta del ratolí damunt de cadascun. Triar el boto Guardar imagen. Guardar la imatge al directori C:\animacions.

 
2. Utilitza el programa Animation Shop Pro per muntar-los.
  1. Muntar l'animació amb l'assistent d'animacions tal com es descriu a la practica 5.
  2. Obtindrem una primera animació tal mostra aquesta figura
3. Entre un fotograma i un altre utilitza algun efecte de transició senzill.
  1. Seleccionarem ara el primer fotograma de la pelicula i llavors triarem l'opció Efectos/Transiciones de imagen
  2. Llavors apareixerà la finestra de disseny de transicions:
    3.

  3. Triarem la transició del tipus Disolver, amb una durada de 0,1 segons i 10 quadres per segon. Confirmarem amb Aceptar.
  4. Repetir els passos 6 i 7 des dels fotogrames 3, 5 i 7. Es pot incorporar l'efecte de transició que vulgueu.

 
4. Guarda l'animació amb diversos graus de compressió, comprovant la qualitat final del banner en cada cas.
  1. Salvarem l'animació tal com hem descrit a la pràctica 5. El resultat hauria de ser alguna cosa semblant a aquesta:

  2. Torna a salvar la imatge amb un nou nom. Després activa Archivo/Asistente de optimización per comprimir més l'animació. Quan tinguis salvada de nou l'animació amb un altre nivell de compressió ves a la carpeta c:\animacions i comprova el tamany diferent de cadascun dels fitxers gifs resultants.

 

 

 


Si tens algun dubte respecte a les pràctiques pots enviar-me un e-mail.