Tutorial : Banner Bergerak Menggunakan Photoshop

Gadis Kidal Berceloteh...
27/04/2012

.Assalamualaikum !
Peacee Yo(!) ^_^v


Hey-yoo :) Ehh , Tetiba rasa rajin pulak hari ni nak buat tutorial . Tuto apa ek ? Ehem . Banner gerak-2 gitu . Alarr . Masih keblurr-ran ? Macam banner yang Lyssa punya nih . hihok !

  


Agak complicated kot kalau guna photoshop . Err . Tapi , kalau dah kemaruk nak sangat banner macam ni , korang boleh ikut je kat bawah ni :


1.  Buka photoshop korang . Bagi yang nak buat banner ada gambar sendiri , korang tak tahu nak crop macam mana gambar korang ? Ikut step 1 hingga 7 dari TUTORIAL INI !! 


2. Bila dan copy , pastikan photoshop korang tick bahagian animation . Macam ni :


Klik untuk nampak lebih jelas


 3. Tekan NEW , pilih saiz width 125 pixel ; height 125 pixel dan berada dalam keadaan transparent .

4. Pilih Paint Bucket Tool , dan pilih color background . Klik pada permukaan transparent tadi tu :)

 


5. Tekan PASTE . Nanti , gambar yang korang copy mula-mula tadi akan terkeluar . Then , resize dia bagi kecil sesuai dengan size banner tadi .


6. Macam mana nak resize ? Tekan Move Tool (V) then , tick bahagian Show Transform Control . Then , akan keluar garis putus-putus dekat gambar . Korang perkecilkan sizenya.


7. Sekarang masanya nak letak tulisan . Senang je . Korang kena tambah layer dekat bahagian Animation dengan create new layer di bahagian Layers.


 



8. Lepas tu , korang tekan Horizontal Type Tool (T) , then , type lah apa yang korang nak taip kat dalam banner tu . 

9. Ulang step yang sama dalam no.7 jika korang nak tulis tu , jadi satu persatu .

10. Dekat bahagian Animation bawah tu , korang boleh tukarkan second/saat dia . Paling ok , 0.5 saat rasa nye itu normal kot :)

11. Lepas dah tulis setiap ayat korang , pergi dekat gambar animation yang pertama , untick perkataan yang korang tak nak di bahagian layers (gambar mata) .

 


 12. Kemudian , korang pergi pula di bahagian Animation (Frame) no 2 pulak . Klik kat situ , dan tick balik perkataan yang tertinggal di bahagian Layers macam kat atas ni haaa . Macam Lyssa , Lyssa tick bahagian "Terjah".

13. Semua ni , ikut kreativiti korang lah tau . Lyssa ajar ni pun yang simple je . Kalau korang nak tambah shape ke , nak tulisan ber-glow ke , itu ikut korang . Ini hanyalah banner bergerak yang basic je . 

14. Sekarang , kalau nak save pulak macam mana ?

15. Pergi tekan File > Save For Web & Devices

16. Lepas tu tekan SAVE ! :)
17. Macam mana nak dapatkan pulak URL banner tu ? Korang boleh UPLOAD dekat sini ---->> TEKAN SINI ! . Copy direct link  :)

18. Kalau nak letak dekat sidebar , sekali dengan kotan banner , boleh follow TUTORIAL INI !


  =Selamat Mencuba=


*** Jangan lupa VOTE Lyssa setiap hari ye ---->>  Blogger Of The Year !! 



 
 
 
KONGSIKAN ARTIKEL INI..
Previous
Next Post »

32 000 orang Comment Di Sini

Write 000 orang Comment Di Sini
April 27, 2012 at 1:44 PM delete

wah! nice tutorial . dah lme tggu tuto ni . hehe

avatar
Anonymous
AUTHOR
April 27, 2012 at 1:52 PM delete

kak lyssa...cmne nk buat header bergerak camnie :

http://cikepal06.blogspot.com/

avatar
Anonymous
AUTHOR
April 27, 2012 at 2:08 PM delete

eh kak lyssa..bru nak blaja buat twitter..heeee.
kalau sudi follow lg..heee

https://twitter.com/#!/nurhafizaheija

avatar
k
AUTHOR
April 27, 2012 at 2:30 PM delete

Kak Lyssa , pakai photoscape macam mane pulak

avatar
Arif Addeen
AUTHOR
April 27, 2012 at 3:50 PM delete

@ nur hafizah aKa eija

yg tu pakai adobe flash. agak rumit

avatar
Andi Sakinah
AUTHOR
April 27, 2012 at 7:36 PM delete

Nak buat, tapi x leh download pulak photoshop tu.. huhuhuhuhu sedih.. :'(

avatar
Unknown
AUTHOR
April 27, 2012 at 7:47 PM delete

KAK LYSSA !! , HEHE , YAYA NAK TANYA MACAM MANA NAK BUAT CORAK BUNGA MACAM HEADER KAK LYSSA TU PAKAI PHOTOSHOP? HARAP BAGI TUTO YE . TERIMA KASIH

avatar
bro
AUTHOR
April 27, 2012 at 8:41 PM delete

salam perkenalan:)
hmm bgus tutorial nie dik. dpt gak bg info pd bloggers2 yg xde pengalaman
buat banner gerak2 camgni.

pasni upload la pulak tutorial bt banner guna gif maker or lain2. mesti ramai nk bace:)

tq. jemput dtg blog sy yea :)
http://ceritalahlagi.blogspot.com

avatar
April 27, 2012 at 9:07 PM delete

kalau nak senang lagi better guna photoscape...

avatar
April 27, 2012 at 9:07 PM delete

kalau nak senang lagi better guna photoscape...

avatar
Afifah Hayati
AUTHOR
April 27, 2012 at 9:23 PM delete

thanx sebab buat tuto yang berguna :)

avatar
FarFarra
AUTHOR
April 27, 2012 at 10:52 PM delete

kak lysa . saya terdelete configure header kat page elements tu . so tak boleh letak header . mcm mana nak ada kan balik header tu . need help !

avatar
Turtleman
AUTHOR
April 28, 2012 at 5:09 AM delete

dah lama nak try photoshop2 ni tapi takde software he3..


jom lawat entri terkini Areliff : http://www.areliff.com/2012/04/pertolongan-30-saat-dari-rakan2-blogger.html

avatar
Unknown
AUTHOR
April 28, 2012 at 6:34 AM delete

tuto ni yang kaknda cari ^_^
thanks

avatar
Unknown
AUTHOR
April 28, 2012 at 8:55 AM delete

tuto ni...kena cuba ni...heeee

avatar
IraSeob
AUTHOR
April 28, 2012 at 6:02 PM delete

Nak cuba lah nanti :D

avatar
yatyR
AUTHOR
April 28, 2012 at 10:57 PM delete

http://ajaibnyacinta.blogspot.com/

avatar
Forever Me
AUTHOR
April 29, 2012 at 4:59 PM delete

inilah tuto yg ditunggu selama ini. ty kak lyssa!

avatar
July 23, 2012 at 5:53 PM delete

hi kak plz help me!! camne nk uat tuto sendiri??!!! plz sngt help me!! tnx kak xoxox
<3

avatar
July 24, 2012 at 4:39 PM delete

my blog: http://aishah-farzana.blogspot.com

avatar
July 24, 2012 at 4:49 PM delete

mcm mane nak buat banner guna photoscape

avatar
Liyana Jasmi
AUTHOR
August 21, 2012 at 3:49 PM delete

Kak Lyssa, nk buat tapi tak paham lah yang no. 11 tu... :(

avatar
Liyana Jasmi
AUTHOR
August 21, 2012 at 3:49 PM delete

Kak Lyssa, x faham lah yang no. 11 tu... :(

avatar
tomeitomei
AUTHOR
September 22, 2012 at 11:30 PM delete

dh buat..tp xmenjadi la cik lyssa tomei..kene buat lg ni..hehehhe.usaha tangga kejayaan..jejak la blog akak ye..http://tomeikiut.blogspot.com/.

avatar
hana
AUTHOR
November 11, 2012 at 11:51 PM delete

Salam,step last yg upload link kt website imgur 2 x dpt nk wt..Blh explain clear lg x??huhu tq..

avatar
Unknown
AUTHOR
November 14, 2012 at 11:04 AM delete

kak lyssa,saye dah jadi buat tpi nk save tu, tak jumpalar save for web & devices.. cari kat ne ek?

avatar
Effa Nadia
AUTHOR
January 13, 2013 at 5:06 PM delete

wah ! sangat membantu btw thanks sis lyssa :)

avatar
March 31, 2013 at 5:52 PM delete

waahhh. jadi lah. saye dah try. thanks :)

avatar

.Assalamualaikum.
.Sila Tinggalkan Comment Anda Di Sini.
SATU pun jadi lah ! hehe. EmoticonEmoticon