Šta je novo?

Photoshop tutorial za animated GIF by Igoritza

Igoritza

Banned
Banovan
Učlanjen(a)
19.10.2007
Poruke
2,297
Poena
229
dakle - odma da zamolim bez hejta. poenta ovog tutorijala je da pokazem ljudima kako da rade gif-ove jer mnogo ljudi ni ne zna da to moze da se radi u Photoshop-u. i to podjednako kvalitetno kao i u Adobe fireworks.

note - sam krajnji gif u ovom tutorijalu je retardiran, i bezveze, i sluzi samo da bih pokazao kako idu komande.

otvorite PSCS4 i kliknete na New. i sad ide jako bitan deo:

na sliku stavite SVE shto planirate da ima u animaciji, po lejerima. evo primer, ja hocu da napravim gif, koji reklamira VW Passat B6. dakle, na sliku stavljamo u lejerima ove slike:

okx455.jpg


vw_logo.gif


i tekst, koji cu u daljem objashnjenju da prikazem.

slike logo-a i slike auta stavljamo opcijom - file > place, kako bi ih dobili u novom lejeru.

obratite paznju da su oba fajla gifovi, odnosno da nemaju backgroun, u PS se to radi tako shto kada imate render (gore objashnjen kako se pravi), u novom fajlu na koji cete da pejstujete lejer, stavite da nema background, vec transparent, i sachuvajte sliku kao .PSD fajl, da bi mogli opcijom place da je stavite u projekat pravljenja gif-a.

e sad, kad smo sve stavili, treba da izgleda ovako:


287nlu8.jpg


kao shto vidite, na slici sada imamo 4 lejera - kola, slova VW, slova PASSAT, i Logo. dalje cete shvatiti zashto su VW i PASSAT u odvojenim lejerima.

sada kada smo sve to strpali, moramo da odredimo pozadinu za nash logo, odnosno prelaz iz jedne u drugu, kako cu ja da uradim. za to sam izabrao prelaz iz crne, u svetlo plavu.

dodajte josh dva lejera gde je u jednom cela crna boja, i u jednom cela plava boja.

e sad, ide glavni trik, kliknite na Window > Show all menus > Animation. ovako:

b6ro1z.jpg


pojavice vam se ispod prozora za crtanje mali slide show kontroler. ovakav:

2v3ifxt.jpg
 
sada, kada imate to, iskljuchite SVE lejere za gledanje. to je glavni trik kod gifa, jer on pamti za frejm samo ono shto ste vi stavili da se vidi, to se iskljuchuje na lejer komandama ovde -

2earrpw.jpg


sada, na animaciji se vidi nishta :D e, vi ukljuchite crni lejer, sa "oko" kontrolom, da se vidi. i to je prvi frejm.

sledi dupliranje lejera, kliktanjem na "duplicate layer" u ovom slajd show prozoru (ikona prva levo pored kante za brisanje obelezenog frejma)

duplirani lejer je automatski obelezen, te sada njega kontrolishete.

obelezite kola da se vide, i sa move tool pomerite kola skroz levo. da se vidi samo far pasata.

sledi duplicate layer, i dobijamo josh jedan isti, gde viri far. ovako:

2v34ojn.jpg


sada, u trecem lejeru (koji je obelezen automatski) pomerite auto do pozicije gde ce da stoji na slici.

i sada, ide opcija Tween. u frame prozoru, imate u gornjem desnom coshku (ispod X) menu za animaciju, i kliknite na tween.

Tween je funkcija, koji za obelezeni, i frejm pre njega odradjuje ubacivanje dodatnih frejmova, na osnovu promena koje su izvrshene izmedju ta dva frejma. evo tween podeshavanja:

2462trq.jpg


kao shto vidite, za finese u gifu postoje i parametri na Twwen funkciji.

sada, ubacujemo dodatnih 10 frejmova (podesheno u Tween) da izgleda kao da auto dolazi iz kraja u centar slike.

ovako izgleda animacija sada:

vidwz5.jpg


sada, isto to radimo i sa pozadinom, kada u duplicate layer stavite da se pored crne vidi i plava(plava u rasporedu lejera mora da bude iznad crne), Tween odradi prelaz takodje.

sada, stavljamo duplicate layer, i stavljamo da se vidi VW. dupliramo i taj, i stavljamo da se vidi i PASSAT. stavljamo da ti frejmovi traju malo duze, na 0.5 sekundi. (sve ostale lejere sam stavio na 0.1, kako bi imali efekat kretanja)

nakon toga, isti trik kao i sa kolima, radimo i sa VW Logo.

poslednji frejm stavimo da traje 3 ili vishe sekundi, da bi konachna slika ostala da se vidi.

sada, Fajl sachuvamo tako shto klikcemo na File > Save for Web & Devices > save.

i dobijamo GIF ovakvog oblika:

1pbdz7.gif
 
Super je ovo! Hvala za temu, sad neću morati da jurim tutorijale po netu :)
 
A da mu se okreću točkovi. :)

Elem, baš pre neki dan treba da napravim neki Anim GIF tražim ImageReady kad ono ukinut i ubačen kao Animation menu u PS CS4.

Dodao bih još da ako neko ima bar malo iskustva sa Flash animacijama, a neće da pravi flash animacju, može u donjem desnom ćošku da se prebaci sa frame u Timeline mod i biće kao kod kuće.

Tnx za tutorial.
 
Hvala Igorica, bas si pomogao zajednici svojim nesebicnim prenosenjem znanja. To je tako nesebicno, plemenito i veliko. Mislim da ne gresim ako se jos jedanput, ovaj put u ime svih clanova zahvalim.
Pozdrav and keep up the good work
 
Igorica, kralj si. Šteta što su izbacili podršku za SWF iz Photoshopa od CS3... :(
 
Igorica, nekrunisani:D Moze jedna 240x320 animirana, onako... apstraktna. Za forumskog?:)
 
daj specifikacije, shta apstraktno bash ocesh, i u koju svrhu ? :)
 
Nesto za mobilni wall. Nesto onako, moze i neka diskretnija animacija. Samo da bude brandfree, da ne pise nokia:d i to. Ako dobijes neko kreativno nadahnuce pa budes vanserijski produktivan, mozes i na PP da pustis:eyebrows: a moze i ovde,za celo stado:p
 
Hvala za tutorijal. Odlican je.

P.S. A kako prave sad ove reklame(bannere) koje izgledaju kao gif-ovi, samo sto mozes da ucestvujes(npr. klikces na "push" i lik na banneru radi sklekove, posle petog se otvara sajt)? :)
 
to je flash sadrzaj.

zapravo je sad jako korisno u web dizajnu, kada znash samo HTML i CSS, da neki flash sadrzaj ubacish uz swfobject komandu, i da izgleda fensi :)

flash sadrzaj je SWF formata, i izradjuje se u Flash CSx programu, mada postoji varijanta gde se gif prebaci u swf i obrnuto, kog mrzi da radi iznova neshto shto je vec jednom odradio.

a taj shto radi sklekove :d njega zaobidji, jer je to uglavnom spam :)


@qazqaz - sutra, vecheras zavrshavam dizajn za Intesa Takmichenje :)
 
@qazqaz - sutra, vecheras zavrshavam dizajn za Intesa Takmichenje :)

Dammit!!! Totalno sam zaboravio na ozivi plastiku konkurs, a za tri pretrpana dana tesko da cu moci nesto da uradim :( Imao sam odlicnu ideju, baaaahhhh jbni office, sto sam ga uopste i poceo gledati.
Sry za off, morao sam semalo izduvati :( Jos sam i zaboravio da se prijavim.

BTW da li radis sve u PS-u ili koristis Corel? I gde si nabavio font za tekst na kartici? Ako smem pitati naravno :D
 
Poslednja izmena:
Dammit!!! Totalno sam zaboravio na ozivi plastiku konkurs, a za tri pretrpana dana tesko da cu moci nesto da uradim :( Imao sam odlicnu ideju, baaaahhhh jbni office, sto sam ga uopste i poceo gledati.
Sry za off, morao sam semalo izduvati :( Jos sam i zaboravio da se prijavim.

BTW da li radis sve u PS-u ili koristis Corel? I gde si nabavio font za tekst na kartici? Ako smem pitati naravno :D

Font mi je dao drugar, ostavicu ti do ujutru link u inbox-u.

sve radim u Adobe paketu, ne diram Corel, jer ga ne znam :)

shto se dizajna i takmichenja tiche - mislim da ce ovde da se dosta ceni dizajn minimalizma, vishe nego ne znam kakvo ludilo na karticama.

tako da - ako imash ideju, mislim da bi mogao da je ostvarish za kratko vreme, moja ideja je slichan fazon, dakle, elegantna jednostavnost :)
 
Hvala mnogo unapred.
Inace minimalizam se podrazumeva, mada nisam siguran da cu stici celu seriju izgurati do 19-og :(
Pokusacu u svakom slucaju. Hvala jos jednom.
 
Font mi je dao drugar, ostavicu ti do ujutru link u inbox-u.

sve radim u Adobe paketu, ne diram Corel, jer ga ne znam :)

shto se dizajna i takmichenja tiche - mislim da ce ovde da se dosta ceni dizajn minimalizma, vishe nego ne znam kakvo ludilo na karticama.

tako da - ako imash ideju, mislim da bi mogao da je ostvarish za kratko vreme, moja ideja je slichan fazon, dakle, elegantna jednostavnost :)

Postavi ovde rad kad zavrsis, da vidimo to minimalisticko nadahnuce.
Naravno ako je dozvoljeno :)

:wave:
 
Igorice de si bre covece? Ide li?
 
a, evo, danas cu da ti skuvam neshto :)

shto se tiche intesa konkursa - batalio sam. dobio sam tip od drugara dizajnera da su nagrade vec uveliko podeljene, kao i proshli put. msm, ovo je dizajn koji je pobedio, chisto da se razumemo, videli ste a svi vec x puta:

maestro-card.jpg


wow, 5 kugli, svaka chast za dizajn ko god da je uradio, kako se ja nikad ne setim 5 kugli.
 
minimalizam, animirani detalj van fokusa, dominantna NEsvetla boja u gornja dva kvadranta slike, 240x320, interesantno i smelo:p
 
hek, nisam imao inspiraciju za sam gif, shta i kako i tako to, pa sam uradio jedan Udri grome Benchmark:

20u50xw.gif


ubuduce bi bilo jako lepo da mi date neku ideju, shta zamislite, ja to na .gif fajl :)
 
^ bolje da si stavio telekom logo nego taj bench, trenutno je in:d

Henrique_Kinder%20Rabbids%20by%20Henrique%20Pacheco.jpg

odavde izvuci 100 ideja i podari svetu cudo, moj ti Igorica
 
Ovde ima 3D modelovanja i rendera...
 
qazqaz oce da ja napravim neko ludilo, koristeci ilustrator, fireworks, photoshop, i eventualno maya-u :d

uskoro novi tutorijal :) nashao sam neshto jako korisno :)
 
YO video sam u tebi potencijal, pa te guram s one strane. Ovde vecina hoce da umanji tvoje delo jer su ljubomorne, male duse koje se plase tvojih multidisciplnarnih talenata i to cak prikazuju ovim javnim kanalima. Keep up the good work:alo:
 
ima i besplatnih programa za pravljenje animacija, nema svako para za photoshop :p
 
Igorice zavrsi li ludo dobar "gif za narod"?
 
Vrh Dno