1 / 60

010830000 Monimedian työkurssi Multimedian teknologiat

010830000 Monimedian työkurssi Multimedian teknologiat. Ilmari Laakkonen. Digitaalinen media. Peruselementit: Teksti, valokuva, grafiikka, video, animaatio, ääni ja musiikki. Multimedia: käytetään kahta useampaa mediaelementtiä. Hypermedia:

giulia
Download Presentation

010830000 Monimedian työkurssi Multimedian teknologiat

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. 010830000Monimedian työkurssiMultimedian teknologiat Ilmari Laakkonen

  2. Digitaalinen media • Peruselementit: • Teksti, valokuva, grafiikka, video, animaatio, ääni ja musiikki. • Multimedia: • käytetään kahta useampaa mediaelementtiä. • Hypermedia: • Käyttäjällä mahdollisuus tehdä valintoja tai vaikuttaa median esitystapaan. • Monimedia: • Sisältö esitetään useamman jakelukanavan avulla, esim. lehti, televisio ja internet.

  3. WWW-multimedia • Laajimmillaan WWW-multimedia on vuorovaikutteinen ja sisältörikas liikkuvan ja staattisen kuvan (video, animaatio, valokuvat, grafiikka), äänten (musiikki ja muut äänet) ja tietokantojen yhdistelmä.

  4. Multimedia teknologiat • Teksti • Kuva • Video • Animaatio • Ääni ja musiikki • Ohjelmointitekniikat • Tietokannat • Jakelutekniikat

  5. Teksti ja taitto • Taitto on tekstin, kuvien ja muiden graafisten elementtien sommittelua kokonaisuudeksi • Multimediassa taittoa vastaa käyttöliittymän suunnittelu • Lehtitaiton elementit • Tekstitypografia • Tekstimateriaali • Kuvat

  6. Tekstitypografia • Pääotsikko • Suurin kirjasinkoko, lihavoitu • Ingressi, johdantokappale • Leipätekstiä suurempi pistekoko ja ehkä kursivoitu/lihavoitu • Ala- tai yläotsikko • Pääotsikkoa pienempi kirjasinkoko • Väliotsikko • Leipätekstiä suurempi kirjasinkoko, vasemmalle tasattuna, erottaa tekstikappaleet toisistaan • Leipäteksti • Tekstin perusaines, esim. pistekoko 12, tavallinen teksti, ei tyylejä, tasapalstainen • Kuvateksti • Eri kirjasin kuin leipätekstillä tai kursivoitu

  7. Teksti ja typografian perustermit • Kirjasinleikkaus, fontti, kirjasin • Arial, Helvetica, Times, Courier, Century Gothic, Verdana, Comic Sans MS • Serif ja Sans serif • Serif. Kirjasimet joissa vaakasuuntaisia viivoja ohjaamassa lukijan silmää. • Sans serif. Kirjasimet joissa ei ole vaakasuuntaisia viivoja • Kiinteä ja vaihtelevaväliset kirjasimet • 1234567890 Liirum Laarum Lorum. • 1234567890 Liirum Laarum Lorum.

  8. Teksti ja typografian perustermit • Kirjasimen tehokeinot • Kirjasinkoko • ilmoitetaan yleensä pisteinä (72 pistettä = 1 tuuma) • paperilla yleensä 8-14 pistettä • Näytöllä 14-24 pistettä

  9. Teksti ja typografian perustermit • Välistys • kirjainvälistys • sanavälistys • rivivälistys • Tasaus ja palstoitus • Leveällä paperilla esim. lehdissä, palstoitus helpottaa lukemista

  10. Teksti ja näyttötaitto • Näytöltä lukeminen hitaampaa kuin paperilta • Monitorin ominaisuudet ja lukuetäisyys • Näytön muoto poikkeaa paperin muodosta • Näyttöä ei voi käsitellä samalla tavalla kuin paperinippua • Näytöllä käytettävä isompaa tekstikokoa kuin paperilla • Otettava huomioon käyttäjien erilaiset näyttöresoluutiot • Tekstiä silmäillään, artikkelista ei jakseta välttämättä lukea kuin pääotsikko ja ingressi.

  11. Tietokoneen kirjasimet • Bittikarttakirjasimet • Vektorikirjasimet • Truetype • Postscript • Käyttöjärjestelmien mukana tulee perusvalikoima kirjasimia. • Lisää saa verkosta lataamalla tai ostamalla • Esim. Microsoft tarjoaa ilmaisen web kirjasinpaketin. • Ei ole takeita siitä että muilla käyttäjillä samat kirjasimet • Arial/Helvetica, Courier, Times ovat varmoja peruskirjasimia

  12. Kirjasimet www-sivuilla • HTML suunniteltu kuvaamaan dokumentin rakennetta ja tekstielementtejä, ei muotoilemaan dokumentin ulkoasua. • Käytännössä kolme tapaa määrittää haluttu kirjasintyyli • <FONT> merkintä • <FONT FACE=”Comic Sans MS, Arial”> Teksti </FONT> • CSS (cascading style sheet) tyylimääritykset • HTML 4 standardin mukainen tapa, tällöin HTML tiedostossa määritetään vain tekstin rakenne ja tekstin ulkonäkö tyylitiedostolla. • Teksti muutetaan kuvaelementiksi ja kuva sijoitetaan siihen kohtaan jossa tekstielementtiä käytetään <IMG> merkinnällä. • Ongelmana www-sivujen tiedostokoot ja latausajat

  13. Tekstin muotoilu HTML-kielessä • Otsikko tasot <H1>, <H2>, jne. • Kappale <P> • Rivinvaihto <BR> • Loogiset merkinnät <HI>, <ADDRESS>, <SITE> ja <EM> • Fyysiset merkinnät <B>, <I>, <TT> ja <PRE> • Kirjasimen määritys <FONT>

  14. CSS – Cascading style sheet • HTML 4 standardin virallinen tapa tehdä tekstimääritykset. • Mahdollistaa tarkan hallinnan seuraaviin ominaisuuksiin: • Kirjasimen ja kirjasintyylin määritykset • Tekstin värimääritykset ja taustavärin määritys • Tekstin tasaus • Tekstin välistys • Tekstikehykset • Uusissa selaimissa ja www-hallinta sovelluksissa hyvä tuki.

  15. Valokuva ja grafiikka • Värimallit • Additiivinen vs subtraktiivinen • Digitaalinen kuva • Bittikarttakuva vs vektorigrafiikka • Kuvien hankinta • Kamera, skannerit, PhotoCD, kuvakirjastot • Tiedostomuodot • Kuvankäsittely

  16. Valo ja värimallit

  17. Värimallit tietokoneissa • Ohjelmissa voidaan valita mitä värimallia käytetään kuvien ja grafiikan tallennukseen. • Jos kuva tai grafiikka menossa näytölle niin käytetään RGB värimallia. • Jos kuva tai grafiikka menossa paperille niin käytetään CMYK värimallia. • Muunnoksissa värimallista toiseen voi kadota värejä, koska RGB ei pysty näyttämään kaikki CMYK:n värejä ja päinvastoin.

  18. Vektorigrafiikka • Kuvan elementit muokattavia ja kuva aina maksimitarkkuudella lopullisesta mediasta riippumatta • Kuvan elementtien muodot tallennetaan geometrisilla kaavoilla, joihin liitetään värien ja viivojen ominaisuudet. • Yleensä multimedia- ja www-sovelluksissa muunnetaan bittikarttakuviksi lopulliseen sovellukseen.

  19. Bittikarttakuva • Kuva muodostuu pikseleistä, joilla on jokin tietty arvo • Yksi pikseli on muokattava elementti • Yleensä kuvankäsittely- ja piirto-ohjelmissa käsitellään kerralla useita pikseleitä. • Kuvalla on aina tietty värimäärä ja tarkkuus/koko josta määräytyy kuvan viemä tila • esim. kuvan koko 2x4 tuumaa, tarkkuus 100 pistettä tuumalle ja värimäärä 256 väriä (8 bittiä) • - > kuvan koko on 2*100*4*100*8bit = 80000bittiä = 10000 tavua

  20. Bittikarttakuva

  21. Bittikarttakuva, värisyvyys • Värisyvyys määrittää kuinka monta bittiä käytetään yhden pikselin tilan tallentamiseen. • Mustavalkoinen kuva (1bit) • Harmaasävykuva (8bit) • Värikuva • 256 väriä (8bit) • Tuhansia värejä (64*1024) (16bit) • Miljoonia värejä (24bit) • Tarkempiakin muotoja on olemassa • esim. 48bit

  22. Bittikarttakuva, kuvan koko • Kuvan koko voidaan esittää kahdella tavalla • Pikselikoko, käytetään usein tietokoneohjelmissa ja www-sivuille tehdyssä grafiikassa. • esim. 640*480 tai 1024x768 pikseliä • Resoluutio, käytetään kun tiedetään kuvan viemä tila tavallisina mittoina ja näyttölaitteen resoluutio. • esim. kuvan koko on 10*15 tuumaa ja näyttölaitteen resoluutio 100 pistettä tuumalle • -> kuva jonka koko on 1000x1500 pikseliä

  23. Näyttölaitteiden resoluutiot • Näytöt, 70-100dpi (dots per inch) • bittikarttakuvan tarkkuus sama kuin näytössä • Laser- ja mustetulostimet, 300dpi • bittikarttakuvan tarkkuus 100ppi (pixels per inch) • Sanomalehdet, 600dpi • bittikarttakuvan tarkkuus 150-200ppi • Esitteet ja aikakausilehdet, 1200dpi • bittikarttakuvan tarkkuus 200-266ppi • Taidepainotyöt vielä suuremmat resoluutiot • bittikarttakuvan tarkkuus yli 300ppi

  24. Kuvien hankinta • Digitaalikamera • Tavallinen kamera • Filmi -> valokuva -> skanneri eli kuvanlukija • Filmi -> Photo CD • Filmi -> dia-/filmiskanneri • Kuvakirjastot • Tuotetaan kuva tietokoneella • Piirto-ohjelmat • Kaaviot • Mallinnusohjelmat

  25. Tiedostomuodot • Bittikarttakuvat • Ohjelmien omat (Photoshop, Corelpaint, jne.) • TIFF (hyvä muoto ohjelmien väliseen siirtoon) • GIF (web) • JPEG (web) • PNG (web) • Vektorigrafiikka • Ohjelmien omat (illustrator, CorelDraw, jne.) • EPS (hyvä muoto ohjelmien väliseen siirtoon) • WMF (windows metafile) • SVG (web, plugin) • Flash (web, plugin, animaatiomuoto)

  26. Tiedostomuodot, GIF • 256 väriä, yksi väreistä voidaan määrittää läpinäkyväksi • Soveltuu vähän värejä sisältävän grafiikan esittämiseen bittikarttamuodossa ja käyttöliittymä elementteihin • Kuvasta ei hävitetä informaatiota kuten JPEG-muodossa • Selaimet tukevat ilman plugineja

  27. Tiedostomuodot, JPEG • 256 harmaasävyä tai miljoonia värejä • Ei läpinäkyvyyttä • Suunniteltu valokuvien tiedostokokojen pienentämiseen • Kuvasta hävitetään informaatiota • Selaimet tukevat ilman plugineja

  28. Tiedostomuodot, PNG • Tukee useita värimääriä, myös läpinäkyvyyttä • Suunniteltu korvaamaan GIF siinä olevien tekijänoikeusongelmien takia • Ei kadota kuvainformaatiota, eli suurilla värimäärillä kuvista tulee isokokoisia. • esim. valokuvat, ei suunniteltu JPEG:in korvaajaksi • Selaimet tukevat ilman plugineja

  29. Tiedostomuodot, SVG • Virallinen www-vektorigrafiikkamuoto • Tukee linkkien sijoittamista kuvan elementteihin • Tällä hetkellä selaimet eivät tue ilman plugin:ia • Ilmainen plugin saatavilla esim. Adobe:n www-sivuilta • Useimmista vektorigrafiikka piirto-ohjelmista voidaan tallentaa SVG-muodossa.

  30. Tiedostomuodot, Flash • Animaation esitysmuoto • Tällä hetkellä selaimet eivät tue ilman plugin:ia, mutta osa selainten valmistajista toimittaa sen selaimen mukana. • Ilmainen plugin saatavilla Macromedian www-sivuilta. • Animaatio pohjautuu vektorigrafiikaan ja tätä voidaan käyttää animaation sijasta myös kuvien esittämiseen. • Voidaan käyttää myös käyttöliittymäelementeissä, koska kuvan elementteihin voidaan liittää linkkejä ja erilaisia tapahtumia hiiren toiminnoista.

  31. Kuvankäsittely • Tarkoitetaan yleensä bittikarttakuvan käsittelyä tietokoneella ennen sen sijoittamista multimediaesitykseen tai taittoon. • Kuvaa käsitellään myös perinteisessä pimiötyöskentelyssä, mutta silloin esim. valotuskemikaaleilla ja valotuksella. • Kuvia on käsitelty ennen tietokoneitakin, mutta se on ollut erittäin työlästä.

  32. Yleisimmät kuvankäsittely toiminnot • Kuvan rajaus ja koon muutos • Värikorjaus • kuva liian tumma tai vaalea • Kuvan sävyalueen muutos • Terävöitys/pehmennys • Pölyn ja naarmujen poisto • Kuvaelementtien poistaminen ja lisäys • Tekstin lisääminen • Kollaasin, eli kokoelmakuvan muodostaminen • Erilaiset tehostesuotimet • Käyttöliittymän elementtien käsittely

  33. Kuvat www- sivuilla • Www-selaimet tukevat ilman plugin:ia käytännössä GIF-, JPEG- ja PNG- muotoja ja muut vaativat lisäohjelmia • Kuvat sijoitetaan www-sivuille <IMG> merkinnällä

  34. Digitaalisen videon käyttö • Multimedia ohjelmat • pieni koko ja huonompi kuvanlaatu kuin televisiossa • Introt, asioiden havainnollistaminen, elävöittäminen • Video internet verkossa • Hidas latautuminen, streaming auttaa • Digitaali TV • Useampia kanavia samalle kaistanleveydelle • interaktiivinen kaksisuuntainen yhteys, katsojalla mahdollisuus vaikuttaa lähetykseen • DVD-levyt (Digital Versatile Disc) • Levitys formaatti elokuville ja peleille. • Hyvä kuvan ja äänen laatu, erikieliset tekstitykset

  35. Videon tuotantoprosessi • Ennakkosuunnittelu • Idea -> käsikirjoitus • Käsikirjoitus -> budjetti ja aikataulu • Kuvaukset • Toteutetaan käsikirjoituksen mukainen kuvaus • Tekniset ongelmat lähinnä valaistuksessa ja äänen taltioinnissa. • Editointi • Kuvattu materiaali koostetaan kokonaisuudeksi. • Lisätään grafiikka, äänitehosteet , musiikki ja selostus.

  36. Videon käyttö multimediassa • Hyvä video on havainnollinen • Video vakuuttaa ja luo mielikuvia • Käyttäjän tulee voida kontrolloida videota. Interaktiivisuus. • Lähikuvat toiminnoista ja ihmisistä soveltuvat pieneen ruutuun • Videoleike ei saa olla liian pitkä. Alle minuutissa kerrotaan jo paljon • Video on yleensä kompressoitu liikkuvan kuvan vaatiman suuren tilantarpeen vuoksi.

  37. Videon laatu • Videomateriaali vie paljon tilaa ja sen käyttö multimediassa ja internetissä on aina kompromissi laadun ja tiedostojen koon välillä. • Videokuvan koko, resoluutio? • Monta kuvaa sekunnissa näytetään? • Videokuvan pituus? • Mitä videoformaattia käytetään? • Kompressiomuoto ja laatu? • Mihin videota tallennetaan? • Millä laitteilla niitä katsotaan?

  38. Videokuvan koko • PAL videokuvan tarkkuus 768*576 • CCIR 601 standardin tarkkuus 720*576 • Digitaalivideokameroiden PAL signaalin tarkkuus. • PAL kuvassa näytetaan 25 kuvaa sekunnissa • Näyttämällä puolikas kuva kerrallaan saadaan näennäinen piirto taajuus vastaamaan 50 kuvaa sekunnissa -> Kuvan lomitus. (interlace) • Televisiossa käytetään videokuvan lomitusta, tietokoneissa ei. • Valitaan videoeditointiohjelmassa kun tiedetään mihin lopputulos menee.

  39. Kompressointi • PAL kuvan koko digitaalikamerassa 720*576, kuvia näytetään 25 sekunnissa ja jokaiselle pisteelle on varattu 24 bittiä pisteen tilan esittämiseen. • -> tarvitaan levytilaa n. 30 Mtavua sekunnissa • Tarvitaan valtavat määrät levytilaa videon käsittelyyn • Kompressiolla pienennetään käsiteltävien tiedostojen kokoa. • Digitaalivideokamerat käyttävät 5:1 kompressiosuhdetta -> alle 6 Mtavua sekunnissa • Vielä liian isoja CD-levyille ja internettiin -> lisää kompressiota -> koon ja laadun pienennys

  40. Kompression laadun parannus kuvausvaiheessa • Hyvä kamera, mieluummin digitaalinen • Oikein valotettu kuva, valoa riittävästi -> terävämpi kuva. • Käytä jalustaa, pidä kameran liikkeet tasaisina ja rauhallisina • Tausta yksinkertainen, muuttumaton tai tausta pidetään epäterävänä. • Kuvassa mahdollisimman vähän yksityiskohtia

  41. Videoformaatit • Tuotantovaiheessa videot yleensä AVI- tai Quicktime muodossa • Molemmissa on useita videon kompressio tapaa, codec • Editoinnin aikana kompressio on vähäistä että kuvan laatu pysyy mahdollisimman hyvänä • Lopullinen video tallennetaan suuremmalla kompressiolla • Video for windows, AVI • Windows Media • RealVideo • Quicktime, Apple • MPEG

  42. MPEG kompressiotekniikat • M-JPEG, perustuu JPEG- kompressioon • MPEG, videon että äänen kompressioon • MPEG- videomuodot • MPEG-1, VHS-laatu • MPEG-2, CCIR601, DVD ja HDTV • MPEG-4, kuva-, matkapuhelimet, multimedia interaktiivisuus ja mediaelementtien hallinta • MPEG-7, tuleva standardi mediatiedostojen hakupalveluiden parantamiseksi • DV, digitaalivideokamerat

  43. Internet streaming • HTTP-protokolla ei ole tehokas isojen video- ja äänitiedostojen jakelussa internetissä • Video ja äänimateriaalin jakeluun on kehitetty useita streaming protokollia • Yleisimmät video ja äänijakelu formaateilla on omat ratkaisunsa • RealMedia server • Windows Media server • Quicktime streaming server • Haittana sitoutuminen tiettyihin ohjelmistovalmistajiin. • Sitoo myös loppukäyttäjän.

  44. Animaatio • Käytöllä sama tavoite kuin videon kanssa. • Tehostaminen, mielikuvien luonti ja havainnollistaminen • Yleisimmät animaation esitysmuodot: • GIF-animaatio • Shockwave • Flash • Realmedia • Animaatio muutetaan johonkin videoformaattiin

  45. GIF- animaatio • Kuvatiedosto joka sisältää useita eri kuvia joista kukin muodostaa yhden animaatioruudun. • GIF-animaatioon voidaan asettaa aika kuinka kauan mitäkin kuvaruutua näytetään. • Sijoitetaan www-sivuille samalla tavalla kuin normaali GIF-kuva. • Käytetään yleisesti www-mainoksissa ja bannereissa • Toimii käytännössä kaikissa www-selailimissa

  46. Shockwave ja Flash • Macromedian kehittämät animaatiomuodot • Shockwave on laajempi muoto, sillä voidaan tehdä jopa ohjelmia. Tehdään Director ohjelmalla. • Flash on vektorigrafiikkapohjaista animaatiota, jota voidaan tehdä Flash tai Livemotion ohjelmilla. • Molemmille löytyy hyvä tuki eri käyttöjärjestelmille ja erityisesti Flash on aika turvallinen valinta animaatioihin • Selaimet eivät tue ilman plugin:ia, mutta se on hyvin saatavilla.

  47. RealMedia • Animaatiomuoto joka on osa Real-yhtiön kehittämään mediamuotoa. • Animaatiota tuotetaan Real:in omilla sovelluksilla ja realmedialle on hyvä tuki eri käyttöympäristöihin. • RealMedia tukee ääntä, videota ja animaatiota. • Selaimet eivät tue ilman plugin:ia, mutta se on saatavilla lähes kaikille selaimille.

  48. Animaatio videomuodoissa • Muunnetaan animaatio johonkin videomuotoon, • Voidaan näyttää samoilla ohjelmistoilla kuin muutkin videot. • Voi syntyä isoja tiedostoja.

  49. Ääni ja musiikki • Varoitus ja huomioäänet • Käyttöjärjestelmän tai ohjelman perusääniä, jotka pyrkivät kiinnittämään käyttäjän huomion. • Musiikki • Viihdyttävä elementti, joka luo tunnelmaa tai toimii aikaa ja paikkaa ilmaisevana keronnallisena elementtinä.

  50. Ääni ja musiikki • Puhe • Asiasisältö, mutta lisäksi luo mielikuvan puhujasta ja hänen suhteestaan asiaan. • Tietoa-antava, Ohjaava opas, kommentaattori, asiaan johdattava puhuja. • Tehosteet • Tukevat kuvaa tai kertovat kuvan ulkopuolisia asioita. • Korostaa tapahtumaa ja luo tunnelmaa.

More Related