Skip to main content

Membuat Animasi Gambar "Gif" Dengan Photoshop

Dari kemarin, mencari blink dengan jquery, akhirnya menemukan script seperti ini :

<script>
function blinkColor(){
  $(".alert-merah").animate({backgroundColor:'#4E1402'}, 1000)
  .animate({backgroundColor:'#990000'}, 1000)
  .animate({backgroundColor:'#4E1402'}, 1000)
  .animate({backgroundColor:'#990000'}, 5000, function(){blinkColor()});
 }

blinkColor();
</script>

saya sudah menentukan class alert-merah, jika target tidak memenuhi. Blink terlihat smooth sekali, dengan mengaguminya, saya lihat page / halaman alert ini lebih lama dari halaman yang lain. Akan tetapi, tidak disangka dan tak pernah aku duga, ternyata nih browser kok nge-hang ya? ada apa gerangan? (pada saat itu saya sedang membuka website yang lain untuk mencari referensi. Saya coba ulangi restart browsernya, tapi ketika saya membuka project dan mengamati halaman alert yang sama, hal tersebut terjadi kembali.

Kemudian saya buka task manager, tetapi browser belum tertutup, dan ternyata CPU  dan MEM usage dari browser ini tidak seperti biasanya, setelah analisa dan mencari artikel terkait, ternyata script jquery di atas sama seperti looping animation that increase memory usage. Dengan kata lain, saya harus mencari referensi yang lain, yang mana opsi animation background alert tersebut adalah cara termudah yang selama ini saya ketahui.

Setelah berpikir seharian (karena hari ini diklat) dan mengingat-ingat ilmu yang pernah saya dapat saat SMK dulu, yaitu flash dan photoshop (maap, sebut merk) yang masih dasar, akhirnya ketemu nih artikel (Membuat Animasi Gambar "Gif" Dengan Photoshop) oleh agan MughSLic di web kaskus.us

Silakan disimak

Selain digunakan sebagai applikasi untuk mengedit foto, photoshop juga bisa untuk membuat gambar bergerak / animasi dalam format "gif" (graphic interchange format). Dengan bermain frame per frame, kita dapat membuat animasi tulisan ataupun gambar dengan mudah sesuai selera.

Dalam hal ini kreativitas kita sangat dibutuhkan di sini, saya hanya memberikan tutorial dasarnya saja, sobat-sobat tinggal mengembangkannya.

Photoshop yang saya gunakan di sini adalah photoshop CS3, photoshop CS2 juga bisa digunakan.

Cara membuat animasi gambar bergerak :
1. Buka Adobe photoshop

2. Buka tool animasi di photoshop, caranya klik menu “window” di photoshop, lalu pilih “animation”

Sampai muncul window kayak gini:

3. Di photoshop, pilih file » new masukkan ukuran sesuai selera, kalau saya pakai 200 x 200 pixel, lalu oke

4. Selanjutnya, buat 3 buah lingkaran dengan layer yang berbeda. Buat sebuah lingkaran dulu, selanjutnya pada jendela layer, kita klik kanan layer lingkaran tersebut, lalu pilih “duplicate layer…”.

Contoh:

Tampilan pada jendela layer seperti ini:



Dan ini tampilan dalam jendela animation:


5. Selanjutnya, buat 3 buah frame dalam jendela animation, dengan mengklik icon “duplicates selected frames” (tanda lingkaran merah pada gambar diatas!) hingga jadi seperti ini:

6. Untuk menampilkan warna merah dahulu, klik frame pertama pada jendela animation, lalu pada jendela layer, nonaktifkan icon mata (indicates layer visibility) pada layer warna kuning dan hijau, sehingga hanya layer warna merah yang terdapat icon mata, seperti gambar di bawah :


Kemudian kembali lagi ke jendela animation, klik frame kedua, aktifkan icon mata pada layer kuning. Sedangkan pada frame ketiga, aktifkan icon mata pada layer hijau. Oh iya jika ingin animasi kita nanti transparan, tinggal nonaktifkan icon mata pada layer background di semua frame animasi.
Dalam jendela animation akan terlihat seperti berikut:


7. Klik tombol play untuk memainkan animasi, kita bisa mensetting timming animasi sehingga animasi tidak bergerak terlalu cepat. Setting waktunya dengan meng-klik tanda panah segitiga di samping kanan tulisan 0 sec.

8. Agar animasi bergerak terus tanpa henti, maka animasi harus di setting “forever”, tetapi jika ingin bergerak satu kali, setting dengan “once”, seperti gambar di bawah:

Kira-kira hasilnya seperti ini…


9. Kemudian simpan dengan menggunakan “save for web & device” nya photoshop. Caranya klik file > Save for web & device atau shortcut CTRL+ALT+SHIFT+S

Selamat mencoba gan dan gunakan kreativitas agan untuk membuat animasi yang lebih baik.

Sumber : http://www.kaskus.us/showthread.php?t=12470916

Comments

Popular posts from this blog

Istilah Makanan, Minuman, dll dalam MOS / OSPEK

Bagi Adik-adik yang baru masuk ke sekolah atau universitas baru. Mungkin mendapatkan tugas yang sulit dari kakak pembina pada saat MOS / OSPEK.

Nah, sebagai permulaan, dijelasin dulu ya, apa itu MOS dan OSPEK. Baru nanti kita melanjutkan ke Istilah yang ditunggu.

Masa Orientasi Siswa atau disingkat MOS atau sering disebut juga Masa Pengenalan Lingkungan Sekolah (disingkat MPLS) merupakan sebuah kegiatan yang umum dilaksanakan di sekolah guna menyambut kedatangan siswa baru.
Masa orientasi lazim kita jumpai hampir di tiap sekolah, mulai dari tingkat SMP, SMA hingga perguruan tinggi. Tak pandang itu sekolah negeri maupun swasta, semua menggunakan cara itu untuk mengenalkan almamater pada siswa barunya.
MOS dijadikan sebagai ajang untuk melatih ketahanan mental, disiplin dan mempererat tali persaudaraan. MOS juga sering dipakai sebagai sarana perkenalan siswa terhadap lingkungan baru di sekolah tersebut. Baik itu perkenalan dengan sesama siswa baru, kakak kelas, guru hingga karyawan lainn…

Pusar Udel Berair atau Sakit dan Berbau

Sudah lama nih saya mencari artikel tentang sakit pusar atau pusar berbau. Dulu saat awal pertama pusar sakit, rasanya tidak karuan, setelah periksa ke dokter katanya ada infeksi, akhirnya diberilah saya antibiotik, obat penghilang rasa sakit, dan satu obat alergi obat. Namun setelah rasa sakit itu hilang, sekarang kok masih tersisa bau yang dahsyat dari perut saya, kata istri saya seperti bau terasi. Baiklah, tanpa panjang lebar, silakan disimak artikel dari http://christinarwen.blogspot.com.  Pusar atau udel jarang sekali mendapat perhatian untuk dibersihkan, padahal menjaga kebersihan area pusar sama pentingnya dengan mencuci tangan atau kaki. Beberapa kondisi bahkan membuat pusar berbau busuk dan tidak sedap. Apa saja?
Pusar atau secara medis disebut umbilikus pada dasarnya merupakan bekas luka setelah kelahiran. Kebanyakan orang tidak menaruh perhatian khusus pada pusar. Tetapi ada keadaan tertentu yang mengharuskan Anda memperhatikan pusar secara penuh. Salah …

Pertanyaan Calon Mertua Sebelum Lamaran

Terima kasih kepada agan AaGuru yant telah membagi artikelnya di kaskus. Silakan disimak

Biasanya setelah anda sudah cukup lama berkenalan atau pacaran dengan doi anda, dan camer anda sudah merasa bahwa hubungan anda harus dipikirkan mau kemana nantinya, anda akan di interview sama camer anda pada suatu waktu untuk mengetahui seberapa serius anda dengan anaknya.

Sikap dan gerak tubuh yang diperlukan :

1. Sikap dan gerak tubuh anda sama halnya anda melamar kerjaan, jadi harus penuh keyakinan dan optimis
2. Saat pertama kali datang dan bertemu, sebaiknya anda memberikan salam dan cium tangan mereka, karena kita adalah orang timur yg senantiasa menjunjung budaya dan keramah tamahan serta menghormati karena kelak mereka akan menjadi orangtua kita juga
3. Posisi duduk harus tegak, ini menandakan agan penuh keyakinan
4. Jangan sering gerak2in anggota bdan, krn ini menandakan kalo agan gugup
5. Menjadilah pendengar yg baik, ketika camer berbicara tataplah dengan sebaik2nya
6. Jangan pernah …