Cara membuat header untuk blog
Diarsipkan dalam kategori: Tip Lain tanggal: 6 July 2007 oleh Mbah DewoBeberapa teman sering menanyakan cara membuat gambar header untuk blog mereka. Jadi pada tutorial Photoshop kali ini kita akan belajar cara membuat sebuah gambar header. Untuk membuat sebuah header, tentu kita perlu program yang bisa mengolah/membuat gambar dalam format bitmap. Ada banyak program yang bisa digunakan, pilih aja yang familiar dengan kamu, ada Adobe Photosop, Corel Photopaint, Macromedia Firework, dan masih banyak lagi. Tapi yang kubahas sekarang adalah yang pake Photoshop.
Sebelum kita mulai membuat gambarnya, ada beberapa hal yang perlu kita siapkan sebelumnya, yaitu:
- Ukuran header yang sesuai.
Ini harus dilihat sendiri dari template blog yang dipake. Untuk contoh yang akan kita buat, ukuran header ini adalah 780 kali 180 pixel. Sama dengan ukuran header yang dulu saya gunakan di blog sadewo-photology, saya menggunakan template yang namanya Nyoba-780 buatan mas Isnaini.
Kalo pake template dari Blogger, ukurannya bisa disesuaikan sendiri (tapi aku pernah nyoba kukasih gambar, gambarnya nggak muncul sebagai background header, mungkin biar muncul ada CSS yang harus dirubah (aku agak katrok kalo soal css, apalagi php..). Bisa juga diakali dengan membuat page element baru tentang Image sih sebenarnya, tapi nggak bisa diletakkan sebagai background header.). Kalo mau digunakan sebagai page element, ukur dulu berapa ukuran maksimal dari letak page element tadi. - Bahan gambar atau materi yang akan digunakan.
Ingat bahwa gambar tersebut bakalan nongol terus di blog Anda. - Siapkan juga makanan kecil dan minuman di samping komputer, siapa tahu waktu keasyikan mbuat gambar merasa laper…
Cara membuat gambar header dengan Photoshop
- Buka dulu program photoshop, kemudian buat file baru dengan memilih menu File > New. Pada kotak dialog New, isikan ukuran header yang akan dibuat. Misalnya pada width=780 dengan satuan ukur pixel, terus pada height=180. Jangan lupa pada resolusi harus 72 pixel/inch. Klik OK jika semua ukuran sudah sesuai.
Untuk lebih jelasnya bisa dilihat pada gambar dibawah ini. - Kemudian buat gambar yang kamu inginkan pada file baru ini.Gambar header bisa dengan memasukkan gambar lain, kasih tulisan, atau apa aja terserah dengan ide dan kreativitasmu. Kalo bingung, nggak ada ide? Buka aja website dan blog yang ada di internet, banyak sekali kan, tinggal cari aja ide dari gambar-gambar tersebut. Tapi ingat, JANGAN ngopi paste gambar header orang lain terus dipasang lagi, itu sama kayak mencuri. Cari Ide, bukan Curi Ide.
- Setelah gambar jadi, jika gambar tersebut menggunakan lebih dari satu layer, pilih dulu menu Layer > Flatten Image agar semua layer menjadi satu di layer background.
- Kemudian simpan (File > Save) dengan format JPEG/JPG atau GIF. Ini agar ukuran file-nya kecil. Jika pake JPEG/JPG aturlah nilai kompresi yang dilakukan pada kotak dialog JPG option yang muncul setelah kamu klik tombol Save. Seberapa banyak kompresi yang diperlukan, itu tergantung kondisi gambar, misalnya ukuran dan warna yang digunakan. Sesuaikan sendiri antara ukuran file hasil jadi dengan kualitas gambar, karena semakin banyak dikompres maka kualitas gambar akan turun.
Gambar dalam lingkaran merah, yang sebelah kiri adalah ukuran file yang akan disimpan (dalam kilobyte), dan yang sebelah kanan adalah waktu yang diperlukan saat gambar tersebut diakses dalam ukuran kbps tertentu. - Setelah gambar udah jadi, tinggal diupload aja pakai software blog Anda.
Misalnya Anda menggunakan Blogger, gunakan page element-nya. Kalo hosting sendiri, upload di cpanel-nya. Atau bisa juga diupload dulu ke web yang melayani image hosting, misalnya Photobucket, ImgPlace, atau yang lain.
Jika Anda tidak mengetahui ukuran gambar yang sesuai dengan ukuran template / theme-nya. Berikut ini caranya untuk mengetahui ukurannya:
- Simpanlah gambar header yang sudah ada di blog Anda. Kemudian buka gambar tersebut dengan Photoshop. Setelah itu pilih menu Image > Image size. Pasti akan nampak ukuran panjang dan lebarnya. Kalau resolusinya, biasanya 72 dpi.
- Atau, jika gambar tersebut tidak ada atau tidak bisa disimpan, maka saat gambar header blog Anda nampak di layar monitor tekanlah tombol Print Screen di keyboard (kadang satu kali tidak cukup, perlu 2 atau 3 kali menekan tombol tersebut).
Kemudian bukalah program Photoshop. Buat file baru dengan cara memilih File > New. Pastikan pada kotak isian Preset Size ukuran filenya adalah Clipboard (biasanya secara langsung sudah clipboard), kemudian klik OK. Setelah itu pilih menu Edit > Paste.
Anda sudah mendapatkan tampilan gambar dengan ukuran sebenarnya. Sekarang pilih Crop tool, potonglah gambar tersebut pas pada bagian gambar header-nya saja. Kemudian pilih menu Image > Image Size untuk mengetahui panjang dan lebar gambar, atau langsung saja gunakan hasil crop tadi untuk media membuat gambar header Anda.
Related posts:







terima kasih banyak mas admin…sunguh saya sangat bisa memahami cara menyampaikan block anda….top. sayah sudah sana sini baca tentang masalah ini tapi kagak jelas2 juga…..ahirnya dengan bantuan mbah gogle saya temukan block anda…mak nyusss.
selamat berkarya moga sukses!!!
nah maslahnya di header blog saya ketika gambarnya saya ganti dan berformat gif kok gambarnya jadi memanjang dan keluarnya sambung menyambung.. itu kenapa ya?
@agus saja: coba dicek css-nya
header sangat penting..layaknya seperti kepala kita yang berisi otak. Nah bila sebuah blog atau website header hanya berupa kepala namun otaknya bersifat eksternal karena ada di kepala kita..sangat menunjang sekali.
Thanks atas artikelnya mas.
@Prasetyo: Sama-sama
ok deh. many thanks ya bos
sukses!
kalo Ganti gambar header di blog wordpress gmn ya mas? maksud saya nlog wordpress yang spt punya saya http://www.harryone.com lho… bukan yang berakhiran wordpress.com spt contoh http://www.namablog.wordpres.com, kalo yg ini saya tau, tp kalo ganti yg spt punya saya http://www.harryone.com gmn ya mas? soalnya didalam wp-admin nya gak ada menu utk ganti header. bisanya edit dari editor, tp saya coba berkali2 tetep gak bisa dan saya udah cari kemana2 yg ada info ttg ganti header blogspot.com doang. mas bisa tolong saya? atau ada temen2 yg lain yg bisa tooong?
nanti sy kesini lg …makasih
@harry0212: Setahu saya memang harus mengedit dari editor. Tiap theme belum tentu sama. Pada theme harry0212 yang digunakan sebagai header adalah file gambar: body-bg.gif ukurannya 10×168 pixel. File ini terletak di folder images pada theme tersebut.
makasih banget mbahdewo…
tips nya ok banget
@papi erza: Terima kasih kembali
saya ngopi tutorialnya ya mas.
http://saterlat.blogspot.com
Wah bagus mas saya juga mencoba bikin tapi da masalah diheadernya kemudian saya ubah template yang lain ternyata pas mas. template yang saya pakai sebelumnya saya ganti sehingga header yang saya buat tidak melenceng lagi tapi dah pas di tengah tengah.
http://saterlat.blogspot.com
Makasih ya om atas tutorialnya jadi tambah ilmu
Terima kasih kembali tony.
Nunut nimba ilmu, semoga jadi amal baik mbahdewo. Trims
Monggo mas Khodim
Buat rama: Cara memasukkan ke blog bisa bermacam2, tergantung template blogger yang dipakai. Kalaupun saya jelaskan disini mungkin tetap kurang lengkap, coba dicari di google saja, karena sudah banyak yang membahas dan bahasannya tentu lebih jelas dari pada keterangan saya (saya kurang paham tentang html dan sebangsanya).
Trima kasih atas artikelnya, membantu banget dech buat gue. tapi kurang lengkap mas, klo udah jadi cara memasukkan headernya ke blog gmn. trutama yang pake Blogger mas……..?? Batuin ya mas!!!
Buat Bambang: Amiin.
Mas artikel ini sangat membantu bagi para bloger pemula dan yang pengen belajar design web dengan photoshop, terimakasih banyak mas mudah-mudahan segala amal kebaikan mas dibalas Allah S.W.T, saya berharap makin banyak pengetahuan-pengetahuan yang lainnya untuk bisa diakses dan dipahami oleh para bloger atau pengguna media internet ini. sukses selalu ma
Buat Bara: Jika pakai blogspot, coba baca punya Mas Isnaini. Kalau pakai wordpress, ada plugin dari Huda Toriq.
Mohon bantuan membuat blog.nya
saya mau tanya gimana cara membuat status YM?
[...] Tutorial Photoshop Tempat mempelajari Photoshop dengan mudah « Cara membuat header untuk blog Akhirnya jadi juga beli HP [...]
Terima kasih, saya jadi lumayan agak mudeng.