.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

button.png

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.

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:

Būsimo mygtuko forma

Drop Shadow

Gradient Overlay

Stroke

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.

Tokie nustatymai

Du mygtukai

Gradient Overlay

Antro mygtuko Stroke nustatymas

Stroke

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

Antro mygtuko teksto Drop Shadow nustatymai

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

Galutinis rezultatas

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

Kaip atrodo normalioje būsenoje

Kaip atrodo užėjus su pele ant meniu juostos bet kurio elemento

Pagrindinis failas, su kuriuo ir dirbsime

#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 ;)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

Gero koregavimo :)

Svarbiausią ką jums reikia padaryti, tai parsisiųsti Photoshop stilius iš čia:
Siųskite
Spaudžiate Window > Styles.
Prie stilių langelio dešinėj viršuje spauskite ęsantį trikampėlį ir tada Load Styles…
Susiraskite parsisiųstą web20.asl failą.
Jūsų stilių laukelis turi atrodyti panašiai:

Viskas! Lengvai galite pradėti kurti logotipus.
Užrašykite tekstą, pažymėkite jo sluoksnį bei iš stilių langelio pasirinkite stilių. Tai galite padaryti bet kokiam objektui, bet kokiam sluoksniui. Tiesiog pasinaudokite savo fantazija…
O štai ką mes padarėme:

Jei turite kokių klausimų, drasiai rašykite komentaruose arba susisiekite su mumis per kontaktus.
]]> http://www.psdplius.lt/2009/09/web-2-0-logo/feed/ 2 http://www.psdplius.lt/2009/09/istriges-zemeje/ http://www.psdplius.lt/2009/09/istriges-zemeje/#comments Sat, 05 Sep 2009 13:01:59 +0000 PSD+ http://www.psdplius.lt/?p=97 Šį kartą piešime kvadratą įstrigusį žemėje. Efektus kursime patys :)
Susikurkite naują dokumentą. Mes sukūrėme 400 x 400 px dydžio dokumentą.
Paspauskite D klavišą, kad nustatytumėte pagrindines spalvas Juoda/Balta.
Pasirinkite Rounded Rectangle Tool bei nubrėžkite figurą:


Pasukite figurą apie 35 laipsnius į kairę. Tai galite padaryti pažymėję figūros sluoksnį ir paspaudė CTRL+T.

Dabar reikia sukurti figuros dizainą. Spauskite dešinį pelės klavišą bei pažymėkite Rasterize Layer. Dabar 2 kartus spraktelkite ant to paties sluoksnio, taip nueisite į Blending Options.
Atlikite tokius nustatymus:

Dabar su elliptical marquee tool pažymime figūros viršų:

Sukurkite naują sluoksnį bei su gradient tool pasirinkę white to transparent gradient nuspalvinkite pažymėtą vietą:


Dabar laikydami CTRL klavišą paspauskite ant pagrindinio figūros sluoksnio, taip ją pažymėsime. Eikite Select -> Modify -> Contract. Įrašykite skaičių 2 ir spauskite OK.
Dabar Spauskite CTRL + SHIFT + I pažymėkite naujausią sluoksnį bei spauskite DELETE.
Štai ką turime gauti:

Su rectangular marquee tool pažymime figūros apačią bei ją ištriname.

Dabar sukurkite naują sluoksnį, pavadinkite jį seselis1. Nuleiskite jį žemiau figūros sluoksnio. Su Elliptical Marquee Tool pažymėkite vietą figuros apačioje bei nuspalvinkite ją juoda spalva.

Sukurkite dar vieną sluoksnį. Pavadinkite jį seselis2 ir vėl su Elliptical Marquee Tool pažymėkite didesnį sluoksnį žemiau figūros.

Nuspalvinkite tą vietą juoda spalva, tada eikite į Filter > Blur > Gaussian Blur, bei nustatykite Radius 2,5.
Paspauskite CTRL + F, kad pakartoti paskutinį veiksmą. Taip pat sluoksniui Opacity nustatykite 70%.
Turime gauti kažką tokio:

Sekmės piešiant ;)
]]> http://www.psdplius.lt/2009/09/istriges-zemeje/feed/ 15 http://www.psdplius.lt/2009/09/debeseliai-debeseliai/ http://www.psdplius.lt/2009/09/debeseliai-debeseliai/#comments Fri, 04 Sep 2009 13:50:36 +0000 PSD+ http://www.psdplius.lt/?p=86 Labai lengva visa tai atlikti, bet galutinis variantas nuostabiai gražus :)
Visų pirmą background’ą reikia nuspalvinti. Pasirinkdami Gradient tool nuspalviname spalvomis #4d99ca ir #2c7bb4

Sukurkite naują sluoksnį(layer). Pasirinkite Elliptical Marquee Tool ir nupieškite debesėlio formą. Laikydami SHIFT klavišą prie vienos figūros pridėsite kitas.

Katik sukurtą debesėlį nuspalvinkite balta spalva.
Tada ant sluoksnio spauskite dešinį pelės klaviša ir pasirinkite Blending Options.
Tolimesni nustatymai:



Viskas! Ar gi negražu?
Štai, truputėli pažaidus, galutinis variantas:

]]> http://www.psdplius.lt/2009/09/debeseliai-debeseliai/feed/ 0