1 / 31

Grundlæggende Webdesign – det digitale billede

Grundlæggende Webdesign – det digitale billede. Bjarne Sandstrøm IT-højskolen 14.3.2002. 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

gerd
Download Presentation

Grundlæggende Webdesign – det digitale billede

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation 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. 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)

  8. 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 (28 = 256) : SVGA (indexerede farver) • Indscanning af 16 bits farvedybde kan vise 65.536 farver (216 = 65.536) : HiColor • Indscanning af 24 bits farvedybde kan vise 1.667.216 farver (224 = 1.667.216) : True Color, RGB • Photoshop kan åbne billeder i 16-bits kanaler, men redigeringsmulighederne er få.

  9. 1 bit/sort og hvid

  10. 8 bit / 256 indexerede farver

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

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

  13. Image / Histogram...

  14. De additive farver RGB

  15. De subtraktive farver CMYK

  16. Cie L.A.B.

  17. Gamut

  18. Photoshops farvepalette Lab HSB Hue Brightness Saturation RGB CMYK HTML farvekode

  19. Kun Web-farver

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

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

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

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

  24. Image / Adjust / Variations...

  25. Image / Adjust/ Levels

  26. Image / Adjust/ Curves

  27. Tekst manipuleres i Layer / Layer Style / ...

  28. 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)

  29. 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

More Related