Membuat Header Pada Blog Menggunakan Pixlr

Ada beberapa aturan yang dipakai oleh para blog desainer terutama untuk mendesain sebuah header. Yang pertama adalah tinggi header tidak boleh lebih dari 250px, karena dengan header yang besar konten blog tidak akan terlihat saat pengunjung pertama kali melakukan kunjungan.

Berapakah 250px ? Ukuran 250px adalah pada saat blog dibuka oleh pengunjung bagian header terlihat separuh tinggi layar dan posting pertama terlihat judul serta isinya.

Lebar blog minimal adalah 960px dengan satu buah sidebar. Untuk 2 sidebar berukuran lebih lebar antara 1000px sd 1100px. Ukuran lebar yang besar (melebihi 960px) tidak terlihat pas di monitor netbook yang berukuran kurang dari 12 inch.

Salah satu cara membuat header adalah dengan menggunakan photo, cara lainnya dengan mendesain sendiri menggunakan software seperti Photoshop atau Pixlr. Berikut cara sederhana membuat photo sebagai header dan menggunakan pixlr.com untuk online gambar editor.

1. Buka browser (chrome, mozilla, safari dan lain-lain). Ketik http://www.pixlr.com, akan ada tampilan seperti dibawah ini. Pilih Open Pixlr Editor (advanced)

2. Setelah terbuka pilih Open image from computer, cari gambar yang sudah disiapkan untuk di edit dan dijadikan header.

3. Ukuran dari gambar dapat terlihat di bagian bawah (kotak merah) dalam pixel. Ukuran gambar yang besar akan kita kecilkan terlebih dahulu, akan tetapi ukuran gambar yang lebih kecil dari 960px tidak dapat di besarkan, karena akan menghasilkan gambar yang buram. Jadi sebaiknya gunakan photo dengan ukuran lebih besar dari 960px dengan resolusi minimal 72dpi.

4. Saatnya untuk me-resize/ merubah ukuran menjadi pas untuk header. Acuan yang digunakan adalah dengan ukuran lebar, dimana jika kita pilih constrain proportions maka ukuran tinggi akan mengikuti. Nanti tinggal kita crop saja untuk membuat tinggi header pas 250px. Untuk merubah size gambar klik Image -> Image Size.Β Isi lebar 960px, jangan lupa untuk mencentang constrain proportions . Otomatis tinggi akan mengikuti, apabila masih lebih besar dari 250px, gunakan crop tool untuk menentukan tingginya.

4. Crop tool terdapat pada icon paling atas dan sebelah kiri. Klik tool tersebut, arahkan pada gambar, perhatikan pada navigator berapa ukuran yang akan ter-crop. Setelah ukuran sudah Ok, klik enter.

5. Sebelum menulis apa yang ingin dibuat header, lebih dahulu lock layer di lepas supaya dapat di edit. Double click gambar gembok di kotak layers untuk meng-unlock. Klik text tool untuk menambahkan tulisan judul dan deskripsi. Isi kolom kosong dengan judul blog yang di mau dan klik drag tool (sebelah kanan crop tool) untuk mengatur posisi.

6. Font yang ada didasarkan pada font yang dimiliki di komputer masing-masing. Kalau masih belum punya koleksi font yang cukup silahkan download dan install font gratis dan bagus di Google Font. Cara mendownload bisa dilihat di SINI (bagian use->klik tanda panah terbalik untuk mendownload)

7. Banyak-banyak berkreasi dan mencoba-coba ya untuk perletakan, font dan warna. Setelah dirasa oke, bisa langsung di save ke komputer untuk di upload pada fungsi header di blog masing-masing.

Selamat mencoba ^^

Tinggalkan komentar ya, kalau masih dirasa kurang jelas πŸ˜€

Advertisements

23 thoughts on “Membuat Header Pada Blog Menggunakan Pixlr

    1. iya mba di wp bisa juga untuk menambahkan header sendiri. wah iyaa, barusan ada yang mau upgred juga trus ngga jadi krn biayanya lebih mahal daripada punya host dan domain sendiri ^^

  1. terima kasih mbak Shinta, skrg saya sudah bisa menerapkannya untuk header blog saya dengan pixlr . Awalnya saya bingung desain header karena ga pny aplikasi coreldraw dan photoshop, tp berkat pixlr cukup membantu:)

  2. pengiinn… pengin nyobain utk blog saya mba, tp ntar match gak ya ukurannya mba. saya tuh pake template gratisan, takutnya ntar hancur lebur klo sy otak atik hehehee.. maaf ya mba, gaptek ini πŸ™‚
    apa balik ke template simpel aja ya, tp kadang sayang utk mengubah-ubah lagi *malah curcol πŸ˜€

  3. Mak, rupanya niat untuk melindungi diri dari copaser malah menjadi kendala bagi yang mau belajar. Krn yg tdk pake link hidup, misal pilxr, tdk bisa kau copas u aku pindahin ke new tab. Sedangkan yg ada link hidupnya jg tdk bisa aku klik kanan untuk membuka option open link in new tab. Jadi habis dari sini ntar, aku mesti balik lagi ke DIY yg tadi, susah mau buka bbrp tab sekaligus utk langkah2 tadi. Coba dipikirkan lagi mak. Utk foto produk okelah diprotek spt ini. Tp u tutorial kasihan sayanya heheheee…. Tp terserah ding mak, aku blm ngalami kesalnya di copas scr tak bertanggung jawab gitu.

  4. Pingback: Desain Blog Simple Untuk Blogspot [DIY]
  5. semua tutorial sangat bermanfaat kak, terimakasih…

    kak tolong bagi tutorial menghapus aksen garis tepi di blog dong kak, thx before,,
    ditunggu tutorialnya kak
    sukses selalu πŸ™‚

  6. lagi belajar nich, bikin header sendiri, bolak balik yang termudah deech… tapi mang disini mang paling sederhana dan mudah. Tks ya mbaa

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s