Grundlæggende Webdesign – det digitale billede Bjarne Sandstrøm IT-højskolen

Plan for i dag Evt. spørgsmål om den forestående opgave (?) Computerens billeder (vector og bitmap) Billedtyper / scanningstyper –scanner-justeringer –farvedybde –nettets billedformater Billedredigering i Photoshop –opretning af billeder –typografiske muligheder i Photoshop

Computerens billeder Vektorgrafik fra tegneprogram –på nettet i Flash/shockwave-format –SVG (Scalable Vector Graphic) –vektorgrafik fra fx Illustrator kan importeres i Photoshop - til rastering Bitmap grafik –skabt i et maleprogram –digitalt foto –ved scanning af eksisterende fysiske billeder

Scannertyper Tromlescannere –objektet føres forbi et statisk scannerhoved Flatbed-scanner –scannerhovedet passerer forbi det statiske objekt Refleksscanning: objektet reflekterer scanner- lampens lys Transparens (negativ) scanning: lyset sendes igennem objektet

Forbindelsen scanner-computer TWAIN / TWAIN_32 –Aldus : Toolkit Without An Interesting Name –Logitech : We selected this name to describe this unique interface that brings together to entites – applications and input devices – in a meeting of the ’twain’.

Billedtyper til scanning Bitmap-billeder –billeder med kun to toner (sædvanligvis sort/hvid) Gråtonebilleder –billeder med mange gråtoner (sort-hvid fotos, blyantstegninger med mange toner) [Halvtonebilleder] –billeder med flere farver, men uden toneforløb Farvebilleder –billeder med farvetoneforløb

Scanner-indstillinger Output Type / True Color, Grayscale, 256 Color, Bitmap Tools / Output Resolution i pixels –/ Dimensions forholdet mellem input og output –/ Black and White Threshold sætter grænsen mellem sort og hvidt –/ Exposure Adjustment sætter grænsen for lyseste, mørkeste og midttone –/ Color Adjustment (ændrer farvebalancen)

Farvedybde Indscanning i en farvedybde på 1 bit viser to farver –1 bit = 2 farver : ’Bitmap’ Indscanning af 8 bits farvedybde kan vise 256 farver (2 8 = 256) : SVGA (indexerede farver) Indscanning af 16 bits farvedybde kan vise farver (2 16 = ) : HiColor Indscanning af 24 bits farvedybde kan vise farver (2 24 = ) : True Color, RGB Photoshop kan åbne billeder i 16-bits kanaler, men redigeringsmulighederne er få.

1 bit/sort og hvid

8 bit / 256 indexerede farver

24 bit / 1.6 mill. farver i 3 8-bits kanaler

Billede i tre farvekanaler (RGB) = 24 bits

Image / Histogram...

De additive farver RGB

De subtraktive farver CMYK

Cie L.A.B.

Gamut

Photoshops farvepalette RGB CMYK HSB Lab Saturation Brightness Hue HTML farvekode

Kun Web-farver

*.gif Graphic Interchange Format (GIF) –begrænset til 8-bit / 256 indexerede farver –velegnet til grafik med rene farveflader uden toneforløb og skarpe grænser mellem farvefelterne –kan gemmes interlaced og non-interlaced –kan rumme transparens –samles i animerede giffer

*jpg / *jpeg Joint Photographic Experts Group (JPEG) –rummer 24-bits billeder i ’True Color’ –velegnet til grafik med toneforløb og uklare grænser mellem farvefelterne (typisk fotos) –komprimerer godt, men med tab af ’billed- kvaliteter’ (’lossy’) –kompressionsgrad / tab vælges –kan gemmes interlaced og non-interlaced

*.png Portable Network Graphic (PNG, udtales ping) –skabt som afløser af ’gif, som det teknisk overgår: farvedybde til 48 bit, gråtone- dybde til 16 bit, gamma-korrektion, tekstbaseret meta-data –endnu ikke godt implementeret i browsere –komprimerer dårligere

GIF og JPEG modstillet Billedtyper til *GIF Billedtyper til *JPG

Image / Adjust / Variations...

Image / Adjust/ Levels

Image / Adjust/ Curves

Tekst manipuleres i Layer / Layer Style /...

Tekst redigeres i Layer / Type /... –bl.a. forskellige former for Anti-Alias skaber smukkere kant mellem skrift og baggrund kan gøre skrift i små skriftstørrelser utydelig –hvis skriften skal manipuleres som et billed- element, fx med Photoshops filtre, skal laget enten rateres (Layer / Rasterize /...) eller billedet skal gøres flat (Layer / Flatten Image)

Næste gang Om informationsarkitektur og navigation –siten som udstilling –en sites identitet og struktur, konsistens og variation –læs Lynch & Horton, Site Design –David Siegel: kap. 9