Blog [berharap] penuh inspirasi: August 2009

Membuat Menu Tree chapter 2

Chapter 2

Melanjutkan postingan sebelumnya, di dalam bagian ini akan dijelaskan mengenai HTML yang dipakai dalam pembuatan Tree Menu
Skripnya adalah sebagai berikut:

Nah, rumit bukan.hehehe… tidak kok, jika dilihat lebih lanjut bagian ini terdapat beberapa skrip yang diulang-ulang. Ya, karena ini merupakan menu yang akan kita buat, terdapat induk menu dan anak menunya.

Bagian div class="trigger" merupakan induk menu, sedangkan span class="branch” merupakan anak menu. Anda masih ingat bukan script CSS pada posting sebelumnya, nah, bagian branch berfungsi sebagai pangatur tampilan agar si “anak menu” tidak langsung tampil.
untuk bagian ketiga akan dijelaskan di postingan berikutnya.

Membuat Tree Menu Layaknya Explorer dengan menggunakan javascript

Menarik tentu apabila kita dapat memiliki website dengan tampilan menu layaknya di windows explorer. Ternyata cukup mudah untuk membuat tampilan menu seperti itu, yang dibutuhkana hanyalah sebuah javascript sebagai pembuat efek dan tag css untuk style tampilan dari menu. Berikut ini saya ingin berbagi cara membuat menu layaknya Explorer atau biasa disebut dengan Tree menu.

Chapter 1

Dalam pembuatan menu seperti ini terdapat 3 bagian utama, yaitu CSS, HTML, dan Javascript. Chapter pertama ini menjelaskan mengenai CSS rule yang akan dipakai dalam pembuatan Tree ini.

Letakkan Script berikut di antara tag HEAD

body{
font: 10pt Verdana,sans-serif;
color: navy;
}
.trigger{
cursor: pointer;
cursor: hand;
}
.branch{
display: none;
margin-left: 16px;
}

CSS rule ini berisi tiga bagian, yang pertama adalah bagian “body” yang dipakai untuk mengatur jenis font dan warna background apabila di-klik.
Bagian kedua adalah .trigger,bagian ini berfungsi untuk merubah pointer menjadi berbentuk hand atau tangan.
Bagian ketiga adalah .branch, bagian ini berfungsi sebagai pengatur tampilan sehingga menu-menu yang berada di bawah menu induknya tidak diperlihatkan terlebih dahulu.

Membuat Efek Cinema dengan Photoshop

Membuat Efek Cinema pada Foto

Saya suka banget bikin efek foto dengan campur tangan si Blur bukan Brur.. :) .. Nah efek cinema ini sudah dipastikan pake blur.. hasil nya nanti mungkin jadi seperti ini :

Ayoo.. gimana? Mantep tho.. enak tho.. daripada naek busway kesasar.. hehehe

Pengen tau cara bikinnya ? ya udah langsung Action aja

Buka foto yang mau diedit..

saya gak pake foto diatas.. tapi pake foto anak saya lagi berenang..

Duplikat layer dengan menekan CTRL + J ..

Di layer baru tadi klik Image > Adjustment > Hue/saturation

Klik Image > Adjustment > Exposure

Angka-angka di atas disesuaikan dengan gede gambarnya nanti..

Sekarang Duplikat lagi layer yang baru diedit tekan CTRL + J

Klik Filter > Blur > Lens Blur

Klik Add Vector Mask

Gunakan Brush Tool dengan warna Hitam.. Ini untuk mewarnai layer mask tadi dengan warna Hitam.

Klik kanan di layar gambar .. lalu ubah settingan Brush nya..

Brush menggunakan Soft Round Brush .. ( yang pinggir-pinggirnya keliatan nge-Blur) .. Usahakan Ukuran Master Diameter nya gede.. kira-kira hampir sebesar foto yang diedit..