Gaya Serat Karbon dalam Navigasi

21.49 // 0 komentar // macho // Category: Photoshop //

Okey langsung aj langkang-langkahnya:

1, Buat dokumen baru 850 x 40 piksel.
2, Gandakan layer background (CTRL + J), Kemudian klik kanan pada Layer > Blending Options, Kemudian atur sperti berikut ini:


3, Untuk bagian ini kita perlu membuat sendiri tekstur serat karbon. Untuk hal ini kita buat dokumen baru 4 x 4 pixel seperti gambar di bawah ini. Atau download disini.


4, Setelah Anda membuat pola tekstur serat karbon lalu Klik Edit > Define Pattern, kemudian klik Ok. lalu kembali ke navigasi Anda
5, Buat layer baru di atas semua layer, lalu pilih Paint Bucket Tool dan atur di Tool Option Bar seperti di bawah ini :


6, lalu isi pada layer yang baru dibuat, maka anda akan memiliki seperti dibawah ini:


7, sebelum menyisispkan teks, tampilkan grid, ini untuk mempermudah pembagian lebar per menu ( View > Show > Grid ), Atur Grid dengan klik Edit > Preferences > Guides, Grid & Slices, seperti pada gambar di bawah:


8, Buatlah teks yang mewakili suatu menu diantara grid, sisipkan teks diantara 100 pixel :



9, Dan atur seperti dibawah ini:

10, Kemudian klik kanan Layer Teks > Blending Options, Kemudian atur sperti berikut ini:

10, Sisipkan Icon Menu, Anda dapat download dari DryIcons.com. Aturlah icon diantara Grid berukuran 70 pixel.


11, Di antara setiap link menambahkan dua baris vertikal 1 px sebelah satu sama lain, warna garis pertama hitam dan yang kedua putih. Setelah Anda membuat baris Anda mengatur layer opacity 50% dan atur layer mode Soft Light.


Hasil :


Menu gambar dalam keadaan normal sudah selesai

12, Sekarang kita buat menu gambar dalam keadaan dipilih (hovering). tambahkan layer baru tepat diatas layer tekstur serat karbon, kemudian isi layer dengan warna terang, disini saya pakai #ffffff, dan atur layer mode Overly, hasil:


klik disini untuk lihat hasil akhir
Selamat mencoba…

Untuk kode navigasi ini menjadi sebuah HTML / CSS Dokumen. Klik Disini