TUTORIAL PERCUMA! jom buat widget sendiri!

haha. maaf lah lambat sangat nak buat tutorial ni. sekarang jam 1:39 pagi. baru free nak buat. haha! before tidur ni, zureen ajar awak-awak semua laa ye? macam mana nak buat widget sendiri seperti yang dekat bahagian bawah kiri blog zureen ni.

ada orang nak kena bagi duit, baru leh buat. tapi zureen tak. tutorial ni percuma saja. yang penting, awak-awak semua ada ADOBE PHOTOSHOP. tak kira lah CS3, CS4 atau CS5. tapi zureen lebih prefer cs5 lah. heh~ oke, mari mulakan tutorial!

1. ADOBE PHOTOSHOP  CS5

klik FILE > NEW dan secara automatik gambar seperti yang tertera di bawah akan keluar. jangan terkejut tau. hehe~

pastikan benda yang kena bulatkan tu awak-awak semua ikut. JANGAN UBAH! kalau nak ubah jugak lantaklah. heh~ saiz tu ikut suka hati awak-awak lah. tapi jangan besar sangat. agak-agak fit untuk bahagian tepi blog tu saja. ;p

2. PILIH GAMBAR

KLIK FILE > OPEN > CARI FOLDER GAMBAR

lepas tu awak-awak semua tekan saja open dan gambar anda akan terpampang.

3. QUICK SELECTION TOOL

apa tuu? fungsi tool ni adalah untuk membentuk dan menetapkan bahagian-bahagian gambar yang anda nak buat widget. mestilaa kita tak nak background gambar tu masuk dalam widget kan? so, anda kena pandai control mouse untuk membentuk imej widget anda.


dekat mana 'quick selection tool tu'?
kalau ada perhatikan gambar di bawah, zureen dah ready-ready tekan benda tu. tool yang ke-4 dari atas. Alaa.. dia ada bagitau if awak-awak semua gerakkan mouse ke tools yang terdapat di situ. setakat ni faham kan?

 garisan titik-titik itu merupakan bahagian gambar yang akan dijadikan sebagai widget.

4. DRAG AND DROP

kalau anda perhatikan adobe photoshop anda, step pertama tadi sudah tiada. haha! bukan hilang, sebenarnya proses membentuk gambar ni kena buat dalam page lain. apa yang anda perlu lakukan sekarang hanyalah drag gambar anda dan dropkan di mana-mana bahagian di dalam photoshop.

bila dah jadi seperti gambar di atas, sekarang anda hanya perlu drag dan dropkan gambar anda di atas permukaan yang anda telah buat pada step 1. dan hasilnya :

5. BUAT DIALOG

sekarang ni anda nak buat dialog kan? tapi sebelum tu, untuk mengelakkan kecacatan, anda perlu membuat layer baru seperti yang ditunjukkan gambar di bawah ini :

macam mana nak buat layer baru? tekan icon di bahagian bawah seperti yang zureen telah highlightkan dalam gambar di atas. kemudian, pilih bentuk-bentuk yang anda suka dengan menekan icon yang telah zureen tandakan 'arrow' pada gambar di bawah :)

6. BUAT TULISAN

tekan icon 'text' seperti yang telah ditanda dalam gambar di bawah. pilihlaa warna yang anda suka. lepas tu tulis la apa-apa. heh.

7. HAMPIR SIAP!

kemudian, awak tekan FILE > SAVE AS > PNG FILE

note : jangan guna JPEG sebab background awak tak akan transparent :)

8. CODE

macam mana nak dapatkan code?
baiklah. sekarang, anda kena upload gambar ni untuk dapatkan URL dia. kemudian, copy code di bawah ni dan replacekan URL gambar anda pada code yang telah 'dikuningkan'.

<div style="position: fixed; bottom: 0px; left: 2px;"><br /><embed pluginspage="http://www.macromedia.com/go/getflashplayer" width="200" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWPaPGt1LdHAVvM1L8yNS3fwdDNWq0D1XaHSl0DSS_e_jWIZGqms6dkHu6XB0Si_5cEtC_4vAV_XQAoe8digbOgWLhq4uRKZTYPDnJyBqLHzfK985dKcms9ZmhV4EZPutu2nWDOlW4-GYm/s1600/Untitled-2.png" wmode="transparent" type="application/x-shockwave-flash" quality="high"></embed></div>
</head>

copy dan pastekan code di mana-mana bahagian blog anda. jangan risau, benda ni akan automatik berada di bahagian bawah kiri blog anda! selamat mencuba!

cik sushi : dah lewat pagi. bahasa pun tunggang-langgang, ada pertanyaan, komen saja di sini. hehe~