Extreme GUI Website Layout

Beberapa member yang telah mengirimkan e-mail ke dremi.info, meminta agar tutorial membuat extreme website layout tingkat advance di publish…
Tutorial ini temanya GUI PLAYER INTERFACE dan langkahnya memang agak panjang, silahkan bertanya kalau kurang jelas.
(Halaman – 1)
Jika dari bagian tutorial ini ada yang ditanyakan, silahkan kontak dr.emi via YM / email.
WOKE2 kita mulai lagi…Buka Winamp player Kalian, Open lagu kebanggan gue (hehehehe….) :
The Ramones – I Wanna Be Sedated ( dibawakan oleh The Offspring )
The Ramones – Somebody Put Something in My Drink (Original Voice)
Kencangkan Volumenya….dan buka PShop kebanggaan kalian semua..
Kali ini gue pake langkah penomoran, karena langkahnya agak panjang.
Mulailah membuat ukuran canvas untuk layout dasar web nya; 760 x 580 pixel, setting lainnya biarkan default.
Bagian Header
Panel Speaker
Buat Layer Group yang berbentuk ikon folder (Layer > New > Group) ganti nama layer group dengan Header -Top. Kemudian dengan menggunakan Rectangle Tool (U) buatlah sebuah bidang kotak di pojok bagian kiri layout. Ukurannya sesuaikan dengan gambar, kasi naam layer “batang”.

Transform lah dengan mode perspektif transform, atur bentuknya seperti pada gambar. Ikuti panah merah untuk arah mouse kalian. Enter 2 X.

Kasi Layer > Layer Style
Outer Glow

Gradient Overlay

Stroke > 1 pixel dan warna #000000
Hasilnya

Selanjutnya kita akan membuat speakernya. Buatlah Elips pada bagian atasnya, dengan elips tool. Ini untuk background speakernya . Ubah nama layernya “bg-speaker”.
Kasi Layer Style yang sama dengan Layer Batang diatas, hanya saja pada bg-speaker ini tambahkan Bevel and Emboss.

Selanjutnya kita buat speakernya, bikin layer baru juga dengan nama layer “speaker”. Caranya cukup duplikat layer bg-speaker, dan transforlah ukurannya menjadi 80 %. dan kasi layer style yang sama dengan layer bg-speaker

Duplikat kembali Layer Speaker untuk membuat kain pelapis speakernya. Kasi Layer > Layer Style..
Inner Shadow

Gradient Overlay

Kasi Stroke 1 px warna #000000
Hasilnya

Nah kasi uletan dikit di tengahnya untuk pusat speaker
Kasi Layer Style
Outer Glow

Bevel and Emboss

Gradient Overlay

Hasil Sementara

Naaah panel speaker dan batangnya telah selesai, sekarang tinggal duplikat aja satu2, kalian juga bisa membuat layer group lagi untuk menyatukan layer bg-speaker, buletan ditengah dan speakernya, misalkan saja Nama Layer groupnya Speaker. Tinggal klik dan drag layer2 bg-speaker, buletan ditengah dan speakernya ke dalam layer group Speaker.
Tugas Selanjutnya adalah Menduplikat Layer Goup Speaker dan Layer batang. Transform kedua layer dengan menggunakan transform derajat (Rotate) seperti pada tutorial Jam Dinding. Jangan lupa atur posisi layer agar tampak seperti pada gambar.

Oke…Baru sekarang kita bikin header bar nya…Tapi tetap sabar, untuk menjadi master memang inilah cara satu2nya (Sabar, Ulet dan teliti).

Hal 1 – 2 – 3 – 4

Share on Facebook