INT3 medieteknik

1. INT3 medieteknik Om text, bild, ljud och video 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. Digitala bilder • Vi gör även här en distinktion mellan • PAPPER – SKÄRM • Exempel på format för bilder som ska tryckas med hög upplösning: • Photoshops egna .psd • Det mer allmänna .tif Hög kvalitet MEN mycket stora filer.

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

13. Bildformat för Internet • Vektorgrafik och punktgrafik (bitmap) • Vektorgrafik byggs upp av formler • En populär variant av vektorgrafik är SVG • Exempel på punktuppbyggda bildformat som passar för internetpublicering är: GIF JPEG PNG

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

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

16. 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?

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

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

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

20. Text och bild i Photoshop • Hur ska vi då praktiskt tillämpa det som vi hittills har pratat om? • Vi ska titta på några av dessa tekniker när vi nu i Adobe Photoshop scannar in en bild. • På denna bild lägger vi sedan på en text med anti-aliasing och spar den sedan som en JPEG. Vi behöver nog först en rast.

21. Digitala ljudformat • En dator arbetar mest med samplade ljud • Analogt ljud ----- Digitalt ljud • Ljudfiler skapas med samplingsfrekvenser • Sampling med 44 KHz ger CD-kvalitet och återger ljud upp till ca 20 KHz (hi-fi) • Övertoner gör musiken njutbar!?

22. Digitala ljudformat • En annan faktor som påverkar ljudkvaliteten är lagringsformatet • Fler bitar --- bättre kvalitet --- större filer • 1bit ger ljud eller icke ljud • 16 bitar ger 65536 möjliga värden • Talat ljud brukar lagras med 8 bitar • Avancerade ljudformat >= 24 bitar

23. Digitala ljudformat • Vid sampling av tal räcker < 4 KHz • En telefon jobbar mellan 400 - 4000 Hz • Harry Nyquists samplingsteorem • Du ska sampla med dubbla frekvensen för ljudfrekvensen du vill återge • Exempel: Ljud mellan 0 - 4KHz du samplar med 8KHz (8000/sek)

24. Digitala ljudformat • Riktigt bra ljudkvalitet som t ex Dolby Digital(AC-3) eller DTS (DTS = Digital Theater Sound) kräver stort lagringsutrymme och tar tid att skicka över Internet • Det som fungerar via bredband kan ge kraftiga problem på en modemuppkoppling.

25. Digitala ljudformat • Lagringsutrymmet = A * B * C • A = Samplingsfrekvensen i Hz • B = Representationen i bitar • C = Antalet kanaler • 44KHz * 16 bitar * 2 kanaler = CD-kvalitet • vilket slukar ca 166K/sekund • Tur att hårddiskarna blir större [:=)

26. Digitala ljudformat • Några vanliga samplade filformat • filnamn.au, 8-bitars kompakt ljudformat (Solaris) • filnamn.wav, 16-bitarformat (Windows/Atari) • filnamn.aif ELLER .aiff (Mac) • Icke-samplat ljudformat • Filnamn.mid (midi-filer)

27. Digitala ljudformat MIDI-formatet • Små snabbladdade icke-samplade filer • Innehåller inte själva musiken utan styrsignaler till ljudkort eller synthesizer • Enkelt att omvandla till notskrift • Nackdelar: • Ej för röster och sång • beroende av ljudkortet

28. Digitala ljudformat • MP3 – MPEG Layer 3 • Utvecklat i Tyskland av Karlheinz Brandenburg • En perceptuell brusformningsmetod • att plocka bort de frekvenser som örat inte hör • tar bort höga toner i diskanten • tar bort de frekvenser med låg volym som slås ut av närliggande frekvenser med hög volym • Delade meningar om kvalitetsförsämringen

29. Ljudformat i Authorware • I Authorware (och Director) fungerar: • wav-filer • MP3-filer • Det går också att använda filmformaten: • .mov • .avi • .mpg

30. Digitala videoformat • Video är ännu mera skrymmande än audio • För Internet krävs komprimering • Smarta algoritmer för t ex • Inkrementell uppdatering (som i tecknade filmer) • Interlace (gammal TV-teknik) • Vanliga digitala videoformat på datorer: • fil.mov (Apple/Quicktime) • fil.avi (Windows/Microsoft)

31. Strömmande media • En populär teknik på hemsidor som fungerar både för audio och video. • Istället för att ladda hem hela filen till datorns hårddisk innan uppspelningen påbörjas så spelas innehållet upp under hämtningen. • Ett format för strömmande media är Realmedias fil.ram (metafil) + fil.rm • Detta går bl a att skapa i Adobe Premiere

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

33. Länkar till övningar • Mina photoshopövningar: • http://www.dsv.su.se/~mozelius/photoshop/ • Skolverkets övningar: • http://www.multimedia.skolverket.se/ • Ekdahls övningar: • http://www.ekdahl.org/kurs/ Tack för mig!