{"id":62,"date":"2008-02-10T13:12:24","date_gmt":"2008-02-10T13:12:24","guid":{"rendered":"https:\/\/www.dremi.info\/?p=62"},"modified":"2008-02-10T13:12:24","modified_gmt":"2008-02-10T13:12:24","slug":"green-layout-web-20","status":"publish","type":"post","link":"https:\/\/www.dremi.info\/tutorials\/photoshop\/green-layout-web-20.html","title":{"rendered":"Green Layout Web 2.0"},"content":{"rendered":"<p>Perkembangan design web ke arah web 2.0, bikin gw terbius..terkadang masih susah bwat nyesuaiin style baru ini, karena terbiasa menggunakan style Techno, tapi ini hanya sebuah referensi design, jadi style techno jangan sampe hilang, tapi tambahin web 2.0 <!--more--> <\/p>\n<p>hehek..nyengir dah lu&#8230;wkwkwkwkw<\/p>\n<p>Entah knapa beberapa hari ini gw sulit banged dapet inspirasi&#8230;bwat ngedisgn &#8230;<\/p>\n<p>apa ada pengaruh yak dari kerjaan kantor yang bejibun, trosss ga sesuai dengan bidang &#8230;<\/p>\n<p>hmmm&#8230;.kata tmen gw sih, kerjain aje&#8230;itung2 bwat duit rokok&#8230;tapi yaa itu tiap hari makan ati&#8230;kerjaannya &#8230;hmmm<\/p>\n<p>sampe minggu ini gw dapet ngedesign dikit ..sederhana tapi mudah2an mudah dimengerti&#8230;. hehek<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Green%20Layout%20Web%202%200\/greenweb20_26.png\" width=\"288\" height=\"321\" \/><\/p>\n<p>siapin dokumen baru ukuran standar web 760px..atow sesuka lu pada&#8230;..<\/p>\n<p>bikin seleksi bwat menu bar diatasna<\/p>\n<p>bijimane kalo gw pake style web 2.0 ke gini:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Green%20Layout%20Web%202%200\/greenweb20_18.png\" width=\"238\" height=\"353\" \/>  <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Green%20Layout%20Web%202%200\/greenweb20_20.png\" width=\"232\" height=\"194\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Green%20Layout%20Web%202%200\/greenweb20_19.png\" width=\"400\" height=\"292\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Green%20Layout%20Web%202%200\/greenweb20_21.png\" width=\"243\" height=\"195\" \/><\/p>\n<p>jadi ke gini hasil style na&#8230; <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Green%20Layout%20Web%202%200\/greenweb20_1.png\" width=\"400\" height=\"269\" \/> <\/p>\n<p>bagian bawah na, kasi kotak, make style ke gini:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Green%20Layout%20Web%202%200\/greenweb20_22.png\" width=\"237\" height=\"348\" \/> <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Green%20Layout%20Web%202%200\/greenweb20_24.png\" width=\"248\" height=\"196\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Green%20Layout%20Web%202%200\/greenweb20_23.png\" width=\"387\" height=\"281\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Green%20Layout%20Web%202%200\/greenweb20_25.png\" width=\"243\" height=\"194\" \/><\/p>\n<p>hasilna<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Green%20Layout%20Web%202%200\/greenweb20_2.png\" width=\"400\" height=\"71\" \/><\/p>\n<p>bikin shape di sebelah kiri na, pake rectangle tool <img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Green%20Layout%20Web%202%200\/rectangle-shape.png\" width=\"23\" height=\"19\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Green%20Layout%20Web%202%200\/greenweb20_3.png\" width=\"154\" height=\"388\" \/><\/p>\n<p>ambil add anchor point tool <img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Green%20Layout%20Web%202%200\/anchor.png\" width=\"22\" height=\"22\" \/><\/p>\n<p>tambahin  titik untuk bagian bawah &#8230;dan tarik titik na ke atas &#8230; <\/p>\n<p>tros tarik kedua ujung titik baru ke arah tengah, biar bentuk na ga melengkung<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Green%20Layout%20Web%202%200\/greenweb20_4.png\" width=\"161\" height=\"266\" \/> <\/p>\n<p>tambahin satu titik lagi di bagian atas&#8230; na, kali ini bikin bentukna menjadi lengkung setengan lingkaran, dengan cara tarik kedua ujung titikna ke luar<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Green%20Layout%20Web%202%200\/greenweb20_5.png\" width=\"132\" height=\"297\" \/> <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Green%20Layout%20Web%202%200\/greenweb20_6.png\" width=\"125\" height=\"307\" \/><\/p>\n<p>woke kasi style untuk shape baru lu&#8230;.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Green%20Layout%20Web%202%200\/greenweb20_27.png\" width=\"241\" height=\"350\" \/>  <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Green%20Layout%20Web%202%200\/greenweb20_28.png\" width=\"238\" height=\"193\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Green%20Layout%20Web%202%200\/greenweb20_29.png\" width=\"388\" height=\"152\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Green%20Layout%20Web%202%200\/greenweb20_8.png\" width=\"120\" height=\"299\" \/><\/p>\n<p>Lanjot ke [CTRL+Klik] pada layer shapping lu, tros pilih menu Select > Modify > Contract , kasi 2 px<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Green%20Layout%20Web%202%200\/greenweb20_9.png\" width=\"113\" height=\"290\" \/> <\/p>\n<p>ambil marquee tool , dengan mode Substract from selection<\/p>\n<p>hilangkan setengah seleksi sebelah kanan &#8230; <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Green%20Layout%20Web%202%200\/greenweb20_10.png\" width=\"187\" height=\"375\" \/><\/p>\n<p>ambil gradasi tool, kasiiin gradasi kuning ke transparan<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Green%20Layout%20Web%202%200\/greenweb20_11.png\" width=\"248\" height=\"314\" \/> <\/p>\n<p>Untuk pusat objek layout, gunakan teknik Photoshop Magic Sphere bwat ngebikin bola kristal na&#8230;taro di atas shape lu, ubah mode layerna menjadi overlay<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Green%20Layout%20Web%202%200\/greenweb20_12.png\" width=\"118\" height=\"285\" \/> <\/p>\n<p>tambahin text Green Layout di area header<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Green%20Layout%20Web%202%200\/greenweb20_13.png\" width=\"362\" height=\"128\" \/> <\/p>\n<p>beberapa variasi bisa lu tambahin juga, jangan lupa bikin menu na, dan kasiin teks style web 2.0 di area kanan shapping lu<\/p>\n<p>nah ntu bwat badges web 2.0 na  <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Green%20Layout%20Web%202%200\/greenweb20_14.png\" width=\"400\" height=\"237\" \/> <\/p>\n<p>woke jadi dah web 2.0 layout lu&#8230;hehehehe&#8230; <\/p>\n<p><a href=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Green%20Layout%20Web%202%200\/greenweb20.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Green%20Layout%20Web%202%200\/greenweb20_17.png\" alt=\"Green Layout Web 2.0 (Klik bwat ngegedein)\" width=\"400\" height=\"329\" border=\"0\" \/><\/a><\/p>\n<p>\u00c2 <\/p>\n<p class=\"facebook\"><a href=\"http:\/\/www.facebook.com\/share.php?u=https:\/\/www.dremi.info\/tutorials\/photoshop\/green-layout-web-20.html\" target=\"_blank\" title=\"Share on Facebook\">Share on Facebook<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Perkembangan design web ke arah web 2.0, bikin gw terbius..terkadang masih susah bwat nyesuaiin style baru ini, karena terbiasa menggunakan style Techno, tapi ini hanya sebuah referensi design, jadi style techno jangan sampe hilang, tapi tambahin web 2.0 Share on Facebook<\/p>\n<p class=\"facebook\"><a href=\"http:\/\/www.facebook.com\/share.php?u=https:\/\/www.dremi.info\/tutorials\/photoshop\/green-layout-web-20.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":[19],"tags":[27,108,208,241],"_links":{"self":[{"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/posts\/62"}],"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=62"}],"version-history":[{"count":0,"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/posts\/62\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/media?parent=62"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/categories?post=62"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/tags?post=62"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}