Om text, bild, ljud och video

En presentation över ämnet: "Om text, bild, ljud och video"— Presentationens avskrift:

1 Om text, bild, ljud och video
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 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å:

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 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 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 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 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 Tack för mig! Mina photoshopövningar:
Skolverkets övningar: Ekdahls övningar: Tack för mig!