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.