Extreme GUI Website Layout

(Halaman - 4)

Bagian Window Layout

Window Kiri, Tengah dan Footer

1. Yang gue maksud window disini adalah bagian jendela interface layout, yakni merupakan bagian kiri dan tengah layout halaman website kita. Sekarang buat Layer Group Window Kiri.
2. Kemudian buat sebuah retangle objek (U) dengan radius 6 pixels. Gunakan Layer style yang sama pada header bar. Ubah nama layernya menjadi Bg-Window Kiri

   Tempatkan di bagian kiri layout, dibawah panel Speaker. Perhatikan juga posisi layernya, berada diatas layer group Speaker.

   

3. Duplikat Layer Bg-Window Kiri , dan transform lah dengan lebar (W) = 90% dan Tinggi (H) = 95%. Langsung kasi Layer Style

   Color Overlay

   

   Inner Shadow

   

   Kasi Stroke juga 1 pixels dengan warna #000000

   Hasil Sementara Window Kiri

   

4. Dengan teknik dan Layer style yang sama, ciptakan Window Tengah dan Footer. Sehingga tampak hasil sementaranya seperti pada gambar.

   

   Perhatikan bagian Footer, bidangnya tidak memenuhi lebar layout, karena sengaja disisakan sedikit ruang untuk bagian pentup selanjutnya, dan ini merupakan bagian dari Imajinasi gue..

5. Pada Bagian sisa ruang yang dimaksud diatas, akan kita gunakan untuk menyeimbangkan layout website. Sekarang Duplicat lah dua buah Layer Batang pada Halaman - 1. Dan duplikat juga Satu buah Speaker dengan ukuran kecil. Tempatkan seperti posisi dibawah ini. Nah sekarang baru ber-imbang keliatannya..

   

   Waaaahhh udah selesai sekarang…Gue seneng banget akhirnya gue bisa berbagi dengan netter semua. Tampilan Layoutnya udah selesai brooo….

   Ini hasil Akhirnya Layour “Extreme GUI Website”. Klik untuk memperbesar.

   

   Halaman - 1 Halaman - 2 Halaman - 3 Halaman - 4

Extreme GUI Website Layout

(Halaman - 3)

Bagian Header

Player Bar

1. Woks, masih dibagian header, kita akan membuat player bar. Kita dapat memanfaatkan Vector Shape yakni Custom Shape Tool (U) untuk membuat bagian2 player bar.
2. Bikin Layer goup dengan nama player. Bikin terlebih dahulu background player barnya dengan menggunakan rectangle tool dan transformlah menggunakan methode persfektif. Atur posisinya di bagian bawah kanan objek header bar.

   Kasi layer > layer style

   Outer Glow

   

   Gradient Overlay

   

   Stroke > kasi 1 pixel dan warna #000000

   Hasil akhirnya

   

3. Selanjutnya bikin objek Tombol Play (berbentuk segitiga). Gunakan Custom Shape Tool - Triangle.

   

4. Tarik pada layer baru, putar sesuai dengan ilustrasi gambar.

   Kasi Layer Style yang sama seperti pada background player (No. 2 halaman ini), cuma ganti warna gradient overlaynya seperti pada gambar.

   Gradient Overlay

   

   

5. Lanjutkan dengan membuat tombol Stop, Pause, Previous, dan Next. Netter semua bisa menggunakan Pencil tool untuk membuat Pause dan Rectangle Tool untuk Tombol Stop. Tapi perlu diperhatikan bahwa, kita berimajinasi saat ini untuk mengilustrasikan player yang sedang dalam posisi play. Jadi untuk membuat Player tombol Stop, Pause, Previous, dan Next, gradient overlaynya tidak perlu dirubah.

   Ini hasil akhir sementara player bar

   

6. Untuk memberi hiasan, tambahkan wire cable (Ingat tehnik cara membuat wire cable pada Tutorial Squirrel Mail Interface)

   

   Lanjut ke bagian membuat window kiri, tengah, dan footer layout.

   Halaman - 1 Halaman - 2 Halaman - 3 Halaman - 4

Extreme GUI Website Layout

(Halaman - 2)

Bagian Header

Header Bar

1. Siapkan Layer Group dengan nama Header-Top. Gunakan Rounded Rectangle Tool (U) , dengan radius = 6 pixel. Untuk membuat dasar header. Kasi nama layer Header. Kasi juga layer style yang sama seperti pada layer style batang. Atur posisi layer dan objek seperti pada gambar.

   

   Wow, mirip apa yaaah, heheheeee..ikutin terus ya langkahnya..

2. Karena temanya adalah sound system (Player GUI), maka gue terinspirasi untuk menambahkan sound panel pada headernya. Misalkan saja Volume, Equalizer, dan screen Player, beikut tombol2 playernya.
3. Buat Objek Bulat seperti pada speaker dengan Elips Tool (U) juga. Bisa juga kamu gunakan teknik duplicat-layer. Kasi nama layer “Volume-Control”. Layer stylenya sama persis dengan Layer Speaker sebelumnya (Bagian Panel Speaker: Langkah no. 3 dan 4)

   

4. Nah setelah itu kasi tanda garis putaran pada sekitar volume-control, yaaahhh inget2 aja pinggiran volume control pada sound system seperti apa? hheheeee…ini berguna untuk memicu inspirasi kalian…
5. Kembali gunakan teknik Transform derajat (Ingat tutorial Jam Dinding) untuk memutar posisi pada tanda garis putaran sekitar volume-control

   

6. Kalo sudah mirip dengan aslinya, tambahkan lagi dua buah tombol bulat disekitar volume control

   

7. Untuk mengilustrasikan volume indikator, buatlah sebuah titik dengan menggunakan Pencil Tool ukuran 2 pixels berwarna merah.

   

8. Sekarang duplicat satu lagi Layer group “speaker” yang lebih kecil untuk menutupi bagian yang dilingkari tanda merah

   

   

9. Sekarang tambahkan juga Panel Equalizer…Gunakan Rectangle tool dengan radius 4 pixels untuk membuatnya. Ubah nama layernya menjadi “bar-equalizer”.

   Kasi Layer > Layer Style

   Inner Shadow

   

   Color Overlay

   

   Stroke > kasi 1 pixels dan warna #000000

   

10. Duplicat layer bar-equalizer menjadi empat (4). Jajarkan posisinya seperti pada gambar

    

11. Tambahkan lagi slider untuk masing2 bar-equalizernya. Gunakan teknik yang sama untuk membuatnya (seperti No.10 halaman ini). Setelah itu tambahkan tanda merah untuk indikator slider.

    

12. Sekarang kita akan membuat screen playernya. Gunakan Rectangle tool (U) kembali, tempatkan posisinya seperti pada gambar hasil akhirnya.

    Kasi Layer > Layer Style

    Outer Glow

    

    Gradient Overlay

    

    Inner Glow

    

    Hasil Akhir yang dimaksud

    

13. Nah bagian header Bar udah selesai…Lanjut lagi dengan membuat Shadow Layer untuk kesan Glossynya tempatkan diatas layer Screen (Lihat tutorial tombol Glossy dr.emi Style).
14. Tambahkan juga beberapa teks untuk nama domain dan slogan, kemudian tambahkan judul “EXTREME GUI WEBSITE”, teks”Play” dan jam putaran player..

    Download disini untuk Font DigifaceWide

    Hasil Sementara Header Bar

    

    Langkah header bar udah beres, lanjut ke bagian membuat panel player (Play, Stop, Pause, Previous, dan Next).

    Halaman - 1 Halaman - 2 Halaman - 3 Halaman - 4