Fireworks – Kreiranje web dugmića

Evo još jednog od odličnih alata za web kreacije, reč je o programu Macromedia Fireworks, koji je sličan Photoshop-u, ali poseduje mnogo veći spektar alatki koje su posvećene samo web-u. Za početak ćemo uz pomoć ovog softvera kreirati jedno web dugme.

Kada pokrenete Fireworks i otvorite neki fajl, videćete veliku sličnost njegovog interfejsa sa drugim Macromedia (Flash, Dreamweaver…) programima, ali i sa Photoshop-om. Ako ste koristili neki od navedenih programa onda ćete se lako snaći i u ovom okruženju. Preko menija „File> New“ otvorite novi dokument, a u dijalog prozoru koji se pojavi unesite veličinu „platna“ buduće grafike. Širina neka bude 250 piksela, a visina 50 piksela. Dimenzije su ove veličine zato što ne želimo da fajl zauzima puno prostora na disku, jer ćemo na taj način usporiti prenos slike sa vašeg sajta u čitač posetioca. Za početak ćemo kreirati pozadinu, odnosno osnovu dugmića:

• U paleti alatki izaberite „Rectangle draw tool“ ili pritisnite „R“ na tastaturi. Ako budete „duže“ kliknuli, ponudiće vam se i drugi geometrijski oblici.
• Na dnu iste palete (Colors) izaberite boju za osnovicu dugmića.
• Dovedite pokazivač miša iznad platna (canvas) i on će se pretvoriti u krstić.
• Kliknite levi taster miša, negde u levom gornjem uglu, i držeći taster vucite u suprotan ugao.
• Kada budete zadovoljni veličinom, otpustite taster miša.

Kao i Photoshop, i Fireworks podržava rad sa slojevima (layers). Na ovaj način možete kreirati veliki broj slojeva, i na svaki od njih primenjivati drugačije efekte. Da bi videli paletu sa slojevima, izaberite meni „Window> Layers“ ili pritisnite taster „F2“.

Pošto smo postavili osnovicu dugmeta, vreme je da mu dodelimo i neki tekst.

• U paleti alatki izaberite „Text tool“ ili pritisnite „T“ na tastaturi.
• Kliknite bilo gde unutar platna i otvoriće vam se dijalog „Text editor“.
• Podesite željeni font, boju, veličinu i stil, pa ukucajte neki tekst (naziv dugmića).
• Na kraju kliknite na „OK“.
• Prevucite tekst iznad osnovice dugmića i centrirajte ga.

Jedna od mnogih prednosti ovog programa je veliki broj ugrađenih efekata, koji se mogu dodali bilo kom objektu, pa i tekstu.

• Kliknite na tekst koji ste ubacili, da bi ga selektovali.
• Sa menija „Window“ izaberite „Effect“ ili pritisnite kombinaciju „Alt+F7“, i videćete paletu „Effect“.
• Kliknite na listu i izaberite opciju „Bevel and Emboss> Inset Emboss“.
• Na ovaj način smo tekstu dodali efekat „ispupčenosti“. Osim ovog, tekstu možete dodati bilo koji efekat.

Da bi naša sličica bila pravo dugme, pozadini ćemo takođe dodati efekat, efekat „senke“.

• Kliknite pravougaonik radi selekcije.
• Na paleti „Efect“ izaberite „Shadow and Glow> Drop Shadow“. Ako dva puta kliknete na efekat u „listi efekata“, moćićete da izvršite dodatna podešavanja.

Po prethodnom postupku dobili smo web dugme, koje možemo da ubacimo u naše stranice.

Pratite Krstaricu i preko mobilne aplikacije za Android i iPhone.