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 na www.krstarica.com