PSD+ PhotoShop pamokos, apžvalgos, siuntiniai

Pirmoje dalyje parodžiau, kaip nusipieštį pačia mygtuko išvaizdą. Dabar koduosime XHTML, CSS ir jQuery pagalba.
Visų pirma pradėkime nuo CSS.

.otherbutton {
	clear: both;
	position:relative;
	display:block;
	height: 84px;
	width: 570px;
	background:url(button.png) no-repeat;
	background-position:0 0;
	cursor: pointer;
}
.otherbutton span.hover {
	position: absolute;
	display: block;
	height: 84px;
	width: 570px;
	background: url(button.png) no-repeat;
	background-position: bottom;
}

Pirmas kodo laukas nurodo poziciją, kad bus naudojama tik paveikslėlio viršutinė dalis, t.y. normalus paveikslėlis. Antras blokas nurodo, kad naudosime paveikslėlio apačia, t.y. mygtuko išvaizda pasikeis ant jo užėjus pele.
Paveikėlį nurodome button.png

Tokio paprasto CSS kodo mums ir tereikia…
Svarbiausia dabar XHTML kodas, prie kurio pridedame JavaScript.
Kad veiktu JavaScript’as reikia turėti vieną papildomą failą. Jį gauti galite čia: jquery-1.3.2.min.js

Dabar koduojame html failą.
Kodas einantis tarp

<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('.otherbutton,.homebutton,.downloadbutton,.donatebutton').append('<span class="hover"></span>').each(function () {
	  		var $span = $('> span.hover', this).css('opacity', 0);
	  		$(this).hover(function () {
	    		$span.stop().fadeTo(500, 1);
	 		}, function () {
	   	$span.stop().fadeTo(500, 0);
	  		});
		});
	});
</script>

Esmė kodo, priskiriame css failą, js failą, bei programuojame mygtuko efektą(JavaScript).
Dabar belieka idėti nuorodą tarp , jai priskirti css klasę button ir turėtume gauti pilną animuotą mygtuką.

<a href="http://www.psdplius.lt" title="Photoshop pamokos" class="otherbutton"></a>

Viskas. Pavyzdį galite pažiūrėti čia.

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ą.

Daugelis Photoshop naudoja vien webdizainui. Žinoma jie išmano ir CSS. Nuo šiol psdplius.lt atsiras daugiau pamokų apie kodavimą. Šį kartą darysime menubar’ą. Viską nusipiešime su Photoshop ir užkoduosime su CSS.
Pradedame.
Pirmiausia mums reikia dviejų failų. Kaip atrodys meniu juosta paprastai ir užėjus ant jos. Kaip ji turėtu atrodyti leisiu jums pasireikšti, todėl nieko neaiškindamas iškart parodysiu savo variantus:

Taigi, failai turi būti vienodo dydžio tik skiriasi pati išvaizda(spalvos). Juos reikia sudeti į vieną failą, žemiau vienas kito.
Beje visi failai išsaugomi PNG formatu.

Štai. Svarbiausia išmatavimai. Viso mūsų meniu ilgis 727 px, aukštis vienos juostos 36 px, tarpas tarp juostų 2 px.
Pradedame koduoti css failą.

#nav {
width: 727px;
height: 36px;
position: relative;
background: url(main.png);
margin: 0;
padding: 0;
}
#nav li {
float: left;
}
#nav li a {
position: absolute;
top: 0;
margin: 0;
padding: 0;
display: block;
height: 36px;
background: url(main.png) no-repeat;
text-indent: -9999px;
overflow: hidden;
}

Šioje kodo dalyje matote pagrindinius nustatymus, kad naudojame main.png failą, ilgis 727px, aukštis 36 px, li sintaksės elementai eina ne iš viršaus į apačią, o į šoną.
Toliau paruošiame normalios būsenos meniu juostos išvaizdą.

li#nav_home a {
left: 0;
width: 142px;
background-position: 0 -45px;
}
li#nav_about a {
left: 142px;
width: 151px;
background-position: -142px -45px;
}
li#nav_tutorials a {
left: 293px;
width: 145px;
background-position: -293px -45px;
}
li#nav_services a {
left: 438px;
width: 150px;
background-position: -438px -45px;
}
li#nav_contact a {
left: 588px;
width: 138px;
background-position: -588px -45px;
}

Viskas tikrai nesudėtinga. width parodo, kokio ilgio yra vienas elementas, čia jau juos jums atskirai reikia išsimatuoti, left parodo kiek turi elementas būti patrauktas nuo kairės bei background-position: parodo pačio elemento buvo vietą. Kadangi mūsų normalios būsenos išvaizda yra pagrindinio paveikslėlio apačioje, tai todėl visur ir matote reikšmes -45 px.
Toliau nurodome a.hover būseną, t.y., kaip atrodys užėjus ant meniu.

li#nav_home a:hover {
background-position: 0 0px;
}
li#nav_about a:hover {
background-position: -142px 0px;
}
li#nav_tutorials a:hover {
background-position: -293px 0px;
}
li#nav_services a:hover {
background-position: -438px 0px;
}
li#nav_contact a:hover {
background-position: -588px 0px;
}

Niekas nesikeičia, tik background-position antras skaičius, tai yra aukštis nebe -45 px, o 0 px.
Belieka užkoduoti patį HTML failą!

<ul id="nav">
<li id="nav_home"><a href="#">psdplius</a></li>
<li id="nav_about"><a href="#">apie mus</a></li>
<li id="nav_tutorials"><a href="#">pamokos</a></li>
<li id="nav_services"><a href="#">paslaugos</a></li>
<li id="nav_contact"><a href="#">kontaktai</a></li>
</ul>

Žinoma prieš tai neužmirškite priskirti css failo.

<link rel="stylesheet" type="text/css" href="jusu_css_failas.css" />

Viskas.
Čia galite pažiūrėti, kaip tai atrodo: demo
Bei parsisiūsti psd, jpg, html, css failus iš čia.
Jei ko nors nesuprasite, klauskite ;)

Sveiki,
šį kartą papasakosiu, kaip galima pasikeisti savo WordPress TVS login išvaizdą.
Tam mums prireiks žinoma ir Photoshop :)
Read the rest of this entry »