Wednesday, 27 July 2011

Tutorial Membuat Header Blog


Tampilan blog yang cantik memang merupakan unsur yang penting dalam dunia blogging.(Contoh seperti gambar di atas ). Karna hal itu juga membuat daya tarik para pengunjung untuk mengunjungi blog kita. Dan beriku ini ada beberapa cara untuk membuat header blog.


Cara 1 :

Membuat dengan aplikasi XHeader, untuk download :
File installer 32.6 Mb, untuk mempercepat download bisa gunakan DAP.
1. Membuat header dari template
Xheader memberikan ribuan template gambar header gratis siap pakai yang bisa Anda pilih. Untuk membuat gambar header dari template buka menu File -> New. Kemudian pilih load from template library (lihat gambar di bawah ini).
2. Mengatur ukuran gambar header
Anda bisa mengatur ukuran gambar header sesuai dengan blog Anda melalui menu Option – > Resize Header. Untuk blog di wordpress.com, ukuran gambar header terlihat pada menu Appearance -> Custom Image Header (
3. Memasukkan teks
Setelah Anda memilih template atau gambar header yang tersedia, Anda bisa memulai memasukkan teks. Anda bisa menambah dengan efek outline, chisel, emboss, dan glow. Jika akan menambah efek, pilih teks yang akan diedit dengan menu select terlebih dahulu.
4. Memasukkan gambar dari komputer
Anda bisa memasukkan gambar dari komputer (harddisk, flashdisk, dsb) dengan menggunakan tool Image.
5. Membuat garis, kotak, dan lingkaran
Anda bisa menambahkan garis, kotak, dan lingkaran dengan tool seperti yang ditunjukkan pada gambar di bawah ini. Objek ini juga dapat diberi efek!
6. Mengatur urutan peletakan objek
Sebuah gambar, bidang, atau tulisan dapat diletakkan di atas atau di bawah yang lain. Anda bisa memilih objek dengan tool Select (paling kiri) dan mengaturnya urutan peletakan objek melalui tool To Front atau To Back.
7. Mengatur efek transparan dan bayangan
Text atau gambar dapat diatur agar transparan (tembus pandang) dan ada bayangannya dengan tool yang tersedia seperti terlihat pada gambar ini.
8. Preview dan menyimpan Gambar
Sebelum Anda menyimpan gambar header, Anda bisa mencoba melihat tampilan gambar header Anda di browser, buka menu Options -> Preview in Browser. Setelah semua oke, simpan gambar Anda melalui menu File -> Save JPG. Atau File -> Save XHF. File JPG siap di-upload ke blog Anda, sedangkan file XHF bisa diedit ulang jika Anda mau.




Cara 2 :
Beberapa 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

  1. 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.
  1. 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.
  2. 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.
  3. 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.
  4. 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.



Cara 3:
Satu lagi nih tutorial desain atau otak-atik template blogspot yaitu mengubah ukuran header yang biasanya penuh dengan outer wrapper kini saya coba akan buat tutorial sederhana biar header blog bisa penuh dengan body.

Pertama yaitu pastikan sudah log in ke blogger blogspot. Lalu masuk menu Layout/tata letak kemudian pilih Edit HTML

Lalu cari code dibawah ini
<body>
<div id='outer-wrapper'><div id='wrap2'>

<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='header-wrapper'> <div id='head-inner'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='For example (Header)' type='Header'/> </b:section> </div>

Nah kalau sudah ketemu pindah code yang berwarna hijau dibawah code <body> dan diatas code yang berwarna merah. sehingga kurang lebih codenya menjadi seperti dibawah

<body>
<div id='header-wrapper'> <div id='head-inner'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='For example (Header)' type='Header'/> </b:section> </div>
<div id='outer-wrapper'><div id='wrap2'>

<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>


Kalau langkah pertama sudah selesai sekarang atur juga CSSnya

Cari code CSS dibawah ini

#header-wrapper {
width:880px;
height:100px;
margin-bottom:2px;
padding-bottom:15px;
background:#FFFFFF;
border:1px solid #E0E0E0;

Nah ganti tulisan 880px yang berwarna merah diatas dengan 100%. Dan silahkan otak-atik CSS diatas sesuai bentuk yang Anda inginkan.

Nah selesai deh kemudian save.

HTML diatas berdasarkan template minima default blogspot. berhubung semua template tidak sama HTML-Nya silahkan kamu sesuaikan menurut template kamu sendiri. Silahkan berexperimen sendiri sobat semoga berhasil.

dan jika anda ingin tampilan header seperti blog yang ini (klik disini untuk melihat). Gunakan Css seperti dibawah ini


#header-wrapper {
width:100%;
height:120px;
margin:0 auto 0;
border-top:2px solid #000000;
background:url(http://i296.photobucket.com/albums/mm169/anasku/header-back.jpg) repeat-x;


0 comments:

Post a Comment