Sākumlapa › Forumi › Notepad.lv › IT ziņas › Raksti › Web pogas izveide, kura reaģē uz peles kursoru
P.S. Gadījumā, ja jūs pirmo reizi lietojat Photoshop, tad varu ieteikt izlasīt šīs divas pamācības pirms tam:
[align=right] 1. Photoshop pamati (1. stunda);
2. Photoshop pamati (2. stunda).
[align=justify]1. Punkts.
Atveram Photoshop un izveidojam jaunu dokumentu. To var darīt izdarīt divos veidos:
1. Izmantojot ātro taustiņu kombināciju – Ctrl+n;
2. Izmantojot izvēlnes joslu – File -> New.
Kad esiet to izdarījis, tad jums paradās šāds logs:
[img]
Kā redzams, pie iespējas “Background Contents”, esmu izvēlējies parametru Transparent. Tas nozīmē to: kad bilde tiks saglabāta *.gif formātā, tad tai nebūs nekāda fona. Protams, tas būs tikai tādā gadījumā, ja mēs nebūsim jau uzlikuši kaut kādu fonu. Š is parametrs ir ļoti noderīgs tad, kad bilde ir vai nu ovāla, vai arī daudzstūraina, jeb īsi sakot, tā neatbilst ierastajām figūrām – taisnstūrim, kvadrātam utml.
Š oreiz esmu izvēlējies veidot darba virsmu, kuras platums ir 200px*100px. Jūs arī varat likt citus parametrus, ja tie būs jums piemērotāki. Kad esam izveidojuši darba virsmas izmērus, tad spiežam pogu “Ok.”
2. Punkts
Kā redzams, tika izveidota darba virsma, kurai nav nekāda fona. Par to liecina rūtainais laukums:
[img]
Kā bildē parādīts, tiek izvēlēts rīks – Rounded Rectangle Tool.
[img]
Ar šī rīka palīdzību var izveidot taisnastūri, kuram ir noapaļotas malas. Nākošajā bildē ir parādīts, ka es zīmēšu taisnstūri ar noapaļotām malām, kur katrai malai ceturkšņa rādiuss ir 5 px.
3. Punkts.
Kad poga uzzīmēta, izveidojam jaunu slāni – Create New Layer. Š o komandu var izpildīt, izvēloties to ikonu, kura atrodas labajā apakšējā stūrī blakus miskastei. Kad tas ir izdarīts, izvēlaties teksta rīku. Jūs varat arī izmantot ātro taustiņu kombināciju – vienkārši nospiežot burtu “t”. Pēc tam ar peles kreiso taustiņu nospiediet tai vietā, kur vēlaties rakstīt tekstu. Es šajā gadījumā uzrakstīju Webpoga
[img]
4. Punkts.
Tā kā vienkārša webpoga ir uzzīmēta, tad varam ķerties klāt pie saglabāšanas. Caur izvēlņu joslu tas notiek šādi: File=> Save for Web & Devices…, bet caur ātro taustiņu kombināciju: Alt+Shift+Ctrl+s. Pēc tam spiežam “Save” un norādam to, ka gribam darbu saglabāt *.gif formātā, kā arī vajag vēl norādīt to, ka gribam saglabāt tikai bildi (Image only), nevis bildi kopā ar html kodu. Iepriekšējās Photoshop versijās šāda veida saglabāšana bija jāveic caur Image Ready.
To varēja izdarīt tā, ka sākumā vajag pārslēgties uz Image Ready, bet pēc tam caur izvēļņu joslu jāuzspiež File-> Save Optimize As… (ja pareizi atceros).
P.S. Sākot no Photoshop CS3 un uz augšu funkcija Image Ready ir iebūvēta pašā Photoshop programmā.
Tātad kā saglabāšanu notiek Photosgop CS3 mēs varam aplūkot bildē:
[img]
Palaižot programmu “Windows Picture and Fax Viewer”, mēs redzam to, ka bildei nav nekāda fona, kaut arī rāmis ir lielāks nekā pati poga.
[img]
5. Punkts.
Kad esam saglabājuši un apskatījušies, kāda izskatās mūsu izveidotā poga, tad varam ķerties klāt pie otras pogas izveides. Pēc izmēriem mums vajag identisku pogu tai, kura tika izveidota pirms tam. Un šī iemesla dēļ mēs varam strādāt ar to pašu failu, ar kuru mēs iepriekš darbojāmies. Š ajā gadījumā es uzlikšu tikai to efektu, ka teksts mirgos. Protams, var arī likt citus efektus, piemēram, ka mirgos pati poga, vai arī – ka pogas malu krāsa izmainīsies, kad peles kursors nokļūs uz tās.
Ja gadījumā atšķirsies pogu izmēri, tad jums pēc tam varētu būt problēmas ar mājas lapas izskatu….
5.1. Punkts.
Tātad mums tagad jāuzliek tekstam rāmis. Lai varētu uzlikt rāmi, tad sākumā iezīmējiet pašu tekstu. Lai iezīmētu tekstu, jums ir jāuzspiež ar kreiso peles taustiņu uz attiecīgā slāņa ikonas. Pēc tam izvēlaties iespēju “Stroke”, jeb kā tas parādīts bildē:
[img]
Pēc tam, kad jūs esat to izdarījis, tad jums jāparādās šāds logs:
[img]
Š ajā bildē ir redzams, kādus parametrus esmu izmantojis, ka līnijas biezums ir 1 px, bet izmantotā krāsa ir šāda #cc5630
6. Punkts.
Kad tas ir izdarīts, saglabājiet bildi atkal tāpat, kā jūs to darījāt iepriekš.
Bildē mēs tagad redzam, kāda izskatās otra poga:
[img]
7. Punkts.
Tagad varam pievienot pašu kodu. Sākumā izveidojiet jaunu mapi, piemēram, ar nosaukumu Webpoga
[img]
P.S. Kodu ievietoju kā bildi, jo izrādījās tas, ka phpBB neļauj ievietot skriptus.
Koda skaidrojums:
1. Vietāk, kur ir rakstīts
2.
3.…onmouseover=”this.src=’webpoga2.gif'”…onmouseover komandu.
4.…onmouseout=”this.src=’webpoga1.gif'” width=”109″ height=”38″ alt=””>
5.Par pārējo html kodu daļu var izlasīt
P.S. Š eit ir izvietota vēl viena pamācība darbā ar Photoshop: Photoshop CS3 – abstraktās mākslas izveidošana
Par populārākajiem bilžu formātiem (JPEG, GIF, PNG), kuri tiek izmantoti web lapu veidošanā var izlasīt šeit.
Bet nu raksts patiešām noderīgs.
.button {
background-image: url(’button.png’);
height: 20px;
width: 100px;
}
.button:hover {
padding-top: 20px;
}
Pogas izmērs ir 40px augstumā. Ja pele ir augšā, tad pabīdās pa 20px uz leju un redz hover pogu, ja nē, tad redz pirmos 20px.
2) Š ādu pamācību derēja sadalīt divās daļās – viena Fotošopam, kā taisīt pogas, otra – kā sakodēt divas pogas.
3) Es taisu atsevišķi CSS failā atribūtu:
#poga a:active { width: 198px; height: 36px; background-image: url(’/images/button1.png’); background-repeat: no-repeat; display: block }
#poga a:hover { width: 198px; height: 36px; background-image: url(’/images/button2.png’); background-repeat: no-repeat; display: block }
un HTMLā pēc tam tikai norāde:
nepareizi parādās, jābūt “div id vienāds ar poga”
4) Labs raksts.
Preses relīzes