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

Præsentationer af emnet: "Grundlæggende Webdesign – det digitale billede Bjarne Sandstrøm IT-højskolen 14.3.2002."— Præsentationens transcript:

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

2 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

3 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

4 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

5 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’.

6 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

7

8 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)

9 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 65.536 farver (2 16 = 65.536) : HiColor Indscanning af 24 bits farvedybde kan vise 1.667.216 farver (2 24 = 1.667.216) : True Color, RGB Photoshop kan åbne billeder i 16-bits kanaler, men redigeringsmulighederne er få.

10 1 bit/sort og hvid

11 8 bit / 256 indexerede farver

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

13 Billede i tre farvekanaler (RGB) 8 + 8 + 8 = 24 bits

14 Image / Histogram...

15 De additive farver RGB

16 De subtraktive farver CMYK

17 Cie L.A.B.

18 Gamut

19 Photoshops farvepalette RGB CMYK HSB Lab Saturation Brightness Hue HTML farvekode

20 Kun Web-farver

21

22 *.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

23 *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

24 *.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

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

26 Image / Adjust / Variations...

27 Image / Adjust/ Levels

28 Image / Adjust/ Curves

29 Tekst manipuleres i Layer / Layer Style /...

30 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)

31 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