Ați făcut vreodată un meniu grafic care, în funcție de manipularea mouse-ului, arăta diferit? Atunci știi cât de mult neplăceri asociate cu crearea fiecărui buton de fișiere individuale pentru fiecare stat :. mouse-ul peste butonul, faceți clic pe mouse-ul în afara butonului etc. Știi, ce este confuzie, mai ales dacă „adapta“ script-ul manual la pagina ta.
Photoshop vă permite să creați și să salvați butoane și opțiuni pentru diferitele sale stări într-un singur fișier. Nimic nou. Aceleași straturi. Dar pentru fiecare stat se poate face invizibil „in plus“ strat, menținând în același timp Photoshop va aplatiza automat straturile vizibile în fiecare caz și va păstra toate opțiunile pentru fișierele individuale și de a genera un cod HTML, și aproape că nu trebuie să faci.
Pentru lucru avem nevoie de Photoshop și ImageReady. La scrierea articolului, au fost utilizate cele mai recente versiuni ale ambelor programe.
Am decis să definim patru stări diferite pentru butonul viitor.
- Normal - ceea ce va fi vizibil imediat după încărcarea paginii
- Peste - mouse-ul deasupra butonului
- Jos - butonul din stânga sau din dreapta al mouse-ului apăsat (și nu este eliberat)
- Out - în această formă butonul va fi după ce cursorul mouse-ului și-a părăsit marginea, adică În starea Normal, butonul nu va reveni la reîncărcarea următoarei pagini.
Ai grijă, pentru că browserele diferite și variatele lor versiuni nu se ocupă de aceleași evenimente în același mod. Prin urmare, testați rezultatul în versiuni diferite.
Așa sa întâmplat din punct de vedere tehnic.
În fișierul nou creat de 200 X 200 pixeli, I
1. Crearea unui strat nou (Ctrl + Shift + N) numit mere normal
și a făcut ceva asemănător unui măr.
2. Apoi am facut un duplicat de layer (Layer / Duplicate layer). L-am numit mere si am incercat sa o repar.
3. În mod logic, următoarea stare a mărului mușcat este un stub. Din punct de vedere tehnic, nu a fost doar o trunchiere a stratului anterior, dar în acest caz nu contează. Stratul cu un unghi se numește mere în jos.
4. Ei bine, o surpriză, care așteaptă mulți cunoscători de mere - un vierme mare. Numele stratului de mere.
Numele straturilor nu contează, ele sunt date doar pentru a nu fi confundate. Am adăugat încă două straturi - cu text și bare gri.
5. Acum, cu ajutorul instrumentului Slice (vezi), tăiați mărul.
Această zonă va fi un buton, iar celelalte părți sunt statice.
Trimite rezultatul la ImageReady făcând clic pe butonul din bara de instrumente
ImageReady
În partea de jos a paletei, deschideți fila Rollover și faceți clic pe butonul "creați o nouă stare de răsturnare", creez patru stări:
Pentru fiecare site - mecanismul de organizare a feed-urilor de știri proprii gratuit! Mai multe detalii >>
Acum, porniți mouse-ul click pe icoana fiecărui stat, sunt în fila Straturi, face straturi invizibile în exces din rândul celor patru care reprezintă butonul nostru în diferite forme. Ie pentru Normal. vizibil am lăsat mărul normal. pentru peste - peste mere. și așa mai departe. În fila rollover. Pictogramele afișează modificările. De exemplu, pentru starea Jos, fila Straturi (în ImageReady) arată astfel:
Dacă totul vă convine, trebuie doar să optimizați dimensiunea imaginii și să salvați rezultatul.
Și iată ce mi sa întâmplat (testat în MSIE 5.5 și NC 4.7 - funcționează la fel):