{"id":613,"date":"2007-02-25T11:31:08","date_gmt":"2007-02-25T03:31:08","guid":{"rendered":"https:\/\/www.dremi.info\/?p=613"},"modified":"2007-02-25T11:31:08","modified_gmt":"2007-02-25T03:31:08","slug":"extreme-gui-website-layout-part-3","status":"publish","type":"post","link":"https:\/\/www.dremi.info\/tutorials\/extreme-gui-website-layout-part-3.html","title":{"rendered":"Extreme GUI Website Layout Part 3"},"content":{"rendered":"<p><img decoding=\"async\" class=\"imgheader\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/images-header200\/extreme-gui.png\" alt=\"\" \/> Bada bagian ketiga tutorial ini membahas penambahan atribut panel pada bagian header <!--more--><\/p>\n<div class=\"clear\">&nbsp;<\/div>\n<p>(Halaman &#8211; 3)<\/p>\n<p style=\"text-align: left;\"><strong>Bagian Header <\/strong><\/p>\n<p><span class=\"style2\">Player Bar <\/span><\/p>\n<div>Woks, masih dibagian header, kita akan membuat player bar. Kita dapat memanfaatkan Vector Shape yakni Custom Shape Tool (U) untuk membuat bagian2 player bar.\n<\/div>\n<div>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.<br \/>\nKasi layer &gt; layer style<br \/>\nOuter Glow<\/p>\n<div id=\"img\"> <img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Extreme%20GUI%20Website%20Layout\/LayerGCS_17.jpg\" alt=\"\" width=\"256\" height=\"324\" \/> <\/div>\n<p>Gradient Overlay<\/p>\n<div id=\"img\"> <img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Extreme%20GUI%20Website%20Layout\/LayerGCS_18copy.jpg\" alt=\"\" width=\"280\" height=\"200\" \/> <\/div>\n<p>Stroke &gt; kasi 1 pixel dan warna #000000<br \/>\nHasil akhirnya<\/p>\n<div id=\"img\"> <img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Extreme%20GUI%20Website%20Layout\/AdobeGCS_23copy.jpg\" alt=\"\" width=\"267\" height=\"47\" \/> <\/div>\n<\/div>\n<div>Selanjutnya bikin objek Tombol Play (berbentuk segitiga). Gunakan Custom Shape Tool &#8211; Triangle.<\/p>\n<div id=\"img\"> <img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Extreme%20GUI%20Website%20Layout\/GCS_3.jpg\" alt=\"\" width=\"280\" height=\"204\" \/> <\/div>\n<\/div>\n<div>Tarik pada layer baru, putar sesuai dengan ilustrasi gambar.<br \/>\nKasi Layer Style yang sama seperti pada background player (No. 2 halaman ini), cuma ganti warna gradient overlaynya seperti pada gambar.<br \/>\nGradient Overlay<\/p>\n<div id=\"img\"> <img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Extreme%20GUI%20Website%20Layout\/LayerGCS_19copy.jpg\" alt=\"\" width=\"280\" height=\"209\" \/> <\/div>\n<div id=\"img\"> <img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Extreme%20GUI%20Website%20Layout\/LayerGCS_19.jpg\" alt=\"\" width=\"207\" height=\"53\" \/> <\/div>\n<\/div>\n<div>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.<br \/>\nIni hasil akhir sementara player bar<\/p>\n<div id=\"img\"> <img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Extreme%20GUI%20Website%20Layout\/AdobeGCS_24.jpg\" alt=\"\" width=\"201\" height=\"44\" \/> <\/div>\n<\/div>\n<p>Untuk memberi hiasan, tambahkan wire cable (Ingat tehnik cara membuat wire cable pada Tutorial Squirrel Mail Interface)<\/p>\n<div id=\"img\"> <img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Extreme%20GUI%20Website%20Layout\/AdobeGCS_26copy.jpg\" alt=\"\" width=\"290\" height=\"147\" \/> <\/div>\n<p>Lanjut ke bagian membuat window kiri, tengah, dan footer layout.<br \/>\nHal <a href=\"https:\/\/www.dremi.info\/tutorials\/photoshop\/extreme-gui-website-layout.html\">1<\/a> &#8211; <a href=\"https:\/\/www.dremi.info\/tutorials\/photoshop\/extreme-gui-website-layout-part-2.html\">2<\/a> &#8211; 3 &#8211; <a href=\"https:\/\/www.dremi.info\/tutorials\/photoshop\/extreme-gui-website-layout-part-4.html\">4<\/a><\/p>\n<p class=\"facebook\"><a href=\"http:\/\/www.facebook.com\/share.php?u=https:\/\/www.dremi.info\/tutorials\/extreme-gui-website-layout-part-3.html\" target=\"_blank\" title=\"Share on Facebook\">Share on Facebook<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Bada bagian ketiga tutorial ini membahas penambahan atribut panel pada bagian header Share on Facebook<\/p>\n<p class=\"facebook\"><a href=\"http:\/\/www.facebook.com\/share.php?u=https:\/\/www.dremi.info\/tutorials\/extreme-gui-website-layout-part-3.html\" target=\"_blank\" title=\"Share on Facebook\">Share on Facebook<\/a><\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[110,208,293],"_links":{"self":[{"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/posts\/613"}],"collection":[{"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/comments?post=613"}],"version-history":[{"count":0,"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/posts\/613\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/media?parent=613"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/categories?post=613"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/tags?post=613"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}