Di bawah ini adalah salah satu metode untuk membuat header sekaligus background menu menggunakan Photoshop dengan memanfaatkan gambar favorit untuk dijadikan header blog atau website. Di sini warna latar menu tidak dengan warna tetapi menggunakan gambar yang telah dipotong dimana nantinya setiap menu dapat mempunyai background image yang berbeda.
Metode ini menggunakan Tool Crop dan Tool Slice untuk memotong gambar yang akan dijadikan header dan background menu.
Langkah-langkah membuat gambar header dan background menu dengan Photoshop:
- Buka program Photoshop.
- Buka sebuah file gambar yang akan dijadikan header sekaligus background Menu.
- Tentukan ukuran header yang akan dibuat, misalnya width 400px dan height 100px.
- Crop bagian gambar yang akan dijadikan header dengan ukuran tersebut (width 400px dan height 100px.).
- Buatlah garis bantu vertikal dan horizontal dengan menarik (drag mouse) pada ruler atas dan kiri untuk mempermudah slice (pemotongan gambar).
- Aktifkan Snap. Pada menu View.
- Click Slice Tool (K), kemudian mulai menandai area yang akan dipotong (drag mouse) sesuai garis bantu.
- Pada menu File, pilih Save For Web atau Alt+Shift+Ctrl+S.
- Click Save dan beri nama, misalnya header, pilih Image Only (*.jpg). Maka akan otomatis dibuat folder images dengan nama file berawalan "header_xx". File gambar tersebut merupakan potongan dari gambar header yang kalau disusun akan menjadi header sempurna.
- File header_03.jpg, header_04, header_05, header_06 akan dijadikan background Menu Link.
- Persiapan pembuatan Background Menu Hover. Buatlah gambar header tadi sedikit berbeda (lebih terang atau lebih gelap) untuk mebedakan antara background Menu Linn dengan background Menu Hover, misalnya dengan mengatur nilai brightness, level atau contrass.
- Ulangi langkah 7-9 untuk membuat backgroud Menu Hover tetapi dengan nama file yang berbeda misalnya hover. Setelah di simpan maka akan muncul file pada folder images dengan nama file berawalan "hover_xx".
- File hover_03.jpg, hover_04.jpg, hover_05.jpg, dan hover_06.jpg akan dijadikan background Menu Hover.
- Atur posisi setiap gambar dengan CSS agar terbentuk kembali gambar header yang utuh dari beberapa potongan gambar (seperti permainan Puzzle).
- File-file gambar yang telah dipotong-potong (di-slice) tadi kemudian di-upload ke tempat hosting blog Anda untuk dijadikan header sekaligus background Menu Link dan background Menu Hover.
- Langkas selanjutnya adalah membuat Menu dengan background yang telah dibuat.
- Silahkan pelajari langkah selanjutnya pada artikel sebelumnya mengenai Cara Membuat Tombol Menu.
