SVEUČILIŠTE U ZAGREBU

GRAFIČKI FAKULTET

SEMINARSKI RAD Cinemagraph

Nositeljica kolegija: Studentice:

Maja Strgar Kurečić Andrea Bobić, Ella Murseli

Zagreb, 2018.

SADRŽAJ

1. POKRETNA FOTOGRAFIJA

1.1.Povijest pokretne fotografije

1.1.1. Phantascope

1.1.2. Thraumatrope

1.1.3. Phenakistiscope

1.1.4. Stroboscope

1.1.5. Zoetrope

1.1.6. Choreutoscope

1.1.7. Kineograph

2. GIF (Graphic Interchange Format)

3. CINEMAGRAPH

3.1.Izrada cinemagrapha

3.1.1. Snimanje

3.1.2. Ubacivanje snimke u Photoshop

3.1.3. Odabir prve i zadnje sličice

3.1.4. Spajanje layer-a

3.1.5. Korištenje keyframes-a

3.1.6. Definiranje zamrznutog dijela kadra i onoga u pokretu

3.1.7. Spremanje i izvoženje cinemagraph-a za web

4. LITERATURA

1. POKRETNA FOTOGRAFIJA

Pokretnu fotografiju možemo definirati kao „lažni“ video, odnosno statičnu fotografiju na

kojoj se samo jedan dio ili detalj pokreče te na taj način ostavlja dojam video snimke. Pokretna

fotografija dobiva se snimanjem niza fotografija ili videa te se kasnijom obradom u softveru za

uređivanje slika stavlja u kompoziciju beskonačne vrtnje korištenjem animiranog GIF formata.

GIF format je najčešći predstavnik pokretne fotografije koji sliku kompenzira u 256 boja,

smanjuje joj kvalitetu i manjeg je kapaciteta [1].

1.1. Povijest pokretne fotografije

Povijest pokretne fotografije seže u vrijeme prvih oblika čovjekovih izražavanja slikovnom

metodom kako bi prikazao životinje u pokretu i događaje iz života. Od izuma početkom 19.

stoljeća G. Robertsom „službeno“ započinje razvoj pokretne fotografije koji rezultira razvojem

cinematographne kamere s kojom se može reći da je dovršen izum filma što je dokaz na koji su sve

način utjecali izumi vezani uz pokretnu fotografiju. Također, razvojem tehnologije i softvera za

uređivanje slika postoje razni „formati pokretne fotografije“ od kojih su najpoznatiji GIF format,

cinemagraph i dr..

1.1.1 Phantascope

Belgijanac Gasper Robertson 1800. godine izumio je uređaj koji je nazvao phantascope. Na

slici 1. prikazan je phantascope. Rad uređaja temeljio se na stražnjoj projekciji koja se postizala na

način da se projektor približavao ili udaljavao od projekcijskog platna. Također među prvima je

sliku popratio tonskim komponentama i održao brojne uspjele projekcije (Pariz, Budimpešta i Beč)

[2].

Slika 1. Phantascope

1.1.2 Taumatrope

Početkom 19. stoljeća razvojem raznih optičkih igračaka za prikaz pokretnih slika škotski

liječnik John Ayrton Paris 1825. godine osmislio je taumatrope. Na slici 2. prikazan je taumatrope.

Taumatrope se sastoji od kartončića na kojem se na jednoj strani nalazi krletka, a na drugoj ptica. S

desne i lijeve strane kartončića nalazi se končić čijom se rotacijom između prstiju kartončić rotira i

prikazuje sliku ptice u krletci. Tom najpoznatijom optičkom igračkom prikazan je princip sinteze

dviju slika u jednoj [4].

Slika 2. Thraumatrope

1.1.3 Phenakistoscope

1832. godine Joseph Antoine Plateau izumio je rani stroboskop koji se zove phenakistoscope.

Na slici 3. prikazan je phenakistoscope. To je prvi uređaj koji je prikazivao iluziju pokretne

fotografije. Sastojao se od dva diska, jednog s uzdužnim prorezima jednakog razmaka i drugoga

koji je sadržavao sekvence prikaza slike. Kada su se ta dva diska rotirala određenom brzinom dobio

bi se efekt animacije odnosno pokretne fotografije [5].

Slika 3. Phenakistoscope

(https://www.google.hr/search?q=Phenakistoscope&rlz=1C1SQJL_hrHR797HR797&tbm=isch&tbo=u&source=

univ&sa=X&ved=2ahUKEwiYjtjRipHfAhXLmLQKHUTPAtgQsAR6BAgFEAE&biw=1057&bih=910#imgdii=82o-

dRqidbKjDM:&imgrc=2f8ppQqp8hIJ4M: )

1.1.4 Stroboscope

Zasluge izuma stroboscopea pripisuju se Plateau iako ga je profesor Simon von Stampfer

nezavisno izumio i dodijelio mu ime koje se i danas koristi. Na slici 4. prikazan je stroboscope. To

je izum koji se sastoji od izvora svijetla i diska s radijalnim prorezima prilikom rotacije određene

brzine prikazuju određenu projekciju [6].

Slika 4. Stroboscope

1.1.5 Zoetrope

1834. godine George Horner izumio je zoetrope, uređaj za koji se smatra ranom inačicom

projektora . Na slici 5. prikazan je zoetrope. Sastojao se od bubnja unutar kojeg se nalazio niz slika

koje su zajedno tvorile određeni pokret. Okretanjem bubnja dobivala se projekcija pokreta kojeg su

slike prikazivale. Koristio se za slow motion ili efekt „ubrzavanja“ [7.].

Slika 5. Zoetrope

1.1.6 Choreutoscope

1866. Lionel Smith Beale prvi je izumio choreutoscope koji 1884. William Charles Huges

usavršava. Na slici 6. prikazan je choreutoscope. Hugesov uređaj je radio na principu da je niz

pojedinačnih slika prosvjetljavan svjetiljkom te prikazivan brzo i uzastopno, a njihova je izmjena

prikrivana sa giljotinskim zaslonom, te su slike mijenjane okretanjem ručice, sustavom zupca i

malteškog križa [8,9].

Slika 6. Choreutoscope

1.1.7 Kineograph

1868 John Barnes Linnett patentirao je kineograph. Na slici 7. Prikazan je kineograph.

Kineograph se smatra prvom formom animacije s linearnim sekvencama a ne kružnim (kao što je

phenakistoscope). To je slikovnica koja se sastoji od crteža mijena pokreta koji pri brzom

prelistavanju ostavljaju dojam pokretnog crteža odnosno fotografije [10].

Slika 7. Kineograph

2. GIF (Graphic Interchange Format)

1987. tvrtka CompuServe objavila je GIF (Graphic Interchange Format). GIF je

bitmap format slike koji podržava 8 bitova po pikselu koristeći referentnu paletu od

maksimalno 256 boja. Konvertiranjem izvornih bitmapa (BMP, JPG, TIF, PNG i dr.) u GIF,

drastično se smanjuje broj nijansi kojima se interpretira sadržaj, što rezultira stepeničastim

prijelazima pri pretapanju boja i gubitkom finijih detalja, a najčešće i prejakim kontrastom

boja. Zbog ograničenosti bojama GIF je neprikladan za reprodukciju slikovnih datoteka u boji,

a skromna memorijska potreba čini ga idealnim za prikaz minijaturnih grafika, bannera,

logotipa ili kao dio grafičkog dizajna web stranice [11]. GIF je komprimirani format, no za

razliku od JPEG-a, kompresija kod GIF-a ostaje bez slikovnog gubitka zato što je GIF

zasnovan na protokolu kompresije pod LempelZiv-Welch formata (LZW) [12].

3. CINEMAGRAPH

Cinemagraph je pojam koji povezuje tehnike manipulacije vremena (karakteristične za

film i video/animaciju) sa statičnim elementom (fotografijom). Na slici 8. prikazan je

cinemagraph. Drugim riječima cinemagraph je animirani GIF format postignut neprekidnim

ponavljanjem frameova videa (fotografija) sa suptilnim pokretom koji se nalazi unutar scene.

Sami koncept „živih fotografija“ predstavila je J.K. Rowling u svojim Harry Potter knjigama

koje su kasnije vizualizirane u Harry Potter filmovima. Sam naziv „cinemagraph“ osmislili su

američki grafički dizajner Kevin Burg i modni fotograf Jamie Beck koji su oživljavanjem

klasičnog animiranog GIF formata s zanimljivim efektima koristili taj pristup za animaciju

novijih modnih i novinskih fotografija. Obično su napravljeni od niza fotografija koje su

pomoću programa za uređivanje slika spojeni u niz neprekidnog ponavljanja frameova u

kojima je potrebno istaknuti gibanje dijela predmeta looping mode-om (ponavljajućim

modom), a ostatak sadržaja fotografije ostaviti statičnim.

Slika 8. Cinemagraph

(https://www.movidiam.com/portfolio/14184/cinemagraph-the-natural-history-museum-london )

3.1. Izrada cinemagrapha

3.1.1 Snimanje

Za snimanje cinemagraph-a nužno je da snimka bude potpuno stabilna, što znači da je

potreban stativ, ili kameru staviti na neku stabilnu površinu. Ovaj primjer sniman je mobitelom na

nepomičnoj površini. Neki od ostalih primjera koji nisu snimljeni na takvoj površini, već iz ruke, su

prije samog procesa pravljenja cinemagraph-a ubačene u program Adobe After Effects, gdje su

naknadno stabilizirane.

3.1.2 Ubacivanje snimke u Photoshop

Cinemagaph nastaje u Adobe Photoshopu u Motion Workpace-u, a namještanje istog. Slika 9.

prikazuje namještanje motion workspace-a.

Slika 9. Kako namjestiti Motion Workspace

U timeline-u je prikazan video u kojemu se moguće gibati frame po frame (sličicu po sličicu).

Cinemagraph je video koji se vrti u krug beskonačno mnogo puta pa je stoga bitno da su prva

i zadnja sličica videa iste. Na slici 10. prikazano je rezanje videa. Za izradu, potrebno je

odrediti te sličice, no, to ne smije biti i prva sličica samog videa.

Slika 10. rezanje videa

3.1.3 Odabir prve i zadnje sličice

Najprije je potrebno odrediti dužinu videa. Što je snimka koja će se vrtjeti u beskonačnost

kraća, to će se brže učitavati, stoga je najbolje odrediti što kraći dio snimke za cinemagraph. Ovdje

je odabrana jedna sekunda videa. Kada tu sekundu pregledavamo na loop, skok sa zadnje na prvu

sličicu je odmah vidljiv pa snimka ne izgleda fluidno. Zbog toga je odabrani dio snimke negdje u

sredini videa, a ne na samom početku ili kraju. Sljedeće što je potrebno napraviti je duplicirati

video u Layers tab-u. Na slici 11. prikazan je duplicirani video. Drugi video, odnosno drugi layer,

koji je za sada isti kao i prvi treba pomaknuti na kraj prvog video.

Slika 11. duplicirani video

3.1.4 Spajanje layer-a

Cilj nam je stvoriti video kojemu je prva i zadnja sličica ista, što se postiže spajanjem dva

videa. Bitno je napomenuti da još uvijek postoje dijelovi koji su sada izrezani iz videa. U drugom

layer-u je potrebno ponovno dodati onaj dio snimke koji je prije samog odabranog dijela snimke, te

izrezati sve poslije jedne sekunde. Sada je snimka u drugom layer-u snimka koja završava sličicom

kojom snimka u prvom layer-u počinje. Na slici 12. Prikazana su oba layer-a nakon rezanja drugog

layer-a.

Slika 12. prikaz oba layer-a nakon rezanja drugog layer-a

3.1.5 Korištenje keyframes-a

Da bi se dobila snimka koja se fluidno vrti beskonačno mnogo puta, snimka u prvom layer-u,

prije samog kraja mora postati prozirna, odnosno, ono što mora biti vidljivo je snimka u drugom

layer-u, koja završava na istom mjestu gdje prva snimka počinje. Da bi se to postiglo, potrebno je

spustiti izbornik ispod prve snimke, gdje se nalazi opcija Opacity kojom upravljamo

transparentnosti videa. U trenutku u kojem počinje druga snimka, vidljivost prve snimke mora biti

na 100%, a na samom kraju mora biti 0%. To se postiže postavljanjem keyframes-a. Slika 13.

prikazuje položaj keyframes-a.

Slika 13. položaj keyframes-a

3.1.6 Definiranje zamrznutog dijela kadra i onoga u pokretu

Dio kadra mora biti nepokretan, a to se postiže biranjem sličice (frame-a) snimke koja se

stavlja u novi layer koji će biti na vrhu. Slika 14. prikazuje layer s fotografijom koji se nalazi na

vrhu layer-a. Na njemu je potrebno napraviti masku, odnosno označiti dio kroz koji će se vidjeti

snimka u pokretu ispod fotografije. Slika 15. prikazuje masku na layer-u s fotografijom.

Slika 14. layer s fotografijom koji se nalazi na vrhu layer-a

Slika 15. maska na layer-u s fotografijom

3.1.7 Spremanje i izvoženje cinemagraph-a za web

Sada gotov cinemagraph treba spremiti kao gif i pripremiti za web. Na slici 16. prikazano je

spremanje za web.

Slika 16. spremanje za web

Kada se otvori prozor, neke postavke treba promijeniti, od kojih su najvažnije opcije looping

options koje treba staviti na forever, i format zapisa koji treba biti gif. Na slici 17. prikazan je prozor

save for web.

Slika 9: Save for Web prozor

4. LITERATURA

1. https://hr.wikipedia.org/wiki/Povijest_filma

2. https://hr.wikipedia.org/wiki/Povijest_filma

3. http://www.enciklopedija.hr/natuknica.aspx?ID=42615

4. https://en.wikipedia.org/wiki/Thaumatrope

5. https://en.wikipedia.org/wiki/Joseph_Plateau

6. https://en.wikipedia.org/wiki/Stroboscope

7. https://whatis.techtarget.com/definition/zoetrope

8. http://www.mhs.ox.ac.uk/exhibits/fancy-names-and-fun-toys/choreutoscope/

9.

https://books.google.hr/books?id=WVVX4NHS8TwC&pg=PA155&lpg=PA155&dq=Choreutosc

ope+1884&source=bl&ots=xFhNpE4Qly&sig=XdjsuvZBxi_CPMl3f2_83IRCRbY&hl=hr&sa=X

&ved=2ahUKEwjr7s6W8ZDfAhWJiIsKHTFoBAgQ6AEwB3oECAUQAQ#v=onepage&q=Chor

eutoscope%201884&f=false

10. https://en.wikipedia.org/wiki/Flip_book

11. https://hr.wikipedia.org/wiki/GIF

12. https://www.tportal.hr/tehno/clanak/gif-sve-sto-morate-znati-o-omiljenom-formatu-

buntovniku-na-internetu-20170531

13. http://www.niewland.com/cinemagraphs/Framed_In_Time_Niewland_MRP_2012.pdf