» Web Design – Butoane din creaţia proprie - Web design blog

Web Design – Butoane din creaţia proprie

Butoane fără umbră. Web-designerii cu pretenţii la capitolul grafică îşi desenează singuri elementele de navigare. În general sunt preferate butoane cu o dimensiune de circa 100×40 de pixeli. Acestea au o suprafaţă destul de mare pentru a încăpea inscripţionarea şi sunt suficient de mici; pentru a nu ocupa prea mult spaţiu din pagină: Aceste. dimensiuni sunt avantajoase şi din alt punct de vedere: butoanele mici pot fi şi încărcate mai uşor.

Calea cea mai simplă spre asemenea butoane este apelarea la programul shareware Paintshop Pro, care deţine funcţia Buttonize. Însă această funcţie trebuie exploatată cu grijă.

Deschideţi în Paintshop Pro un nou  document grafic cu 16,7 milioane de cu-lori cu lăţimea de I00 de pixeli şi înălţimea de 40 de pixeli. Fundalul rămâne alb. Măriţi imaginea cu ajutorul funcţiei de zoom pentru a poziţiona mai uşor textul. Daţi un clic pe butonul de text şi selectaţi un font oarecare, de 12 puncte, bold. Introduceţi textul Home, daţi un clic pe OK şi plasaţi scrisul în mijlocul noului buton. Deoarece textul este încă marcat, apăsaţi combinaţia de taste  [CTRL]+[D] pentru a elimina marcajul.

Selectaţi apoi Image – Effects – Butonize. Pentru Height este indicată o valoare cuprinsă între 15 şi 20, atunci când este activată funcţia de Transparent Edge. Solid Edge nu arată la fel de bine. Dar dacă totuşi doriţi să o folosiţi, stabi-liţi pentru Height o valoare mai mică, între 5 şi 10. După confirmarea cu OK, noul buton este gata. Salvaţi-1 ca fişier JPG. Apoi pentru ca timpul necesar încărcării acestei imagini să fie minim folosiţi un program pentru optimizare JPEG, cum ar fi JPEG Optimizer.

În documentul HTML (WELCOME. HTML) legaţi grafica de hyperlink după cum urmează:

Cu ajutorul funcţiei Buttonize din Paintshop Pro puteţi desena rapid butoane pentru homepageul dumneavoastră. Pentru orice eventualitate salvaţi separat un buton neinscripţionat.

Parametrul border=0 evită afişarea marginii albastre inestetice, care sugerează faptul că respectiva grafică reprezintă un link.

Butoane cu umbră.

Rămân în continuare la modă umbrele poziţionate în spatele butoanelor. Cu puţină îndemânare puteţi desena chiar dumneavoastră aceste elemente de navigare de efect. Şi de această dată puteţi apela la Paintshop Pro.

Deschideţi o imagine nouă, având dimensiunea de 400×400 de pixeli. Pentru prima încercare folosiţi albul ca şi culoare de fundal şi 16,7 milioane de culori. Desenaţi un dreptunghi în colţul din stânga sus al ferestrei. Atenţie ca funcţia de fill să fie activată şi să fie destul spaţiu pentru un al doilea dreptunghi de aceleaşi dimensiuni. Marcaţi apoi dreptunghiul cu Magic Wand, care apare ca o baghetă în bara de simboluri. Tolerance şi Feather trebuie să aibă valoarea 0. Cu [Ctrl]+[C] şi [Ctrl]+[E] inseraţi o copie a dreptunghiului în spaţiul liber al imaginii. Coloraţi noul dreptunghi cu gri deschis cu ajutorul funcţiei Flood-Fill. Aceasta este reprezentată în bara de simboluri ca o cutie de conserve stilizată. Activaţi apoi shortcut-ul [CTRL]+[D], pentru a elimina marcajul. Daţi din nou un clic pe bagheta magică. De această dată Feather va obţine valoarea 10. În momentul în care daţi un clic pe dreptunghi, Paintshop Pro va de-sena un cadru de marcare. Apelaţi de cinci ori consecutiv punctul de meniu Image – Blur – Blur More. În acest fel finisaţi marginile umbrei. Marcaţi din nou primul dreptunghi cu bagheta magică . Feather are valoarea 0. Trageţi acest dreptunghi peste umbra sa. Decupaţi butonul obţinut şi salvaţi-1 ca JPG. Bineînţeles că acum puteţi inscripţiona butonul, salvându-1 de fiecare dată sub un alt nume. Nu ştergeţi butonul gol (fără inscripţionare), astfel încât să-l puteţi apela pentru orice fel de modificare.