Cara Membuat Header Blog

Apakah Anda senang melakukan blogwalking? Senang melihat-lihat blog seseorang yang Anda sukai atau siapapun yang menjadi inspirasi Anda? Jika ya, mungkin Anda juga sering melihat sebuah gambar atau tulisan yang ada di bagian atas blog dengan ukuran yang fix dan menjadi sebuah ciri khas dari pemilik blog tersebut. Itulah Header Blog. Sebuah tampilan yang ada pada bagian atas blog.

Kalau masih bingung, seperti ini contohnya : Cara Membuat Header Blog

Lalu contoh yang lainnya : Contoh Header Blog Biru

Dan ini contoh lainnya lagi : Contoh Header Blog

Jika Anda tertarik menggunakannya dan bahkan membuatnya sendiri, kami akan memberitahukan kepada Anda cara cepat dan praktis dalam membuat sebuah header blog, dan tentu saja Anda membutuhkan sebuah aplikasi atau software yang dapat membantu Anda dalam membuatnya yaitu, Adobe Photoshop. Anda bisa menggunakan Adobe Photoshop seri berapapu. Sekarang, mari jalankan program Adobe Photoshop pada komputer atau laptop Anda. Kini, kami akan menjelaskan dengan menggunakan poin-poin agar Anda lebih mudah dalam memahaminya

Cara Membuat Header Blog Langkah Demi Langkah

Berikut langkah demi langkah cara mudah untuk membuatnya  :

  • pilih File> New, atau langsung Anda gunakan shortcut pada keyboard Anda dengan menekan Ctrl+N, maka akan muncul dialog box seperti pada gambar dibawah ini

Cara Membuat Header Blog - Shot 01Gambar diatas menunjukkan sebuah preset ukuran yang sudah kami gunakan sebelumnya. Jadi, apabila Anda akan mensetnya ke dalam ukuran yang Anda inginkan, lakukanlah tahap selanjutnya :

  • ubah ukuran width menjadi 780 dalam satuan pixels, height 180 dalam satuan pixels, dan resolusi sebesar 72 dalam satuan pixels/inch (preset ini hanyalah sebuah contoh ukuran yang kami berikan). Maka, dialog box Anda akan tampak seperti gambar dibawah ini:

Cara Membuat Header Blog - Shot 02

  • Kini, saatnya Anda berkreasi dengan header blog Anda. Anda bisa berkreasi dengan brush tools pada photoshop Anda. Jika Anda ingin mengunggah file brush yang unik, lucu, dan keren, Anda bisa mengunggahnya terlebih dahulu dan me-load file brush .abr dengan cara memilih brush tool

Cara Membuat Header Blog - Shot 03 Lalu Anda tekan tombol segitiga hitam kecil disamping gambar brush pada tab dibagian atas sehingga muncul gambar berikut: Cara Membuat Header Blog - Shot 04 Setelah gambar seperti diatas muncul, tekan tombol segitiga hitam kecil yang berada di sebelah text box bertuliskan 30 px sehingga muncul pilihan seperti gambar dibawah ini:
Cara Membuat Header Blog - Shot 05

Pilih Load Brushes dan arahkan ke tempat Anda menyimpan file .abr brush pilihan Anda untuk dimasukkan kedalam brush tools Anda. untuk mengaplikasikan brush, Anda perlu membuat layer baru dulu dengan memilih Layer>New atau dengan cara menekan Ctrl+Shift+N. Selamat berkreasi dengan brush Anda

  • Selain brush, Anda juga dapat memasukkan gambar untuk menjadikannya ada pada header blog Anda dengan cara menekan Ctrl+O, lalu pilih gambar yang Anda inginkan. Tekan layer gambar tersebut, lalu drag ke file header blog Anda

Cara Membuat Header Blog - Shot 06

  • Anda dapat memadukan antara gambar dengan tulisan, brush dengan tulisan, atau bahkan memadukan semuanya. gambar, brush, dan tulisan.

Hasil Akhir Dari Contoh Di Atas

Inilah contoh header blog dari kami, contoh simple yang kami padukan antara gambar, brush, dan tulisan

Contoh Header Blog Final 01

  • Sekarang, satukan layer-layer yang berupa text ataupun layer lainnya dengan cara memilih Layer>Flatten, atau pilih semua layer dengan cara menahan Shift dan pilih semua layernya lalu tekan Ctrl+E
  • Terakhir, save header blog buatan Anda menjadi sebuah file .jpg atau .jpeg dengan cara klik File>Save As sehingga muncul dialog box JPEG Options untuk mengatur kualitas gambar Anda. semakin kecil maka kualitasnya semakin menurun

Contoh Header Blog Final 02

  • Masukkan header blog yang sudah Anda buat ke blog Anda. Jika Anda menggunakan Blogger, maka Anda hanya mengatur pada bagian design>page element

Cara Membuat Header Blog – Penutup

Ukuran blog yang kami cantumkan pada artikel ini hanyalah sebuah contoh ukuran header biassa. Jika Anda ingin mendapatkan ukuran lainnya, Anda cukup melakukan Print Screen pada blog Anda yang memuat header blog sebelumnya. Lalu, Anda gunakan Adobe Photoshop untuk melihat ukuran tersebut. File>New atau Ctrl+N untuk membuat file baru, lalu Edit>Paste untuk memunculkan hasil Print Screen yang telah Anda lakukan.

Sekarang, Anda cukup meng-crop gambar sehingga hanya memuat header blog. Dan untuk mengetahui ukurannya, pilih Image>Image sehingga muncul ukuran lebar dan panjang dari ukuran header blog yang perlu Anda buat. Selamat mencoba, dan semoga bermanfaat.


Posted

in

by

Tags:

Comments

14 responses to “Cara Membuat Header Blog”

  1. mksh mas gan, praktek dulu nie.,

    1. Ahli Kompie

      @ rendy

      Sip. Selaman mencoba :)

  2. lagi lagi ilmu mantab. saya tertarik mengenai blog.

    1. Ahli Kompie

      @ drajad

      Terima kasih banyak untuk dukungannya.

  3. yang mau saya tanyakan bagaimana menampilkan blog agar terdeteksi ke penelusuran google, saya sudah banyak mencoba banyak cara tapi tetep gak bisa, di bantu yea..
    dan kalau bisa bales nya ke email ja ya,, sebelum nya terima kasihh

    1. Ahli Kompie

      @ Irma

      Halo. Belum terdeteksi di penelusuran Google (belum terindex)? Coba daftarkan di Google dulu, gunakan link berikut untuk melakukan pendaftaran : google.com/webmasters/tools/submit-url

  4. mas, kalo bikin navigasi bar itu bagaimana ( seperti contoh paling atas, hardware, software, windows, internet, networking dst ). nav bar itu termasuk bagian dari header bukan? jgn di ketawain ya.soalnya waktu saya kecil belum ada mainan seperti ini.

    1. Ahli Kompie

      @ hery

      Kalau itu saya cuman memakai fitur bawaan dari themenya Pak. Tidak perlu edit apa pun lagi.

  5. Makasih tutorialnya Bang…coba dulu nih….

    1. Ahli Kompie

      @ Widi

      Terima kasih kembali. Semoga bermanfaat.

    1. Ahli Kompie

      @ blog mania

      Ok sip :)

  6. wah sangat manfaat sekali mas.

    ane bener2 masih kurang mafhum dgn photoshop

    syukran tutorialnya

    1. Ahli Kompie

      @ Dhymalk dhykTa

      Syukran ilaika, terima kasih kembali.

Leave a Reply

Your email address will not be published. Required fields are marked *