Menu navigasi ialah struktur pertama dari layout desain website yang akan anda buat ,pada materi pelatihan ini anda akan membuat menu navigasi yang berjajar kearah samping .Warna yang lebih gelap akan digunakan untuk bagian navigasi supaya terlihat kontras dengan warna dasar background website yang telah anda buat sebelumnya.
Perbedaan
warna secara tidak langsung akan menunjukan stuktur atau bagian-bagian
website yang berbeda ,sehingga dapat memudahkan mata pengunjung dalam
mencari bagian-bagian website.
Buatlah bidang persegi
panjang dengan menggunakan rectangle tool klik dan geser bidang persegi
panjang tersebut sehingga memiliki ukuran lebar 1366 pixel (memenuhi
lebar layar ) dan tinggi 60 pixel .
Berikut caranya :
-Untuk memunculkan ruler tekan ctrl + R atau pilih menu view -> Ruler .
-Pada bagian RULER klik kanan dan pilih pixel sebagai dasar ukuran anda
-Berikan nama navigation untuk bidang (shape) yang sudah dibuat ,dengan cara klik kanan pada shape di panel layer lalu pilih layer properties.
-Klik kanan lagi shape navigation sekarang pilih blending option . Pada setingan blending option pilih opsi gradient overlay lalu atur opsi gradient seperti gambar di bawah :
-Klik menu gradient dibawah opacity atau yang ditunjukan bulatan merah pada gambar diatas untuk memunculkan opsi gradasi warna yang tersedia ,ubah setingan gradasi warna yang tersedia ,ubah setingan gradasi menjadi seperti gambar dibawah ini:
-Sampai tahapan ini anda akan mendapatkan layout desain dengan navigasi sebagai berikut:
Untuk mempercantik tampilan desain menu navigasi silahkan buat shape baru berwarna dasar hijau #17bd00 dengan ukuran lebar 1366 pixel dan tinggi 20 pixel .Berikan Effect noise seperti pada tahapan membuat background lalu berikan nama top navigation pada layer properties shape tersebut.
Terakhir buat shape baru dengan ukuran lebar 1366 pixel ,tinggi 2 pixel dan warna dasar #555555. Berikan nama bottom navigation pada layer properties tanpa tambahan effect photoshop .
Aturlah posisi layer-layer desain navigasi menu yang telah dibuat dengan menggunakan move tool.
-Untuk layer navigation geser kebawah sebanyak 20 pixel kemudian untuk top navigation geser keposisi paling atas ,terakhir geser bottom navigation keposisi dibawah layer navigation dengan sedikit memberikan jarak .Sampai tahap ini anda akan menghasilkan desain navigasi yang lebih menarik .
-Desain navigasi menu akan diisi dengan link-link website dan sosial network ,anda akan ,menempatkan link website disebelah kiri dan link sosial disebelah kanan.
-Gunakan type tool untuk membuat text kemudian ketik link yang akan anda gunakan di menu navigasi.
-Sebelum itu buat canvas baru berukuran lebar 980 pixel dan tinggi 2000 pixel berwarna dasar putih dengan cara pilih menu file-new lalu ubah setingan width dan heightnya.
klik layer tersebut dengan menggunakan move tool,lalu geser kelayout desain website.
-Pada panel layer yang baru anda geser dengan nama ruler ,kemudian klik layer ruler dan background pada layer panel secara bersamaan sambil menekan ctrl.
klik align top edges dan align horizontal center sehingga layer ruler berada ditengah-tengah background.
-Klik Ruler lalu klik kanan dan pilih blending option atur setingannya menjadi seperti berikut :
-Kemudian centang pada kotak stroke ,pada bagian size isikan 3 pixel ,position pilih outside,Blend mode pilih normal ,opacity 100% ,File type color pilih warna merah.
Dengan setingan tersebut ruler digunakan untuk membatasi ukuran content website menjadi berukuran lebar 980 pixel ,dengan ukuran ini website akan tampil baik pada ukuran layar monitor (viewport) mulai dari 1024 pixel keatas.
Untuk menyembunyikan ruler atau menampilkannya kembali anda klik icon berbentuk mata pada layer panel.
Kembali lagi kepembuatan link silahkan ketik ''Beranda'',''Tentang Kami'',dan ''Hubungi Kami'' diatas layer navigasi didalam batas ruler sebelah kiri atas .Tambahkan juga icon-icon social network diantaranya ''Icon RSS'',icon twitter'',icon facebook'',dan ''icon YM''diatas layer navigasi sebelah kanan.
-Buat shape baru berukuran lebar 3 pixel dan tinggi 50 pixel untuk dijadikan pemisah antar text link ,ubah nama shape menjadi dashed dan berikan effect gradasi .
-Tempatkan dashed diantara text link dengan jarak yang cukup ,klik kanan dibagian panel layer selanjutnya duplicate shape tersebut sehingga anda memiliki 2 shape pemisah.
-Sampai tahap ini layout desain untuk bagian navigasi menu telah selesai ,silahkan save kerjaan anda dengan nama index.psd kemudian simpan didalam folder project photoshop.
-Selanjutnya jangan lupa untuk terus menyimpan pekerjaan yang telah anda selesaikan dengan cara pilih file->save atau menekan ctrl + s
About the Author
0 comments: