tranparent header dengan photoshop

Hai..hai.. nak buat header korang nampak cantik? Meh kita usha jap tutorial ni akey? Tutorial ni memerlukan korang ada software photoshop. Kalau takde, mungkin korang boleh pakai Gimp atau software yang serupa. Akupun dah lupa apa nama software tu. Kalau tak, boleh bagi link kan?  Photoshop ni banyak kebaikan yang korang boleh dapat kalau ada software ni. Tak kiralah CS yang keberapa. Akey, sekarang ni jom kita tengok macam mana nak buat transparent header.

Mula- mula, korang masuk dulu bahagian photoshop korang k.

pastu korang kena buat layer tranparent pulak. Macam kat bawah ni. KOrang klik File --> New dan akan keluar petak macam ni. 

Tinggi dan lebar tu korang boleh letak berapa je korang suka, terpulang kepada berapa luas blog korang. Bahagian background content tu pilih transparent. Nanti akan keluar gambar macam ni.

Inilah contoh layer transparent. Tapi belum siap lagi k. Sekarang korang klik File lagi dan pilih Open. Nanti keluar satu petak di mana ada banyak folder kat sana. Korang pilih gambar yang korang suka tu.

Ini contoh gambar yang aku dah pilih. Korang tak tahu pulak, huhu. Akey, dah siap pilih gambar yang korang nak tu? Sekarang tengok gambar kat bawah ni. Nampak tak panah warna merah tu? Korang klik anak panah yang macam dalam gambar tu ( dah lupa nama tool tu). Sekarang, halakan anak panah tu ( cursor ) kat gambar dan drag ( tarik ) gambar tu kat layer yang korang dah buat tadi. Hasilnya..

gambar tu akan nampak macam kat atas ni. Nampak tak? Gambar tu dah ada kat layer kan? Bagi yang nak potong gambar tu, korang tengok kat anak panah warna pink pulak. Gunakan tools tu dan gunakan kat gambar. Korang just klik dan hightlight mana yang korang nak potong, pastu pergi kat Edit--> cut.

Kalau korang nak letakkan tulisan pulak, pergi kat T.

Pastu, buat satu petak macam kat atas ni. Pilihlah jenis tulisan yang korang nak tu. Nak cari jenis tulisan atau nak pilih warna apa boleh tengok kat sebelah kanan tu. Nampak petak kecik kat sebelah warna- warna tu? Klik A untuk keluarkan k.

Dengan kreativiti korang, kalau dah siap bolehla save as...

Oh, jangan save sebagai Jpeg tapi save gambar yang korang buat tadi sebagai PNG. Kalau format jPeg, takkan jadi kot. Kemudian,korang dah boleh masukkan gambar tadi kat blog korang macam biasa.

pasang background kat shoutbox korang

Malam ni terasa bosan sangat- sangat. Dah tak tahu nak buat apa? Nak tengok movie pun macam malas, nak pergi mamam pun macam takde benda nak mamam. Aihhh.. so ini jela kot yang dapat dibuat. Dengan meng-update belog! Sambil- sambil tu boleh gak berbakti kepada pembaca- pembaca kannnn? Tu pun kalau korang bacalah. Ni sekadar tinggal link tak baca entry pun, isy.. isy..

Berbalik pada tajuk kita ni, kalau korang perasan, banyak shoutbox yang dah ada background kan? Mesti korang teringin nak buat kan? Aku? ehhh.. aku takkk... malas nak buat, haha. So tanpa buang masa lagi meh kita buat tutor ni k?


Mula- mula, sila Log in dulu kat dashboard.

Dashboard--> Design--> page element--> add a gadget--> html/ javascript

Pastu, copy paste code ni.

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://3.bp.blogspot.com/_LZtXSNcp76A/S zzN08B
1K5I/AAAAAAAAA0U/QT4rY6-FhI8/s320/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
background: url(URL IMAGE ANDA);
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 65-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

<!-- Begin ShoutMix -->
CODE SHOUTMIX ANDA DISINI
<br />
<!-- End ShoutMix -->

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]</a></div></span></span>

</div>
</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (65-gb.offsetWidth).toString() + "px";
</script>

Dah buat semua tu, terus aje save dan siap! hehe, senang kan?

 "/>

ehem, esok kira nak buat tutor pasal header pulakk.. boleh ke?