PSD+ PhotoShop pamokos, apžvalgos, siuntiniai

Animuotas mygtukas (1 dalis)

Paskelbta 13. Bal, 2010 Autorius: PSD+ Kategorija: Web dizainas

Sveiki,
Šį kartą parodysiu, kaip padaryti animuotą mygtuką panaudojant Photoshop’ą, CSS, XHTML bei jQuery.
Pirmoje dalyje tik nusipiešime mygtuką, antroje viską užkoduosime. Taigi, pradedame!

Visų pirmą, susikurkite norimo dydžio failą, koks bus mygtukas. Mano atveju plotis 570 px, aukštis 170 px. Aukštį dalinsime į dvi dalis, nes piešime du mygtukus, kaip jis atrodys paprastai ir užėjus su pelyte ant jo.

Taigi, su Rounded Rectangle Tool pasirinkę Radius: 5 px nupieškite mygtuko formą. Palikite vos vos vietos iš kraštų, nes dėsime mygtukui šešėlius.
Pati pradžia turėtų atrodyti taip:

Mūsų formai padarome tokius nustatymus(Blending Options):

Dabar idomi dalis. Laikykite CTRL klavišą nuspaudę ir su pele paspauskite ant mygtuko sluoksnio ikonos, taip pažymėdami visą mygtuką. Spauskite New Layer ir viską nuspalvinkite #fafafa spalva.
Pasirinkite Rectangular Marquee Tool ir su klaviatūros rodyklėmis paspauskite vieną kartą į dešinę. Dabar paspauskite BACKSPACE klavišą. Taip ištrinsite visą baltą spalva. Vėl su rodyklėmis paspauskite 1 kartą į viršų ir vėl BACKSPACE. Dabar du kartus į apačią ir vėl BACKSPACE. Viskas su šiuo mygtuku. Belieka uždėti tekstą.
Užrašykite norimą teksta, pasirinkę spalvą #343434.

Einame į teksto Blending Options ir padarome tokius nustatymus:

Dabar jau tikrai viskas baigta su normaliu mygtuku. Visus sluoksnius sudėkite į atskirą grupę.
Padarykite grupės kopiją ir kaip minėjau pradžioje, šis mygtukas turi užimtu tik pusę viso paveikslėlio aukščio, todėl duplikuotą mygtuką nuleiskite į apačią, žemiau dabartinio mygtuko.
Turite gauti tokį paveikslėlį:

Dabar keisime nustatymus apatiniam mygtukui. Einame į Blending Options.
Drop shadow nekeičiame nieko.



Paskutinis antrojo mygtuko efektas bus padaromas taip:
Vėl laikydami CTRL klavišą paspauskite ant sluoksnio ikonos, kad pažymėtumėte visą formą. Sukurkite naują sluoksnį ir viską nuspalvinkite balta spalva. Dabar pažymėkite nuo pusės tik viršutinę dalį ir paspauskite BACKSPACE.
Naujam sluoksniui Opacity nurodykite 15%.

Dabar keisime tekstą.
Spalvą pakeiskite į baltą, o per Blending Options tekstui pakeiskite Drop Shadow nustatymus:

Jei viską atlikote teisingai, turėjote gauti tokį rezultatą:

Šį kartą parodžiau, kaip su Photoshop susikuriame pačio mygtuko išvaizdą. Netrukus sulauksite antrosios dalies, kur naudodamiesi programavimo kalbomis padarysime tam tikrą efektą ir mygtukas taps animuotu.
Jei kas nors nepavyko, pridedu PSD failą.