Avtor: -primož- 04.09.09

Animirajte odpirajoča se vratca

Vodič vam bo pokazal, kako ustvariti animacijo z odpiranjem.

*Spodaj je dodanih še nekaj idej, kako izboljšati animacijo.

1. Ustvarite nov dokument. Moj bo velikosti 350x120 pikslov. Ozadje (Paint Bucket Surprised

) naj bo rjave barve (#56321e).

2. Sedaj v orodjarni izberite Custom Shape Tool Wink

. Za obliko nastavite ograjo (Tracks = železniška proga), za barvo pa temnejšo rjavo (#412615). Ograjo razpotegnite čez celotno površino in še čez, če je treba.

3. Zdaj boste naredili okvirček, ki se bo prikazal, ko se bodo vratca odprla. Za ta korak v orodjarni izberite Rectangle Tool Sad

in v sredini razpotegnite okvirček (280x78). Še pred tem za barvo ospredja določite oranžno (#FF9F00).

4. Okvirčku sedaj dodajte Stroke in Pattern Overlay. Pojdite v zgornji meni in izberite Layer > Layer Style > Stroke.

5. Sedaj bomo naredili zgornji in spodnji višji rob. Zgornji rob je dimenzije 284x7, spodnji rob pa 284x8.

Naredite nov Layer (Layer > New > Layer). V orodjarni izberite Zoom Tool Surprised

(povečevalno steklo) in povečajte sliko za večjo natančnost. Ko boste povečali sliko pojdite znova v orodjarno in izberite Rectangle Marquee Tool Wink

ter potegnite zgornji in spodnji rob, kot kaže slika. Najprej potegnite zgornjega, nato pa držite tipko Shift in potegnite še spodnjega. Oba pobarvajte s Paint Bucket Toolom Surprised

6. Layerju z robovoma sedaj dodajte Layer style Inner Shadow.

7. Sedaj bomo naredili sonček v ozadju, da notranjost ne bo pusta. Pojdite v orodjarno in izberite Custom Shape Tool Wink

ter za obliko nastavite sonček. Sonček razpotegnite preko oranžnega okvirčka.

8. Ker ne sme štrleti čez zgornji in spodnji rob ga bomo malo porezali. Desno kliknite na Layer s sončkom in izberite Rasterize Layer.

Sedaj v orodjarni izberite Rectangle Marquee Tool Wink

in označite sonček med robovoma. Nato pojdite v zgornji meni in izberite Select > Inverse ter pritisnite tipko Delete. Opacity tega Layerja nastavite na 23%.

Po želji lahko naredite kopijo tega Layerja (Ctrl+J) ter dodate ozadju še kakšen sonček.

9. Na vrsto je prišel tekst v notranjosti. V orodjarni izberite Horizontal Type Tool Smile

. Za pisavo nastavite Bradley Hand ITC, za barvo belo (#ffffff), za velikost pisave 20. Po želji lahko dodate tudi bold in italic efekt.

10. Temu tekstu sedaj dodajte še Outer Glow in Stroke.

11. Zdaj pridejo na vrsto drsna vratca. Pojdite v zgornji meni in izberite Layer > New > Group, da ustvarite novo skupino Layerjov. Jaz sem jo poimenoval "vrata desna".

Ustvarite nov Layer. Izberite Marquee Tool Wink

in označite območje, kjer želite, da bodo desna vrata (velikost: 142x63). Označen okvirček pobarvajte na svetlo oranžno barvo (#Ffad5c).

12. Layerju z desnimi vratci sedaj dodajte sledeča stila: Stroke in Bevel and Emboss.

13. Poskrbeti moramo tudi za puščice. V orodjarni izberite Custom Shape Tool Wink

in določite obliko puščice. Sedaj držite tipko Shift ter ustvarite eno puščico.

14. Sedaj tej puščici dodajte Gradient Overlay, Bevel and Emboss in Stroke.

37_23_bevell_and_emboss

37_24_gradient_overlay

37_25_gradient_overlay_barve

37_26_stroke

15. Da vam ne bo potrebno še ostali dve puščici po istem postopku narediti le na tipkovnici dvakrat pritisnite Ctrl+J, da naredite dodatni dve puščici. Sedaj te tri puščice razporedite tako, kot vam kaže slika.

16. Leva vratca naredite po istem postopku … šala šala Very Happy

Leva vratca naredite tako, da desno kliknete na ime skupine (vrata desna) in izberete Duplicate Group. Novonastalo skupino sem poimenoval vrata leva. Leva vratca sedaj z Move Toolom Wink pomaknite na levo stran.

17. Puščice ne gledajo v pravo smer! Označite Layerje s puščicami in pojdite v meni ter izberite Edit > Transform > Flip Horizontal.

18. Zdaj pridejo na vrsto priprave za animacijo. Kot ste lahko videli pri končnem izdelku se vratca skrijejo za ozadje. Ozadje pa je sedaj čisto spodaj.

Označite Layer z ozadjem in pritisnite Ctrl+J, da se vam naredi kopija ozadja. V orodjarni izberite Marquee Tool Wink ter izberite območje na levi in desni strani vratc, kot kaže slika (uporabite tipko Shift). Nato pojdite v meni in izberite Select > Inverse.

19. Ta del, ki se vam je na koncu označil boste sedaj izbrisali. POMEMBNO: Še prej pa premaknite ta Layer čisto na vrh. V orodjarni izberite Radirko Surprised in začnite brisati. Priporočam vam, da si za stil radirke izberete čopič, da bo prehod lepši.

37_34_pred_izbrisom

37_35_po_izbrisu

20. Še zadnji dve podrobnosti, kar se tiče oblikovanja. Prva sta dva robova na vsaki strani vratc. Ustvarite nov Layer in ga pomaknite najvišje, kot ga lahko. Sedaj v orodjarni izberite Marquee Tool Wink in označite oba robova, kot kaže slika (Shift). Pri tem vam priporočam, da si pomagate s povečevalnim steklom. Robova pobarvajte s Paint Bucket Toolom in sicer na zamazano oranžno barvo (#df9a50).

21. Še zadnja podrobnost pred animacijo. Ustvarite nov Layer. Z Marquee Toolom označite območji na levi in desni strani vratc. V orodjarni izberite Gradient Tool Sad ter nastavite barvni prehod iz črne v prozorno. V obeh okvirčkih potegnite tako, kot vam kaže slika. Opacity tega Layerja nastavite na 15%.

37_40_senca

37_39_oznaceni_senci

37_41_pred_animacijo

Čas za animacijo!

22. Odprite okenček za animacijo. Window > Animation.

Pogled nastavite na pogled s slikicami (desno spodaj).

Ustvarite novo slikico in nastavite čas na No delay (0 sekund).

23. Sedaj mora biti izbrana druga slikica! Izberite skupino Layerjev Vrata desna (Group) ter jo pomaknite na desno. Isto storite z levimi vratci, le da jih pomaknite na levo.

24. Kliknite na gumb za dodajanje vmesnih slikic in nastavite vrednost na 30.

25. Zadevo le še začinite s tem, da nastavite ponavljanje na forever in čas prikaza prve slikice na 1 sekundo, zadnje pa na 2 sekundi … naj se sporočilo vidi.

26. Našo umetnijo moramo sedaj še shraniti, zato pojdite v zgornji meni in izberite File > Save for Web and Devices in kliknite Save. Pred shranitvijo mora biti nujno izbrana prva sličica.

In to je zdaj ta del!

Kako izboljšati animacijo. Z malo dela lahko naredite tudi, da se vratca zaprejo … tako je animacija neprekinjena in lepša na pogled (koraki 22-25). Po možnosti naredite še tako, da vam tekst znotraj utripa oz. spreminja prosojnost (opacity). Veliko je še možnosti!

Zaključek: Upam, da Vam bo ta vodič v veliko pomoč; in tudi, če točno take animacije ne boste potrebovali se boste s pomočjo vodiča veliko naučili o oblikovanju v Photoshopu.

*.PSD datoteko lahko najdete med Prenosi.

[ Na vrh ]

Komentiraj:

Sorodni vodiči
Mahanje Vrteča vrtavka Animiran Woofer Animiran prikaz nalaganja Televizija brez signala	Animacija s premikajočimi puščicami Animacija z zastavo Preverjanje prstnega odtisa - Photoshop animacija Sezam odpri se - Photoshop animacija Padajoče snežinke – Photoshop animacija