20 February, 2012

Tutorial : Cara short cut buat header blog

Kepada mereka-mereka yang takde software Photoshop (aku la tu, malas nak download) , rasa leceh pakai Photoshop (aku jugak, sebab dah lama sangat meninggalkan alam mengeshop photoshop) atau kurang mahir pakai Photoshop (dah lama tak guna, jadi dah tak mahir lah kan, macam aku kah? huhu), meh kita buat header cara short cut menggunakan sumber-sumber alami yang lain di dunia siber ini. Khusus juga buat newbies blogger di luar sana (sebab tu aku akan cuba terangkan sedetail boleh, so kepada yang macam dah hustler pakai Photoscape tu, korang pejam mata ajelah ye).

1. Dapatkan background image yang dikehendaki (Google Image amat membantu..heheh). Kita boleh pilih warna background image yang sama dengan warna main background jika suka.  Ini untuk mendapatkan impak header dan latar belakang blog yang seia sekata sewarna. Mana satu main background? Main background adalah ruangan di tengah-tengah blog yang menempatkan entry post, labels, about me & apa ke mak nenek semua tu. Clue : Template designer > Advanced > Background > Main background.


Kalau korang hendak muatkan gambar menarik kat blog header korang, google la. Sesetengah site/blog ada share for free gegambar (cute animated, cartoon, doodles etc) so bolehlah dapatkannya. Contohnya macam blog Cik Nur Syalillah kita ni, dia sangat murah hati sharekan beberapa doodles comel yang dia buat untuk semua. Tutorial untuk buat doodles pun dia kongsikan juga. Sungguh berciri sharing is caring is loving kan? TQ 33X. Semoga Allah murahkan rezeki kamu ye Cik Nur Syalillah ;-)

2. Tentukan saiz header yang diingini. Macamana? Dalam Blogger (bagi yang menggunakan old Blogger interface), pergi ke Design > Template Designer > Adjust Widths > Entire blog. Dari sini kita boleh tahu saiz main background blog kita, let say 950 px.
Untuk New Blogger Template : Ikon Doc > Template > Live on blog : Customize > Adjust widths > Entire blog.

3. Menggunakan Photoscape - ini adalah free photo editing software, sila download untuk meneruskan kerja-kerja di atas, hehe. Okay, sambung. Menggunakan Photoscape, klik Editor dan buka background image yang telah didownload/save. Klik butang Resize pada ruangan Editing Tools di bahagian bawah. Pilih saiz yang besar sedikit daripada saiz kelebaran (width) main background. Kemudian klik tab Crop > sebaiknya pilih opsyen Crop freely. Kemudian croplah kecil sedikit dari saiz main backgroundnya.

Kalau nak crop terus dari sebesar-besar saiz background tu boleh juga. Aku resize dulu sebab nanti senang sikit nak estimate size yang dikehendaki bila nak crop tu.

4. Kemudian klik tab Object > Pilih ikon gambar > Pilih gambar yang korang dah download/save tadi. Since dalam Photoscape xde tools cecanggih macam Photoshop, maka adalah afdal gambar yang dipilih mempunyai warna background yang sama seperti background image yang kita pilih (untuk plain background ye) bagi mendapatkan efek seia sekata sewarna seperti yang telah aku sebutkan sebelum ini. *ayat skema, puii*

Adjustlah gambar tersebut sesuka hati korang.

5. Kemudian masukkan text atau rich text. Pada tab Object, klik ikon T (untuk text) atau T berbayang (untuk Rich text) kemudian taiplah apa yang patut. Takkan la korang nak letak apa-apa yang tak patut as korang punya header pulak kan? Huhu. Kalau rasa koleksi text font yang ada kurang menarik hati, sila-silalah google & download & install font pattern pilihan hati. Korang boleh touch-up/adjust text tersebut menggunakan warna, saiz font, outline & shadow ikut suka hati korang sendiri.



6. Lepas tu, add la pape graphic yang ada kat ikon gambar tu, xpon boleh cuba letak Speech balloon. Ikonnya berjiran aje ngan ikon gambar tu. Kalau nak letak text pon boleh, xmo pon boleh kat dalam speech balloon tu. Pepandai la korang adjust color & opacitynyer ye. Clue : Opacity - darjah kelegapan.


7. Agak-agak dah puas hati tu, sila la save header yang telah dibuat  (format *.jpeg / *.png). Kemudian,  dalam Blogger, pergi ke Page Element > *namablog*(Header), klik Edit. Pilih From your computer & uploadkan header yang telah dibuat. Jangan lupa untuk Placement,  pilih radio button "Instead of title & description", then klik Save. Kemudian view lah blog anda untuk melihat hasilnya.
*Sekiranya header korang didapati terbesar/terkeluar dari ruang main background, besarkan width entire blog kat Templat Designer > Adjust widths > Entire blog. Takpun, masa upload banner tu tick sekali kotak "Shrink to fit".
 Untuk New Blogger Template : Ikon Doc > Layout > *namablog*(Header) >Upload image



 

Erms, sekian sudah tutorial ala kadar dari aku. Last but not least, aku mintak maap sekiranya ada apa-apa yang terkurang ye. Selamat mencubaaaaaa, senang aje kan? Semoga berhasil deh!

11 comments:

  1. hmm, bagus ni. sesuai utk blogger baru mcm saya. tengkiu ;)

    ReplyDelete
  2. fotoscape pun aku haram tak reti. Aku buat header aku guna paint je. Lame ah aku ni.

    ReplyDelete
  3. hehehe..share2 hasil doodle apa slh nye..xrugi pun kan..hehehe..btw tenks coz sudi jd kn doodle sy 2 sbg contoh utk tutorial awk :)

    ReplyDelete
  4. @Wani SC : No problem,u r most welcome ;-)

    @Lyd : Belasah aje lah Lyd, janji ada header sendiri buat sendiri suka.

    @Nur Syalillah : Terima kasih kembali. Akak dah bookmarks tutorial doodles awk, kot lah nanti hati terbukak nak berdoodles pulak.

    ReplyDelete
  5. tq sangat odisi... tgh mencuba ni.. jangan lupa follow saya kengkawan.. saya still x pandai sangat dgn blogg tapi lately banyak redaing. even da lama buat blogg...he2..

    ReplyDelete
  6. mantap..

    visit us >> jasapembuatansofwarepekanbaru.blogspot.com/

    ReplyDelete
  7. TQ...
    jom ke http://warnawarniituindah.blogspot.com/

    ReplyDelete
  8. woo,sangat berguna.siap ada clues lagi.thanks kak :)

    ReplyDelete
  9. Wow..best ni..nak try la..

    litexpversion.blogspot.com

    ReplyDelete
  10. Sgt2 membantu..harap dgn ilmu ni dptla sy edit blog spye lbh kms...heheh

    ReplyDelete

care to drop a comment? thanx! ;-)