INT 3 F3

1. INT 3 F3 Medieteknik Del1 Färger, teckensnitt och bildformat DSV Peter Mozelius

2. En texts läsbarhet • Teckensnitt • Teckengrad • Radlängd • Radavstånd • Papper/Skärm • Bakgrundsfärg

3. Teckensnitt Teckensnitt kan delas in i två huvudgrupper: • Antikva, med anor från renässansen • MED serifer som i denna föreläsnings rubriker Några av de antikva-teckensnitt som framtogs under 1400- och 1500-talet anses allmänt ge mycket god läsbarhet när det gäller löpande text (brödtext) på papper.

4. En antikva från 1500-talet Garamond skuren av Claude Garamond

5. Teckensnitt • Sanserif, utvecklades under 1800-talet • utan serifer som i texten på denna rad Andra benämningar för sanserif: Grotesk, linjär, gothic, egyptian … Exempel på sanserifer: Arial, Helvetica, Franklin Gothic och Verdana

6. Sanserif Grekisk ursanserif från 500 f Kr. Ett bustrofedon med växlande skrivriktning för varannan rad.

7. En modern sanserif • Verdana • Designad för datorskärm • Skuren av Matthew Carter • Beställd av Microsoft • Hela denna bild är Verdana • En intervju med Carter finns på: http://www.webreview.com/1997/11_07/webauthors/11_07_97_10.shtml

8. Teckengrad/radlängd Teckengrad = bokstävernas storlek För god läsbarhet i löpande text: • 10 –12 punkter Radlängd = antal tecken per rad En ideal rad i en brödtext innehåller 55 – 65 tecken.

9. Radavstånd • Avståndet mellan rader kallas även kägel. • Kägeln ska vara minst lika stor som textens teckengrad och gärna lite större. • Olika radavstånd för olika teckensnitt. • Ibland anges teckensnitt – kägel enligt 10/12 med betydelsen: 10 punkters teckengrad / 12 punkters radavstånd

10. Papper / skärm En grundregel för brödtext kan vara: Antikva för papperspublikationer Sanserif för det som ska läsas på en skärm • Olika @media i Cascading Style Sheets Paus 15 min

11. Ljus och våglängder • Det synliga spektrumet ca 400-800 nm Ultraviolett - Synligt ljus - Infrarött • Violett 390 - 430 nm • Blått 430 - 500 nm • Grönt 500 - 580 nm • Gult 580 - 600 nm • Rött 600 - 750 nm

12. Färgcirkeln Komplementfärger är två färger mitt emot varandra i en färgcirkel och om de adderas ger de upphov till vitt ljus. Red Green Blue Yellow Magenta Cyan

13. Färgmodeller • RGB-modellen, ett sätt att härma ögat • Färgkänsliga tappar i näthinnan • Stavarna registrerar ljusstyrkan • RGB för dataskärmar, scanners mm • CMYK för tryckprocesser • Additiv och Subtraktiv färgblandning • HSB för digital bildbehandling mm

14. FÄRGMODELLER - RGB • RGB - modell för ljus • Standard för skärmar • Standard för scanners • Standard i HTML • Standard i Javascript • En färgmodell i Java • En färgmodell i PhotoShop

15. Färgmodeller - CMYK K = Key color

16. Färg – designregler • Färguppfattningen är individuell MEN • Undvik komplementfärger på samma sida om det inte finns en klar anledning. • Genomgående i Microsoftprodukter • Undvik även att blanda alltför många färger på samma sida om det finns viktig information att läsa.

17. Färgkombinationer Hur påverkas färger av omgivande färger ? Finns det färger på denna sida som INTE harmonierar ?

18. Bilders färgdjup • Varje pixel i en punktuppbyggd bild innehåller information om sin färg • Hur många bitar som går åt till detta kallas för bildens färgdjup • 1 bit, 0 eller 1för en s/v bild (streckteckning) • 4 bitars = 2*2*2*2 = 16 färger • 8 bitar ger 256 färger • 16 bitar ger High Color • 24|32 bitar ger True Color

19. Färgkalibrering • Bildskärm - Skrivare • RGB - CMYK • Bildskärmen kan återge fler färger än skrivaren • Olika färggamuter • Perceptuell matchning • Kolometrisk matchning

20. Webbpalett 216 • Plattformsoberoende med 216 säkra färger som återges likadant oavsett om det är på en PC, en Mac eller en UNIX-dator • Mindre färger, snabbare att ladda sidan • 24-bitars färgdjup ger distorsion på datorer med dåliga grafikkort PAUS 15 min ??

21. Bilder och bildformat • Vektorgrafik eller punktgrafik • Vektorgrafik: grafiken beskrivs med formler och noder (Bézierkurvor) • Framställs i t ex Adobe Illustrator • Skalbart och utrymmessnålt • Fungerar ej för fotografier • SVG Scalable Vector Graphics

22. Bilder och bildformat • Punktgrafik innebär att bilderna är uppbyggda av pixlar (bitmapping) • Filstorlek = antalet pixlar x färgdjupet • Utskriftsstorlek = pixlar / upplösningen • Resampling: Upsampling-Downsampling • Uppsampling = interpolering • Jämna multiplar vid inscanning-uppsampling

23. Bilder och bildformat Bitmappade bildformat som t ex: • bildfil.bmp • bildfil.tiff • bildfil.psd Hög kvalitet och metainformation ger stora filer som tar tid att ladda via nätet

24. Digitala bilder • Då datorskärmarnas upplösning fortfarande är så låg som 96 dpi så kan vi på datorn ändå inte tillgodagöra oss den höga kvaliteten. • Det är också nödvändigt att minska bildstorleken vid internetpublicering. • Stora filer ger lång nedladdningstid. • Lösningen är komprimeringsalgoritmer. • Ett exempel är GIF-bildens LZW-komprimering.

25. Bildformat för Internet • GIF, en gammal trotjänare • GIF87a och den uppdaterade GIF89a • 8 bitars färgdjup - 256 färger • Transparens för 1 färg • Interlace (sammanflätning) • Animering genom en serie av GIF-bilder • Passar bra för diagram, ikoner och teckningar

26. Bildformat för Internet • JPEG-formatet • Framtaget av Joint Photographic Experts Group • 24-bitars färgdjup för fotorealistiska bilder • Förstörande irreversibel kompression • Passar för fotografier, målningar och liknande • Progressiva JPEG-bilder i stil med GIF-interlace • Stödjs precis som GIF av de flesta webb-läsare

27. Bildformat för Internet • PNG-bilder • Portable Network Graphics • PNG = GIF + JPEG + lite till • Icke-förstörande kompression utan ägare med bättre packratio än GIF/LZW • 16-bitars alfa-kanal för transparens • Framtidens bildformat?

28. Framtidens format • Det har i flera år talats om att PNG ska ta över • Det har gått lite trögt • Nu finns också JPEG2000 • En vidareutveckling av JPEG • Förbättrad komprimering: • högre packratio – mindre filer • högre kvalitet vid kraftig komprimering

29. Bildformat i Authorware • Stödjer internetformaten • jpg • gif • png • Men även ”Windowsformatet” .bmp • Och Photoshops .psd MEN då måste först eventuella lager ha plattats ihop till ett enda • Animerade gif-bilder går också bra

30. Aliasing • I bilder < 500KB • Ögat kan se pixeluppbyggnaden • Framför allt problem med nästan horisontella eller nästan vertikala linjer • Syns extra tydligt vid skarpa linjer och detaljer med hög kontrast mot bakgrunden • Som motmedel finns tekniken: anti-aliasing

31. För dig som vill läsa mera • Delar av materialet till denna föreläsning är hämtat från följande litteratur: • Christer Hellmark, Typografisk handbok • Astrid Haugland, Digital bildbehandling • Jennifer Niederst, Web design in a nutshell • Chapman & Chapman, Digital multimedia • Lon Barfield, Design for new media Finns på välsorterade bibliotek.

32. Länkar till övningar • Hemsida med kursmaterial: • http://dsv.su.se/~mozelius/INT3/ • Photoshopövningar: • http://www.dsv.su.se/~mozelius/photoshop/ Tack för idag!