{"id":74,"date":"2008-05-12T07:32:19","date_gmt":"2008-05-12T07:32:19","guid":{"rendered":"https:\/\/www.dremi.info\/?p=74"},"modified":"2008-05-12T07:32:19","modified_gmt":"2008-05-12T07:32:19","slug":"simple-clean-techy-navigation-bar","status":"publish","type":"post","link":"https:\/\/www.dremi.info\/tutorials\/photoshop\/simple-clean-techy-navigation-bar.html","title":{"rendered":"Simple Clean Techy Navigation Bar"},"content":{"rendered":"<p>sebuah kesederhanaan biasana berbuah keindahan, itu yang gw pelajari saat pertama kali terjun bebas ke dunia web ini. kali ini kita bikin tutorial untuk sebuah navigasi bergaya techy dan clean. <!--more--> <\/p>\n<p>sebuah kesederhanaan biasana berbuah keindahan, itu yang gw pelajari saat pertama kali terjun bebas ke dunia web ini. karena ada sebuah konsep sederhana yang selalu di pegang oleh para web designer. yakni konsep kesederhaan dalam mendesign layout akan menghasilkan design layout yang <a href=\"https:\/\/www.dremi.info\/forum\/viewtopic.php?t=4\" target=\"_blank\" rel=\"noopener\">seimbang dan konsisten<\/a>&#8230;<\/p>\n<p>woke berangkat dari konsep sederhana di atas, ada tutorial bwat lu&#8230;.<\/p>\n<p>kali ini kita bikin tutorial untuk sebuah navigasi bergaya techy dan clean.<\/p>\n<p>sedederhana aja broder, siapin doku secukupna. gunakan latar berwarna hitam.<\/p>\n<p>ambil tool shapping dengan radius 10px. gambar shapping na ke gini. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Simple%20Clean%20Techy%20Navigation%20Bar\/techy-bar18.png\" width=\"400\" height=\"124\" \/><\/p>\n<p>kasi style ke gini&#8230;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Simple%20Clean%20Techy%20Navigation%20Bar\/techy-bar19.png\" width=\"259\" height=\"373\" \/> <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Simple%20Clean%20Techy%20Navigation%20Bar\/techy-bar20.png\" width=\"228\" height=\"270\" \/><\/p>\n<p><a href=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Simple%20Clean%20Techy%20Navigation%20Bar\/techy-bar2.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Simple%20Clean%20Techy%20Navigation%20Bar\/techy-bar2-400.png\" width=\"400\" height=\"87\" border=\"0\" \/><\/a><\/p>\n<p>bwat titik path dengan pen tool&#8230;. dan ciptakan seleksi &#8230;<\/p>\n<p><a href=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Simple%20Clean%20Techy%20Navigation%20Bar\/techy-bar3.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Simple%20Clean%20Techy%20Navigation%20Bar\/techy-bar3-400.png\" width=\"400\" height=\"107\" border=\"0\" \/><\/a> <\/p>\n<p>convert titik na menjadi lengkungan halus. <\/p>\n<p><a href=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Simple%20Clean%20Techy%20Navigation%20Bar\/techy-bar4.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Simple%20Clean%20Techy%20Navigation%20Bar\/techy-bar4-400.png\" width=\"400\" height=\"106\" border=\"0\" \/><\/a><\/p>\n<p>woke&#8230; klik kanan pada path, pilih make selection, bikin layer baru, fill dengan warna putih, kasi nama layer shadow. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Simple%20Clean%20Techy%20Navigation%20Bar\/techy-bar5.png\" width=\"225\" height=\"275\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Simple%20Clean%20Techy%20Navigation%20Bar\/techy-bar6.png\" width=\"286\" height=\"218\" \/><\/p>\n<p><a href=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Simple%20Clean%20Techy%20Navigation%20Bar\/techy-bar7.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Simple%20Clean%20Techy%20Navigation%20Bar\/techy-bar7-400.png\" width=\"400\" height=\"107\" border=\"0\" \/><\/a><\/p>\n<p><a href=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Simple%20Clean%20Techy%20Navigation%20Bar\/techy-bar8.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Simple%20Clean%20Techy%20Navigation%20Bar\/techy-bar8-400.png\" width=\"400\" height=\"101\" border=\"0\" \/><\/a><\/p>\n<p>bwat ngilangin objek yang tidak diperlukan, [CTRL+Click] pada layer shapping dasar navigasi, lalu pilih Select > Invers [CTRL+SHIFT+I], pencet [DELETE] pada layer  shadow.<\/p>\n<p><a href=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Simple%20Clean%20Techy%20Navigation%20Bar\/techy-bar9.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Simple%20Clean%20Techy%20Navigation%20Bar\/techy-bar9-400.png\" width=\"400\" height=\"131\" border=\"0\" \/><\/a><\/p>\n<p><a href=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Simple%20Clean%20Techy%20Navigation%20Bar\/techy-bar11.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Simple%20Clean%20Techy%20Navigation%20Bar\/techy-bar11-400.png\" width=\"400\" height=\"290\" border=\"0\" \/><\/a><\/p>\n<p>gw kasi style gradasi ke gini :<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Simple%20Clean%20Techy%20Navigation%20Bar\/techy-bar23.png\" width=\"244\" height=\"195\" \/> <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Simple%20Clean%20Techy%20Navigation%20Bar\/techy-bar22.png\" width=\"394\" height=\"195\" \/><\/p>\n<p><a href=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Simple%20Clean%20Techy%20Navigation%20Bar\/techy-bar12.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Simple%20Clean%20Techy%20Navigation%20Bar\/techy-bar12-400.png\" width=\"400\" height=\"110\" border=\"0\" \/><\/a><\/p>\n<p>untuk menu na gw kasi warna hijo muda #CCFF00, atur posisi na ke gini <\/p>\n<p><a href=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Simple%20Clean%20Techy%20Navigation%20Bar\/techy-bar13.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Simple%20Clean%20Techy%20Navigation%20Bar\/techy-bar13-400.png\" width=\"400\" height=\"92\" border=\"0\" \/><\/a><\/p>\n<p>nah skedar pemanis, gw kasi bar pemisah tiap menu na&#8230;<\/p>\n<p>gw bikin na make teks biasa, gw ketik string ini &#8220;&#8212;&#8212;&#8220;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Simple%20Clean%20Techy%20Navigation%20Bar\/techy-bar14.png\" width=\"270\" height=\"140\" \/> <\/p>\n<p>transform ke Rotate 90<sup>o  <\/sup> CW<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Simple%20Clean%20Techy%20Navigation%20Bar\/techy-bar15.png\" width=\"131\" height=\"143\" \/><\/p>\n<p>geser ke sebelah kiri menu&#8230;dan kotak di ujungna, sama teks angka 01 di dalam kotak na.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Simple%20Clean%20Techy%20Navigation%20Bar\/techy-bar16.png\" width=\"398\" height=\"299\" \/> <\/p>\n<p>woke duplikat menjadi beberapa buah, untuk menu lainna&#8230;<\/p>\n<p><a href=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Simple%20Clean%20Techy%20Navigation%20Bar\/techy-bar17.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Simple%20Clean%20Techy%20Navigation%20Bar\/techy-bar17-400.png\" width=\"400\" height=\"101\" border=\"0\" \/><\/a> <\/p>\n<p>jadi dah hahahaa&#8230;.. simple kaaann &#8230;<\/p>\n<p><a href=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Simple%20Clean%20Techy%20Navigation%20Bar\/techy-bar.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/i175.photobucket.com\/albums\/w126\/hairulazami\/Simple%20Clean%20Techy%20Navigation%20Bar\/techy-bar-thumbs.png\" alt=\"Simple Clean Techy Navigation Bar\" width=\"204\" height=\"112\" border=\"0\" \/><\/a> <\/p><\/p>\n<p class=\"facebook\"><a href=\"http:\/\/www.facebook.com\/share.php?u=https:\/\/www.dremi.info\/tutorials\/photoshop\/simple-clean-techy-navigation-bar.html\" target=\"_blank\" title=\"Share on Facebook\">Share on Facebook<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>sebuah kesederhanaan biasana berbuah keindahan, itu yang gw pelajari saat pertama kali terjun bebas ke dunia web ini. kali ini kita bikin tutorial untuk sebuah navigasi bergaya techy dan clean. Share on Facebook<\/p>\n<p class=\"facebook\"><a href=\"http:\/\/www.facebook.com\/share.php?u=https:\/\/www.dremi.info\/tutorials\/photoshop\/simple-clean-techy-navigation-bar.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":[21,59,170],"_links":{"self":[{"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/posts\/74"}],"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=74"}],"version-history":[{"count":0,"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/posts\/74\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/media?parent=74"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/categories?post=74"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/tags?post=74"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}