Wednesday, April 6, 2011

TUTORIAL ANIMATION BANNER USING ADOBE PHOTOSHOPE PS3 & PHOTOSCAPE..

HEY KORANG ! ehem , akhirnya , siap pun tuto nih . kihkih, hari tu ada org request,berkurun dah la... serius kna amik masa , selalunya i buat sekerat jlan dah malas pulakk ,i masukkan jer ke draft . lepastu i buad pulak, alahai , malas lagii , msuk draft lagi youu . keja masuk draft keluar draft jer lah tuto nih .hikhik. okay malas merapu ;D

aku buad banner nih ala -ala simple je lah ekkk? aku nih xpro sgt bab2 cmni , boleh ler skdr cukop mkn , so klu sesapa nak try boleh la. dan aku mintak maaf okay klu explanation yg aku bagikan kat bawah nih mmbuatkan korang xphm . hikhik . sebelum memulakan buat banner nih , korang mesti lah adobe photoshop  & photoscape . korang dah ado ?okay , klu yang xado tu korang pandai2 lah cari ekk..hee XD. okay , jom start ! sebelum tu, upah siket? klik sini 

ini tutorial utk membuat banner guna adobe photoshop & buat animation dekat photoscape. sila scroll box ini okay . 




1 . sila bukak adobe fotoshope anda and Ctrl+N . lepas tu dia naik mcm kt bwh ni kan . so ikot suka lah korng nak besor mana banner korng , jgn telampau besaq sangt
saya menggunakan size ini yaa : 

kemudian , ianya akan muncul lah kotak putih mengikut size yang telah kita plih td . 

3. okay , sekarang kita nak buat border sikit kat tepi tuh . sila tekan Ctrl+A utk select all , then p dekat menu edit >>> Stroke . so , ikut suka korang lah nak tebai mana border tuh , & nak kaler apa . ni aku punya ketebalan & warna border . simple jea ,


2. oke , kemudian korang amik File >>> Open .
ini adalah untuk mengambil gambar yang korang nak letakkan dekat banner korang tuh , ikot lah gmbar muka korang ker , gambo kartun ker , apa2 lah kan . oke, saya nak letak muka sy kt banner tuh , so saya ambik gmbr ni sbb gmbo nih je yg ado lam laptop sy , yg len ada lam laptop kak sya lahh,,huu.. :


hokeh , aku just nak amik muka aku jea .ak xmaw background blakang tuh . so , kita boleh tekan eraser . eraser tu kat mana ? senang korg tekan huruf E je.  aku salu pakai magic eraser tool ngan eraser tool tu je . ikot gmbar jgak lah kan .


okeh , bila dah delete tepi2 tuh ,gmbar tuh akan jadik cmni kan :


see. dah xdak kan background blkg tuh . then , apa yg korg perlu buat is korang tekan CTRL+A(utk select gmbor tu) atau amik quick selection tool  (tekan W jer) . pastu korang gunakan tool tu utk select gambar korang td tuh . bila dah select selurh gambo tuh , dia akan ada line2 kt tepi tu kan. senang cita camne :


oke, kemudian korang tekan CTRL+C utk kopi pic ni . then minimise kan layer tu .korg kembali ke kotak putih yg tadi tu . ni kotak ni :
 oke . kat sini korg tekan CTRL+ V utk paste kan gambar yg korang kopi td tuh . dia akan jdik cmni , contoh aku nye pix :

see ? nmpok mato jea , sbb gmbr tuh kan besor dr size banner kita tu . then tekan CTRL+T utk free transform .so , korang pekecik kan gmbar korng tuh mgkut kesesuaian banner . ini contoh gmbo aii stlh dipekecik kecikkan , hikhik :

[klik utk tumbesaran yg sihad]

3. okeh , ini dah selesai bhg letak gmbar , then nak letak tulisan lak kan . amik T jea . so ikot suka korang lah nk tulih hapa . ini aku punya contoh yea ; pix 1 :

 kemudian korang save as dlm format PNG okay . and . jangan keluar lagi adobe photoshope tuh . kita nak buat animation sikit . so , pegi kt tmpt korg edit td .smbg jer edit .contoh nya kita tukar kaler tulisan . utk bg nmpak animation gituu.. japg korg akan faham okay .

ini contoh gmbr kedua :

see? xdk beza sgt kan? aku just tukar kaler , bg dia senget sikit & tmbh sikit tulisan . then File >>> Save as . korang ulang step ni smpai lah korng rasa jadi2 lah kot byk sgt dah nii .

4. oke , bla dah siap suma save segala bagai , korang pegi ke photoscape pulakk  . then amik animation gif .

then , korang drop je lah gmbar yg korg buat tdi tuu..

korang boleh taw nak ubat masa dia . nak bg lambat ke cepat ke . lmbt ke.ikot suketi lah yer . pastu dah pueh hati . save !



banner dah siap . so, ini cara nak letak kat blog anda hokey plus dgn cara nak buat kotak letak kode tuh

ini tutorial membuat kotak kode HTML untuk banner + cara nak letak banner dlm blog :) sila scroll okay :)



1. sila uploadkan banner korang tuh dekat dalam photobucket . biarkan ia rest kat situ sat,sebab kita nak buat kotak kod dulu.

2. okay , cikalang kita nak buat kotak HTML banner code . hah. ikot cara ni .

Kopi koding ni :
kod 1
<textarea cols="25" name="Famous Quotes" readonly="readonly" rows="2"> Letak Banner  Kod Di sini </textarea>
Banner kod nak amik mana ? oke, p photobucket .kemudian korang kopi banner korang punya HTML code yer .


contoh ini HTML kode utk banner aku okay :
<a href="http://s1081.photobucket.com/albums/j345/misluvcoklat/?action=view&amp;current=bannermisluvcoklat.gif" target="_blank"><img src="http://i1081.photobucket.com/albums/j345/misluvcoklat/bannermisluvcoklat.gif" border="0" alt="Photobucket"></a>
okay , korang gantikan tulisan kaler purple tuh dgn blog url korang. contoh yea ;
Kod 2
<a href="http://misluvcoklat.blogspot.com" target="_blank"><img src="http://i1081.photobucket.com/albums/j345/misluvcoklat/bannermisluvcoklat.gif" border="0" alt="Photobucket"></a>

okay . dah siap pon. cara nak letak dekat dalam blog . mcm biasa .

Dasshboard >>> Design >>> Add a gadjet >>> HTML/JavaScript

kopi koding nih :
<center> HTML CODE BANNER KORANG (kod 2)</center>
<center>Kod HTML BANNER BOX CODE (kod 1)
</center>
contoh :
<center> <a href="http://misluvcoklat.blogspot.com" target="_blank"><img src="http://i1081.photobucket.com/albums/j345/misluvcoklat/bannermisluvcoklat.gif" border="0" alt="Photobucket"></a> )</center><center><textarea cols="25" name="Famous Quotes" readonly="readonly" rows="2"> <a href="http://misluvcoklat.blogspot.com" target="_blank"><img src="http://i1081.photobucket.com/albums/j345/misluvcoklat/bannermisluvcoklat.gif" border="0" alt="Photobucket"></a> </textarea></center>

oke ! siappp ! savee ! harap korang paham lerr =.= klu xphm tnya jea okay . semoga menjadik . hee XD buat pahala sikit dngn klik sini ok ? :) tq.


ehem2. ini lah banner aku yg xkretif tu . korang buat la ikot kretiviti korang . ai xkretif .(mata ke atas & tgn ke dada) XD






 Photobucket 

psssst ! kalau sudi , tempek lah kat blog korang  =')


sekian . klau xpaham , tanya ja yerr , sori klu ayat yg sy gunakan berbelitbelit .. hihi ..bye.

3 comments:

Muhammad Hazwan said...

ape bende nim..kawe tok paham..?,..
tutor nim utk apew?

Muhammad Hazwan said...

PERINGATAN!!! blog ni ada lagu , so klu xnak dengar sila pause ya . harap maklum ;)terima kasih ....mcm mane nak buat?

Shafiqah Rashid said...

@Roy ; hahah XD
ni tuto nak buat banner lahh ..
tgok dlm scrool box tuh ...
huhu..
oh, yang tu ekk?
japg cheq buat tuto yoo :)