August 11, 2011

Tutorial buat header untuk blog

Is baik hari ni.. nak ajar kawan-kawan cara nak buat header... is guna photoscape je.. sebab is tak ada photoshop la.. huhuhu.. laptop is dia tak suka photoshop... dah banyak kali try download...

1. kawan-kawan perlukan 2 software ni
a. photoscape (klik sini kalau tak ada lagi)
b. GIMP (klik sini kalau tak ada lagi)

2. macam is yang malas ni.. is malas nak transparentkan apa-apa gambar... banyak kerja la.. hehehe.. so, is pergi google je apa-apa gambar yang dah memang format PNG... :). jadi kalau kawan-kawan nak letak muka sendiri kat header tu.. kena la transparentkan background tu... kat bawah-bawah nanti is ajar ok?

3. mulakan operasi.. buka photoscape..
*click gambar kalau nak besarkan ok!!

pilih yang editor tu ye...

4. akan keluar macam ni...


pilih menu.. ada kat box merah atas hujung belah kanan.. nampak tak??

5. click menu--> new photo..



sekarang pilih lah berapa besar saiz header yang kawan-kawan nak.. bagi yang guna 3 column macam blog is.. width tu kena besar la.. more that 800px.. is pilih width= 900px, height = 240.. kalau kawan-kawan rasa kecil or terbesar.. boleh adjust balik.. just repeat step 5 ni..

6. memahami photoscape!


kat kotak yang is merahkan.. kat situ ada banyak function.. untuk masukkan gambar, effect.. love.. macam-macam la.. kawan-kawan explore la ye... kalau tersalah click.. click je butang undo kat bawah tu.. :)
kat kotak biru pulak nak masukkan text.. :)

7. tadaaa... dah siap masukkan gambar and text


sorry.. tak ada idea.. ikutlah citarasa masing-masing...
gambar ni tunjuk kan cara nak masukkan frame.. blog is, is tak guna yang ni.. kalau kawan-kawan nak letak boleh je.. :)

8. edit untuk penambahbaikan..


seperti yang is kata tadi.. explore je.. hehehe.. nanti kawan-kawan jumpalah.. semua dah ada dalam photoscape...

p/s: kalau kawan-kawan nak susun item mana yang duk depan mana yang duk belakang.. pilih object--> cari icon yang macam handplast (back/front).. kaler kuning..  dekat dengan box photo + object.. jumpa kan?

9. dah siap??? kawan-kawan click menu and save.. biar je background putih.. ok??

10. drag gambar yang dah siap tadi masukkan ke software GIMP.. :) lambat sikit dia loading.. tunggu je k?


ikut jelah langkah dalam gambar ni... mula-mula sekali.. right click gambar tu.. akan keluar kotak file, layer.. bla bla bla... kawan-kawan lalukan cursor ke layer--> transparency--> add alpha layer.. then tekan benda yang macam lampu picit tu (1).. click dekat background luar... lepas tu pilih no 2 (macam pemadam warna merah). click kan kat outer background..

11. dah siap?? tak faham sila lah tanya... :) nanti keluar gambar yang macam no 1 kat bawah ni...


then pilih file--> save as--> keluar kotak tu.. tekan langkah no 2 macam dalam gambar..

12. pilih PNG ye.. :) lepas tu tekan save.. keluar pulak kotak ni


make sure ada 2 je yang di checkbox.. then tekan save... :)

langkah 10 sampai 12 ni boleh digunakan untuk apa-apa gambar yang kawan-kawan nak transparentkan background.. tapi makesure gambar tu background dia warna putih atau apa-apa warna yang senada.. biru ke.. hitam ke.. kalau gambar tu background bukan warna putih.. kawan-kawan edit lah dulu dekat paint ke.. ok?

13. dah siap.. :) mari kita lihat hasilnya... err.. lupa.. yang kota-kotak hitam putih tu once kawan-kwan upload kat blog, dia hilang... dia akan ikut warna background blog kawan-kawan lah.. dah nama pun transparent.. huhu


er.. pedulikan background hitam tu ye.. hahaha.. malas nak crop.. lalalala.. :P

14. pergi ke dashboard-->design--> blog title--> upload gambar--> jangan lupa click kat placement tu instead of title and description--> save...

15.. siap dah menurunkan ilmu... selamat mencuba...


notakaki: penat rupanya buat tutorial ni... huhu... tak apalah... bulan ramadan ni.. kita buat amal sikit kan??



6 comments:

Rahil Fauzi said...

nice tutorial..tq 4 sharing...hehe

iSmaZuRina said...

sama-sama dear.. :) selamat mencuba.. :)

uknowme said...

wah..siap de tutorial lg nih..nice...<3

iSmaZuRina said...

saja berkongsi ilmu.. :)

its me said...

bgs2...kongsi r lagi tutorial yg len..

iSmaZuRina said...

insyaAllah.. nnt is buat lg k.. :)