Avtor: -primož- 26.09.09

Popestrite vaše napovedi sledečih dogodkov

Vodič vam bo pokazal, kako v Photoshopu narediti animacijo s puščico, ki odkriva in zakriva besedo ali dve. To animacijo lahko uporabite, kot napoved kakšnega sledečega dogodka, ali poudarite kakšno akcijo, ki jo izvajate, ali pa jo preprosto uporabite na kakšnem svojem bannerju.

Pa začnimo!

1. V Photoshopu ustvarite nov dokument. Moj bo velikosti 250x100 pikslov. S Paint Bucket Toolom Surprised

pobarvajte ozadje na bež barvo (#fff5d4).

2. Sedaj ustvarite novo skupino Layerjov. Pojdite v meni in izberite Layer > New > Group. Poimenujte jo "prvi premik".

3. Sedaj uporabite Marquee Tool in na sredini razpotegnite okvirček velikosti 144x33 pikslov oz. odvisno, koliko dolgo besedo boste uporabili (npr. Vodiči). Okvirček s Paint Bucket Toolom pobarvajte s črno barvo.

4. Sedaj v orodjarni izberite Custom Shape Tool Wink

. Za obliko nastavite puščico in jo razpotegnite čez okvirček. Med ustvarjanjem držite tipko Shift, da bo puščica prave oblike. Moja puščica je visoka 33 pikslov.

5. Sedaj tej puščici dodajte Layer Style in sicer Inner Shadow, Bevel and Emboss in pa Stroke. To naredite tako, da greste v meni in kliknete Layer > Layer Style > Inner Shadow. Vrednosti nastavite tako, kot kaže spodnja slika.

6. Ko vse to opravite na tipkovnici pritisnite Ctrl+J, da naredite kopijo te puščice. Kopijo sedaj s pomočjo Move Toola Wink

premaknite na desni rob črnega okvirčka. Kopijo puščice tudi prenesite na vrh, izven skupine "prvi premik".

7. V orodjarni sedaj izberite Horizontal Type Tool Smile

in zapišite želeno besedno. V mojem primeru bo to beseda "Vodiči". Nastavitve pisave si poglejte spodaj. Layer s tekstom mora biti v Skupini "prvi premik".

8. Sedaj ustvarite novo skupino Layerjev. Poimenujte jo "drugi premik".

9. Ustvarite nov Layer (Layer > New > Layer). V orodjarni nato izberite Rectangular Marquee Tool in na desni strani razpotegnite okvirček velikosti 62x29 pikslov. S Paint Bucket Toolom ga pobarvajte s katerokoli barvo.

10. V orodjarni izberite Marquee Tool Wink . Na sezamu Layerjev kliknite na ikono od ene izmed puščic. Nato s pomočjo navigacijskih tipk na tipkovnici označbo prestavite na rob notranjega okvirčka. Na tipkovnici držite tipko Shift in z Marquee Toolom označite še ostali del okvirčak. Nato pojdite v meni in izberite Select > Inverse in pritisnite Delete.

Da vse odznačite pritisnite tipki Ctrl+D.

11. Sedaj temu Layerju dodajte Gradient Overlay. Pojdite v meni in izberite Layer > Layer Style > Gradient Overlay.

12. V orodjarni izberite Type Tool Smile

in spišite še krajše besedilo. Nastavitve za pisavo so iste, kot zgoraj, le barva je temnejša (#010101).

13. Zdaj se moramo pripraviti na animacijo. Ustvarite nov Layer. Na tipkovnici držite tipko Ctrl in kliknite na ikono od notranjega okvirčka. Označbo premaknite levo. Če je treba jo s pomočjo Marquee Toola podaljšajte do roba. Pojdite v meni in izberite Selec > Modify > Expend. Za vrednost nastavite 3px.

S Paint Bucket Toolom Surprised

pobarvajte na bež barvo (#fff5d4). Take barve je tudi ozadje in pod ta Layer se bodo drugi Layerji skrili, ko bomo delali animacijo.

Zdaj pa na animacijo!

14. Pojdite v meni in kliknite Window > Animation. Nastavite čas in ponavljanje, nato pa kliknite gumb za novo slikico.

15. Na seznamu Layerjev označite skupino "prvi premik" in jo s pomočjo Move Toola Wink

premaknite v desno. Nato kliknite gumb za dodajanje večih sličic. Dodajte jih 15!

16. Ustvarite novo sličico. Na seznamu izberite skupino "prvi premik", držite tipko Ctrl in izberite še "drugi premik". Nato obe skupini premaknite v levo s pomočjo Move Toola. Znova dodajte 15 vmesnih sličic.

17. Ustvarite novo sličico. Premaknite obe skupini v desno. Dodajte 15 vmesnih sličic.

18. Ustvarite novo sličico. Sedaj premaknite le skupino "prvi premik" bolj v desno, da se vam pokaže vaša beseda. Nato zopet dodajte 15 vmesnih sličic.

Zadnji sličici nastavite čas na 2 sekundi.

19. Zdaj označite prvo sličico in shranite animacijo. Shranite jo tako, da greste v zgornji meni in izberite File > Safe for Web & Devices. Nato kliknete Save.

In to je naša animacija!

Vodič Vam je pokazal, kako narediti animacijo, ki popestri vašo spletno stran. Namesto, da se vedno prikaže le ena beseda (Vodiči), uporabite raje tri, štiri besede, ki opisujejo dogodek, stran oz. akcijo. Če se Vam kje zatakne me lahko za nasvet vprašate preko komentarjev.

[ Na vrh ]

Komentiraj:

Sorodni vodiči
Vrteča vrtavka Preverjanje prstnega odtisa - Photoshop animacija Animiran smajli Televizija brez signala Dinamičen animiran banner	Animacija z zastavo Padajoči sneg - animacija Animiran Woofer Mahanje Animacija s premikajočimi puščicami