Cara Membuat Header Sekaligus Menu Dengan Photoshop CS 4


Jika saat ini anda sedang sibuk mendesain web/blog tentu anda tidak asing dengan istilah header. Header ini merupakan bagian paling atas dari sebuah halaman web tempat menulisakan judul web (Kadang-kadang dalam bentuk gambar). Biasanya pada bagian header ini terdapat menu-menu yang mengarah ke sebuah link/url seperti: home, about, contact, dls. Langsung saja, untuk membuat header sekaligus menu menggunakan Adobe Photoshop CS 4 dapat dilakukan dengan langkah-langkah berikut: 

1.       Pilih File -> New. Ukuran 960 x 150 pixel. Lalu klik Ok.
2.   Gunakan Gradient Tool untuk mewarnai. (gunakan Panel Color untuk memilih warna. saya menggunakan foreground: biru dan background: hitam)
3.    Gunakan Type Tool untuk menuliskan judul web/blog dan menu seperti contoh gambar di bawah ini.
4.    Gunakan Slice Tool untuk memotong/memilah bagian yang akan dijadikan header dan menu. Aktifkan Slice Tool -> letakkan pointer di sudut kiri atas -> lalu klik dan tahan sambil menyeret ke kanan sesuai luas yang diinginkan. Kemudian, pisahkan juga untuk menu (home, contact me dst) dengan cara yang sama. Lihat gambar.
5.   Selanjutnya, simpan menjadi web. Klik File ->Save For Web & Devices… supaya ukuran gambar tidak terlalu besar pilih format JPEG pada kotak preset. Lalu klik Save.
 6. Kemudian akan muncul kotak dialog Save Optimized As. Pada kotak Save as type pilih HTML and images (*.html) lalu klik Save. Lihat hasilnya di mana anda menyimpannya tadi. akan tampak nama file dengan format .html dan folder images yang berisi gambar yang telah dipotong menggunakan Slice Tool tadi.
7.       Jika file .html dibuka dengan firefox akan tampak seperti gambar berikut.
Langkah selanjutnya adalah mengeditnya menggunakan Notepad untuk menambahkan link pada menu (home, contact me, about me, tips n trik) yang akan dibahas pada posting berikutnya cara membuat link pada gambar.

8 comments:

  1. waw ini yang saya cari-cari gan thanks ya gan..post yg lain jg dong ^^

    ReplyDelete
  2. cara uploadnya gimana!

    ReplyDelete
  3. terima kaish sob buat tutorialnya :)

    ReplyDelete
  4. ternyata mudah membuat desain header ya,gak susah seperti yang dibayangkan.

    ReplyDelete
  5. Terima kasih tutorialna, langsung praktek di blog sendiri.

    ReplyDelete