Dinamičen za klik privlačen banner!

V tem vodiču vam bom pokazal, kako lahko naredite dinamičen in za klik privlačen banner. Deluje po principu prikaz, zabris, prikaz.

1. Ustvarite nov dokument (File > New). Moj bo velikosti 450x75 pikslov.

2. Ozadje naredite po želji. Jaz sem ga naredil s pomočjo Ellipse Tool (+Inner Glow).

3. Nato sem v orodjarni izbral Horizontal Type Tool in napisal stalno glavno besedilo: Moje-Mesto.com (Trajan Pro, bold, velikost:20px, sharp).

4. Sedaj pa se začne pravi vodič! Za svoj banner si izmislite dve, tri ali več fraz, ki bodo opisale vašo ponudbo oz. spletno stran. (v mojem primeru bodo to: Photoshop vodiči; HTML & CSS vodiči; K(j)er znanje šteje)
V orodjarni izberite Horizontal Type Tool . Okvir pisanja razpotegnite čez desni prazen prostor in vanj vpišite prvo vrstico besedila. Določite sredinsko poravnavo, da vam bo lažje.

5. Nato na tipkovnici istočasno stisnite Ctrl + J. S tem ste naredili kopijo prejšnjega besedila. Sedaj to besedilo pobrišite in napišite drugo frazo. To ponovite tolikokrat, kolikor vrstic besedila imate (vsako frazo v svoj Layer).

6. Sedaj pride na vrsto malo bolj zapleteni del. Naredite kopijo prve fraze (Ctrl + J). Nato v seznamu Layerjov desno kliknite na Layer in izberite Resterize Type. Nato pojdite v zgornji meni in pri filtrih izberite motion blur (Filter > Blur > Motion Blur). Novoprikazan okenček izpolnite tako, kot vam prikazuje zadnja slika.

7. Layer z zabrisanim tekstom sedaj še trikrat podvojite (Ctrl+J) tako, da boste imeli štiri Layerje z zameglitvijo. Nato na tipkovnici trikrat stisnite tipki (Ctrl+E) in vsi štirje Layerji se vam bodo združili v enega.

Sedaj ponovite točki 6 in 7 še na drugih frazah.

8. Zdaj bomo začeli z animiranjem. Za začetek naj bo vidna le prva fraza (kliknite na oko).

9. Sedaj iz zgornjega menija odprite okence za animacijo (Window > Animation). Jaz uporabljam Photoshop CS3. Vsi tisti, ki uporabljate starejše verzije morate preklopiti v ImageReady.

( <-- starejše verzije)

Za prvo sličico nastavite zakasnitev 3 sekunde.

10. Zdaj ustvarite novo sličico, skrijte prvo frazo in prikažite njeno zameglitev (oko). Zakasnitev nastavite na 0 sec.

11. Zdaj ustvarite še eno sličico. Prosojnost oz. Opacity meglenega Layerja zmanjšajte za 10%.

Nato ustvarite novo sličico in zmanjšajte opacity še za 10%. To ponavljajte toliko časa, dokler ne bo Opacity na 20%.

12. Zdaj naredite novo sličico in poleg zameglitve prikažite še naslednjo vrstico besedila. Nato pa naredite še eno sličico, kjer bo samo čisto besedilo (skrijte zamegljen Layer). Zakasnitev nastavite na 3 sec. Nato ponovite koraka 10 in 11.

Korake 10, 11 in 12 ponovite za vsako frazo!
(Za svojo animacijo s tremi frazami sem naredil 33 sličic)

13. Za konec moramo samo še pravilno shraniti. Pred shranitvijo kliknite na prvo sličico! Pri starejših verzijah nato pojdite v meni in shranite optimizirano kot .gif datoteko (File > Save Optimized As).

Pri Photoshop CS3 pojdite v meni in shranite, kot datoteko za na internet (File > Save for Web & Devices).

14. In to je zdej ta del Upam, da vam bo banner prav prišel.

*.PSD datoteko lahko najdete med Prenosi.

Komentiraj:

borut |03-09-2009 19:00 lepo bi bilo ce bi lahko se dalo to dobit kot psd datoteko za download, ker na primeru se lahko boljse ucimo!! Bi bil pa hvalezen ce bi mi poslali tole na mail!! Super spletna stran

-primož- |03-09-2009 19:01 .PSD datoteko sem ti poslal po mailu. Upam, da ti bo pomagala. Hvala za pohvalo

Mark Savnik |03-09-2009 19:02 Živ, všeč mi je efekt! ravno nekaj takega sem iskal, čudno res da se nisem sam spomnil na blur animirat. Ps : zakaj pa nisi uporabil tweena za procente ? Takole lahko porabiš ogromno časa za vsak frame posebaj Verjetno jih še ne poznaš, me veseli da sem tudi jaz tebi lahko pomagal. Sem sprobal in dupliciral en fade v 3 korakih, Super je

-primož- |03-09-2009 19:03 Hvala za namig. Tistega še nisem sprobal, vem pa, da poleg prosojnosti deluje tudi za premikanje. Ta vodič še pride

Miha |03-09-2009 19:09 Bi se tudi jaz priporočal za psd datoteko Hvala že vnaprej!

David |03-09-2009 19:13 Tudi jaz bi imel .PSD datoteko. Hvala.

	Ime
	E-mail
	Spletna stran
	Title:

!joomlacomment 4.0 Copyright (C) 2009 Compojoom.com . All rights reserved."