Vektor og bitmap

Når vi arbejder med grafik på en computer, taler vi om to slags grafik: vektor- og bitmapgrafik. For at forstå forskellen kan du zoome ind på telefonerne til højre. (F5 for at nulstille). Hvad sker der? Kvaliteten forbliver god ved den til venstre, mens telefonen til højre bliver pixeleret.


BITMAP-grafik er bygget op om pixels, som er små kvadrater med farver, typisk sammensat af en rød, grøn og blå farveværdi. Kvaliteten af bitmap-grafik bestemmes af antal pixels - jo flere, jo flottere grafik. Når du tager billeder med et kamera, er pixel-mængden bestemt på forhånd, og hvis du forstørrer billedet, vil det gå ud over kvaliteten. Bitmap-grafik er velegnet til fotos.

VEKTOR-grafik består ikke af pixels, men er opbygget af matematiske formler, som beskriver, hvordan kurver, streger og farver ser ud, og de benyttes til at fortælle printeren, hvordan grafikken skal se ud på papir. Da vektorgrafik er opbygget af formler, er der nogle fordele frem for bitmap-grafik: 1) grafikken fylder mindere end tilsvarende bitmap-grafik og 2) ved forstørrelse bliver kvaliteten ikke forringet.
Vektorgrafik er især velegnet til logoer og figurer.

Lidt forvirring: En skærm kan kun vise pixels. Det vil sige, at hvis du tror du ser vektorgrafik på skærmen, må du tro om igen: du ser blot en efterligning, da en skærm er opbygget af pixels.

Programmer til grafik

Der findes en række programmer, som håndterer både bitmap- og vektorgrafik. Jeg vil dog kun komme ind på de programmer, som er relevante i en digital/web-produktion:

• Billledbehandlingsprogrammer, f.eks. Photoshop og Fireworks, er først og fremmest til at behandle bitmap-grafik som fotos. Du kan også arbejde med vektor-grafik og importere illustrationer, men i sidste ende skal det konverteres til et bitmap-format.
  
  
• Illustrationsprogrammer, f.eks. Illustrator og CorelDRAW, er først og fremmest til at tegne og bearbejde vektor-grafik med. Mange laver typisk logoer og weblayout på den måde.
  
  
• Animationsprogrammer, her tænkes især på Flash, bruges til at tegne, lave bevægelse og interaktion. Programmet benytter både vektor- og bitmap-grafik, men vektorgrafik fylder klart mindst.
  
  
• 3D-programmer, f.eks. 3ds Max og Maya anvendes til fremstilling af 3D-objekter og animationer, og bruges især til animationsfilm og computerspil, men kan også integreres på en webside.

Mange af disse typer af programmer indeholder flere muligheder, f.eks. kan du arbejde med statisk 3D-grafik i Photoshop og importere bitmap-grafik som tekstur i et 3D-program, osv.

Samtidig snakker programmerne godt sammen, især Adobes programmer. Du kan importere Photoshop-billeder i Flash, hente Illustrator-filer i Photoshop, osv.

Tip: Sådan laver du en webbanner!

 

sådan anvendes grafik på WWW!

Når du bearbejder grafik og anvender grafik til dine websider er der nogle forhåndsregler, du skal tage. Her følger nogle gode råd.

• Grafikkens pixelstørrelse bearbejdes i et billedbehandlingsprogram. Så ikke noget med at sætte størrelsen, når du opsætter din webside. Det kan gå ud over både størrelse og kvalitet.
  
  
• Find ud af, hvilket fil-format, du skal bruge. Skal du bruge GIF, JPG eller PNG? Det afhænger af, hvad du skal bruge grafikken til. Læs mere om bitmap formaterne herunder.
  
  
• Vær bevidst om de farver, billedet indeholder. Passer de til resten af websidens farver og layout?
  
  
• Kvalitet fremfor størrelse. I dag har langt de fleste en bredbåndsforbindelse, så hellere et godt billede, der fylder lidt for meget, end et meget pixeleret billede, der er ulideligt at se på.
  
  
• Bearbejd (beskær, retoucher, osv.) dine billeder før du skal anvende dem. Ellers er det dobbeltarbejde.
  
  
• Copy Right: hvis du har taget et billede fra WWW, så skal du undersøge om du have tilladelse til at bruge det offentligt.

Bitmap-formater

Her kan du læse om de vigtigste filformater til bitmap-grafik. Der findes mange, men jeg vil kun nævne dem, der anvendes til skærm-grafik:

• GIF(Graphical Interchange Format) anvendes meget på websider. GIF har en maksimal farvedybde på 8 bit, hvilket svarer til 256 forskellige farver. Det fylder ikke så meget men er mindre godt til store billeder og fotos.
  Transparens betyder gennemsigtighed og er i modsætning til JPEG én af fordelene ved GIF: du kan have en transparent baggrund, som gemt i JPEG ville være hvid. Her ses en transparent GIF til venstre og en JPEG til højre på en farvet baggrund.
  
  
  
  Man bruger bl.a. GIF til ikoner, knapper, bjælker, store ensartede flader og ikke mindst til GIF-animationer, som kan laves i Photoshop. GIF-animationer er blot flere GIF-billeder vist efter hinanden. GIF er fortsat et meget vigtigt og udbredt filformat.
  
  
• JPEG (Joint Photographers Expert Group), også forkortet JPG, er et bitmap-format med op til 24 bit farvedybde, hvilket svarer til 16,7 millioner farver.
  JPEG er et komprimeret billedformat, som ofte anvendes i forbindelse med fotos til WWW, da kvaliteten overvejende er god og det fylder lidt.
  
  Det bruges i stigende grad også i den traditionelle trykproduktion, da komprimeringsgraden kan styres - og dermed kan kvaliteten også styres.
  
  På WWW er JPG altså at foretrække fremfor GIF, når det drejer sig om fotos og andre billeder med stor farvedybde og stor opløsning. JPEG er ikke god til tegninger, tekster og lignende, hvor der indgår skarpe linjer og kanter og ensfarvede flader. JPG understøtter desuden ikke transparens.
  
  
• PNG (Portable Network Graphics, udtales 'ping') indeholder det bedste fra GIF og JPEG. Det kan indeholde op til 16,7 millioner farver i 24 bit og samtidig giver det mulighed for transparens (og hvor meget farverne skal være transparente).
  
  I modsætning til JPEG foregår komprimeringen uden tab af detaljer, og den er mere effektiv end GIF. Til fotos på WWW bør du dog som udgangspunkt anvende JPEG, da de fylder væsentlig mindre, uden kvalitetsforskellen kan ses med det blotte øje.
  
  PNG 8 bit er understøttet af alle browsere, mens PNG 24-bit ikke er understøttet af f.eks. Internet Explorer 6. Det betyder at dine billeder ikke her er transparente.
  
  
• PSD er Photoshops oprindelige format og er ikke kompatibelt med WWW. Det indeholder oplysninger om lag, farvejusteringer, osv., og derfor er det en god ide at gemme dit færdige arbejde i PSD, så du sesnere kan lave ændringer. Når du skal konvertere filen til et web-venligt format, vælger du 'Save for Web'. Her kan du lave indstillinger og sammenligne med originalen, før du gemmer.