TIPS MEMBUAT HEADER

Monday, November 03, 2014

Assalamualaikum.

Dear all, 

Alhamdulillah saya bisa mewujudkan keinginan saya yang sudah lama belum kesampaian. Saya akhirnya bisa memberikan tips dan tutorial seputar blog. Yup, tutorial tentang bagaimana mempercantik halaman blog atau personal website. Jujur lho, saya bukan lulusan desain grafis ataupun ahli komputer, tapi kecintaan saya akan desain grafis membuat saya senang belajar secara mandiri alias otodidak. Alhasil saya bisa membuat personal blog yang menurut saya sudah sangat lumayan dan menarik. Sudah banyak juga teman yang meminta kepada saya agar diberi tahu cara-cara membuat blog dan bagaimana mempercantiknya. Well, here it comes

Tutorial yang pertama tentu saja bagaimana membuat header. Header itu menurut saya hal pertama yang harus diperhatikan para blogger atau pemilik situs, karena header adalah hal pertama yang dilihat oleh pengunjung situs. Sebisa mungkin buatlah yang eye-catchy. Tidak harus sophisticated atau bagus sekali, kalau menurut saya yang penting header itu menampilkan ciri khas blog atau situs kita. Header dibuat sesuai dengan isi dari blog kita. 



Header blog saya di atas sederhana kalau menurut saya. Tapi saya sengaja memberikan ilustrasi diri saya yang kebetulan saya buat sendiri. Menurut saya, dengan meletakkan gambar ilustrasi saya tersebut, header di atas sudah cukup menampilkan ciri khas saya.

Bagaimana? Sudah siap membuat header untuk blogmu? Tanpa panjang lebar, yuk disimak tips berikut.

1.  Tentukan ukuran halaman blog

Pertama kita harus mengetahui besar pixel halaman blog kita. Caranya mudah. Cukup masuk ke halaman template designer. Pada contoh di bawah, saya menggunakan ukuran halaman standar (default), yaitu lebar (width) keseluruhan 960 pixel dan 310 pixel khusus untuk sidebar atau bagian kolom di sebelah kanan yang biasa digunakan untuk menaruh widget atau link.


Setelah sudah merasa yakin dengan ukuran halaman blog kita, tahap selanjutnya adalah menyesuaikan warna yang akan digunakan dalam keseluruhan tampilan blog.


2.   Sesuaikan warna header dengan keseluruhan warna pada blog

Mengapa sebelum membuat header kita perlu tahu warna apa saja yang akan digunakan, termasuk warna untuk seluruh tampilan blog (warna tulisan pada judul postingan, judul widget, tanggal, dll)? Karena pada dasarnya kita ingin header kita bisa senada dengan keseluruhan warna pada tampilan blog. Istilahnya, kita tidak mau 'kan kalau warna yang kita gunakan untuk memperindah blog kita malah justru jadi tidak karuan dan saling bertabrakan. Percaya deh, mengetahui sedikit tentang teknik ini akan membuat kita makin asyik memperindah blog kita. 

Untuk menyesuaikan warna yang akan digunakan, saya biasa menggunakan color swatches atau color palette. Jadi, istilahnya seperti kombinasi warna. Misal, hijau tosca itu bagusnya digunakan bersama warna seperti ungu, putih susu, dll. Mau lebih mudahnya, cek ke colourlovers.com. Kamu tinggal klik kombinasi warna yang kamu suka, kemudian nanti akan muncul detail masing-masing warna termasuk kodenya yang penting saat kamu membuat header.




Untuk situs yang lebih lengkap, kamu bisa baca di artikel berikut ini.


3.   Membuat header 

Waktunya membuat header!! Untuk membuat header kamu perlu memiliki software photo editor dan design seperti Adobe Photoshop. Kamu mungkin mengenal banyak software lain yang sejenis, tapi sementara ini, saya cuma bisa memberikan tutorial dengan menggunakan Photoshop, he he he. Oya saya menggunakan Adobe Photoshop 7.0. Kalau teman-teman ada yang menggunakan versi yang lebih up to date akan lebih baik :)

Oke, pertama kita perlu membuat dasar (background) dari header kita dengan membuat image baru.


Sesuaikan ukuran lebar gambar header kita dengan lebar halaman blog kita. Ukuran panjang (height) kita buat 350 pixel. Perlu diperhatikan untuk pilihan contents, jika warna dasar blog kita putih (seperti blog saya), lebih baik warna dasar untuk header (contents) pun dibuat putih. Tapi jika tidak, ganti dengan warna transparan.


Selanjutnya, aktifkan Ruler untuk memudahkan meletakkan tiap objek dalam header. Caranya dengan klik View dan Ruler.

Jika diperbesar, tampilan akan seperti di bawah ini. Tentukan unit pengukur (ruler), apakah dalam cm atau pixel. Untuk lebih mudahnya kita gunakan pixel. Double click skala ukuran (lihat tanda merah pada gambar di bawah). Kemudian pilih skala unit pixel. 

Setelah itu, buat garis tengah yang akan menjaga objek dalam header tetap seimbang. Caranya, dengan menampilkan garis petunjuk (guide). Klik View --> New Guide, kemudian pilih Vertical dan isi kotak lebar pixel dengan setengah dari ukuran header kita, yakni 480 pixel. Jika sudah, pada layar akan muncul garis tengah berwarna biru. 


Nah, tadi itu baru persiapan, sekarang kita mulai berkreasi membuat header-nya. Di sini, saya coba membuat header baru untuk blog saya. Kamu bisa memulai membuat tulisan dengan judul blog kamu. Gunakan jenis font seunik mungkin. Kamu bisa mengunduhnya dari situs penyedia font gratis seperti dafont.com

Jika sudah, sesuaikan besar dan warna tulisan sesuai dengan yang kamu inginkan. Untuk mengubah warna, klik dua kali kotak warna, kemudian pilih warna yang sesuai dengan keinginan kamu tersebut. Kamu bisa menggunakan color swatches yang telah disediakan oleh Photoshop atau kamu juga bisa menggunakan kombinasi warna yang sudah kamu cari di situs color palette. Kamu cukup copy kode warnanya, lalu pastekan pada kotak kode. 

Kita sudah buat tulisan dengan judul blog kita, sekarang saatnya memberikan objek gambar pada header. Di sini saya masukkan gambar ilustrasi yang saya unduh secara gratis. Kamu juga bisa mengunduhnya di sini. Jangan lupa sesuaikan ukuran gambar secara proposional dengan judul blog tadi. Cukup dengan menekan tombol ctrl T, maka kamu akan dengan mudah membesarkan atau mengecilkan ukuran objek. Atau untuk mudahnya, kamu bisa menentukan berapa persen ukuran objek akan dikecilkan (lihat baris atas dibawah Window). Misalnya pada tutorial ini, saya set 70% untuk panjang dan lebar objek.


Langkah selanjutnya, saya ingin memberikan sedikit sentuhan warna agar header tidak terlalu 'garing'. Sentuhan warna ini bisa diberikan dengan menggunakan brush. Pertama-tama, buat layer baru. Letakkan layer baru tersebut di antara tulisan judul blog dan objek gambar ilustrasi tadi. Jika sudah, klik tombol brush di kolom kiri kemudian atur ukuran brush dan warna yang kamu inginkan. Di sini saya menggunakan warna merah muda agar senada dengan ilustrasinya. Ukuran brush saya setting 130 dengan tipe no. 19, opacity saya buat 56 px. 


Setelah setting warna dan ukuran brush sudah siap, maka sapukan brush tadi di tengah-tengah header. Jangan khawatir jika bentuk pulasan yang akan dihasilkan sedikit tidak rapi. Jika sudah, jangan lupa set layer baru tersebut menjadi multiply (lihat gambar di bawah). Fungsinya agar pulasan brush tidak tumpang tindih dengan tulisan judul dan objek gambar. 

Sebagai final touch, rasanya kita perlu memberikan sedikit tulisan yang mungkin merupakan penjelasan dari judul blog kita tadi. Pada tutorial ini, saya hanya memberikan tambahan keterangan tulisan "A blog by Anissa Rizkianti". Detailnya bisa kamu lihat step-by-step pada gambar di bawah ini. 

Ingat, ini optional ya! Jadi, kalo menurut kamu tiga elemen tadi sudah cukup, kamu bisa selesai membuat headernya. :)






*Membuat garis pembatas untuk dua tulisan pada header

Jika kamu suka, kamu bisa menambahkan garis pembatas di antara dua tulisan dalam header kamu. Caranya pilih line tool, dengan ukuran tebal garis 1 px. Kemudian tentukan warna garis tersebut. Di sini saya pilih warna pink muda (lihat gambar di bawah).




4.  Menampilkan header pada blog 

Wah, headernya sudah selesai dibuat. Selanjutnya tentu saja menampilkan header tadi dalam blog kita. Sebelum itu, kita harus menyimpan header secara tepat. Simpan header menggunakan perintah Save for web. Mengapa? Kalau tidak salah, agar ukuran pixel tetap disesuaikan untuk tampilan web

File >> Save for web.



Lalu pilih Optimized  dengan tipe gambar .png dan transparan. Hal ini dimaksudkan agar header yang nanti akan dipasang tetap berwarna latar putih.

Setelah disimpan, kamu sudah bisa memasangnya pada bagian Layout, widget Header. 

Bagaimana? Susah-susah gampang ya? He he he. Yang pasti kamu bisa latihan membuatnya sendiri dari komputer atau laptop kamu. Sekian dulu tutorial pertama saya. Jika kurang jelas, silahkan komen di bawah artikel ini ya. Good luck! :)
author image

ABOUT ANISSA

Anissa is a researcher and lifestyle blogger living in Jakarta. She writes mostly about her passions, which range from travelling, blog tutorial, study tips and her favourite homemade recipes!

2 comments

  1. Terimakasih tutorialnya nisa. Membantu banget lho, sekarang headerku jadi cantik :D

    ReplyDelete
    Replies
    1. Sama2 Anis! Iya, alhamdulillah headernya cantik. Tadi sempat mampir. Salam kenal ya! Senang lihat hasil rajutannya :D

      Delete

Follow My Instagram

© A Little Bit of Nisa. Design by Fearne.