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 framtogsunder 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äxlandeskrivriktning 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å JPEG2000JPEG2000 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 exDolby 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

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 Tack för mig!mig!