Membuat Animasi Berubah bentuk dengan Photoshop

Berhubung saya lagi suka animasi.. hehehe.. saya bikin yang animasi lagi aja yah..Postingan animasi pertama adalah yang bergerak.. tapi tidak bisa merubah bentuk, karena pake cara manual. Sekarang saya coba pake cara mengimport dari Layer .. jadi kita bisa ubah-ubah bentuknya sebelum dijadiin animasi. bingung ya? langsung aja deh..

Buka dokumen baru :

Klik CUstom Shape tool , pake yang Heart  yaa.. biar bagus.. hehe

Klik Path selection tool… Klik kanan gambar heart lalu pilih Make selection..

Buat layer baru.. pake gradient tool untuk warnain Heart tadi.

Settingannya gini :

DUplikat gambar heart dengan menekan tombol CTRL + J .. lalu Kecilin.. jangan lupa sambil tekan tombol SHIFT + ALT biar letak hasil pengecilan nya tetep. ( bahasanya ribet amat ya..)

Duplikat lagi layer yang barusan jadi.. lalu kecilin lagi.. cara nya sama ya..

Duplikat sekali lagi..dan kecilin

Sekarang buat layer baru diatasnya layer background.

Delete layer background. Klik kanan layer background > delete layer

Posisi terakhir di Layer Palette

Sekarang buka jendela Animasi .. Klik Windows> animation

Klik Tombol menu yang ada dipojok jendela animasi lalu Klik Make Frames from Layer.

Semua layer terbagi rata berdasarkan Urutan dari layer bawah ke layer atas..

Delay Time nya Jadiin 0,1 second semua.

Hapus Frame yang kosong.. alias gak ada gambar nya alias blank.

Sekarang Save Hasilnya.. Klik File > Save for web & Devices

Hasilnya :

Selamat mencoba..

Coba terus otak atik… dan gabungin dengaan cara bikin animasi yang pertama.

COBA…COBA….COBA… sampe bisa

INGIN MEMPUBLIKASIKAN ULANG POSTINGAN INI DI WEB / BLOG ANDA? <h2>Membuat Animasi Berubah bentuk dengan Photoshop</h2> <p>Berhubung saya lagi suka animasi.. hehehe.. saya bikin yang animasi lagi aja yah..<a href="http://ilmuphotoshop.com/2009/06/10/belajar-membuat-animasi-dengan-photoshop/">Postingan animasi pertama</a> adalah yang bergerak.. tapi tidak bisa merubah bentuk, karena pake cara manual. Sekarang saya coba pake cara mengimport dari Layer .. jadi kita bisa ubah-ubah bentuknya sebelum dijadiin animasi. bingung ya? langsung aja deh..</p> <p>Buka dokumen baru :</p> <p><a href="http://ilmuphotoshop.com/wp-content/uploads/2009/06/animasi13.jpg"><img class="alignnone size-full wp-image-1467" title="animasi13" src="http://ilmuphotoshop.com/wp-content/uploads/2009/06/animasi13.jpg" alt="animasi13" width="343" height="316" /></a></p> <p>Klik CUstom Shape tool , pake yang Heart  yaa.. biar bagus.. hehe</p> <p><a href="http://ilmuphotoshop.com/wp-content/uploads/2009/06/animasi21.jpg"><img class="alignnone size-full wp-image-1468" title="animasi21" src="http://ilmuphotoshop.com/wp-content/uploads/2009/06/animasi21.jpg" alt="animasi21" width="436" height="513" /></a></p> <p>Klik Path selection tool… Klik kanan gambar heart lalu pilih Make selection..</p> <p><a href="http://ilmuphotoshop.com/wp-content/uploads/2009/06/animasi31.jpg"><img class="alignnone size-full wp-image-1469" title="animasi31" src="http://ilmuphotoshop.com/wp-content/uploads/2009/06/animasi31.jpg" alt="animasi31" width="362" height="371" /></a></p> <p>Buat layer baru.. pake gradient tool untuk warnain Heart tadi.</p> <p>Settingannya gini :</p> <p><a href="http://ilmuphotoshop.com/wp-content/uploads/2009/06/animasi41.jpg"><img class="alignnone size-full wp-image-1470" title="animasi41" src="http://ilmuphotoshop.com/wp-content/uploads/2009/06/animasi41.jpg" alt="animasi41" width="497" height="419" /></a></p> <p>DUplikat gambar heart dengan menekan tombol CTRL + J .. lalu Kecilin.. jangan lupa sambil tekan tombol SHIFT + ALT biar letak hasil pengecilan nya tetep. ( bahasanya ribet amat ya..)</p> <p><a href="http://ilmuphotoshop.com/wp-content/uploads/2009/06/animasi51.jpg"><img class="alignnone size-full wp-image-1471" title="animasi51" src="http://ilmuphotoshop.com/wp-content/uploads/2009/06/animasi51.jpg" alt="animasi51" width="451" height="367" /></a></p> <p>Duplikat lagi layer yang barusan jadi.. lalu kecilin lagi.. cara nya sama ya..</p> <p><a href="http://ilmuphotoshop.com/wp-content/uploads/2009/06/animasi61.jpg"><img class="alignnone size-full wp-image-1472" title="animasi61" src="http://ilmuphotoshop.com/wp-content/uploads/2009/06/animasi61.jpg" alt="animasi61" width="418" height="284" /></a></p> <p>Duplikat sekali lagi..dan kecilin</p> <p><a href="http://ilmuphotoshop.com/wp-content/uploads/2009/06/animasi71.jpg"><img class="alignnone size-full wp-image-1473" title="animasi71" src="http://ilmuphotoshop.com/wp-content/uploads/2009/06/animasi71.jpg" alt="animasi71" width="407" height="335" /></a></p> <p>Sekarang buat layer baru diatasnya layer background.</p> <p><a href="http://ilmuphotoshop.com/wp-content/uploads/2009/06/animasi81.jpg"><img class="alignnone size-full wp-image-1474" title="animasi81" src="http://ilmuphotoshop.com/wp-content/uploads/2009/06/animasi81.jpg" alt="animasi81" width="258" height="233" /></a></p> <p>Delete layer background. Klik kanan layer background > delete layer</p> <p>Posisi terakhir di Layer Palette</p> <p><a href="http://ilmuphotoshop.com/wp-content/uploads/2009/06/animasi91.jpg"><img class="alignnone size-full wp-image-1475" title="animasi91" src="http://ilmuphotoshop.com/wp-content/uploads/2009/06/animasi91.jpg" alt="animasi91" width="246" height="306" /></a></p> <p>Sekarang buka jendela Animasi .. Klik Windows> animation</p> <p><a href="http://ilmuphotoshop.com/wp-content/uploads/2009/06/animasi101.jpg"><img class="alignnone size-full wp-image-1476" title="animasi101" src="http://ilmuphotoshop.com/wp-content/uploads/2009/06/animasi101.jpg" alt="animasi101" width="470" height="206" /></a></p> <p>Klik Tombol menu yang ada dipojok jendela animasi lalu Klik Make Frames from Layer.</p> <p><a href="http://ilmuphotoshop.com/wp-content/uploads/2009/06/animasi111.jpg"><img class="alignnone size-full wp-image-1477" title="animasi111" src="http://ilmuphotoshop.com/wp-content/uploads/2009/06/animasi111.jpg" alt="animasi111" width="556" height="326" /></a></p> <p>Semua layer terbagi rata berdasarkan Urutan dari layer bawah ke layer atas..</p> <p><a href="http://ilmuphotoshop.com/wp-content/uploads/2009/06/animasi121.jpg"><img class="alignnone size-full wp-image-1478" title="animasi121" src="http://ilmuphotoshop.com/wp-content/uploads/2009/06/animasi121.jpg" alt="animasi121" width="499" height="220" /></a></p> <p><a href="http://sigiteko.com/search/delay+time">Delay Time</a> nya Jadiin 0,1 second semua.</p> <p>Hapus Frame yang kosong.. alias gak ada gambar nya alias blank.</p> <p><a href="http://ilmuphotoshop.com/wp-content/uploads/2009/06/animasi131.jpg"><img class="alignnone size-full wp-image-1479" title="animasi131" src="http://ilmuphotoshop.com/wp-content/uploads/2009/06/animasi131.jpg" alt="animasi131" width="509" height="136" /></a></p> <p>Sekarang Save Hasilnya.. Klik File > Save for web & Devices</p> <p><a href="http://ilmuphotoshop.com/wp-content/uploads/2009/06/animasi14.jpg"><img class="alignnone size-full wp-image-1480" title="animasi14" src="http://ilmuphotoshop.com/wp-content/uploads/2009/06/animasi14.jpg" alt="animasi14" width="638" height="428" /></a></p> <p>Hasilnya :</p> <p><a href="http://ilmuphotoshop.com/wp-content/uploads/2009/06/hasil.gif"><img class="alignnone size-full wp-image-1481" title="hasil" src="http://ilmuphotoshop.com/wp-content/uploads/2009/06/hasil.gif" alt="hasil" width="200" height="200" /></a></p> <p>Selamat mencoba..</p> <p>Coba terus otak atik… dan gabungin dengaan cara<a href="http://ilmuphotoshop.com/2009/06/10/belajar-membuat-animasi-dengan-photoshop/"> bikin animasi yang pertama</a>.</p> <h3><strong><span style="color: #ff0000;">COBA…COBA….COBA… sampe bisa</span></strong></h3> <p> Artikel <a href="http://ilmuphotoshop.com/2009/06/23/membuat-animasi-berubah-bentuk-dengan-photoshop/">Membuat Animasi Berubah bentuk dengan Photoshop</a> ini dipersembahkan oleh <a href="http://ilmuphotoshop.com" title="Tutorial Adobe Photoshop Gratis">Tutorial Photoshop Gratis</a>. Kunjungi <a href="http://desktop.93vs.com" title="Wallpaper, Font, Desktop Theme Gratis"> Wallpaper, Font, Desktop Theme Gratis</a> Pokoknya Serba Gratis. Baca Juga <a href="http://ilmuphotoshop.com/fotokevektor/" title="Membuat foto ke Vektor"> Cara Membuat Foto manjadi Vektor</a>,</p>
*copy-paste kode di atas ke dalam form posting blog Anda

 

44 Responses to “Membuat Animasi Berubah bentuk dengan Photoshop”

1. othan says:

   June 23, 2009 at 9:06 am

   nice gan !
2. Membuat Animasi Berubah bentuk dengan Photoshop | Online Directory says:

   June 23, 2009 at 10:07 pm

   [...] is the original: Membuat Animasi Berubah bentuk dengan Photoshop Categories: Tutorial Photoshop Tags: Animation, belajar-photoshop, Business, download, Games, [...]
3. happy says:

   June 24, 2009 at 11:23 am

   salam kenal…kak
   kak sigit saya mau request bisa gak ya…
   gmn cara bikin bingkai yg kayak di undangan2pernikahan itu lho…
   thank’s
4. arief says:

   June 25, 2009 at 3:35 pm

   askum,
   salam kenal ya
   saya mau banget tuh belajar photoshop tapi ga punya softwarenya,tolong dong yang mau suka rela ngirimin softwarenya ke alamat email saya di budiyonoarief@yahoo.com kalian semua pasti orang baik kan
5. ROBIe says:

   June 26, 2009 at 7:27 am

   askum lam knal ya…
6. randy says:

   June 26, 2009 at 4:27 pm

   mantap,coba langsung…
7. Crealize says:

   June 27, 2009 at 3:08 am

   kalo mainin di style propertiesna bisa ga?
8. jotys says:

   June 27, 2009 at 12:02 pm

   waduh..mumet mas…lum nyampe ilmunya kesini…
9. arthan says:

   June 28, 2009 at 9:01 am

   hebat euy jadi terinspirasi
10. juvy says:

    June 30, 2009 at 1:12 pm

    tq brow ya…..tar gw pelajarin…>>>yg mampir
11. bonny says:

    July 1, 2009 at 8:45 am

    keren euy….
    tpi kok gwe gak bisa bisa yah,,,,,!!!!
12. reza says:

    July 3, 2009 at 4:39 am

    maju terus……bikin posting yang keren
13. tias says:

    July 4, 2009 at 3:17 am

    tengkyu so mach, ya..
    aill trai it!
    artinya: thanks!, I’ll try it!
14. joe says:

    July 5, 2009 at 2:16 pm

    koq gw gk bisa sih.. dah di jadi in gif gk bergerak juga kenapa sih..kasih tau dong…email aku di joe_veldian@yahoo.com
15. Cara Membuat Stop Motion Movie - Photoshop Tutorial | Belajar Photoshop | tutorial photoshop | photoshop says:

    July 9, 2009 at 3:48 am

    [...] Movie Maker aja.. Pake Photoshop bisa juga dengan system Layer seperti yang saya sudah posting disini.. tapi itu butuh Layer yang banyak.. jadi lebih baik jangan pake [...]
16. Lisa says:

    July 11, 2009 at 1:26 am

    kalo photoshop7 gak bisa ya??thx
17. bha2r says:

    July 14, 2009 at 7:08 am

    jendela Animasi .. Klik Windows> animation
    > Klik Windows> animation nggak ada di PhotoshopQ nyari dimanaaaaaa…….
    thnk’s
18. Sigit eko says:

    July 14, 2009 at 8:06 am

    Klik dibawah ToolBOx.. kalo photoshop CS ke bawah masih pake Image Ready.. coba klik yang JUMP to Image ready
19. seNa says:

    July 15, 2009 at 6:44 pm

    muanteb nih
    tanks yaw kk atas ilmunya
    hoho ^^
20. ARSY says:

    July 16, 2009 at 1:49 pm

    makasih atas ilmu yang berharga ini

    akhirnya bisa juga …..
21. WIWIN says:

    July 18, 2009 at 6:36 pm

    MAS, mkasiiiiiiiiiihhhhhhhh bgt,aq udh nyoba & BERHASIILL.. . . .!!!! @ _ @

    . . . . . . . . . . MAKASIIIIIIHHHHHHHHHH YA,!
22. roy moningka says:

    July 20, 2009 at 2:05 pm

    salam kenal. saya senang sekali memperdalam pengetahuan saya tentang photoshop. tolong ya kirimkan perkembangan baru dari photoshop
23. and1k says:

    July 24, 2009 at 4:35 pm

    mas minta bannernya ya soalnya situs ini berguna banget buat my prends q
24. diny says:

    July 30, 2009 at 3:16 pm

    saya dah coba tpi ko hasil gmabr ny g bergerak ya?
    gman tuh?
25. Sigit eko says:

    July 30, 2009 at 3:22 pm

    cara save nya udah betul mba? di liat lagi deh tutorialnya
26. antok says:

    July 31, 2009 at 12:46 am

    Duplikat gambar heart dengan menekan tombol CTRL + J .. lalu Kecilin.. jangan lupa sambil tekan tombol SHIFT + ALT biar letak hasil pengecilan nya tetep. ( bahasanya ribet amat ya..)

    bahasa mudahnya ini ya:
    Klik layer 1. Kecilin gambarnya dengan MOVE TOOl, Klik kotak di pojok lalu drag sambil tekan tombol SHIFT (supaya dimensi nya tetep sama). Untuk menampilkan kotak dipojok gambar ( transform control) contreng Show transform control (CS3 ke atas) atau Show bouncing box ( CS2 kebawah)
27. Sigit eko says:

    July 31, 2009 at 8:30 am

    hehehe.. mas antok kayaknya lebih cocok jadi guru nya.. :p
    Saya gak bisa berkata-kata soalnya.. maklum yaa mas antok..
28. chodir says:

    September 26, 2009 at 1:05 pm

    mantaffffff
29. jontor says:

    September 30, 2009 at 1:11 pm

    jadul ud ngak jaman ud banyak aplikasi yg lebiih keren and lebih mudah garing nich
30. GINAN says:

    October 3, 2009 at 7:16 am

    Assalamualaikum
    salam kenal ka
    saya boleh meminta tutorial untuk membuwt design web menggunakan photoshop
    soalnya kebetulan saya diberi amanah u jadi asdos photoshop
31. muhammad idris says:

    October 5, 2009 at 7:44 pm

    lam knal aja..tanya dong,,,gmana cra copyin gambar di tutorial internet ke file photoshop saya..makasih.
32. budicokro says:

    October 6, 2009 at 3:44 pm

    sudah coba, kok gak bisa ya ?
    waktu di jendela preview animation memang bisa kelihatan animasinya, tapi file hasil save for web, animasinya tidak ada. gambar statis.
    salahnya dimana ya ?
33. yasha says:

    October 30, 2009 at 7:07 pm

    duh.. br tw klo photoshop bs animasi… hehe..
    hebat.. hebat…!! thx atas ilmux..
34. nanda says:

    October 31, 2009 at 8:33 pm

    gw senang dpt tutorial ini
    tnk ya
    smg dpt amalan
35. Aya says:

    November 8, 2009 at 6:39 pm

    Wuiih … bisa bwt tambahan tugas bikin web nuiy pak .. Hehe ..
36. i-ne says:

    November 16, 2009 at 10:44 am

    kok pinter banget sih Mas Bos …………
    THANKS…..
37. Saraph says:

    November 19, 2009 at 9:37 pm

    PERTAMAX aja, He He He…
38. caesar88caesar says:

    December 2, 2009 at 12:37 am

    kalo udah pada bisa bikin animation di photoshop atau Image ready…. saya sarankan coba mengunakan tool macromedia flash atau adobe flash….
    kalo animation disini kita bisa mengunakan banyak layer…
    kalo di PS dan ImageReady, kita cuma guanain 1 layer di bagian animation nya….. dan lumayan susah juga untuk pemula.
39. Roni says:

    December 15, 2009 at 10:05 am

    Manstab..
40. ????? says:

    January 12, 2010 at 4:25 pm

    ih WOW!
    Baru tau nie..
    Makasih ya
41. narnoxXx says:

    January 14, 2010 at 7:47 pm

    PERTAMAX….
    hwehwewhe
42. ghozzalie says:

    January 26, 2010 at 12:53 pm

    Salam Kenal mas,…

    Kok hasilnya pas saya save hasilnya animasinya tidak bekerja. Apakah harus di save dalam file yang berbeda?
43. Wi2k says:

    February 4, 2010 at 1:29 pm

    mo tanya,
    aku coba membuat animasi yg berubah2 gambarnya pake photoshop versi 7, tapi kok susah membuka image readynya ya ?

    mohon pencerahan….
44. hiakal says:

    March 10, 2010 at 7:25 am

    punten ma…s, kalo bza photonya jangan tamara klo bza dewi persik