Membuat Gambar Header Dan Background Menu

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.

Selamat mencoba, semoga bermanfaat.
;

6 comments:

Jokostt 15 Juni 2010 10:53: Saya tak bisa komentar banyak di artikel ini Mas Yuda selain ucapan terima kasih untuk tips dan sharingnya. Dan akan saya simpan tutorialnya ini sebagai referensi jika suatu saat saya membutuhkannya.
Admin 16 Juni 2010 07:52: Makasih tutorialx! Maaf ada beberapa pertanyaan seputar photoshop lg...

Kalau hanya ingin memotong atau mengambil area tertentu pd suatu image, rapix pakai tool apa?

bagaimana caranya jika ingin memperbesar image tanpa mengurangi kualitas image?

Saya jg blm ngerti jwbn anda ttg cara membuat background image mnjd transparent? Kata anda bgx dihapus diganti transparent? Tool apa yg dipakai?
Yuda 16 Juni 2010 12:19: Admin :
1. Banyak program yang dapat digunakan untuk memotong gambar tetapi saya lebih meyukai Photoshop karena menurut saya lebih mudah.
2. Untuk memperbesar Image, dapat menggunakan program online atau software khusus untuk keperluan itu, tetapi kualitasnya tidak bisa 100% seperti aslinya (sebelum diperbesar).
3. Benar, pada Photoshop untuk membuat transparan, maka background harus dihapus atau opacity dikurangi, kemudian save dengan format file PNG.

Semoga bisa membantu.
BF 16 Juni 2010 15:27: Terima kasih kang Yuda sudah berbagi tutorialnya details sekali, saya akan sempatkan waktuku demi tampilan blog yang kebih eye catching di header-ku
pacman 4 Februari 2012 09:26: info yg bagus gan! tapi masih bingung cara ke 14-15 gan! mohon bimbingannya!
Yuda 4 Februari 2012 14:05: @Pacman: Maksudnya gambar yang telah dipotong-2 (di-slice) seperti pada poin ke-10 tadi disusun kembali seperti puzle agar terbentuk gambar aslinya kemudian setiap gambar tersebut tentu saja harus di-upload agar dapat dipublikasikan sebagai menu.

Untuk mengatur posisi gambar dapat menggunakan CSS karena dengan CSS posisi kordinat x dan y pada monitor dapat diatur.

Semoga dapat membantu.

Poskan Komentar

Mohon maaf jika saya terlambat atau tidak dapat me-reply komentar Anda. Terima kasih.