1ELEMENTOSDELDISEOGRFICOIMAGEN DIGITAL

Unidad2

IMAGENDIGITAL Vectores Mapadebits

Profundidaddecolor TamaoyresolucinAli d Alisado

Formatosycompresin

Imagendigital: Esunarepresentacinvisualdeunobjetomediantetcnicas

diferentesdediseo,fotografa,pinturayvideo.

Aspectostcnicos

Sonaquellasobtenidasmediantedispositivoscomofilmadoras,cmaras,celulares,scanners ogeneradasdirectamenteporordenadores.

UNSL|IntroduccinalDiseoGrfico|unsldg@gmail.com|http://cor.to/unsldgPg: 2

2Vectoresymapadebits: Lasimgenesdigitalespuedendividirseendosgrandesgrupos:

Vectores

Aspectostcnicos

Mapasdebits Sibienmuchasimgenespuedenrepresentarsedeambas

maneras,sernuestrodeberdecidirculseadaptamejoranuestrasexigencias.

UNSL|IntroduccinalDiseoGrfico|unsldg@gmail.com|http://cor.to/unsldgPg: 3

Imagenenvectores: Secomponedeobjetosrectas,curvas,crculos,

rectngulos,texto,etc. loscualesasuvezestn

Aspectostcnicos

compuestosporunaescasacantidaddepuntos(vrtices)unidosentresporsegmentos.Estossegmentospuedenserrectosocurvos,ydichacurvaturaescontroladaporunosmanejadoresdenominadostangentes.

Idealparacrearymanipularimgenesdegran

UNSL|IntroduccinalDiseoGrfico|unsldg@gmail.com|http://cor.to/unsldgPg:

tamao.

Laposibilidaddecambiarfcilmentedelugarloselementosquecomponenlaimagen(tareaarduaenunaimagendemapadebits).

4

3Imagenenmapadebits: Unaimagenenmapadebits esunaestructuradedatosqueserepresenta

medianteunarejillarectangulardepxelesdecolor. Un pxel es cada uno de los pequeos cuadraditos que componen una

Aspectostcnicos

Unpxelescadaunodelospequeoscuadraditosquecomponenunaimagendigital.

Podemoscompararlaconunmuraldepequeosmosaicosdecolores. Cuandonosacercamosalmuralvemoscadamosaico;alalejarnoslo

suficientevemosunaimagencontinua,untodo.

UNSL|IntroduccinalDiseoGrfico|unsldg@gmail.com|http://cor.to/unsldgPg:

5

Caractersticas: Alasimgenesdemapadebitsorasterizadas selascaracterizapor:

sutamao:alturayanchura(enpixels px)Ej:500x170px

Aspectostcnicos

y ( p p ) j p

suprofundidaddecolor(enbitsporpixel bpp),quedeterminaelnmerodecoloresdistintos(escaladecolores)quesepuedenalmacenarencadapixel,dandolacalidaddelcolordelaimagen.

UNSL|IntroduccinalDiseoGrfico|unsldg@gmail.com|http://cor.to/unsldgPg:

6

4Caractersticas: Profundidaddecolor Lasprofundidadesdecolormsdestacadasson:

Bitmap 1bit (2tonosblancoynegro)porpixel.

Aspectostcnicos

Escaladegrises8bits (256coloresogrises)porpixel.

RGB24bits(imgenesencolor16,7millonesdecolores)porpixel.Son3canalesde8bitscadauno,correspondientesalos3coloresprimariosdelaluz:Rojo(Red),Verde(Green)yAzul(Blue).

CMYK 32 bits Son 4 canales de 8 bits cada uno

UNSL|IntroduccinalDiseoGrfico|unsldg@gmail.com|http://cor.to/unsldgPg:

CMYK32bits.Son4canalesde8bitscadauno:Cyan,Magenta,Amarillo(Yellow)yNegro(Black).LaletraKdefineelcolornegroparaquenohayaconfusinconelazul.Modoutilizadoengrficaimpresa.

7

Caractersticas: Tamaoyresolucin Llamaremostamao alacantidaddepxelesquecomponenuna

imagen.Semidede2maneras:

Aspectostcnicos

a)mencionandolospixelesenloanchoyalto.Ej:1600x1200px b)olacantidadtotaldepixeles.Ej:1600x1200=1.920.000px,esdecir1,92megapxeles.

Cuandohablamosderesolucin enunaimagennosreferimosaltamaoconelqueserepresentarcadaunodesuspixeles,yporconsiguiente la calidad que tendr Se mide en pxeles por pulgada

UNSL|IntroduccinalDiseoGrfico|unsldg@gmail.com|http://cor.to/unsldgPg:

consiguientelacalidadquetendr.Semideenpxelesporpulgada(ppi).Enunmonitorestestablecidaunaresolucinde72o96dpi.

8

5Caractersticas: Alisado

Msconocidocomoantialiasing,seencargadereducirelefectodentadoqueprovocanlospixelesaldescribircurvaso

Aspectostcnicos

diagonales. Latcnicaconsisteengenerarpixelesdevaloresintermedios;assi

tenemosuncrculonegrosobreunfondoblanco,elsoftwaregenerardistintostonosdegrisesenlospixelesqueunenamboselementos.

UNSL|IntroduccinalDiseoGrfico|unsldg@gmail.com|http://cor.to/unsldgPg: 9

Formatosycompresin:Aspectostcnicos

JPG

Nmerodecolores:24bits(8bitsporcanal).

GIF

Coloresindexadosde2hasta256colores.

PNG

Coloresindexadoshasta256coloresynoindexadohasta

Muyaltogradodecompresin.

Archivolivianoparaweb. Formatodecompresinconprdidadecalidad.

Nopermitetransparencia. Nopermiteanimacin. Usorecomendado:fotografas

Formatodecompresinsinprdidadecalidad.

Archivolivianoparaweb. Cargaprogresiva. Permitetransparenciasinalisado.

Permiteanimacinsimple. Usorecomendado:logotiposoimgenesdecolores plenos

48bitsporpxel. Formatodecompresinsinprdidadecalidad.

Archivomedianamentepesadoparaweb.

MayorgradodecompresinqueformatoGIF(+10%).

Permitetransparenciavariableconalisado.

No permite animacin

UNSL|IntroduccinalDiseoGrfico|unsldg@gmail.com|http://cor.to/unsldgPg: 10

coloresplenos. Nopermiteanimacin. Usorecomendado:fotografasdealtacalidad.

6Quformatoyresolucinutilizarsegneluso: Diseosenpantalla:web,cds.interactivoopresentaciones

multimediales Fotos: .jpg o .png

Aspectostcnicos

Fotos:.jpg o.png Grficos:.gif,.png,.pdf,.swf o.svg Resolucin:72o96dpi

UNSL|IntroduccinalDiseoGrfico|unsldg@gmail.com|http://cor.to/unsldgPg: 11

Fotografas:formato.jpg o.png |72dpideresolucin8bitsdeprofundidad|ModoRGB

Logossimplesconcoloresplanos:formato.gif72dpideresolucin|ModoIndexado

http://www.slideshare.net/fgirigaray/2imagendigital

Tcnicasdeoptimizacin http://www.slideshare.net/raymarq/formatosimagen http://www smashingmagazine com/2009/07/01/clever jpeg optimization

Referencias:librosylinks

http://www.smashingmagazine.com/2009/07/01/cleverjpegoptimizationtechniques/

http://www.smashingmagazine.com/2009/07/15/cleverpngoptimizationtechniques/

http://sixrevisions.com/web_design/webdesignersguidetopngimageformat/

UNSL|IntroduccinalDiseoGrfico|unsldg@gmail.com|http://cor.to/unsldgPg: 12