Sabtu, 03 Maret 2012

Membuat Animasi Sederhana Dengan Photoshop

Sebuah blog bagaikan sebuah rumah, selain mengisi perabotan dan menata interiornya blog juga terkadang dilengkapi dengan aksesoris berupa widget supaya tampilan rumah mereka menjadi bagus. Sebagai pemilik rumah kita pasti akan berusaha menata rumah kita dengan rapi  dan kita akan berusaha membuat tamu kita nyaman selama berada di rumah kita. Dari sebuah artikel yang pernah saya baca ada beberapa faktor yang bisa membuat pengunjung blog menjadi tidak nyaman, seperti misalnya Floating ads / Iklan melayang , terlalu banyak iklan PCC dan banner dan Tipografi yang kurang baik. Dan ternyata warna dasar Putih banyak dipilih pada sebuah pooling sebagai warna yang mampu membuat pengunjung blog merasa betah berada didalamnya.


Bagaimana dengan teman-teman? Apakan teman-teman suka bereksperiman dalam menata blog? 
Mungkin saya termasuk orang sering melakukan perubahan pada blog, bukan berarti saya tidak nyaman dengan blog saya loh, entah apa namanya :) Well now kembali pada topik yang sesuai judul diatas. Saya sering ingin menambahkan animasi berupa text atau gambar, tapi sialnya animasi-animasi yang sudah disediakan secara online belum ada yang sesuai dengan apa yang saya inginkan. Lalu saya berpikiran untuk membuat sendiri animasi tersebut. Berbekal dengan Photoshop dan  Photobucket saya mencoba membuat animasi sederhana yang berasal dari photo yang disatukan dalam program Photoshop.

Yuk langsung aja dimulai , yang diperlukan :
1. Photo / Gambar / Text
2. Photoshop
3. Photobucket

Mari kita mulai.......
#1 Siapkan Photo / Gambar / Text  yang akan digunakan

#2 Ubah formatnya menjadi GIF

#3 Lakukan croping sesuai yang diinginkan

#4 Klik Window >> Animations dan akan muncul seperti bawah ini
#5 Saatnya memisahkan gambar dan merangkainya sehingga nantikan akan menjadi gambar gerak.
Disini saya akan memisakhan 4 bagian dan tetap menampilkan 1 bagian utuh, jadi nanti akan ada 5 frame.
 #6 Klik pada animation frame, untuk menambahkan frame berikutnya klik duplicate selected frame.
Ketika selesai melakukan step 6 jangan lupa SAVE , yaitu FILE >> SAVE FOR WEB & DEVICES
#7 Sekarang saatnya berpindah ke Photobucket, kenapa Photobucket?
Di Photobucket kita hanya memerlukan kode HTML yang gunanya untuk publish di Blog. Sesaat setelah photo terunggah kita sudah bisa melihat foto tersebut dengan dilengkapi kode html.
#8 Sudah dapat kodenya ? COPY dan simpan sebentar Sekarang kita beralih pada Blog kita

#9 Sekarang saatnya Add a Gadget >> Html / JavaScript >> PASTE CODE 


#10 Sekarang teman-teman sudah punya gambar animasi sendiri


Selamat mencoba , semoga tips diatas bisa dimengerti. Bila teman - teman ingin bertanya lebih lanjut jangan ragu , silahkan hubungi saya atau bisa bertanya pada kolom komentar. 

4 komentar:

  1. lengkap sekali tips nya mbak....kapan2 saya coba deh...

    BalasHapus
  2. thanks infonya mbak.. segera di coba :)

    BalasHapus
  3. @ Mami Zidane : Selamat mencoba mbak, trima kasih loh sering mampir disini :)

    @ Aiinizza anggriani : Semoga bermanfaat, thanks ya :)

    BalasHapus
  4. nah! ini dl pernah bikin tp skarang lupaaaa haha..thanks share nya loh mba! :D

    BalasHapus