Design Favicon Sendiri Guna Adobe Photoshop CS4

Hey People!

Hari ni saya nak share design favicon sendiri mengunakan Adobe Photoshop CS4. Oh ya, saya belum update lagi ke CS5 hehehe… Ok, ok terus jer dgn step-step nya. Here we go…

  1. Buka New Document setkan pixels width dan height kepada 64×64 pixels 
  2. Kenapa kena saiz ini? Sebab favicon yg diterima oleh semua web browser setakat ini adalah bersaiz 16×16 pixels. Kecil sangat. Jadi adalah amat mustahil utk kita buat sesuatu design diatas canvas sebesar itu. Dan kenapa tidak lebih besar daripada 64×64 pixels? Sebab jika saiz yg lebih besar, apabila ia dikecilkan it will look funny. Maksudnya tak menjadi.
  3. Double Click pada Layer Background, ia akan menjadi Layer 0 > Kemudian Create New Layer dan anda akan dapati Layer 1 > Kemudian Click Menu View Click New Guide Horizontal > Ubah kepada 1cm >  Click semula Menu View > Click New Guide Vertical > Ubah kepada 1cm 
  4. Mungkin anda akan dapati New Guide line anda ini tak center jadi bagi memastikan ia center anda perlu Click pada Layer 0 > klik CTRL +T  dan anda akan dapatiseperti gambar diatas > Double Click pada document dan Dragkan line anda agar ia center
  5. Click pada Layer 1 > Ubah Foreground color (saya pilih merah dan of course anda ikut keseuaian anda OK) > Gunakan Paint Bucket Tool atau Click G dan letakkan pada document anda 
  6. Kemudian design mengikut citarasa anda. Saya punya sebagai contoh adalah seperti berikut  
  7. Click Menu View > Click Clear Guide
  8. Click Menu Image > Image Saiz dan ubah kepada 16×16 dan anda akan dapat melihat saiz yg akan kelihatan pada browser anda. Saya punya adalah seperti berikut  
  9. Dan favicon yang lain-lain adalah seperti berikut 
  10. hahahaha…cinonet jer kan so tinyyyyy..heheee. OK, OK anda boleh terus savekan dalam format jpeg pada saiz seperti ini atau anda Undo semula agar ia kembali kepada saiz 64x64pixels. Kerana semua web browser membaca favicon pada format .ico Sekiranya anda tidak ada format ini (macam saya, saya pun takde) sama ada anda boleh download plugin Telegraphic ini secara percuma disini (tapi leceh yg ni) atau teruskan jer buat favicon yg anda design tu disini (ahah! yg ini lebih mudah, so saya buat disini….) dan steps nya pernah saya tunjukkan disini
  11. Oklah, saya nak makan icecream ada kawan belanja yum yum yum…. Next saya akan tunjukkan Cara-cara Buat Header Untuk Blog atau Website Anda hehehe best kan..tak main lah header percuma yg sempoi kat internet tu..ceh eksyen betul ahhahaha. Oklah akhir kata, Selamat Mencuba..bye bye..
Related Posts with Thumbnails

One Response to “Design Favicon Sendiri Guna Adobe Photoshop CS4”

  1. Faris says:

    Wow! Tutorial yang bagus. Ini juga dapat melahirkan lagi bangsa melayu yang mahir dalam web design. Tahniah saya ucapkan. Saya ni pun design favicon guna Photoscape pasal saya tak mahir menggunakan Adobe Photoshop CS4.

Leave a Reply

CommentLuv Enabled