Okay. Kita mulakan ye.
1. Awak bukak adobe photoshop awak ye. * Nak buat header ataupun animation yang lain yang dalam berbentuk gif, biasanya adobe photoshop CS3 dan keatas sahaja. Ataupun yang paling mudah photoscape.
2. Dah bukak adobe, awak tick Window then cari Animation. Lepas tick animation, akan keluar satu kotak animation kan? Macam gambar kat bawah.
3. Selepas tuh, awak click File > Scripts > Load Files Into Stacks macam gambar bawah.
3. Dah click Load Files into Stack, akan keluar macam kat bawah nih.
4. Then awak terus click Browse untuk pilih gambar header yang awak-2 nak untuk dijadikan header bergerak. Contoh macam saya buat kat bawah.
5. Yang macam gambar di atas, saya ambil gambar header yang saya telah saya edit sendiri. Kalau awak-awak nak senangkan pemilihan gambar, awak letakkan gambar-gambar yang awak nak buatkan header bergerak dalam satu FOLDER lain ye. Sebab kalau awak tekan melalui SHIFT sekalipun. dia susah untuk dipilih. Macam saya buat, saya sudah letakkan gambar-2 yang saya nak buat header tuh dekat-2 macam kat atas.
6. Apa? Awak-2 tak ada header transparent ? Awak-2 nak buat header transparent? Tekan SINI :)
7. Dah ada header untuk dijadikan animasi ? Jom sambung. Lepas dah siap pilih gambar apa untuk dijadikan header, awak tekan OK macam dalam gambar kat atas tuh ye.
8. Dah tekan OK macam tuh, akan keluar gambar macam kat bawah ni.
9. Dah keluar macam tuh, awak cuma perlu tekan OK sekali lagi :)
10. Tunggu sehingga betul-betul dia loading gambar-gambar yang awak pilih ye.
11. Lepas dah loading, akan keluar macam gambar dibawah.
12. Tengok gambar dekat no 1, gambar-gambar yang saya pilih tadi cuma ada dalam satu file je dan gambar tadi bertindih. Dan cuba awak tengok no 2 dekat dalam kotak animation pula, juga cuma ada satu file je.
13. So, awak jangan bimbang, awak cuma perlu click dekat tempat yang macam no 3 yang saya tunjukkan dalam gambar di atas, dan awak click " Make File From Layers".
14. Dah click? Okay, bila dah click, akan keluar macam bawah ni kan ?
15. Cuba tengok gambar no 1 kat atas. Cuma ada satu gambar dan sudah tak bertindih. Dan cuba juga tengok gambar no 2 dalam kotak animation sudah ada dua gambar.
16. Okay. Dekat anak panah yang saya tunjukkan tu, awak-2 boleh ubah masa yang awak nak untuk gambar-2 awak tuh bergerak seterusnya menjadi header bergerak.
17. Okay, dah siap.
18. Cuba pula tengok gambar bawah.
19. Header yang saya punya tu, saya setkan kepada 2.0 saat. Then awak cuma perlu click Save. Click Save for Web & Devices ye, sebab tak nak bagi gambar awak pecah-pecah dan kabur :)
20. Macam contoh saya punya kat bawah nih jangan lupa setkan kepada GIF
21. Okay siap disave. ^^
22. Nak cari URL header tuh, awak boleh ambil dengan uploadkan gambar tuh dalam new post dan jangan lupa thick " Original Size " . Dah siap, then tukarlah header yang awak buat tuh di blog awak ^^
23. PREVIEW dulu baru save ye !
TUTOR TAMBAHAN UNTUK PENGGUNA BLOGSKIN ! ! ! 1. Nak jadikan header awak berpusing dan terus hilang macam saya punya ? i. Awak pergi DASHBOARD > TEMPLATE ii. Cari kod .header { iii. Tekan Ctrl + F untuk cari dan Ctrl + C untuk copy. iv. Dah jumpa ? Then awak copy code bawah ni dibawah code yang saya suruh awak cari tadi. } .header:hover { -webkit-transition-duration: 1s; -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -webkit-transition: 1.0s; opacity: 0.0; v. Macam gambar di bawah nih. vi. Dah siap. PREVIEW dahulu baru save ye.. Hehehe. Thanks for coming :)
: 
: 
: 
No comments:
Post a Comment