Introducció al tractament d’imatges - 1ª SESSIÓ -

1. Introducció al tractament d’imatges - 1ª SESSIÓ - Casa d’oficis: Gestor/a d'Aula Informàtica.

2. Objectius • Repassar els conceptes bàsics. • Conèixer el maquinari de captació, emmagatzematge i reproducció d’imatges. • Identificar els diferents tipus de fitxers d’imatge. • Conèixer i utilitzar alguns dels principals programes de reproducció i edició fotogràfica.

3. Conceptes bàsics

4. Conceptes bàsics • Què es un píxel • Resolució d’imatge • Resolució de pantalla • Diferències entre una imatge bitmap i una de vectorial • Escollir el mode de color

5. Píxel • Un píxel es la unitat més petita en la que es pot descompondre una imatge. • A cada píxel li correspon un color. • La unió dels diferents píxels de color ens donaran la imatge total. Quan fem zoom podem veure la imatge cada vegada més “quadriculada". Això es degut a que al acostar-nos cada vegada més, anem veient els píxels des de més a prop.

6. Resolució d’imatge • Es la qualitat d’una imatge digital. El nombre de píxels per polzada (ppp o ppi) que s’utilitzaran per representar-la. • Una fotografia de mida petita representada amb molts píxels (resolució alta)  imatge de bona qualitat. A més resolució, més detall per reproduir la imatge. Més píxels per representar les transicions de color de manera més suau. • A l’hora d’escollir la resolució d’una imatge, cal tenir en compte la finalitat que aquesta tindrà. Per exemple, si volem imprimir s’aconsella un valor entre 240 i 300ppp. Si es per fer un logotip d’una web, un valor menor ja ens anirà bé. • No hem de confondre la resolució d’una imatge amb la resolució de pantalla (la quantitat de píxels que veurem en el monitor). 1polzada = 2,54cm

7. Relació entre la mida d’un píxel i resolució d’imatge • Un píxel no té una mida fixa en el món real. No utilitzem el píxels per mesurar una taula, un prestatge, una cadira.. • La mida que tindrà el píxel en el món real dependrà de la resolució. Per exemple al imprimir una fotografia, • Recordem que la resolució ens diu quants píxels hi hauran en una polsada (2,54cm). Si observem la següent imatge: Conclusió: Com més gran sigui la resolució, més píxels hi haurà i aquests, per tant, seran més petits.

8. Exemple. Resolució d’imatge Fotografia de 25 x 12,5cm == 10 x 5 polzades • Resolució de 800 x 600  Imatge digital de 8000 x 3000píxels • Resolució més baixa 400 x 200 Imatge digital de 4000 x 1500 píxels La imatge b serà més quadriculada (pixelada) ja que estem utilitzant la meitat de píxels que en el cas a per a la mateixa fotografia i, per tant, aquests seran més grossos i es veuran més. Les transicions de colors seran més brusques al disposar de menys píxels per a la representació.

9. Resolució de pantalla • Quantitat de píxels que el nostre monitor ens mostrarà. • Ve determinada per: • La mida del monitor. Com més polsades tingui el nostre monitor, més píxels d’alt i ample tindrem per representar la imatge. • La targeta gràfica que tinguem instal·lada. • Les pantalles solen treballar amb resolucions de 72ppp.

10. Exemple. Resolució pantalla Tenim una imatge de 800 x 600 píxels. La visualitzem... • en un monitor de 17 polsades configurat a la mateixa resolució de la fotografia (800 x 600)  la pantalla s’omplirà completament amb la imatge, ja que mesura exactament el mateix que la resolució assignada al monitor. • en un monitor de 19" i a la mateixa resolució (800 x 600)  s’omplirà completament. • en el mateix monitor de 19” a una resolució més alta 1280 x 960 píxels  la imatge es veu dins de la pantalla del monitor però ja no l’ocupa sencera. Conclusió: A major resolució de pantalla més elements es veuran.

11. Vectorial Bitmap Imatges bitmap i vectorials (1/3) • Són les formes en que un ordinador pot pintar imatges o gràfics. • Les imatges bitmap esta formades per píxels i les vectorials a partir de descripcions matemàtiques: cercles, quadrats,segments, etc.

12. Imatges bitmap i vectorials (2/3) Bitmap • Formades per píxels. • Cada píxel te una valor d’ubicació i color. • Permeten representar ombres, colors i degradats. • Són les més freqüents en digitalització de fotografies. .

13. Imatges bitmap i vectorials (3/3) Imatges vectorials • Formades per descripcions matemàtiques. • No depenen de la resolució de la imatge. • No perden qualitat al ampliar-les. • S’adapten a qualssevol tipus de perifèric al que s’enviïn com ara la impressora. • S’utilitzen per tipografies, logotips, icones, etc. • Ocupen poc espai a disc.

14. Es creen mitjançant aplicacions específiques, com ara: • Adobe Ilustrator. • Freehand. • Corel Draw. • Aquest tipus d’arxius només poden visualitzar-se a través del programa que els va crear, sinò es transformen en imatges bitmap.

15. Exemple.Imatges vectorials Imatge vectorial, abans i després d’augmentar-la un 200%. Observem que la imatge no perd qualitat.

16. Modes de color (1/2) Principals modes de color • RGB (Red Green Blue). • Model de color additiu. La suma de colors dona blanc. • Treballa amb tres canals, cada un de 8 bits/píxel (24 bits en total) • Mateix mode que utilitzen les pantalles. • Escollirem aquest mode quan treballem en pantalla, per exemple, quan retoquem una imatge o editem vídeo. (Pantalla negra) • CMYK (Cyan, Magenta, Yellow, Key) • Model de color sostractiu. La suma de colors dona negre. • Treballa amb quatre canals de 8 bits (32 bits de profunditat de color) • Escollirem aquest mode si volem imprimir. (Foli blanc)

17. RGB CMYK Model additiu: Utilitza la llum que generen els leds de la pantalla per mostrar el color. Un focus vermell, un de verd i un de blau. Model sostractiu: Utilitzen la llum reflexada sobre les tintes per mostrar els colors.

18. Modes de color (2/2) Altres modes de color (en desús) • Monocromàtic • 1bit per representar color. • 2 colors: blanc i negre. No permet tons mitjos. • Escala de grisos • Un únic canal, el negre. • 8 bits per representar el negre. • Escala de grisos, 256 tonalitats. • Indexat • Un únic canal de color • Cada píxel disposa de 8 bits per representar color (256colors diferents) • Molt pobre, no s’utilitza.

19. Formats d’imatge

20. Formats d’imatge (1/6) • Relació resolució imatge - número de colors - mida fitxer • A més resolució d’imatge, més píxels  fitxers més grans. • Com més gran sigui la paleta de colors, més gran serà cada píxel  fitxers més grans. (Profunditat de color o de píxel) • Algoritmes de compressió • Per tal de disminuir la mida dels fitxers d’imatge • Hi ha 2 tipus de compressió: • Amb pèrdues. Valorem més la mida del fitxer que la qualitat de la imatge. • Sense pèrdues. Importa la qualitat de la imatge • 1 píxel de 8 bits (256 colors)  1byte • 1 píxel de 24 bits (16’7 milions de colors) 3bytes

21. Formats d’imatge (2/6) • BMP • Format nadiu de Microsoft Paint i que interactua fàcilment amb Windows. • De bona qualitat però que ocupen molt. • No hi ha compressió. • GIF • Màxim 256 colors. • Són recomanables per imatges amb grans àrees d’un mateix color o tonalitats continues. • Permet definir transparències i animacions (diferents imatges en l’arxiu). • Compressió sense pèrdues per a imatges de color uniforme però amb pèrdues per la resta. • S’utilitzen a Internet perquè ocupen poc.

22. Formats d’imatge (3/6) • PNG • Successor/Alternativa al GIF amb més colors però que no permet animacions. • Màxim 16 milions de colors. • Compressió sense pèrdua, adient per editar imatges. • S’utilitza en pàgines Web i edició d’imatges. • JPEG • Màxim 16 milions de colors. • Algoritmes de compressió més potents amb pèrdues i sense, segons el grau de compressió que hi apliquem. • Format que usen les càmeres digitals. • S’utilitza per imprimir fotografia i web.

23. Formats d’imatge (4/6) • TIFF • Format que admet diferents mètodes de compressió, però que no produeix pèrdua de qualitat d’imatge. • Permet guardar capes, canals i màscares. • S’utilitza per obtenir impressions de qualitat.

24. Formats d’imatge (5/6) • PSD • Format propi de Photoshop. • Permet conservar tota la informació dels elements creats a la imatge. • Podem emmagatzemar les imatges amb el mode de color que desitgem (RGB, CMYK, indexat, etc.), amb les capes i canals inclosos. • XCF • Format propi de GIMP. • Equival al PSD de Photoshop.

25. Formats d’imatge (6/6) Segons l'ús que fem de les imatges, les desarem en un format o altre: • Web: Gif, Png, Jpeg • Imprimir: Tiff, Jpeg • Pantalla: Jpeg, Bmp, Pict

26. Exercici Feu una captura de pantalla i enganxeu-la a Microsoft Paint. Guardeu en bmp i a continuació en jpeg. Observeu quins canvis s’han produït i expliqueu-ne el motiu. Feu el mateix en els diferents formats que ofereix.