Home » , » Gambar Bergerak @ gif animation-Tutorial

Gambar Bergerak @ gif animation-Tutorial

June 26, 2010

x
x
Assalamu'alaikum

entry tutorial kali ni dipinta oleh saudara oldtrafford, bagaimana cara2 nak membuat 'gambar bergerak' a.k.a gif animation(rujuk entry Gambar Bergerak Untuk Exchange Link). aq xdela pandai sangat. tapi bolehla nak ajar basic2 untuk buat gambar camtu. yg penting basic dalam adobe photoshop korang kena ade. contoh macam CTRL+C(copy), CTRL+X(cut), CTRL+V(paste), CTRL+E(merge), CTRL+T(free transform) dan banyak lagi la..xterkira. huhu xpun korang leh tengok semua shortcut keys adobe photoshop kat SINI.

sebenarnya aq ada buat video untuk tutorial ni. tapi video xde audio. haha tu kira back-up kalau korang xfaham apa yg aq akan tulis lepas ni. harap dapat membantu. ada je software2 lain yg digunakan untuk buat animation ni. tapi dalam PC aq just ada Adobe Photoshop CS2 ngn Adobe ImageReady jer. bagi sapa2 yg ada cara lain, sudi2 kan la untuk berkongsi ilu di sini kerana aq still lagi dalam proses pembelajaran. xsalah untuk mengajar dan belajar sekali kan? hehe jom tengok macam mana aq buat..

psst~! nak senang, korang baca arahan2 kat bawah ni sambil tengok video yg aq upload huhu






  • buka Adobe Photoshop dengan Adobe ImageReady serentak(nak permudahkan penghantaran gambar nanti)
  • klik File > New. pilih saiz paper yg korang nak untuk buat gambar gif. lepas tu klik 'OK'
  • untuk memasukkan gambar, klik File > Open > Browse. pilih gambar yg korang nak edit.
  • kalau nak buat tulisan, cari ikon 'T' kat sebelah kiri adobe. 'right click' untuk pilih susunan tulisan.
  • drag mouse anda untuk buatkan satu kotak khas seperti yg ditunjukkan dalam video.
  • edit gambar mengikut citarasa masing2. jangan lupa untuk pilih layer(di sebelah kanan bawah adobe) gambar yg berkenaan untuk menetapkan gambar mana yg akan diedit.
  • opss sebelum terlupa, korang perasan x aq sengetkan tulisan 'ni yg akan keluar last'? caranya senang je, CTRL+T(free transform)
  • bila dah selasai meng'edit, klik File > Edit In ImageReady(Shift+Ctrl+M). tunggu sehingga gambar dihantar ke Adobe ImageReady.
  • ok sekarang da kat dalam Adobe ImageReady da. ;) korang pastikan tab 'Animation' terpapar di bawah skrin monitor anda seperti yg didalam video. kalau xde, klik Window > Animation.
  • sebelum tu, sila pastikan ruangan 'Layer' korang ada gambar yg korang edit dalam Adobe Photoshop tadi.(disebelah kanan bawah)
  • pergi ke ruangan 'Animation', cari icon 'Duplicates current frame'. frame yg pertama korang hilangkan gambar dengan cara menghilangkan ikon 'mata' dalam ruangan 'Layer'. pada frame ke-2 plak, korang adakan balik gambar seperti didalam video.
  • ok harap korang dah faham sampai sini, try 'bermain2' dengan tools animation tu dulu. try ikut aq seperti didalam video.
  • bila da siap meng'edit, klik File > Save Optimized As...(Ctrl+Shift+Alt+S). dan 'save' dalam format '.gif'.
hehe tu je cara2nya. selamat mencuba. pada sapa2 yg xfaham atau tersangkut kat mana2 arahan yg aq bagi, sila bertanya. kalau x nanti sesat jalan hehe. aq akan cuba menjawab selagi aq leh menjawab. ;) sorila yer ayat berterabur sikit dengan video xde suaranya. aq xde mic nak bercakap haha. harap korang fahamla yer. sekian.

26 komen bernas:

hudhud said... [Reply to comment]

hah di saat i memerlukan tutorial ni, u dah buat ! thanks ! :D

Afiq said... [Reply to comment]

haha ur welcome..kebetulan plak eh ;)

pUtRi_sayaNg said... [Reply to comment]

menci auw. da bnyk kali try download software nie x dpt2. huhuu. tau x maner nak download mende neh ?? elp2. hohoo

Afiq said... [Reply to comment]

huhu sori putri..xtawla kt mana nak dload.. afiq dpt software ni pn kat orang je ;)

zures said... [Reply to comment]

adeh...camana nak belajar ni adobe photoshop pun xreti....photoscape xleh ke?

YuYu said... [Reply to comment]

thnx 4 sharing....dh try dh..mmg mnjadi walaupun tepaksa tengok 1 1 video but mmg puas hati...heheh

thnx a lot...

Afiq said... [Reply to comment]

hehe ur welcome.. harap xmnyusahkan ek..takut jugak kalau orang xfaham huhu

lazaac said... [Reply to comment]

thank bro... tutorial yg bagus...

Afiq said... [Reply to comment]

@lazaac ur welcome :)

Sophia Rani said... [Reply to comment]

gud tutorial.. ;)

Affan Ruslan said... [Reply to comment]

adeh, tak pandai photoshop lagi. hoho

Farid bin Aspar said... [Reply to comment]

oooo~... blh try.. kebetulan jengok2 nie...
nk software adobephotoshope ker?
tp cs5 la... portable.. try kat sini...


http://jomphotoshop.blogspot.com/

Melati said... [Reply to comment]

Salam Afiqbukhari,
camana saya boleh belajar adobe photoshop ni? teringin nak explore tapi zero knowledge =(

thanks =))

Afiq Bukhari said... [Reply to comment]

@Melati
wsalam, afiq xsebenarnye xdela mahir sangat.. itupun belajar daripada tutorial orang lain hehe
tapi kalau nak belajar basic, maybe melati boleh belajar kat sini Photoshop Basics - Tutorials for Photoshop Beginners

Noor Faezah Mazli said... [Reply to comment]

afiq: thanks for that tutorial.. i loike it~

Afiq Bukhari said... [Reply to comment]

@Noor Faezah Mazli
hai, ur welcome :)

RedBoys said... [Reply to comment]

tak pndi guna photoshop ni. huhu

SpaQue said... [Reply to comment]

bro, kdg2 klu kite ubah kt frame yg kite da duplicate,yg 1st pn akan ubah contoh tuka color..sbb pe ek..klu opacity ok plak

Afiq Bukhari said... [Reply to comment]

@SpaQue
yeker? xpernah plak kena situasi yang macam tu..maybe sebab duplicate, dia terikut2 dengan yang asal.. macam dah kena rantai.
nak x nk kena create frame yang baru la kot.. just my 2cents :)

SYAHIR said... [Reply to comment]

thanks bro,,dah lama cari tutorial ni :)

nurool are-fique-arghh..!! said... [Reply to comment]

tima kasih sangat2 =)..dah try buat..tapi gif ni x boleh gunakan untuk buat header ke???hu3

old_trafford said... [Reply to comment]

Singgh membaca toturial..haha..

Cek's Zaitun Othman said... [Reply to comment]

hehehe...tutorial lawak...tapi nak mek jugak..huhuhu..trimas kash..

roha said... [Reply to comment]

Salam.
Banyak ilmu di sini. Thanks. i follow u ar.

Afiq Bukhari said... [Reply to comment]

@rohawassalam, thnks yer :)

SpaQue said... [Reply to comment]

smart bro..dpt ilmu baru

Entri bes kat sini Keputusan Penuh Perlawanan Kelayakan Olimpik Pusingan Kedua | Malaysia 2 - 1 Lubnan

Entri bes kat sini Final Maharaja Lawak Astro 24 Jun 2011 | JOZAN Ada Kelebihan Sang Juara

Katakan sesuatu...

This Is A Do-Follow Blog