Photoshop CS5

Balandis 14th, 2010

Balandžio 12 diena yra oficiali Photoshop CS5 išleidimo data.
Pristatytos funkcijos tiesiog priverčia nekantriai laukti, kol pats galėsi išbandyti šį puikų įrankį. Vos kelių mygtukų paspaudimu bus galima panaikinti objektą nuotraukoje ar ji perkelti į kitą vietą. Read the rest of this entry »

Animuotas mygtukas (2 dalis)

Balandis 13th, 2010

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

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.

Animuotas mygtukas (1 dalis)

Balandis 13th, 2010

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:

Būsimo mygtuko forma


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

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


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į:

Du mygtukai


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

Gradient Overlay


Antro mygtuko Stroke nustatymas


Stroke


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:

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

Photoshop darbo klaidos

Balandis 11th, 2010

Sekmadienio vakare dirbti nereikia, todėl truputėli atsipūskime :)
Idomiai, idomiai kartais profesionalai pasidarbuoja :)
Read the rest of this entry »

Susipažinkime artimiau. PsdPlius Facebook’e

Balandis 5th, 2010

Šiandien psdplius.lt įsiliejo i Facebook pasaulį :)
Stengsimės socialinio tinklo pagalba labiau išpopuliarintį puslapį, bei patys labiau susipažinsime.
Taigi, kviečiame visus prisijungti: FACEBOOK

PSD + CSS. Darome Meniu juostą

Balandis 4th, 2010

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:

Kaip atrodo normalioje būsenoje


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


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.

Pagrindinis failas, su kuriuo ir dirbsime


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

Klavišų nuorodų lentelė Photoshop įrankiams

Balandis 4th, 2010

Atsiras žmonių, kam pravers :)
Read the rest of this entry »

Pakelto lapelio efektas

Balandis 3rd, 2010

Parodysiu lengvą pamoką, kaip padaryti pakelto lapelio efektą.
Susikuriame dokumentą, sukuriame naują sluoksnį bei su Rectangular Marquee Tool nupiešiame gulščią stačiakampį. Jį nuspalviname norima spalva.

Viršutinis sluoksnis


Sukuriame dar vieną sluoksnį ir jį nuleidžiame žemiau pirmojo sluoksnio, kad naujas objektas pasisleptu po pirmuoju.
Su Polygonal Lasso Tool nupiešiame panašią formą, kaip parodyta pavyzdyje ir ją nuspalviname juoda spalva.

Feather padarykite 2%


Nauja forma


Šiam sluoksniui Opacity padarome 32%.
Viskas!
Rezultatas

Keičiame WordPress login išvaizdą

Balandis 2nd, 2010

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