Om text, bild, ljud och video INT3 medieteknik Om text, bild, ljud och video DSV Peter Mozelius

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

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.

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

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

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

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

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.

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

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

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.

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.

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

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

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

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?

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

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

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

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.

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!?

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

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)

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.

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 [:=)

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)

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

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

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

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)

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

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.

Länkar till övningar Tack för mig! 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!