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:
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:
Kā bildē parādīts, tiek izvēlēts rīks - Rounded Rectangle Tool.
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.
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ē:
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.
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ē:
Pēc tam, kad jūs esat to izdarījis, tad jums jāparādās šāds logs:
Š 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:
7. Punkts.
Tagad varam pievienot pašu kodu. Sākumā izveidojiet jaunu mapi, piemēram, ar nosaukumu Webpoga. Pēc tam ielieciet mapē abas izveidotās pogas. Tad šajā pašā mapē izveidojiet dokumentu ar paplašinājumu *.html jeb, īsi sakot, uzspiediet labo peles taustiņu -> New text document. Pēc tam atveram dokumentu un iekopējam šādu kodu:
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 www.notepad.lv liecina par to, ka ja uz tās bildes uzspiedīs, tad atvērsies notepad.lv weblapa jaunā pālūkprogrammas logā. Par atvēršanu jaunā logā atbild atribūts _blank. Par target atribūtiem sīkāk var lasīt www.kasis.lv mājas lapā.
2.<img border="0" src="webpoga1.gif"... - Ja border ir 0, tad tas liecina par to ka bildei nebūs apkārt rāmis, bet scr=""webpoga1.gif" norāda to, ka šī ir pamata bilde.
3....onmouseover="this.src='webpoga2.gif'"... - Norāda to, ja peles kursors tiks novietots uz bildes "webpoga1.gif", tad parādīsies bilde "webpoga2.gif". Š is efekts tiek panākts izmantojot onmouseover komandu.
4....onmouseout="this.src='webpoga1.gif'" width="109" height="38" alt=""> - Norāda to, kāda bilde būs tad, kad peles kursors vairs neatradīsies uz bildes "webpoga1.gif" Tas tiek panākts ar komandu "onmouseout"
5.Par pārējo html kodu daļu var izlasīt www.kasis.lv mājas lapā.
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.
