Serial Photoshop Tutorial : Membuat animasi GIF dengan Photoshop

22 pemilih
60,942 views | March 8, 2009

oleh Bara Sukaton

animasi gif dengan photoshop
Kalian bisa membuat animasi dengan gambar yang kalian punya dengan format gif. Ada banyak software yang bisa digunakan untuk membuat animasi dengan format gif, namun disini aku mengajarkan dengan menggunakan software gambar yang ‘hampir’ semua orang punya yaitu Photoshop :wink: . Lihat gambar diatas, animasi diatas dibuat dengan cara menggabungkan beberapa frame dengan mengganti settingan layernya. Bingung? Coba ikuti langkah-langkah berikut.
1. Prinsip dasar atau ide utama dari membuat animasi gif dengan photoshop adalah menggabungkan frame-frame gambar sehingga terlihat bergerak apabila dijalankan. Frame-frame gambar ini pada dasarnya dibuat dengan menghilangkan dan memunculkan elemen-elemen dari tiap gambar. Elemen-elemen gambar ini akan kita pisahkan dalam bentuk layer-layer. Untuk gambar animasi mobil seperti gambar diatas kita memerlukan 7 layer elemen ditambah 1 layer background. Lihat gambar disamping, ketujuh layer elemen tersebut adalah background hitam untuk lampu, lampu merah, lampu kuning, lampu hijau, gambar mobil, tulisan BRUUUM, dan efek cahaya. animasi gif dengan photoshop
2. Setelah kita buat keseluruhan elemen yang akan dipakai, selanjutnya kita akan membuat frame pertama. Caranya yaitu pertama kalian harus membuka panel animasi dengan cara memilih menu Window > Animation. Maka akan tampil tampilan seperti gambar disamping yaitu terlihat satu frame dengan semua elemen terlihat. animasi gif dengan photoshop
3. Selanjutnya kita akan membuat animasi dengan konsep sebagai berikut:     

pertama: layar putih tidak terlihat satu elemen pun.

kedua: kemudian muncul lampu merah

ketiga: kemudian muncul lagi lampu kuning

keempat: muncul lampu hijau yang menandakan mobil dapat melaju.

kelima: muncul tulisan BRUUUM !! sebagai gambaran bunyi mobil yang menderu.

keenam: mobil melaju dari kanan ke kiri dengan cepat dan meninggalkan efek cahaya.

ketujuh: efek tulisan BRUUUM perlahan menghilang.

Sekarang lihat gambar disamping, untuk membuat animasi tahap pertama yaitu tampilan putih tidak terlihat satu elemen pun, dilakukan dengan cara membuka tab “Layers” dan menyembunyikan semua layer kecuali background. Kalau bingung bagaimana cara menyembunyikan layernya, klik saja ikon mata di sebelah kiri tiap layer :wink: . 

 animasi gif dengan photoshop
4. Setelah semua elemen disembunyikan, selanjutnya kita pindah lagi ke tab “Animation (Frames)”. Sekarang kita atur waktu tampilan pada frame pertama ini. Caranya klik tulisan “0 seconds” lalu pilih satu detik untuk tampilan frame pertama ini. Ini artinya frame ini hanya ditampilkan selama satu detik lalu pindah ke frame selanjutnya. animasi gif dengan photoshop
5. Langkah selanjutnya adalah membuat frame kedua. Caranya klik ikon seperti pada gambar yang ditunjukkan dengan bulatan merah. Ikon ini akan menduplikasi frame sebelumnya sebagai frame baru. Atur waktu tampilan frame ini menjadi satu detik. Frame ini selanjutnya akan digunakan untuk memunculkan gambar lampu merah. animasi gif dengan photoshop
6. Sekarang mengatur tampilan untuk frame kedua ini. Karena frame kedua ini akan ditampilkan gambar lampu merah yang menyala maka layer ‘merah’ dan background ‘hitam’ ditampilkan kembali. Caranya dengan membuka tab ‘Layers’ lalu mengklik ikon kotak di sebelah kiri layer ‘merah’ dan ‘background hitam’ seperti gambar disamping. animasi gif dengan photoshop
7. Setelah frame kedua ini diatur tampilan layernya maka tab ‘Animation (Frames)’ sekarang akan tampak seperti gambar disamping. animasi gif dengan photoshop
8. Langkah selanjutnya adalah perulangan dari langkah ke 5,6, dan 7 namun bedanya sekarang yang ditampilkan adalah lampu kuning dan lampu hijau. Namun jangan lupa untuk mengatur waktu tampil dari lampu kuning dan hijau  menjadi satu detik. Setelah diatur frame dan layer kuning dan hijau maka tab ‘Animation (Frames)’ kira-kira akan tampil seperti gambar disamping kanan ini. animasi gif dengan photoshop
9. Langkah berikutnya sama seperti langkah-langkah sebelumnya yaitu menampilkan tulisan BRUUUUM !! dengan menambahkan frame baru dan menampilkan layer tulisan ‘BRUUUUM!!’. Namun atur waktu dari tampilnya frame ini menjadi dua detik seperti gambar disamping. animasi gif dengan photoshop
10. Tahap selanjutnya agak sedikit sulit tapi mudah untuk dilakukan. Nah lo, karena efek ini keliatannya sulit namun untuk membuatnya diperlukan langkah yang mudah :-) . Tahap ini adalah tahap dimana ada gambar mobil bergerak dari kanan ke kiri. Yang harus kalian lakukan adalah buat frame selanjutnya, kemudian klik kotak kiri di sebelah layer ‘mobil’ untuk menampilkan layer mobil. Namun sembunyikan mobil di sebelah kanan area gambar seperti terlihat di gambar sebelah kanan. animasi gif dengan photoshop
11. Buat lagi frame selanjutnya dengan menduplikasi frame sebelumnya (frame 6) kemudian posisikan mobilnya di sebelah kiri area gambar seperti terlihat pada gambar disamping. Untuk kedua frame ini, atur waktu tampilan menjadi 0 detik atau ‘No delay’. animasi gif dengan photoshop
12. Langkah ini adalah langkah untuk membuat mobil bergerak dari kanan ke kiri. Pertama kita akan memilih kedua frame untuk digabungkan dengan cara menahan tombol shift lalu klik layer 6 dan layer 7 seperti gambar di kotak merah. Setelah kedua layer tersebut dipilih, selanjutnya kita akan menerapkan efek tweening pada kedua frame tersebut. Apa maksud dari efek ini? Efek tweening ini dimaksudkan untuk mempermudah kita untuk membuat suatu animasi posisi, dan transparansi yang berpola. Misalnya apabila kita akan membuat gambar mobil tersebut bergerak dari kanan ke kiri, daripada kita mempersulit diri sendiri dengan membuat satu persatu frame lalu kemudian diubah posisi mobilnya sampai ke kiri, kita dapat membuatnya lebih mudah dengan membuat dua frame saja yaitu frame awal posisi dan frame akhir posisi. Selanjutnya frame-frame diantara frame tersebut akan dibuat secara otomatis oleh Photoshop da pastinya hasilnya lebih smooth dibandingkan frame yang kita buat secara manual.    

Untuk menggunakan efek ini, setelah dua frame awal dan akhir tadi dipilih, selanjutnya klik ikon yang ditunjuk tanda panah merah, dan masukkan nilai ‘Frames to Add’ menjadi 7. Klik OK.

 animasi gif dengan photoshop
13. Sekarang masuk tahap menculnya efek cahaya dari mobil yang melaju dengan kencang. Efek ini akan kita buat agar menghilang secara perlahan-lahan setelah kemunculannya di frame ke 11. Prinsipnya adalah menurunkan perlahan-lahan Opacity dari layer ‘light’ dari 100% menjadi 0. Sekarang klik frame 11 lalu munculkan layer terakhir yaitu layer ‘light’ dan biarkan opacitynya 100%. Lihat gambar. animasi gif dengan photoshop
14. Selanjutnya klik frame ke 12, munculkan layer ‘light’, lalu turunkan Opacitynya menjadi 60%. Lihat gambar. animasi gif dengan photoshop
15. Lakukan cara yang sama untuk frame ke 13, dan 14. Namun atur Opacity untuk frame ke 13 menjadi 30% dan 0% untuk frame ke 14. Kalian dapat mengklik tombol ‘Play pada tab ‘Animation (Frames)’ untuk melihat hasil sementara animasi kalian. Kalian akan melihat efek cahayanya perlahan-lahan menghilang karena transparansinya diturunkan sampai 0. animasi gif dengan photoshop
16. Sekarang kita memasuki tahap akhir! Pada tahap ini sebagai penutup animasi kita, kita akan membuat tulisan BRUUUUUM!! menjadi hilang perlahan-lahan. Caranya sama seperti langkah ke 12 namun yang dimainkan disini bukan posisi namun transparansi. Caranya buat frame ke 15 dengan menduplikasinya dari frame ke 14. Lalu atur Opacity dari layer BRUUUUM!! di frame 15 menjadi 0%. Setelah itu klik tweening, dan atur nilai ‘Frames to Add’ menjadi 10.   

Yak itu dia tutorial photoshop saya yang pertama. Hasil akhirnya dapat kalian lihat seperti gambar di awal tulisan.

 animasi gif dengan photoshop

Silahkan dicoba! Disini aku sertakan file PSDnya. Untuk mendownloadnya silahkan klik disini.

Tentang Penulis

Bara Sukaton

Web Designer, Engineer, and Nasi Goreng Lovers .^^.
7 tulisan telah dibuat oleh Bara Sukaton

  1. aldrik pada April 5, 2009 5:15 am 0

    :lol: :lol: :lol:
    wah ship nih tutorialnya . . . boleh dicoba eay.

  2. Bara Sukaton pada April 8, 2009 12:33 pm 80

    OKe nanti kalo dah berhasil komen ya .. 8)

  3. haryo pada April 25, 2009 1:44 pm 0

    :D :-) :D :-) :lol: :lol: :lol: :lol: :lol:
    boleh juga thanxsssssss

  4. rio pada April 28, 2009 6:12 am 0

    :twisted: :mrgreen: :idea: :?: :roll: :evil: :evil:
    KURANG KEPENAK!!!!!!!!!!!!!!

  5. Bara Sukaton pada April 28, 2009 8:43 am 80

    walaah,, apane sing kurang kepenak mas ??!!

  6. luky pada April 29, 2009 9:45 pm 0

    :-) Makasih tutorialnya mas,sangat membantu bagi pemula kayak saya dan mudah difahami,saya bangga dengan anda yang rela meluangkan waktu untuk bagi2 ilmu,semoga tuhan memberkati anda,mudah2an anak bangsa juga bertambah maju dan mau meniru seperti anda dengan menyumbangkan ilmu2nya yang lain… ditunggu lanjutannya lho..sekali lagi terima kasih.

  7. Bara Sukaton pada April 30, 2009 5:24 am 80

    alhamdulilah :-) ,, (jadi semangat))

  8. Irwan pada May 2, 2009 3:07 pm 0

    Bagus mas animasinya..
    Trus nyimpenya ke format gif gmana mas cranya…?

  9. Bara Sukaton pada May 3, 2009 7:13 am 80

    klik, File > Save As > trus pilih format .gif ..

  10. Irwan pada May 5, 2009 3:58 am 0

    Maksut sya biar gambarnya ttep bsa gerak mas,, gimana cranya,, cz kmren sya simpen format gif gambarnya g bisa gerak..
    Photoshop punya sya cs3

  11. Bara Sukaton pada May 5, 2009 4:16 am 80

    coba gunakan File > Save for Web & Devices > formatnya GIF ..

  12. Irwan pada May 5, 2009 8:05 am 0

    Y mas,, tankiu bgt.. Moga karya mas tmbah bgus2…

  13. Irwan M Santika pada May 14, 2009 4:57 pm 0

    Minta tolong mas, bagaimana caranya membuat animasi lampu kendaraan yg berkedip kedip menggunakan flash mx, ato cari tutorialnya dimanaya.

    Thkns banget :-)

  14. Bara Sukaton pada May 14, 2009 5:36 pm 80

    aku sedang menulis tentang tweening di flash ,, doakan saja cepat selesai :-) Nanti dari situ bisa dikembangkan sendiri menjadi animasi lain

  15. wildan pada May 28, 2009 2:03 am 0

    wahh..
    kayaknya hampir sama microsoft power point…
    tutorial yg kaya anime beitu ad gk? :|

  16. Bara Sukaton pada May 28, 2009 10:24 am 80

    yap prinsipnya mirip kayak power point, tapi menurut aku lebih mudah pake photoshop dan sepertinya kalo di power point ga bisa di export jadi gif .. cmiiw

  17. Membuat Animasi Banner Exchange pada May 30, 2009 9:42 am 0

    tutorialnya keren dan puanjang…. :!:

    salam kenal dari seorang pemula :-)

  18. Bara Sukaton pada May 30, 2009 1:26 pm 80

    thanks, tapi tutorial GIMP dan Inkscape anda keren juga, seperti bukan pemula :D …

  19. yoyok pada June 4, 2009 8:19 am 0

    tutorialnya sepp mz,sangat berguna bgi saya yg blom bisa… :!:

  20. Bara Sukaton pada June 4, 2009 5:36 pm 80

    alhamdulilah :-)

  21. coco pada June 12, 2009 2:08 pm 0

    thanks banget yach mas….ntar tak cobain…….
    moga ja dengan ilmu yang mas bagi bisa bermanfaat bagi semua pengguna photoshop…..thank

  22. ramang pada June 23, 2009 8:58 pm 0

    mantatap mas,,,, kebetulan sekali q lagi mo presentasi, jadi lebih seru kalo ada gambar geraknya?????

  23. kokotole pada July 2, 2009 2:56 pm 0

    Wah Sumpah Keren Buanget Boss!!!Tapi saya masih bingung cara nyimpenya biar gambarnya tetap bisa gerak gmn boss???Thx……. :( :( :(

  24. Bara Sukaton pada July 4, 2009 6:38 am 80

    sepertinya diatas udah ada yang nanya ..
    coba gunakan File > Save for Web & Devices > formatnya GIF ..

  25. download ebook gratis pada August 3, 2009 6:23 am 0

    wah, makasih banget om. saya langsung bisa nech….

  26. Samudera Gema P pada August 14, 2009 7:11 am 0

    Wah nice tutorial, gua suka banget sama animasi.

    sini kalo mau belajar animasi pake flash, Visit saja Plus44 Cyber Flash

  27. riza pada September 7, 2009 7:29 am 0

    sip :!: :-) :lol:

  28. deekaNutz pada September 23, 2009 6:14 am 0

    keren2… wogh ya, ad referensi buat tampilan web ga?

  29. Bara Sukaton pada September 23, 2009 9:20 am 80

    trims,, untuk referensi tampilan web coba cek situs-situs berikut, mereka adalah web design company yang aku sering kunjungi untuk cari inspirasi,
    1. 45royale
    2. Fudge
    3. flex360
    4. the KDU
    5. OH! Media

    :!: :!: :!:

  30. divina pada September 27, 2009 1:34 pm 0

    wah tutor nya brmnfaat bgt, saya udh jd 1 biji nih :arrow: :o
    http://img225.imageshack.us/img225/7404/sif.gif

  31. Bara Sukaton pada September 28, 2009 5:03 pm 80

    @divina : hahaha :!: :!: :!: keren-keren, itu ketupat ya ? Mohon maaf lahir bathin juga ya div !!

  32. evan pada October 7, 2009 12:57 pm 0

    bagus bgt mas karyanya…:!: .

  33. iyund pada October 18, 2009 10:12 am 0

    :arrow: :lol: :arrow:

  34. Ayu Tri pada October 30, 2009 8:56 am 0

    wah..asik nie.. turorialnya lengkap n detail jadi gampang ngerti..

    greatlah pokoknya…

    tq yaw…

  35. baringgas pada November 1, 2009 4:08 am 0

    :!:
    tapi kalo bisa itu tutorial harus lengkap donk

  36. reny pada December 4, 2009 8:34 am 0

    INI bukan.na d5na sich………???????? :roll: 8O :idea:

  37. mang pada December 5, 2009 1:47 am 0

    di adobe ps7.0 ko di window nya ga ada menu animasi mas

  38. Bara Sukaton pada December 6, 2009 11:55 pm 80

    @mang : kalo di ps 7.0 setelah bikin layer kamu harus pindah ke Image Ready dengan mengklik tombol yang ada di paling bawah toolbar. Selanjutnya sama seperti tutorial diatas ..

  39. Akbar pada December 7, 2009 3:58 pm 0

    makasih banget mas saya niru konsepnya ni dah jadi 1 thank you mas ku pake ps 7
    http://img442.imageshack.us/img442/7194/69378331.gif

  40. Bara Sukaton pada December 8, 2009 1:14 am 80

    hahaha kreatif juga nih akbar … mobilnya jadi keluar api gitu … ada efek daun-daun berguguran juga lagi …. :!: :!: :!:

  41. Akbar pada December 8, 2009 7:05 am 0

    alhamdulillah berkat mas! :wink: sekali lagi thank you

  42. Dietrich pada January 1, 2010 2:25 am 0

    bagian tersulit.a adalah ketika mmbuat mobil tsb bergerak dri kanan ke kiri….hhhuuuhhhhhh cara memindahkannya selalu gagal…..hihihihihihihihihihihihih :| :D

  43. meri pada January 29, 2010 9:26 am 0

    mas, mau tanya n minta tlg…bagaimana caranya gambar animasi ini di save dlm bentuk .gif…saya coba save tp waktu di buka, file gif-nya gak jalan animasinya…tks

  44. arul pada February 13, 2010 10:33 am 0

    :o :o :o Betul…betul..betul…Thanks ya atas referensinya

  45. w2n pada February 14, 2010 10:31 am 0

    sangat bagus,bikin lagi ya yg bgs lgi/

  46. ilhampranata pada February 23, 2010 10:25 am 0

    sangat..sangat bermanfaat ikut nyedot ilmunya ya bos…. :!: :!: :!:

  47. Manyun pada February 28, 2010 5:50 pm 0

    mangstaaabbbb bossss !!!!!
    mudah di pahami, thanks a lot
    d tnggu tutorial yg laen’y yy…. :lol: :lol: :lol: :lol:

  48. motivasi259 pada March 4, 2010 11:24 am 0

    wah seru gan artikelnya di coba ah,.

  49. Sri Niel pada March 15, 2010 1:14 am 0

    Mantab boss. Thx ya. Sekalian promo.
    Ingin eksis di facebook? Patut di lihat: Mengedit foto dalam 3 menit dengan photoshop.

  50. tama pada March 16, 2010 10:10 am 0

    Salam kenal,bung Bara Sukaton…

    saya sudah coba save pake cara ini:File > Save for Web & Devices > formatnya GIF, tetap gambarnya tetap gak gerak.(Pake Photoshop CS4 V.11.0)

    thanks

  51. Bara Sukaton pada March 16, 2010 11:27 pm 80

    @tama : seharusnya sudah bisa bergerak karena barusan aku coba pake CS4 v11 bisa kok. Mungkin kamu buka file gifnya pake software yang ga support animasi. Coba buka pake Windows Picture and Fax Viewer (bawaan windows) … goodluck! :!:

  52. Agung pada March 21, 2010 9:12 pm 0

    tengkyu masbro, saya uda bisa sedikit-2. 8)

  53. alfan pada April 2, 2010 3:08 pm 0

    OK.. Tuh but da yang laen g….. :o :-) :o 8) 8) :!: :!: :!:

  54. awan pada April 19, 2010 3:58 am 0

    okelah……………….. :!:
    pi gmna caranya buat animasi xg sedikit lbih rumit gtoe , bza ga’…………………??? :o
    yg lbih keren gtoe…………… :P
    hehehe………………………!!! :wink:

  55. tomi pada April 22, 2010 12:21 pm 0

    welew mas puannnnnjang banget ampek penig ni pale…..
    coba ajari yang lain aja ya….tak tungguin ni share nya koe
    matur nuwun lo mas …..
    :!:

  56. erwin pada April 26, 2010 5:36 am 0

    kk di save dalam betuk apa ya???……. :!:

  57. Bara Sukaton pada April 28, 2010 3:45 pm 80

    dalam bentuk gif dong bro .. pilih yang save for web & devices :!:

  58. Rakha pada May 1, 2010 8:24 am 0

    Ok… punya

  59. ixyak pada May 7, 2010 6:54 am 0

    tak jajal sik mas

  60. jack pada May 11, 2010 1:11 pm 0

    Kalo pake CS4, simpan pake save for web & devices, setelah klik save, terdapat 3 kotak yang harus ditentukan isinya
    1. nama file : terserah namanya
    2. save as type : pilih image only (*.gif)
    3. setting : pilih background image

  61. gun pada May 21, 2010 8:40 pm 0

    :lol: wah bagus banget nich infonya…
    q coba dulu bosss

  62. qisthi pada May 24, 2010 12:31 pm 0

    Siipp… :D

    udh siap ,jadi boss…
    thx tutorialnya yah

  63. noels_gall pada May 24, 2010 5:26 pm 0

    Bos, knapa di masukin ke blog gambar nya jadi gak gerak???? mohon solusinya……….

  64. Bara Sukaton pada May 25, 2010 7:25 am 80

    @noels : mungkin kamu blum pilih save for web and devices atau juga kemungkinan halaman blogmu blom selesai di load sehingga hanya terlihat gambar awal, pastikan halaman blog sudah selesai di load :-)

  65. 69 pada June 1, 2010 2:53 am 0

    bro z udah coba semua langkah2x, n jdx mantap bnget
    saya kesulitan nge savex, sy pake photoshop cs3
    pas coba buka dengan Windows Picture and Fax Viewer malah picture failed :D :D :(

  66. SayIdie pada June 2, 2010 2:31 pm 0

    Omm ,, kok di komputer saia mode GIF nya gk gerak ya ?

  67. Sandi pada June 4, 2010 5:01 pm 0

    :-) wah trima kasih gan bwt tutorialny. bermanfaat banget. :!: udah q coba & hasilny lumayan lah. bisa diliat di blog q.aq jadiin kpala halaman. :wink: ijin copy gan. . . :oops:

  68. cygnus pada June 5, 2010 7:30 pm 0

    … makasih, n lam kenal aja buat semuanya !

  69. BHELLA pada June 9, 2010 9:55 am 0

    :o 8O MANTAP NH….. TP GUA MSH NGK NGERTI…..????? :? :cry: :x

  70. raras pada June 19, 2010 8:45 am 0

    Kalo membuat animasi pd photoshop animasi’a dari gambr kecil ke besar gmn?
    thanks :-)

  71. khuesnha pada June 23, 2010 1:49 am 0

    :lol: boleh dicoba… :D :wink:

  72. sABBANA azmi pada July 5, 2010 6:51 am 0

    Haha……. trimaksh ya tutorialnya, aku cuma pengen tahu gmana caranya nyimpen filenya… :wink: :wink: :wink:

  73. niar pada July 21, 2010 2:38 am 0

    :-)

    mantap lah,,,,,,,,bisa jdi tgas di kmpus,heheheh

  74. qimetz pada July 26, 2010 7:00 pm 0

    mas,, makasih banyak tutorialnya ngebantu bgt,, saya jadi bisa buat avatar sendiri di forum.. top dah, cuma 15 menit udah bisa ngerti tutorial ini..

  75. vito pada July 28, 2010 7:28 am 0

    kalo mau ngedit file animasi gif yg sudah jadi, dgn cs4 gimana?? 8O

  76. Tolonggalo pada July 31, 2010 5:37 am 0

    Waaahhh,, thanks yeah mas,,, ane da bisa,, biar cuman dikit²,,, :arrow:
    http://i775.photobucket.com/albums/yy37/tolonggalo/tolonggalo-6.gif

  77. avin pada August 2, 2010 8:26 am 0

    mas tpi yg sya pke d’rmah photoshop cs4 bkan cs2 :!:

  78. dederosyada pada August 3, 2010 12:13 pm 0

    :lol: :evil: :roll: :wink:
    yah syng_nya komptrku gg d photshop ny.tp q jd ngrti gmn crny mmbuat animasi thanks y…

  79. biey pada August 7, 2010 5:27 am 0

    ada yang lain ga???
    msalkan bwt slide show…
    tpi gmbr’a smua hdup?? 8O
    coz,w dh tw yg kya gni…
    thnxs… :o

  80. SATEX FAHMIA pada August 8, 2010 9:33 am 0

    SIIIPP;.
    TKS DH W JADI TAUUU

  81. sugiantoro pada August 14, 2010 8:38 am 0

    :!:

  82. jeka pada August 19, 2010 4:46 am 0

    ini yang aq cari.. thanks……. :lol: :lol: :lol: :lol:

  83. jeka pada August 19, 2010 4:47 am 0

    Ini yang aq cari… Thanks :-) :P :lol: :lol: :lol:

  84. josatrian fuu pada August 19, 2010 4:45 pm 0

    :lol: :!:

  85. abduh pada August 21, 2010 4:02 pm 0

    yang di maksud klik di bawah toolbar apa itu mas? :oops: :oops: :oops: :oops: :oops: :oops:

  86. aku sang angin duduk pada August 26, 2010 5:00 pm 0

    :lol: wawaw…..thank’s gan

  87. jinBei pada September 6, 2010 5:48 am 0

    :D :-) :( :o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :?: :idea: :arrow: :| :mrgreen:
    mas kq aq dak isa di save jadi gif…,???
    aq dah di format gif lho…,
    kq gak bisa ea…,

  88. anak kucing pada September 13, 2010 4:50 pm 0

    wahh,.bagus ni bwt pmula,. :!:
    ijin salin dib;og saya ya mas,. :o

  89. Jaka @ Tutorial Photoshop pada September 21, 2010 1:38 pm 0

    mantap, tutorial yang menarik, tapi gimana caranya membuat animasi secara timeline??? :idea:

  90. wisnoe tkj sr pada September 22, 2010 1:45 am 0

    :!:
    o.k jack,,,,,.,
    ditunggu lg niechhh,,hasil karyas yag lennnee
    sukses selaluuuuuu………….

  91. hilhul pada September 26, 2010 2:32 am 0

    kerennn :!: :!: :!: 3 jempol. . . .
    aku make ini untuk di webku yaditullis kok asalnya dari sini :oops:
    ok :o

  92. Mo3no pada September 26, 2010 6:26 am 0

    cara nyimpanx gmn?? q sdh coba smua tapi cuma sebagian layernya tersimpng…… pusing

  93. pemuda pada September 27, 2010 11:00 am 0

    Nica Info Gan… Sangat Membantu Buat Gw.. Thankss

  94. Tobio pada October 5, 2010 3:24 pm 0

    wahahah…Good Job mas,,,,kenapa kok gak register di Forum Google Inc…? kan keterima…. :!: ntar di sana jadi bagian gadgets……(pemeriksa+pembuatan gambar animasi pake Photoshop),,salam kenal…!!!!!!!!!kunjungi web kami di http://www.google.com :o :!:

  95. slamatagung pada October 13, 2010 4:34 pm 0

    :!:
    siip mas…mao dicoba kalo gitu nih,,,belajar dikit dikit…makasih mas
    http://blog.beswandjarum.com/slamatagung

  96. reva pada October 29, 2010 1:11 pm 0

    Ada yg bisa bantu gag buat bantuan bikin simulasi deadlock pake’ flash???

  97. freezz pada November 6, 2010 2:44 pm 1301

    Sipp bgtt ..

    Tp lum ku jajal ..
    Hehe :D

  98. freezz pada November 7, 2010 1:24 am 1301

    itu pake PS berapa yah … ??? :?
    ko di PS CS gag ada Menu Animation … ????? :(

  99. cah ndeso pada November 10, 2010 4:29 am 0

    Wah Mau coba belajar juga ach nice info
    kunjungi balik yah

  100. bani pada November 21, 2010 7:01 am 0

    wajib d coba iki……
    8)

  101. zon pada November 24, 2010 6:55 am 0

    :o tak coba dulu…

  102. Priwanto pada November 29, 2010 11:50 pm 0

    Thanks banget mas bener-bener membantu dalam belajar khususnya yang masih awam seperti ane xixixixixixixix
    Ane tunggu karya2 yang lainnya…

  103. amie pada December 1, 2010 2:18 pm 0

    :lol: :D bagus222 aku dulu pas SMA , pernah diajrin ini klas 2 tapi udah lupa bgd hehhe udah 2 tahn yg lalu. hmmm skrang jadi inget lagi klo diajrin gampang bgt…

    Thnks yah!!!!

    tinggal bikin air hujan yg netes nieh!! :!: :arrow:

  104. Gelora Muda pada December 7, 2010 12:09 pm 0

    Asli…..ini yag slama ini gw cari :!:

  105. joe pada December 15, 2010 3:55 pm 0

    waduh ga ada gambar nya

  106. ancha ztg pada December 16, 2010 6:18 pm 0

    Mksh bxk mas ats tutorialnya,kl blh mint nmr hpX biar bs slng bljar dng mas.

  107. gatcom87 pada December 17, 2010 7:22 am 0

    waduh panjang amat si keterangannya…
    pusing-pusing :roll: :!:

  108. jetli pada December 18, 2010 4:45 am 0

    :!:
    mas nanya tu save nya file type nya apa ya?

    http://mumet99.tk

  109. IP Man pada December 18, 2010 4:49 am 0

    8)
    mas mau nanya
    bagaimana cara meng-upload animasi-nya ke facebook?

  110. Hotaruchan pada December 28, 2010 3:40 am 0

    :-) thanks atas infonya. hm.. sebebnarnya saya sih, maunya buat gif dari video gitu,, tapi,ko gak bisa ya? padahal saya udah donlot quicktime karna disuruh..
    tapi, pas import,, tetep aja gak bisa..
    tolong bantuannya.. :cry:

    trimss :o

  111. Fauzan1412 pada January 1, 2011 12:36 am 0

    Bagus kk tutornya :!: .. tpi saya kok gk bsa di save :( .. error trus ?? :cry:

  112. cytho pada January 5, 2011 2:40 am 0

    Gan, ada cara bikin animasi gif lainnya gk? misal gambar 3 dimensi .. :lol:
    Tq

  113. AIKCELL MAGETAN pada January 20, 2011 6:03 am 0

    :!: mantaps…
    ternyata mudah ya…
    tq banyak ilmunya
    :D

  114. AIKCELL MAGETAN pada January 20, 2011 6:05 am 0

    mangstap…
    :!:
    http://s1234.photobucket.com/albums/ff418/aikcell/

  115. Azis naufal pada January 27, 2011 6:51 am 0

    mas versi photoshop nya apa ? bisa ngak tuh di adobe photoshop cs3 :( :cry:

  116. tezar pada February 7, 2011 1:37 pm 0

    kk,, ini pake photoshop berapa? kq pake 7.0 gk bisa?
    balesnya lewat via pesan FB,, mohon bantuannya

  117. Audi_911 pada February 24, 2011 9:58 am 0

    waw kren bnget sipp deh :!: 8)

  118. s pada March 9, 2011 12:39 am 0

    :D :-) :( :o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen:

  119. ada dech pada March 10, 2011 4:31 am 0

    8) :!: :!: :!: :!: :!: :D :-) :( :o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen:

  120. Portal Gamezz pada March 16, 2011 4:20 am 0

    wew keren nih,

  121. ade_fitri pada March 22, 2011 8:35 am 0

    :arrow: :arrow:

    makasih mas…saya cari2 tutorial macam ini akirnya nemu juga…sangat membantu soalnya..
    makasih banyak.. :oops:

  122. AAM pada March 23, 2011 7:48 am 0

    WUUUUSSSSSSSSS KILAAAAATTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT
    :!: :-)

  123. Deva pada March 25, 2011 12:27 am 0

    Saya gak punya photoshop http://klikbelajar.com/wp-includes/images/smilies/icon_sad.gif kasi tau dong cara downoad photoshop

  124. Deva pada March 25, 2011 12:30 am 0

    maaf saya salah nulis=Saya gak punya photoshop :( kasi tau dong cara downoad photoshop :lol:

  125. alif azzaki pada March 26, 2011 12:06 pm 0

    aku kok ga bisa ya :? :? :? :? :? :? :? :cry: :cry: :cry: :cry:

  126. alphabet community pada March 27, 2011 5:51 am 0

    wew?? mantap nich.. ijin COPAS y.. biar bisa belajar juga.. makasih gan..

  127. arif pada April 2, 2011 5:04 am 0

    :lol: :!:

    Manteb mas……..
    makasih…….
    Ini baru yang di sebut Blogger………….

  128. pandu andika (bocah rpl) pada April 2, 2011 5:33 am 0

    :( maz tempatku photoshop cs5, tp untuk nyari animationnya kok gx ada lho…
    di window > animation , gx ada maz
    ada alternative lain gx maz :P

  129. saminson pada April 6, 2011 12:35 pm 0

    keren banget tutorialnya, tapiiii ….
    saya pake Ps CS3, sudah sesuai dengan langkah2 yang mas kasih, tapi saat saya simpen dengan Save as > web and device, filenya tidak bisa bergerak (walaupun bergerak jika dibuka dengan IE)
    Piye mas? Ada langkah penyimpanan lain sehingga file tsb bisa dibuka di Ms Power Point? Karena hasilnya mau saya presentasikan
    Thx a lot
    Best Regard

  130. dadik pada April 11, 2011 10:28 am 0

    gimana cara menyimpan selain formad PSDnya?????

  131. dwi pada April 11, 2011 5:35 pm 0

    :lol: :lol: :lol: :lol: :lol: :twisted: :( :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!:

  132. XpetCP pada April 18, 2011 4:33 am 0

    om kok punya saya gak ada Animation Windownya? saya photoshop CS

  133. jasa penerjemah pada April 20, 2011 7:55 am 0

    terimakasih sahabat,,,, saya coba tipsnya ternyata langsung berhasil sekali lagi terimakasih yaaaa

  134. midori pada April 25, 2011 9:56 am 0

    :!: :arrow: :oops: :oops:
    thanks a lot for your tutorial….

  135. jaanu pada April 27, 2011 3:40 am 0

    :D MAU PRAKTEKIN E E PAS BUKA SOFTWARE CS3 UDAH HABIS MaSA TRIALNYa huwaaaaaaaa :cry:

  136. Zervo pada April 29, 2011 5:08 am 0

    dapet link ini dari temen. Dia lagi mau belajar2 bkn gif animation.

    btw. tadi coba download psdnya dan melakukan sedikit editing. saya re-touch sedikit
    Ketimbang tulisan “Bruum” nya hanya diam saja. akan lebih hidup dan memberi kesan kalau diberikan getaran - tempo waktu nya juga saya percepat sdkt.

    Hasil: http://i52.tinypic.com/33n7ukk.gif

    Semoga bermanfaat.

  137. rida pada April 29, 2011 8:10 am 0

    makasih,,
    semoga ilmu yang saya ambil dari sini bisa bermanfaa,,
    :-)

  138. Petu Boy pada May 5, 2011 1:01 pm 0

    Gan..Buat tutorial pake Adobe Flash juga duk..!!
    Terimaksih…!!

  139. aqene pada May 13, 2011 4:24 am 0

    phtoshop ane kok g ada animationnya y?phtoshop versi brp tu?punya ane versi 7.0 :?:

  140. shinta kusumadewi pada May 20, 2011 6:05 am 0

    bgus bgt animasinya, bwat tambah” info nie…. :D
    tlong bri cntoh animasi yg lain bleh g???
    pngen th yg lain…. hehehehe :D

  141. puji pada May 21, 2011 1:32 pm 0

    :x :x :P :twisted: :wink: :!: :arrow: :| :mrgreen: ok w cba

  142. iqbal pada May 24, 2011 11:36 am 0

    :oops: :oops: :oops: :oops: :oops: :oops: :oops: :cry: :cry: :cry: :cry: :cry: :cry: :cry: :cry: :cry: :cry: :cry: :cry: :cry: :cry: :cry: :twisted: :roll: :roll: :wink: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :arrow: :arrow: :arrow: :arrow: :arrow: :arrow: :arrow: :arrow: :arrow: :arrow: :arrow: :arrow: :arrow: :arrow: :arrow: :arrow: :arrow: :arrow: :arrow: :arrow: :arrow: :arrow: :arrow: :arrow: :arrow: :arrow: :arrow: :arrow: :arrow: :arrow: :arrow: :arrow: :arrow: :arrow: :arrow: :arrow: :arrow: :arrow: :arrow: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D :D

  143. Rizal pada May 27, 2011 3:05 am 0

    :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol:
    :lol: :lol: :lol: :lol:
    :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol:
    :lol: :lol: :lol:
    :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol:

  144. shendy pada May 31, 2011 7:00 am 0

    makasih,,, ya mas tutoriale tak pake buat cd pembelajaranku
    :P :P :!: :-) :o :lol:

  145. bingun-er pada June 10, 2011 10:00 am 0

    8O 8O
    dah di cb2 pake 2 mcm cara save kok tetep ga gerak ye pas di-upload ke avatar kaskus ny :?

  146. Rara pada June 17, 2011 5:15 am 0

    mas,, aku udah buat gif tapi pake foto,, udah berhasil,, fotonya juga bisa gerak gitu,, tapi masalahnya aku coba masukin ke HP BB n aq mau jadiin Photo Profil di BBM gitu,, tapi ko ga bisa yah,,, please heeeeeeeeeeellllllllllllllppp,,,,,,,,,,,,,,, :cry: :cry: :cry: :cry: :cry:

  147. bonie pada June 24, 2011 1:55 am 0

    saya ga tau cara masukin gambar lebih dari 1 di dalam frame
    kalau tau. minta tutor nya dong

  148. vhenk-vhenk pada June 25, 2011 7:16 pm 0

    :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :arrow: :arrow: :arrow: :arrow: :arrow: :arrow: :arrow: :arrow: :arrow: :arrow: :arrow: :arrow: :arrow: :arrow: :evil: :evil: :evil: :evil: :evil: :evil: :evil: :evil: :evil: :evil: :evil: :evil: :evil: :evil: :evil: :evil:

  149. nazdarova pada July 4, 2011 2:27 am 0

    mau tanya dong , cara save nya gimana ya ?
    saya sudah bisa buat animasi gerak”nya cuma pas di save ga bisa bergerak gambarnya :(
    filenya sudah gif , tapi tetep ga bisa gerak gambarnya :(
    mohon bantuannya :-)

  150. kimprung pada July 18, 2011 2:16 am 0

    Artikel ini memberikan cahaya di mana kita dapat mengamati realitas. Hal ini sangat bagus dan memberikan informasi yang mendalam.terima kasih atas artikel ini bagus.

  151. reli pada July 22, 2011 8:09 am 0

    wew manteb gan…….. gara2 tutorial ini ane jadi paham cara bikin animasi gif…… thnk u vry much ya gan…… hehe………….

  152. rani pada July 24, 2011 10:58 pm 0

    wew… manteb, masss….
    trus, klu mo bikin gif foto kita sedang berjalan, atau sedang melambaikan tangan, bisa ndak, mas?…
    tulungin dunk….http://klikbelajar.com/wp-includes/images/smilies/icon_biggrin.gif

  153. Ngalor Ngidul pada July 30, 2011 11:55 pm 0

    Ane emg bukan ahli photoshop, tapi ane punya sedikit tambahan buat yang masih bingung cara nyimpan ke file berformat gif agar bisa bergerak.
    untuk yang masih menggunakan Photoshop 8 atau CS dan CS 2 caranya yaitu pilih menu FILE > Save Optimize As, atur File type menjadi GIF.
    Tapi untuk CS 3,4,5 Pilih menu File > Save for web & Devices.

    Intinya cari aja pilihan yang tersedia di aplikasi untuk menyimpan ke format gif..
    maaf klo ada yang salah..

  154. irwan pada August 2, 2011 4:08 am 0

    kak .. nimpang tanya donkk . koq di photoshop saya ga ad ANIMATION n=di window nya ya ? T.T

  155. faiq pada August 7, 2011 5:02 am 0

    mas tolong dong saya gg bisa disave ni . . .
    klo di save jadi gambar biasa padahal udah di ganti .gif . .
    saya photoshop cs7
    :? :?

  156. murahdanmeriah pada August 15, 2011 3:53 am 0

    :!: :!: :!: :!: :!: :!: :!: :!:

    Semoga ilmunya bermanfaat
    stlh belajar, dan dipraktekkan
    langsung saya upload di web saya http://www.murahdanmeriah.com

    :wink: :wink: :wink: :wink: :wink: :wink:

  157. jiezoe pada August 18, 2011 9:02 am 0

    mangtab gannn……….. :!:

  158. Malaikat pada August 21, 2011 6:30 pm 0

    Wah Bagus Gan Thx Infonya Ni Punya Gw http://i48.servimg.com/u/f48/16/58/66/04/malaik10.gif .8) 8) 8)

  159. achi pada September 7, 2011 2:11 pm 0

    klo pakek easy gif animator bs gk?? 8O cos q blom pny software photoshop,,hehe :D

  160. Gambar pada September 11, 2011 2:50 pm 0

    10 Interesting posts you should read……

    [Browsing the web, i came across this post ...]…

  161. MargaretMendez27 pada September 23, 2011 1:51 am 0

    Specialists say that credit loans aid people to live the way they want, because they are able to feel free to buy necessary things. Moreover, various banks offer credit loan for different persons.

  162. Dryad pada October 1, 2011 3:07 am 0

    Mantab gan.. :!:
    Dari kemaren saia bingung mslh gni doank..
    Wekekekekekek… :D

  163. paskalius pada October 11, 2011 9:45 am 0

    mass.. Kok gambarnya gak bisa di save ke GIF ?? cmn ada pilihan PSD.. :(

  164. juned pada October 20, 2011 3:28 am 0

    bagi yang udah save for web and devices dan gak jalan, emang viwer di komputernya yang gak jalan, soalnya sudah saya coba di komputer gak jalan tapi di blackberry jalan, masalahnya kalau di blackberry gambarnya kok jadi melenceng ke kiri atas ya ? gambarnya sih ta buat 180×120 px sih

  165. onell pada October 21, 2011 9:58 am 0

    muantafff gan 8) 8) :!: :!:

  166. onell pada October 21, 2011 10:01 am 0

    MUANTAFF GAN….Good share……GBU…. :!: :!: :!: :!: :!: :!:

  167. AlvianHakim pada October 27, 2011 12:57 pm 2932

    Makasih gan atas artikel yang sangat berguna ini tapi kalo bisa sih artikel ini dibuat lebih rinci dari awal pembuatannya ?? hehe biar paham betul.
    oh iya gan cara untuk membuat animasi ini tetap bergerak untuk dimasukin ke hp gimana ya?? misalnya dijadiin foto profil bbm gitu he , soalnya ane ude coba jadiin foto profil tapi ga bisa gerak animasinya padahal animasi di hp ude bisa gerak ??????????????????

  168. metodesas pada November 6, 2011 9:49 am 0

    Dik Bara ,tolong aku dibuatkan video belajar membaca ,sebagai kelengkapan buku belajar
    membaca dan menulis permulaan , dengan metode sas ,blog ku , http://metodesas.blogspot.com /hubungi aku :082141300336 ,trimmmm

  169. izza pada December 2, 2011 6:51 am 0

    salam kenal aku izza setelah aku coba, selection nya nggak muncul gimana ini?? :(

    nice job :!:

  170. asri pada December 9, 2011 2:25 am 0

    buka kursus juga ga mas…berminat nich.

  171. Bali-Frame pada January 9, 2012 1:07 pm 0

    Nice Info,,,salam buat semua!!

  172. lafayette woodworks cabinets pada January 18, 2012 1:03 pm 0

    Sources…

    [...]here are some links to sites that we link to because we think they are worth visiting[...]…

Tulis Komentarmu !

Nama

Email

Website

CAPTCHA Image Audio Version
Reload Image



:D :-) :( :o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen:

Quotes

"I adore simple pleasures. They are the last refuge of the complex."

-Oscar Wilde-

Kategori

open all | close all

Author Terbaru

Mini Statistik

Jumlah tulisan sebanyak 608 tulisan

Jumlah komentar sebanyak 6253 komentar

Jumlah soal yang ada di ujian online sebanyak 599 soal