Cara Membuat Animasi Bergerak Sederhana

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.

Terima Kasih,

Tutorial Membuat Foto Menjadi Kartun Vektor Menggunakan Photoshop Terbaru

  Tutorial lengkap membuat kartun vektor menggunakan adobe photoshop, kali ini saya akan menjadikan foto saya sendiri menjadi sebuah kartun (entah anda menyebutnya kartun atau bukan, hehe), sebelumnya saya juga sudah membuat artikel tentang photoshop yaitu membuat iklan GIF menggunakan photoshop

Okelah, langsung saja alat tempur yang perlu anda siapkan

• Adobe Photoshop (Cs terserah, cs3,cs4,cs6)
• 1 foto untuk di jadikan kartun
• Gambar warna kulit & bibir (download disini)
• Siapkan tempat duduk yang nyaman dan secangkir kopi hangat untuk menemani.
• Extra sabar

1. Pertama Open foto, tekan Ctrl + O.

2. Selanjutnya Pilih & tekan Pen tool, lalu atur Opacity / tingkat transparan pen tool menjadi '0%' terletak di atas letak layer , untuk cara membentuk pola wajah dengan pen tool, arahkan pen tool pada ujung pola wajah yang akan anda buat, kemudian klik lagi bagian lainya tanpa harus menyeret cursor, setelah pola wajah anda buat silahkan klik pen tool kembali > klik kanan > pilih Add Anchor Point Tool , arahkan cursor pada pola yang sebelumnya sudah anda buat lalu klik garis tepi pola untuk mengatur bentuk / melengkungkan, lakukan langkah ini berulang kali sampai bentuk pola wajah terlihat sempurnaa.

 langkah ini selesai silahkan naikkan kembali Opacity layer menjadi 100%, lalu warnai layer sesuai warna kulit terserah anda, untuk pewarnaan lebih mudahnya silahkan open gambar warna kulit.

3. setelah pewarnaan tampilan akan seperti di bawah ini, bagian muka selesai, silahkan hilangkan sementara tanda mata di layer untuk menghilangkan priview gambar.

4. sekarang proses pembuatan rambut, klik pen tool, lalu buat pola mengikuti bentuk rambut atau bisa juga menambahkan pola rambut sendiri agar terlihat lebih keren, saat menggunakan pen tool buatlah sketsanya dahulu.

5. untuk memulai membentuk lengkungan-lengkungan pada rambut silahkan klik kanan kembali pen tool lalu pilih add anchor point tool seperti di gambar.

6. arahkan Anchor point  tool pada garis yang sebelumnhya kita buat melalui pen tool, selanjutnya silahkan lengkung dan sesuaikan bentuknya dengan cara menahan Mouse, setelah semuanya selesai hasilnya akan seperti gambar di bawah ini :

selanjutnya silahkan lakukan pewaraan pada layer rambut, klik dua kali layer rambut lalu pilih color overlay selanjutnya warnai sesuai selera!

 Perlu di perhatikan : sebelum melakukan pelengkungan menggunakan anchor point tool, silahkan turunkan opacity menjadi 0%, setelah proses pelengkungan selesai silahkan naikkan kembali opacity menjadi 100% selanjutnya lakukan pewarnaan.

7. pembuatan rambut sudahs selesai, selanjutnya silahkan buat kuping menggunakan pen tool lalu bentuk dengan Add Anchor Point Tool, warnai kuping dengan warna yang sedikit gelap dengan wajah

 8. dari ketiga layer yang sudah kita buat sebelumny, hasil ahirnya akan seperti ini.

9. Lanjut kita buat kacamata, cara ini bisa anda lewati bila di foto anda tidak memakai kacamata, bila foto anda tidak memakai kacamata sekarang silahkan buat layer mata juga menggunakan pen tool, inti peroses pembuatanya sama.

 pertama bentuk pola tepat pada ujung-ujung objek yang akan kita lengkungkan, intinya seperti gambar di atas.

10. Kemudian lengkungkan bentuk pola sebelumnya dengan Add Anchor Point tool, seperti contoh pada gambar di bawah ini.

11. setelah anda melakukan proses pelengkungan, setidaknya bentuknya akan seperti ini, agar kacamata terkesan lebih mengkilat silahkan klik double layer > plih gradient lalu sesuaikan.

12. Klik kembali pen tool, buat pola seperti gambar di bawah ini dan lengkungkan kembali dengan Add Anchor Point Tool. untuk pewarnaan silahkan warnai tidak terlalu putih.

13. agar lebih terlihat mengkilat & sedikit nyata, silahkan klik menu Filter > Blur > Gaussian Blur

 kemudian sett radius 33,6 pixel

14. selanjutnya blok semua layer kilatan pada kacamata (bukan layer kacamata) dengan cara klik satu persatu layer sambil menekan Ctrl selanjutnya klik kanan Merge Layer

 15. setelah semua layer kilatan pada kacamata di gabungkan, klik Polignal Lasso Tool untuk menyeleksi dan memotong.

16. di sini buatlah seleksi seperti di gambar kemudian klik Del pada Clipboard untuk menghilangkan sebagian layer yang telah terseleksi. lakukan cara di atas secara berulang untuk bagian lainya

 17. setelah selesai hasilnyapun akan nampak seperti ini:

18. selanjutnya kita membuat alis, jujur saya paling males buat alis, jadi ya begitulah bentuknya, hehe.
untuk bagian alis silahkan kreasi sendiri sesuai kebutuhan.

19. nah kali ini kita akan membuat hidung, kita tetap menggunakan pen tool seperti cara di atas, untuk bentuknya silahkan sesuaikan gambar anda.  lalu warnai terserah yang terpenting cocok dan tidak kontras dengan warna wajah.

20. buat satu lagi bagian hidung yang agak sedikit terang di bagian kanan dan warnai sedikit lebih terang dari hidung bagian kiri.

21. Nah ini bagian yang paling saya benci, karena bentuk bibirlah yang akan sangat mempengaruhi penampilan wajah, dalam pembuatan bibir saya malah sering kwalahan kwalahan sendiri.

buat bibir menggunakan pen tool dan lengkungkan dengan Add Anchor Point Tool warnai bibir agak kemerah-merahan, buat lagi bentuk hampir mirip seperti bibir namun agak sedikit tipis letakkan di posisi tengah bibir dan warnai agak keputh-putihan sehingga bisa nampak seperti gambar di bawah ini:

22. agar bibir terlihat hidup beri tambahan kilauan cahaya, buat menggunakan pen tool untuk bentuknya sesuaikan, jangan lupa juga untuk menurunkan Opacity Kilatan cahaya menjadi 75%.

23. hasil ahir pembuatan bibir akan nampak seperti gambar di bawah ini :

24. sekarang hilangkan semua tanda mata pada semua layer, sehingga akan terlihat gambar aslinya.
klik Image > Adjustments > Posterize

 atur level posterize 5

25. nahh setidaknya beginilah jadinya setelah gambar kita posterize, hal ini berguna untuk memudahkan kita memblok bagian muka & leher secara berurut mulai bagian yang cerah hingga ke gelap, hal ini berguna agar gambar kita lebih terlihat menarik & sedikit hidup. hehe :P

26. Mulai langkah pertama siapkan pen tool, lalu buat dan bentuklah pola bersarkan pola pada wajah sesudah itu lengkungkan dengan Add Anchor Point Tool. warnai layer ini dengan warna yang lebih terang dari layer wajah yang sebelumnya sudah kita buat.

sehingga akan seperti gambar di bawah ini,

27. kedua buatlah lagi pola yang mengikuti pola pada wajah menggunakan pen tool, bedanya di layer ke-2 ini pewarnaan sedikit gelap dari layer nomor 26

Lihat gambar :

28. ketiga buatlah lagi satu layer yang paling gelap (tapi jangan terlalu gelap) berdasarkan pola pada wajah menggunakan pen tool, untuk warna bagian ke-3 ini harus sedikit gelap daripada layer bagian ke-2.

Lihat gambar :

Hasil Finalnya :

29. Bagian kepala sudah selesai, sekarang kita buat bajunya, gunakan pen tool untuk membuat baju agar hasil lebih maksimal, warna terserah.

30. agar terlihat semakin menarik tambahkan juga motif pada baju.

31. Sehingga hasil ahir pada pembuatan baju akan seperti di gambar :

32. Nah kita kembali lagi ke bagian rambut, agar rambut semakin terlihat keren, silahkan buat garis-garis melengkung tipis menggunakan pen tool.

33.  Selanjutnya copy layer (Ctrl + J) yang sudah anda buat berulang kali sampai seperti terlihat pada gambar di bawah ini :

34. Disini silahkan hilangkann Background asli gambar dengan cara mengilangkan icon mata pada layer / menghapusnya, dan juga tambah & buatkan background baru pada gambar (untuk pembuatan background silahkan gunakan gradien agar hasil warna tidak hanya mencakup 1 warna).

JRENG JREEENG, DAN INILAH HASILNYA

hehe maaf maaf kalau hasilnya tidak terlalu bagus, saya sendiri aja tergolong masih baru belajar. 

Nah berikut perbedaanya dari yang asli, walaupun jauh beda banget saya sudah berusaha loh  hehe

Gimana masbro mbakbro? berhasilkan? pasti berhasil donk, amin :D , yaudah sekian tutorial dari saya di samping itu jari juga udah lelah, semoga bermanfaat. Enjoy

Cara Membuat Jam Animasi Digital Flash dan Kalender

Pada artikel terdahulu, kita sudah belajar mengenai Cara Membuat Jam Analog dengan menggunakan Macromedia Flash 8.Kurang lengkap rasanya kalau kita tidak mempelajari cara membuat jam animasi digital sekaligus kalendernya.

Contoh Jam Digital 1

Contoh Jam Digital 2

Selain tutorial menggunakan software macromedia flash diatas, pada posting terdahulu saya juga telah membuat artikel tutorial Cara Membuat Jam Digital, dan Cara Membuat Jam 3 Dimensi Flip Clock serta cara pemasangannya pada sidebar blog. Pada tips tersebut, saya menyarankan anda untuk menggunakan situs layanan online, sehingga kita tidak perlu memikirkan kode-kode scrift yang kita tahu sangat membingungkan.

Namun pada file jam yang kita dapat, masih terdapat nama situs tempat kita membuat jam online tersebut, dan pada pemasangan disidebar blog, kita harus mengutak-atik kode pemasangannya agar tulisan tersebut tidak kelihatan.

Dan pada artiklel kali ini, saya akan membagikan tips cara membuat jam dengan menggunakan software yang terdapat pada netbook/computer kita, sehingga hasil yang kita dapat merupakan murni dari hasil kreasi kita sendiri. Disini akan saya jelaskan secara lebih rinci, agar teman-teman yang masih baru menggunakan applikasi ini, tidak merasa kebingungan.

Kita langsung saja…

1.     Buka macromedia anda, kemudian klik Flash Document pada bagian Create New.

Gambar.1

2.     Setelah halaman kerja muncul, selanjutnya tekan tombol Ctrl+F3 pada keyboard anda.

Gambar.2

Pada halaman Document Properties seperti gambar diatas, silahkan isi form yang terdapat disana, dan ganti ukuran default media dengan ukuran jam yang ingin anda buat (contoh : 200 x 60 px), selanjutnya klik OK.

Tekan Ctrl+F3 lagi untuk kembali kehalaman semula.

Jalankan(geser) scroll halaman untuk menampilkan media yang telah diedit.

3.     Selanjutnya klik ikon Insert Layer yang terletak dipojok kiri bawah halaman layer, tambahkan 2 layer baru.

Gambar.4

4.     Klik kanan pada layer ke-3(paling atas), kemudian pilih properties.

Gambar.5

Pada halaman Layer Properties yang muncul seperti gambar diatas, ganti Nama layer menjadi action selanjutnya klik OK.

Lakukan hal yang sama pada layer ke-2, ganti nama layer menjadi tanggal, dan layer ke-1 menjadi jam.

5.     Selanjutnya klik Text Tool atau tombol T pada keyboard anda.

Gambar.6

Buatlah teks area pada media yang telah anda siapkan, kemudian tulis 00:00:00 am (pastikan panjang tulisan tidak melebihi media) selanjutnya tekan Ctrl+F3, maka akan muncul halaman property seperti pada gambar dibawah.

Gambar.7

Pada kolom dibawah Dynamic text, ganti <Instance Name> menjadi clock_txt.

Pada halaman tersebut anda juga bisa mengatur jenis font,warna, serta besar kecilnya font.

6.     Selanjutnya klik layer tanggal, buat area teks dibawah teks yang sudah ada, kemudian tulis Minggu, 31 Desember 2012

Gambar.8

Selanjutnya tekan Ctrl+F3, pada kolom Variable ditulis myDate. (Aturlah jenis font, warna, dan ukuran fonts agar tidak melebihi halaman media).

Gambar.9

7.     Langkah berikutnya, klik dibawah Frame 1 pada layer jam, kemudian tekan F9 pada keyboard anda, selanjutnya Copy kode dibawah dan Paste pada halaman Action yang muncul.

time=new Date(); // time object

var seconds = time.getSeconds()

var minutes = time.getMinutes()

var hours = time.getHours()

if (hours<12) {

ampm = “am”;

}

else{

ampm = “pm”;

}

while(hours >24){

hours = hours – 12;

}

if(hours<10)

{

hours = “0” + hours;

}

if(minutes<10)

{

minutes = “0” + minutes;

}// author: Nyoman CNd

if(seconds<10)

{

seconds = “0” + seconds;

}

clock_txt.text = hours + “:” + minutes + “:” + seconds +” “+ ampm;

Gambar.10

8.     Selanjutnya klik dibawah Frame 1 pada layer tanggal kemudian tekan F9.

Copy kode dibawah dan Paste pada halaman Action.

myDate = new Date();

weekday = new Array(“Minggu,”, “Senin,”, “Selasa,”, “Rabu,”, “Kamis,”, “Jumat,”, “Sabtu,”);

month = new Array(“JaNuaRi”, “FebRuaRi”, “MaRet”, “ApRil”, “Mei”, “JuNi”, “JuLi”, “AgusTus”, “SepTeMbEr”, “OkToBer”, “NoVemBer”, “DeSeMbEr”);

// author: Nyoman CNd

myDate = (weekday[myDate.getDay()]+” “+myDate.getDate()+” “+month[myDate.getMonth()]+” “+myDate.getFullYear());

9.     Pada Layer action, klik kanan dibawah Frame 2, kemudian pilih Insert KeyFrame,

Gambar.11

Selanjutnya tekan F9 pada keyboard anda, dan langkah yang terakhir Copy kode dibawah dan Paste pada halaman Action

gotoAndPlay(1);

Tekan Ctrl+ENTER untuk melihat hasilnya.

1.     Selanjutnya simpan jam animasi anda dengan mengklik File –>Export–>Export Movie.

Pada halaman berikutnya, pilih type Flash Movie(*.swf) kemudian klik Save, dan pada halaman terakhir klik OK.

SELESAI