Fireworks – Kreiranje banera

Baneri na web stranicama predstavljaju jedan od vidova Internet marketinga, pa ih zato gotovo svi koriste. Zato ćemo vam u ovom prilogu pomoći da kreirate sopstveni baner (za vas ili vašu firmu), radi promocionalnih aktivnosti. Za kreiranje ćemo iskoristiti dva programska paketa Fireworks i Flash. Sa Fireworks-om ćemo kreirati grafiku, a sa Flash-om ćemo napraviti mali animacioni efekat.

Pokrenite Fireworks i otvorite novi dokument preko menija „File> New“. U dijalog prozoru za podešavanja, podesite veličinu budućeg banera. Neka visina bude 60 piksela, a širina 468 piksela, što je jedan od standarda. Za svaki vid rada sa grafičkim programima jako su bitne pomoćne linije (gridlines), prvenstveno radi provere poravnavanja svih grafičkih elemenata. Da bi podesili pomoćne linije uradite sledeće:

• Izaberite meni „View> Grid> Edit Grid…“.
• U novom dijalog prozoru potvrdite opcije „Show Grid“ i „Snap to Grid“.
• Prostor između linija neka bude 20 piksela, i horizontalno i vertikalno.
• Kliknite na „OK“.

Izradu banera ćemo početi sa dodavanjem pozadinske boje, zato izaberite alatku „Rectangle tool“ (R) i u donjem delu palete izaberite boju. „Nacrtajte“ pravougaoni oblik, i to od leve strane, do sredine banera. Sledeći korak predstavlja dodavanje teksta, tj. same reklamne poruke (naravno reklamna poruka može da se iskaže i bez teksta).

• Kliknite na alatku „Text tool“ (T) i kliknite na baner, na mesto gde želite da dodate tekst.
• U dijalogu „Text editor“, unesite tekst, izaberite font, stil, veličinu i boju teksta. Neka boja teksta bude u kontrastu sa pozadinskom bojom banera.
• Na kraju kliknite na „OK“.

Na ovaj način spremili smo jednostavnu grafiku za animaciju koju ćemo uraditi u programu Flash. Zato je potrebno da kreiranu grafiku „izvezemo“ u Flash. Izaberite meni „File> Export Preview“ i u novom prozoru podesite da format bude „GIF“. Po podešavanjima kliknite „Export“.

Da bi animirali grafiku potrebno je da je „uvezemo“ u neki od animacionih paketa, kakav je i paket „Flash“. Pokrenite Flash, pa izaberite meni „File> Open“. Pronađite na disku grafički fajl koji ste pripremili u Fireworks-u i selektujte ga. Moguće je da je baner mnogo manji nego animaciono „platno“, pa ćemo ga zato platno smanjiti na veličinu banera. Izaberite padajući meni „Modify> Movie…“, pa u „Dimensions“ polja podesite veličinu 468 puta 60 piksela i kliknite na „OK“. Krećemo sa animiranjem:

• Na vremenskoj liniji (timeline), u gornjem delu radne površine, kliknite u prvi frejm (frame) i izaberite meni „Insert> Keyframe“.
• Na isti način dodajte na vremensku liniju još jedan Keyframe, koji će biti završni frejm animacije.
• Kliknite sada na početni frejm pa zatim, držeći taster „Shift“ kliknite na poslednji frejm. Ovim vršimo selekciju dela vremenske linije. Kliknite desnim tasterom bilo gde iznad selektovanog dela vremenske linije i izaberite opciju „Create Motion Tween“.
• Izaberite sloj (layer) sa grafikom, pa selektujte meni „Modify> Instance“. Pređite na karticu „Effects“ i iz liste izaberite efekat „Alpha“. Po izboru ovog efekta biće vam omogućen i pristup procentnom klizaču sa desne strane liste. Podesite klizač na 0 (nula) %.

Ovim smo završili naš baner sa malom animacijim. Probajte animaciju, pritiskom na taster „Enter“. Vidite šta se događa, animacioni efekat se sastoji u postepenom povećanju vidljivosti celog banera (tzv. „fade“ efekat). Snimite baner kao „*.swf“ fajl i ubacite ga u HTML stranicu. Ovim smo vas na jedan jednostavan način uveli u kreiranje banera, na vama ostaje da dalje, što više eksperimentišete sa ovim grafičkim paketima.

Pratite Krstaricu i preko mobilne aplikacije za Android i iPhone.