{"id":611,"date":"2007-02-25T11:30:15","date_gmt":"2007-02-25T03:30:15","guid":{"rendered":"https:\/\/www.dremi.info\/?p=611"},"modified":"2007-02-25T11:30:15","modified_gmt":"2007-02-25T03:30:15","slug":"extreme-gui-website-layout-part-2","status":"publish","type":"post","link":"https:\/\/www.dremi.info\/tutorials\/photoshop\/extreme-gui-website-layout-part-2.html","title":{"rendered":"Extreme GUI Website Layout Part 2"},"content":{"rendered":"

\"\" Bagian kedua membahas objek pada bagian header layout<\/p>\n

 <\/div>\n

(Halaman – 2)<\/p>\n

Bagian Header<\/strong><\/p>\n

Header Bar<\/p>\n

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.<\/p>\n
\"\" <\/div>\n

Wow, mirip apa yaaah, heheheeee..ikutin terus ya langkahnya..\n<\/p><\/div>\n

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.\n<\/div>\n
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)<\/p>\n
\"\" <\/div>\n<\/div>\n
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…\n<\/div>\n
Kembali gunakan teknik Transform derajat (Ingat tutorial Jam Dinding) untuk memutar posisi pada tanda garis putaran sekitar volume-control<\/p>\n
\"\" <\/div>\n<\/div>\n
Kalo sudah mirip dengan aslinya, tambahkan lagi dua buah tombol bulat disekitar volume control<\/p>\n
\"\" <\/div>\n<\/div>\n
Untuk mengilustrasikan volume indikator, buatlah sebuah titik dengan menggunakan Pencil Tool ukuran 2 pixels berwarna merah.<\/p>\n
\"\" <\/div>\n<\/div>\n
Sekarang duplicat satu lagi Layer group “speaker” yang lebih kecil untuk menutupi bagian yang dilingkari tanda merah<\/p>\n
\"\" <\/div>\n
\"\" <\/div>\n<\/div>\n
Sekarang tambahkan juga Panel Equalizer…Gunakan Rectangle tool dengan radius 4 pixels untuk membuatnya. Ubah nama layernya menjadi “bar-equalizer”.
\nKasi Layer > Layer Style
\nInner Shadow<\/p>\n
\"\" <\/div>\n

Color Overlay<\/p>\n

\"\" <\/div>\n

Stroke > kasi 1 pixels dan warna #000000<\/p>\n

\"\" <\/div>\n<\/div>\n
Duplicat layer bar-equalizer menjadi empat (4). Jajarkan posisinya seperti pada gambar<\/p>\n
\"\" <\/div>\n<\/div>\n
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.<\/p>\n
\"\" <\/div>\n<\/div>\n
Sekarang kita akan membuat screen playernya. Gunakan Rectangle tool (U) kembali, tempatkan posisinya seperti pada gambar hasil akhirnya.
\nKasi Layer > Layer Style
\nOuter Glow<\/p>\n
\"\" <\/div>\n

Gradient Overlay<\/p>\n

\"\" <\/div>\n

Inner Glow<\/p>\n

\"\" <\/div>\n

Hasil Akhir yang dimaksud<\/p>\n

\"\" <\/div>\n<\/div>\n
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).\n<\/div>\n

Tambahkan juga beberapa teks untuk nama domain dan slogan, kemudian tambahkan judul “EXTREME GUI WEBSITE”, teks”Play” dan jam putaran player..
\nDownload disini untuk Font DigifaceWide <\/a>
\nHasil Sementara Header Bar<\/p>\n