Tutorial Photoshop Simple Clean Techy Navigation Bar | Copyright 2008 Web 2.0 www.dremi.info

Tutorial Photoshop, Forum Photoshop, Tutorial CSS, Tutorial PHP, HTML, Web Tips, dll ! dremi.info

Custom Search

May ‘08 12 Simple Clean Techy Navigation Bar

2148 hits 4 comments 375 download print send

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 seimbang dan konsisten...

woke berangkat dari konsep sederhana di atas, ada tutorial bwat lu....

kali ini kita bikin tutorial untuk sebuah navigasi bergaya techy dan clean.

sedederhana aja broder, siapin doku secukupna. gunakan latar berwarna hitam.

ambil tool shapping dengan radius 10px. gambar shapping na ke gini.

kasi style ke gini...

bwat titik path dengan pen tool.... dan ciptakan seleksi ...

convert titik na menjadi lengkungan halus.

woke... klik kanan pada path, pilih make selection, bikin layer baru, fill dengan warna putih, kasi nama layer shadow.

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.

gw kasi style gradasi ke gini :

untuk menu na gw kasi warna hijo muda #CCFF00, atur posisi na ke gini

nah skedar pemanis, gw kasi bar pemisah tiap menu na...

gw bikin na make teks biasa, gw ketik string ini "------"

transform ke Rotate 90^o CW

geser ke sebelah kiri menu...dan kotak di ujungna, sama teks angka 01 di dalam kotak na.

woke duplikat menjadi beberapa buah, untuk menu lainna...

jadi dah hahahaa..... simple kaaann ...

375 download print send

Technorati Cosmos: other blogs commenting on this post

SOCIAL BOOKMARK :

Social Bookmarks

PERMALINK HERE :

http://www.dremi.info/tutorial/photoshop/simple-clean-techy-navigation-bar.html

SHARE TUTORIAL :

<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="http://www.dremi.info/forum/viewtopic.php?t=4" target="_blank">seimbang dan konsisten</a>...</p>
<p>woke berangkat dari konsep sederhana di atas, ada tutorial bwat lu....</p>
<p>kali ini kita bikin tutorial untuk sebuah navigasi bergaya techy dan clean.</p>
<p>sedederhana aja broder, siapin doku secukupna. gunakan latar berwarna hitam.</p>
<p>ambil tool shapping dengan radius 10px. gambar shapping na ke gini. </p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Simple%20Clean%20Techy%20Navigation%20Bar/techy-bar18.png" width="400" height="124" /></p>
<p>kasi style ke gini...</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Simple%20Clean%20Techy%20Navigation%20Bar/techy-bar19.png" width="259" height="373" /> </p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Simple%20Clean%20Techy%20Navigation%20Bar/techy-bar20.png" width="228" height="270" /></p>
<p><a href="http://i175.photobucket.com/albums/w126/hairulazami/Simple%20Clean%20Techy%20Navigation%20Bar/techy-bar2.png" target="_blank"><img 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>
<p>bwat titik path dengan pen tool.... dan ciptakan seleksi ...</p>
<p><a href="http://i175.photobucket.com/albums/w126/hairulazami/Simple%20Clean%20Techy%20Navigation%20Bar/techy-bar3.png" target="_blank"><img 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>
<p>convert titik na menjadi lengkungan halus. </p>
<p><a href="http://i175.photobucket.com/albums/w126/hairulazami/Simple%20Clean%20Techy%20Navigation%20Bar/techy-bar4.png" target="_blank"><img 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>
<p>woke... klik kanan pada path, pilih make selection, bikin layer baru, fill dengan warna putih, kasi nama layer shadow. </p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Simple%20Clean%20Techy%20Navigation%20Bar/techy-bar5.png" width="225" height="275" /></p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Simple%20Clean%20Techy%20Navigation%20Bar/techy-bar6.png" width="286" height="218" /></p>
<p><a href="http://i175.photobucket.com/albums/w126/hairulazami/Simple%20Clean%20Techy%20Navigation%20Bar/techy-bar7.png" target="_blank"><img 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>
<p><a href="http://i175.photobucket.com/albums/w126/hairulazami/Simple%20Clean%20Techy%20Navigation%20Bar/techy-bar8.png" target="_blank"><img 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>
<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>
<p><a href="http://i175.photobucket.com/albums/w126/hairulazami/Simple%20Clean%20Techy%20Navigation%20Bar/techy-bar9.png" target="_blank"><img 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>
<p><a href="http://i175.photobucket.com/albums/w126/hairulazami/Simple%20Clean%20Techy%20Navigation%20Bar/techy-bar11.png" target="_blank"><img 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>
<p>gw kasi style gradasi ke gini :</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Simple%20Clean%20Techy%20Navigation%20Bar/techy-bar23.png" width="244" height="195" /> </p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Simple%20Clean%20Techy%20Navigation%20Bar/techy-bar22.png" width="394" height="195" /></p>
<p><a href="http://i175.photobucket.com/albums/w126/hairulazami/Simple%20Clean%20Techy%20Navigation%20Bar/techy-bar12.png" target="_blank"><img 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>
<p>untuk menu na gw kasi warna hijo muda #CCFF00, atur posisi na ke gini </p>
<p><a href="http://i175.photobucket.com/albums/w126/hairulazami/Simple%20Clean%20Techy%20Navigation%20Bar/techy-bar13.png" target="_blank"><img 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>
<p>nah skedar pemanis, gw kasi bar pemisah tiap menu na...</p>
<p>gw bikin na make teks biasa, gw ketik string ini "------"</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Simple%20Clean%20Techy%20Navigation%20Bar/techy-bar14.png" width="270" height="140" /> </p>
<p>transform ke Rotate 90<sup>o  </sup> CW</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Simple%20Clean%20Techy%20Navigation%20Bar/techy-bar15.png" width="131" height="143" /></p>
<p>geser ke sebelah kiri menu...dan kotak di ujungna, sama teks angka 01 di dalam kotak na.</p>
<p><img src="http://i175.photobucket.com/albums/w126/hairulazami/Simple%20Clean%20Techy%20Navigation%20Bar/techy-bar16.png" width="398" height="299" /> </p>
<p>woke duplikat menjadi beberapa buah, untuk menu lainna...</p>
<p><a href="http://i175.photobucket.com/albums/w126/hairulazami/Simple%20Clean%20Techy%20Navigation%20Bar/techy-bar17.png" target="_blank"><img 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>
<p>jadi dah hahahaa..... simple kaaann ...</p>
<p><a href="http://i175.photobucket.com/albums/w126/hairulazami/Simple%20Clean%20Techy%20Navigation%20Bar/techy-bar.png" target="_blank"><img 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>  </p>
 <P>&nbsp;</P><P style='font-size:11px;'><strong>© Copyright 2008 <a href="http://www.dremi.info" target="_blank" title="tutorial Photoshop">www.dremi.info</a> </strong><BR>
Original Post: <a href='http://www.dremi.info/tutorial/photoshop/simple-clean-techy-navigation-bar.html' title='tutorial photoshop Simple Clean Techy Navigation Bar'>Simple Clean Techy Navigation Bar</a> Category: <a href='http://www.dremi.info/tutorial/photoshop/button.html' title='tutorial photoshop Button'>Button</a>
<BR><B>About the Author:</B> dr.emi is a free man to distribute anything that he was founded. As a Webmaster He was publishing <a href="http://www.dremi.info" target="_blank" title="tutorial Photoshop">www.dremi.info</a> to create one community that loves free idealism. Very specialy in Design Category. <I>Welcome to love it!</I></P>

Selama untuk keperluan non profit dan belajar gratis, dipersilahkan untuk dicopy, disebarluaskan, atow diperbanyak, tanpa merubah content tutorial dengan tetap memasang author link, sesuai source code HTML na. Ntu tandana lu mensupport All Free Idealism dan menghargai karya dr.emi. Copy TAG HTML diatas bwat dipasang di web / blog lu.

4 Comments to
“ Simple Clean Techy Navigation Bar “

dr.emi

Posted On: 30-07-2008 / 01:01:44

woke... silakan, saya juga udah ga sabar pengen input tutor baru, nanti ditunggu saja... mahap kalo lama... namana juga bujangan

)

andrhey

Posted On: 30-07-2008 / 00:56:36

thank bgt tutor nya simpel tapi hasilnya cantik bgt,saya kopi ke blog saya,bagi bagi ilmu sama teman2,kapan nih tutor yg baru nya.

oyik

Posted On: 27-05-2008 / 19:34:47

weeeeee....hhh tah nu kiyeu tahh... hayang na teh nu sederhana, simple tapi alus hasilna... nuhun tutor na... cookot aahhh....

dr.emi

Posted On: 14-05-2008 / 21:58:09

bwat kawand kawandh, kopi tutorial boleh, asal memperhatikan aturan mainna, bagaimana menghargai karya dr.emi / orang lain. seperti yang gw jelasin dalam kotak biru muda pada tiap akhir tutorial.

Post your comments