Hallo MTN-Ters!, :)
Ye, akhirnya posting lagi setelah sekian lama hanya nge-draft dan nge-draft postingan. Kali ini MTN akan mencoba memeberikan suatu tutorial yang sangat sederhana yang mungkin semua sudah tahu. Oh keh, sekarang kita akan membuat animasi bergerak sederhana dengan menggunakan program grafis semua umat yaitu Photoshop. Kita akan mencoba membuat animasi dengan karakter Parampaa. Tahukan games fenomenal Parampaa. Yang bertubuh ijo itu loh.
Ini dia hasil dari pekerjaan yang akan coba kita buat.
![]() |
Parampaa (Hasil Akhir) |
Penasaran cara buatnya? Baiklah, kita mulai saja tutorial kali ini. Enjoy it plus try it!
Bukalah Photoshop, buatlah dokumen baru dengan Ctrl + N. Ukuran canvas terserah, saya menggunakan ukuran 500x500 pixels. Seperti di bawah.
Dokumen Baru |
Buatlah sebuah lingkaran menggunakan Ellipse Tool di menu bar samping atau ikon bundar. Ubahlah warna di Foreground color dengan kode #aad985 atau berwarna hijau. Buatlah lingkaran seperti di bawah.
Buat Lingkaran Hijau |
Berikan garis hitam disekeliling lingkaran dengan klik duakali di bagian layer lingkaran hijau. dan aturlah sesuai dengan pengaturan di bawah ini.
Pengaturan garis pinggir |
Maka lingkaran yang berwarna hijau dengan garis pinggir hitam telah berhasil dibuat. Buatlah layer baru dan pindahkan layer tersebut di bawah layer lingkaran hijau. Setelah itu kita buat setengah badannya menggunakan Pen Tool atau bisa dengan klik P di keyboard. Buatlah seperti gambar dibawah. Untuk mengisi path yang telah tersambung cukup dengan klik kanan dan pilih Fill Path.
![]() |
Gambar Badan |
Hapuslah path yang masih ada pada gambar dengan klik kanan dan pilih Delete Path.
Buatlah garis pinggir pada gaambar badan seperti pada lingkaran yang dibuat tadi. Maka hasil yang didapatkan kurang lebih seperti dibawah ini.
Parampaa dengan Badan |
Nah, sekarang kita buat matanya persis dengan membuat kepala tadi dengan Ellipse Tool dan berikan garis pinggirnya serta titik hitam ditengahnya. Setelah itu gandakan mata yang telah dibuat tadi dengan menekan Ctrl + J pada keyboard.
Buat mata |
Gandakan mata |
Wajah tanpa mulut ngga lengkap dong, sekarang kita buat mulutnya dengan Pen Tool hanya dengan membuat garis sedikit melengkung. Klik kanan pada path melengkung tersebut dan pilih Stroke Path. Oiya, ketebalan Brush harus diatur ke poin 5. Hasil yang kita dapatkan seperti dibawah.
Gambar Lengkap |
Sekarang kita akan menggabungkan antara background putih yang telah digandakan, kepala, kedua mata, badan, dan mulut dengan tekan Ctrl + Shift + E.. Maka akan didapatkan gambar seperti dibawah.
![]() |
Penggabungan |
Sekarang kita akan membuat mata berkedip. Sebelum itu kita harus menyembunyikan gambar yang telah digabung dan kedua mata dengan menghilangkan tanda mata hitam di layer.
Mata berkedip dapat dibuat dengan menggunakan Pen Tool dengan sesuai pola yang diinginkan. Caranya sama dengan membuat senyum. jangan lupa gandakan dan geser posisinya serta mengubah arahnya 180 derajat. Seperti di bawah.
Mata Berkedip |
Gabungkan layer-layer seperti background putih, mata berkedip, senyum, badan, dan kepala seperti menggabungkan gambar yang tadi sehingga kita medapatkan dua buah gambar sempurna.
Ini bagian yang ditunggu-tunggu, kita akan menggerakkan matanya. Sebelum itu, kita harus mengaktifkan menu animasi dengan pilih Window lalu Animation.
Muncullah menu animasi di bagian bawah layar kerja, untuk memanggil semua layer yang akan dibuat menjadi animasi tekan bagian yang diberi warna merah, lalu pilih Make Frames From Layers.
![]() |
Menu Animasi |
Kita kan hanya membutuhkan bagian layer yang sempurna, untuk itu kita harus menghapus layer-layer yang tidak dibutuhkan. Hapuslah semua layer kecuali yang terdapat kotak merah dengan meng-klik ikon tong sampah yang dibawah.
![]() |
Menghapus layer yang tak penting |
Nah tinggal tersisa dua layer, kita bisa memutarnya dengan meng-klik bagian warna biru dan bisa mengatur waktu per layer di bagian warna merah. Kali ini saya pake yang 1 sec biara ada efek lamanya.
![]() |
Pengaturan Animasi |
Ini yang penting. Cara menyimpannya yaitu dengan klik File pilih Save for Web & Devices... atau tekan Alt + Shift + Ctrl + S di keyboard.
Muncul kotak dialog, lalu klik Ok. Muncul lagi kotak dialog terakhir yang memberi perintah tempat menyimpan file dan nama file. klik OK.
Animasi Parampaa sudah jadi seperti gambar paling atas. :)
Kita juga bisa menambahkan apa saja sesuai kreatifitas kita. Seperti saya menambahkan lidah merah di Parampaa. Liat gambar di bawah.
INTI-nya, jangan takut MENCOBA karena kita tidak akan tau apa yang akan kita dapatkan. Okeh-okeh.. : ) X ) : p
Terima Kasih, dan tunggu tutorial yang lebih kompleks dari yang sangat sederhana ini. :)
Terima Kasih, dan tunggu tutorial yang lebih kompleks dari yang sangat sederhana ini. :)
97 comments
Tanya, tutorial di atas menggunakan Photoshop CS berapa?
Replyterserah sih mbak, ini saya pake CS4..
Replyapa bisa dibuka dan jadi foto profile di facebook.........
Replybisa sih, tapi ngga bergerak..

ReplykaLo di twitter mungkin bisa bergerak..
kok di image ready ku gak ada opsi Save for Web & Devices ya? simpan dengan opsi lain gak bisa bergerak didalam dokumen. tolong dibantu.
Replymaksudnya gan?, ini kan saya pake Photoshop gan, di tab File itu lo..
Replyphotoshop CS3 bisa gak
Replybisa-bisa saja sih..
Replyterima kasih tela berkunjung..
GAN CARA BIKIN BADANNYA MASIH GAK NGERTI FILL PATHNYA GK BISA, KASI TAU DONG CARA NGAKTIFKAN FILL PATHNYA !!!!!
ReplyMAN : itu mode mousenya masih Pen Tool (atau tekan P di keyboard), jangan diubah dulu menjadi Move Tool.
Replyterus tinggal di arahkan ke path yang sudah dibuat..
terima kasih..
mas, cara gabungin layernya gimana tuh?
ReplyCtrl + E untuk menggabungkannya langsung..
ReplyCtrl + Alt + E untuk menggabungkannya, tetapi layernya masih ada..
Canggih
ReplyBermanfaat ^^
aku kok msh bingung ya???
Replyhmmm pingin langsung coba...!
Replyijin bookmark gan,,, mau nyoba soalnya...
Replyterimakasih tutornya,....
gan kalo' lansung disave trus diganti format doank gitu bisa ga ?
ReplykaLo langsung di save ntar ngga gerak, cuma jadi gambar doang..
Replyterimakasih gan atas informasinya....
Replyhttp://www.rajalistrik.com
keren sob. lucu.
ReplyKalo pake photosop 7.0 bisa endak ini gan ??
Replyhadehhhhh gda animasi di menu windows nya brewww
Replykayaknya sih bisa gan, seLagi ada meu Animation dan Save for Web sih..
Replyada kok, Animation katanya di sana.. Window ya gan bukan Windows..
Replykalau mengedit foto GIF yang udah bergerak gimana ya?
Replytau gak?
misalnya ada gambar burung bergerak gitu, terus mau di tambah tulisan. tapi nanti burungnya masih bergerak.
tolong ya !!
kaLo itu coba pake Software Easy GIF Animator aja mbak itu bisa ditambahin tulisan bergerak juga..
ReplyCara buat badannya gimana?
Replykaryanya keren (y)
Replydi image ready tuh ada tabel animasi ....udah di coba dia running di tabel tapi pas save file nya ini ...mendadak hasilnya ga jalan..file ext nya gif ..tapi berupa image aja ...dibantu dooongg itu kenapa yah.....suwun
Replyitu save-nya mungkin ngga pake klik File pilih Save for Web & Devices tapi cuma Ctrl+S dan dalam bentuk gif. coba pake yang Save for Web pasti bisa jalan..
Replyokeeee saya udah coba pake save optionnya dengan save optimized As ..( (ctrl+shift+Alt+S ), saya pake imageReady CS2 , hasil savenya akan berupa html dan ketika gambar di klik dan inet aktif maka tampilannya akan terlihat di web browser ....animasinya berhasil
..tingkyu2...nahhh....yang jadi permasalahan baru bagi saya hehehehe...kok jadi tampilannya full screen ya ..hmmm....sorry banyak nanya...dibantu lagi dooonggg untuk tampilannya sesuai dengan size yang dimau ...makasih 
ReplyMUNGKIN SAYA ORANG YANG BELUM PINTAR..
ReplyBingung ane bikin matanye gan -_- jadi gaselese bikinnye
Replybikin sesuai seLera aja gan, ngga usah terpaku sama yang di atas.
Replyresolutionnya berapa
Replybagai mana saya dapat men download photoshop
ReplydownLoad yang portable aja gan, cari aja di Google. biasanya yang portable cs4 work kok.
Replysesuai seLera aja gan. contoh yang di atas kan pake persegi 500x500px
Replycoba dong bro bikin animasi terbaru tapi caranya sama dengan yg ini, kalo dimasukin ke power point bisa gak
Replyiya ini masih di draft.
Replybisa kok di taruh di PPT.
bermanfaat
ReplyTerimakasih mas atas ilmunya.. saya coba deh.... he..21x
Replycara Download Photoshopnya Gimana GAN.'
ReplyPake xperia bisa ga mas????
Replyperlu di coba ini.
Replyilmu yang bermanfaat.
trimakasih
pusing buat nya.... yang bisa yg gk bergerak,, sepertinya harus di pelajri btul2.. satu klimat yng d tlis hrus d bca berulang2 yar ngert slruh... lnjut ya brooo ....
Replyaduh saya membuatnya kuq ribet bnget ya... btw buth berpa lma tuk membuat animasi bergerak sperti ini???
Replymacam mana membuat blg geng
Replymakasih ,pokoknya terimakasih sekali.saya berhasil.saya pake buat kodok berkedip.pisa juga tulisan berkedip.kalau bisa yang dasarnya ,ternyata bisa di buat bermacam macam
Replygan photoshop 7.0 ga ad wndw anmationny
Replymantap, harus telaten. tapi kalo yang sederhana begini pake flash mungkin lebih cepet
Replymantab kang, akhirnya saya sudah bisa membuat animasi, makasih banget kang sangat membantu
ReplyTutorialnya bagus gan...sering2 bikin yang kayak gini nih...lucu, bisa gerak2...
ReplySalam kenal dari saya gan...mantap dah...
keren tutorialnya sob
Replyizin copas ya mas
Replyjadi bingun koq adb ps cs3 ga bisa jugam,mmmm
Replybisa dibantu ga cara membuat dua animasi yang dan tulisan bergerak
Replypunya softwarenya ga, ntar tak donload
Replymakasih y.......... tapi te2p g' bisa buatnya
Replyartikelnya saya copy buat tugas yah. linknya sudah saya sertakan kok. terimakasih
Replypotoshop bisa juga melakukan hal itu ya? baru tahu saya, saya ikuti tutorialnya gan, menambah wawasan saya belajar potoshop, saya masih awam jadi perlu banyak belajar program ini, mksh OK
Replyhehehe tempatnya orang pinter-pinter
Replymantab gan bikin orang menjadi pinter lanjut
Replymantap gan bikin aku tambah pinter lanjut
Replyterima kasih informasinya sangat cukup jelas.
Replygood
Replymas cara,,.ngabungin foto gmn ea,,.
Replymas cara ,,ngabungin foto gmn ea..,
Replymas cara ,,ngabungin foto gmn ea..,
Replymas cara ngabungin foto gmn ea..
ReplyTerima kasih, sangat bermanfaat
ReplyMas bro kayak mana sich instal photoshop it
ReplyGue makee ny bisa tapi instal nya Ъќ>:/ bisa
setahu saya dari versi lama sampai yang CS sama saja fiturnya untuk membuat GiF animasinya, jadi gak perlu bingung mau pakai photosop yang versi mana.
Replysalam Film Animasi Indonesia
what? becanda nih agan.. kan tinggal di next next next..
Replysama-sama..
Replypilih dua layer.. Ctrl + E
ReplyEh brow buat kartun bsa gx pke photoshop
ReplyD Photoshop CS6 bsa gx
Replytau cara pke aplikasi BLENDER gx?
saya pakenya Maya kakak, ngga pernah make Blender..
Replybisa sih, tapi saranin pake Iluustrator aja.. lebih enak..
ReplyCtrl + E..
ReplyKereen.. ntar sy coba y^o^y
ReplyKereen.. ntar sy coba y^o^y
Replyfionni sarranova
Replykeren banget..makasih gan...
ReplyMas nanya, saya sudah bisa sampai selesai, tp ketka gambar mau dijadikan background desktop kok gak gerak ya?
Replybro coba yang pake macromedia flash player...
Replykayaknya lebih mantep,..
Cara nya gampang " susah yah (@_@)
Replymantap, mksih infonnya massss
Replygak ngerti lahh mbak
ReplyTrims.......
)
ReplyIzin copas. Mohon umpan baliknya....
bagus
ReplyIti tinggal save udah otomatis bisa gerak sendiri apa perlu sett lalu save
ReplyBrow ctrl rusak cra lain untuk menuju ctrl shift E dsb gmna ya..hehe
Replyikut nyimak ya mas, dari dulu pengen bisa bikin animasi menggunakan photoshop
Replymakasih buat posting nya,keren banget.
ReplyPost a Comment
│╔╦╗╦╔╗│
Silahkan berkomentar dengan sopan dan membangun..
Terima Kasih telah berkunjung di MASIH TIDAK NYATA
salam Blogger!! ☺