Post Game: animasi

Showing posts with label animasi. Show all posts

Tuesday, December 20, 2016

Cara Membuat Animasi Kilauan Pada Tulisan Dengan Photoshop

Assalamualaikum Sobat.!
Kali ini saya akan memberikan Tips N Trick bermanfaat bagi sobat nih bagi yang suka Photoshop, Untuk sobat yang belum tau Cara Membuat Animasi Kilauan Pada Tulisan Dengan Photoshop ini menjadi inspirasi saya untuk membuat artikel ini karena di Grup Facebook banyak yang bertanya atau minta Req caranya... yaudah saya buat aja nih tricknya, Yuk yang penasaran Caranya Cekidot,XD !!

Sebelumnya Mohon Maaf Gambar ini diambil Dari Blog Anonymous Revenge, Blog itu juga Blog saya XD

Pertama, Sobat Buka Dahulu Photoshop.

Kemudian Sobat Klik file Pada Sudut atas kanan dan pilih New.

Tentukan Ukuran Besar Background yang akan sobat buat.

Setelah itu klik, Oke.

Kemudian, Sobat Tentukan Backgroundnya dahulu. Caranya pasti sobat udah tau.

Nah Pasti Muncul Layers Seperti ini kan?? XD

Kemudian Sobat Tulis Teks yang akan Dibuat. Contohnya Seperti ini!!

Jika sudah Membuat Seperti itu... Sobat Buat Layer Baru Lagi... Dengan Klik Ctrl + Shift + N --->Ok

Kemudian Sobat Klik Gradient Tools, Perhatikan Lingkaran Merah.

Kemudian Sobat Atur Dahulu Warna Gradient Diatas Sekali. Dengan Tampilan White and Transparent. Nih Lebih jelasnya..

Setelah Itu Klik Oke...!!

Kemudian, Sobat Atur Gradien dengan model gambar dibawah ini yang dilingkari!!

Lalu sobat mulai membuat Garis Gradient,,,, Gak usah terlalu tebal ya garis gradientnya ^_^

nanti jadinya seperti ini...

Jika Sudah,, Sobat Klik kanan pada Layers Teks Anonymous Revenge Seperti ini.. dan klik Conver to Smart Object.

Jika Sudah Sobat klik kanan Juga Layers Gradientnya Lalu pilih Create Clipping Mask.

Nah Pasti Jadinya Seperti ini...

Kemudian Sobat Pindahkan Gradient Kilaunya Ke Ujung Kanan Tulisan untuk Dibuat Animasi..

nih seperti ini...

Kemudian sobat Klik Menu Photoshop Diatas Window ---->Animation

Nah akan Muncul Window Seperti ini, Lingkaran merah, sobat bisa atur delay kecepatan gerak kilaunya...

Kemudian Sobat klik Selected Frames. Seperti Gambar dibawah ini..

Setelah diklik muncul gambar seperti dibawah ini...

Kemudian Sobat Geser Kilau Gradientnya sampai ke sudut kanan teks sambil menghitung langkah geraknya,,,

Jika sudah Dihitung langkah pergerakkan dari sudut kiri ke sudut kanan, Sobat klik Tweens Animation Frames sebelah kiri Selected freames yang sebelumnya sobat klik, Lalu masukkan jumlah langkah yang sobat hitung tadi...

seperti ini, kalo punya saya 30 yah sob XD

Klik OK.

Kemudian Akan Muncul Frames Banyak. Untuk Tes apakah berkerja dengan baik sobat klik Play!!

Jika sudah Bekerja Dengan Baik, Sobat Save Dahulu Dengan .PSD Dahulu...

Jika Sudah Disave PSD, Sobat Kembali Mengklik File disudut kanan atas... lalu pilih Save For web & Device.

Jika Sudah, akan Muncul Tampilan Seperti Gambar Dibawah ini, Ikuti Setting Seperti ini..

Jika sudah, Save as typenya dibiarkan Images Only (*.gif) kemudian Klik Save.
Saya Sarankan Savenya jangan 1 folder dengan .PSD tadi karena kalo digabung biasanya file GIF nya gak muncul... ya itu sih di PC saya.

Nah Kemudian Lihat Hasilnya akan Seperti ini!! XD Atau sobat juga bisa liat tulisan di header blog ini ^_^ Gimana, Gampang kan??

Jika Sobat ingin bertanya berkaitan dengan artikel ini silahkan saja dikomen, akan saya jawab...

Sekian Artikel Hari ini yang dapat saya sampaikan dengan Artikel Berjudul Cara Membuat Animasi Kilauan Pada Tulisan Dengan Photoshop Semoga artikel ini bermanfaat dan dapat menambah ilmu bagi sobat, Wassalamualaikum Wr. Wb.

Copass?? Sertakan Link Sumber!! Gak Ada Link Sumber?? Dosa Tanggung Sendiri!!
Sumber : http://anonymous-revenge.blogspot.com/

Go to link Download

Cara Membuat Efek Loading Dengan Animasi Keyframes

Keyframe | Pada kesempatan kali ini saya akan membagikan tutorial cara membuat animasi loading pada blog. Sebenarnya sudah banyak para Blogger yang menggunakan Animasi Loading Blog akan tetapi banyak yang berbeda. Rata-rata para Blogger menerapkannya dengan JavaScript, Dan saya akan membuatnya berbeda yaitu menggunakan CSS murni tanpa JavaScript sedikitpun.

Animation Bounce and Rotate

Langkah 1 : Cari kode ]]></b:skin>
Langkah 2 : Simpan kode diatas ]]></b:skin>

@keyframes BounceRate{
0%{transform:translate(0px,0px) scale(0.50);opacity:1}
20%{transform:translate(0px,-200px) scale(0.50);opacity:1;}
40%{transform:translate(0px,0px) scale(0.50);opacity:1;}
60%{transform:translate(0px,-200px) scale(0.50);opacity:1;}
80%{transform:translate(0px,-200px) scale(0.50);opacity:1;transform:rotate(-360deg);}
100%{transform:translate(0px,0px) scale(1);opacity:1;}
}

Langkah 3 : Sisipkan kode animation:BounceRate 3s; ke bagian yang ingin anda beri efek, misalkan pada #main-wrapper

#main-wrapper { animation : BounceRate 3s; }

Langkah 4 : Save Template

Animation Earthquake Effect

Langkah 1 : Cari kode ]]></b:skin
Langkah 2 : Simpan kode diatas ]]></b:skin>

@keyframes Earthquake{
0%{opacity:1;transform:rotate(0deg);}
5%{opacity:1;transform:rotate(5deg);}
10%{opacity:1;transform:rotate(-5deg);}
15%{opacity:1;transform:rotate(5deg);}
20%{opacity:1;transform:rotate(-5deg);}
25%{opacity:1;transform:rotate(5deg);}
30%{opacity:1;transform:rotate(-5deg);}
35%{opacity:1;transform:rotate(-5deg);}
40%{opacity:1;transform:rotate(5deg);}
45%{opacity:1;transform:rotate(-5deg);}
50%{opacity:1;transform:rotate(5deg);}
55%{opacity:1;transform:rotate(-5deg);}
60%{opacity:1;transform:rotate(5deg);}
65%{opacity:1;transform:rotate(-5deg);}
70%{opacity:1;transform:rotate(5deg);}
80%{opacity:1;transform:rotate(-5deg);}
85%{opacity:1;transform:rotate(5deg);}
90%{opacity:1;transform:rotate(-5deg);}
95%{opacity:1;transform:rotate(5deg);}
35%{opacity:1;transform:rotate(0deg);}
}

Langkah 3 : Sisipkan kode animation : Earthquake 3s ke bagian yang ingin anda beri efek, misalkan pada #main-wrapper

#main-wrapper { animation : Earthquake 3s; }

Langkah 4 : Save Template

Animation Sliding Effect

Langkah 1 : Cari kode ]]></b:skin>
Langkah 2 : Simpan kode diatas ]]></b:skin>

@keyframes Sliding{
from{transform:translate(-1000px,0px);opacity:0}
to{transform:translate(0px,0px);opacity:1.1;}
}

Langkah 3 : Sisipkan kode animation : Sliding 2s; ke bagian yang ingin anda beri efek, misalkan pada #main-wrapper

#main-wrapper { animation : Sliding 2s; }

Langkah 4 : Save Template

Source: the-anarchyta.blogspot.com

Go to link Download

Cara Membuat Animasi Loading Pada Blog

Cara Membuat Animasi Loading Blog Lebih Menarik - Tips Blog Banyak hal menarik dan efek/plugin yang dapat dipakai atau diberikan oleh blogger...

Nah pagi ini saya mau mencoba share bagaimana caranya membuat efek loading pada blog, agar terlihat lebih menarik, biasanya ini sangat disukai bagi yang suka ngoprek dan yang ingin blognya terlihat cantik dan keren.

Ok tanpa basa-basi simak langkahnya berikut ini :

Sebaiknya anda membaca dengan baik langkah yang telah diberikan dan jangan lupa backup template anda.

ANIMASI LOADING PART 1, BERWARNA MERAH

1. Login ke akun blogger anda

2. Klik Template » Edit HTML » Lanjutkan » Klik Expand Template Widget

3. Tambahkan kode CSS berikut ini diatas ]]></b:skin>

#loadhalaman {position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none;}
.loadball {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-right:5px solid transparent;border-left:5px solid transparent;border-radius:50px;box-shadow: 0 0 35px rgb(255 ,0 , 0);width:50px;height:50px;margin:0 auto;-moz-animation:spinPulse 1s infinite ease-in-out;-webkit-animation:spinPulse 1s infinite linear;}
.loadball-2 {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-left:5px solid transparent;border-right:5px solid transparent;border-radius:50px;box-shadow: 0 0 15px rgb(255 ,0 , 0);width:30px;height:30px;margin:0 auto;position:relative;top:-50px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;}
@-moz-keyframes spinPulse {0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)}50% { -moz-transform:rotate(145deg); opacity:1; }100% { -moz-transform:rotate(-320deg); opacity:0; }}
@-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg); }}
@-webkit-keyframes spinPulse {0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; }}
@-webkit-keyframes spinoffPulse {0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); }}

4. Kemudian tambahkan kode jquery ini diatas kode </head>, jika dalam template kalian sudah terpasang jquery maka tidak perlu lagi tambahan jquery tersebut, aga proses efek loading lancar

5. Dan langkah yang terakhir, pasang kode berikut diatas tag </body>

<div id=loadhalaman>
<div class=loadball></div>
<div class=loadball-2></div>
</div>
<script type=text/javascript>
$(function() {
var siteURL = "http://" + top.location.host.toString();
var $internalLinks = $("a[href^="+siteURL+"], a[href^=/], a[href^=./], a[href^=../]");
$internalLinks.click(function() {
$(#loadhalaman).fadeIn(1500).delay(6000).fadeOut(1000);
});

// Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target=_blank
$(#loadhalaman).click(function() {
$(this).hide();
});
});
</script>

ANIMASI LOADING PART 2, BERWARNA BIRU

HTML

CSS

.ball {
background-color: rgba(0,0,0,0);
border:5px solid rgba(0,183,229,0.9);
opacity:.9;
border-top:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 35px #2187e7;
width:50px;
height:50px;
margin:0 auto;
-moz-animation:spin .5s infinite linear;
-webkit-animation:spin .5s infinite linear;
}
.ball1 {
background-color: rgba(0,0,0,0);
border:5px solid rgba(0,183,229,0.9);

Go to link Download

Cara Membuat Fancy Button Dengan Animasi Dan CSS3

CSS - Membuat tombol link dalam suatu website/blog sudah biasa, namun apa yang terjadi jika tombol tersebut dimodifikasi menjadi tombol yang keren dengan animasi dan bantuan CSS3. Pengunjung web/blog kamu pasti kagum dan pingin menirunya. Ini sangat cocok untuk web/blog yang mempunyai layanan download, jadi buatlah tombol downloadnya semenarik mungkin. Nama tombol keren ini adalah Fancy Button.

CSS Kode: (letakan di atas kode ]]></b:skin>)

HTML Kode:

Gaya 1, Normal

Gaya 2, Square dan Rounded

Gaya 3, Animasi

Gaya 4, Shapes

Kamu pilih salah satu dari ke-4 gaya di atas.

Go to link Download

Cara Membuat Animasi

Langkah pertama tentunya sobat harus download software yang di butuhkan,Easy Gif Animator Pro. Software ini adalah software animasi yang sangat mudah dalam menggunakanya. Sobat tidak perlu mengetahui banyak bahasa program animasi, cukup dengan beberapa klik saja dengan langkah yang tepat maka sebuah animasi sudah berhasil di buat.

Sebuah objek gambar yang dapat bergerak, tentunya akan terlihat lebih menarik, dasar inilah yang melahirkan film kartun, yang dikenal juga dengan istilah animasi. Untuk membuat sebuah animasi tidaklah sulit, anda cukup membuat beberapa gambar yang merupakan suatu rangkaian yang membentuk suatu pergerakan. Jika yang dibuat adalah sebuah pergerakan yang kompleks maka dibutuhkan gambar yang cukup banyak, dalam animasi cara seperti ini lebih dikenal dengan pergerakan frame by frame (bingkai per bingkai).

animasi motor Cara Membuat Animasi Bergerak Easy Gif Animator

Animasi ini juga mewarnai dunia komputer, terlebih di jagad internet, anda cukup mudah menemui animasi sederhana yang menghiasi berbagai halaman web, mulai dari button, banner, dan gambar. Salah satu format gambar yang mendukung penyimpanan gambar animasi adalah GIF. Dengan bantuan aplikasi Easy GIF Animator anda dapat berkreasi untuk membuat sebuah animasi berformat GIF. Anda dapat membuat button, banner, dan gambar animasi sekaligus dengan aplikasi ini.

Easy GIF Animator, menawarkan kemudahan, dengan tampilannya yang cukup user friendly dan dukungan fitur wizardnya, anda akan dimanjakan untuk membuat animasi, bagi anda yang pemula sekalipun. Saat anda menjalankan aplikasi ini, maka akan tampil menu start up yang menawarkan pilihan apa yang akan anda lakukan.

Terdapat pilihan [Create New Animation] untuk membuat gambar animasi, [Create Animated Banner] untuk membuat banner animasi, [Create Animated Button] untuk membuat button animasi, ketiga pilihan Create tersebut cukup mudah diikuti, anda cukup memilih gambar, warna, ukuran, teks, dan beberapa setting lainnya.

Setelah proses pilah-pilih selesai anda akan masuk ke jendela utama aplikasi, di sini anda dapat bereksperimen lebih jauh, jika belum puas dengan pilihan yang ditawarkan wizard. Pada sebelah kanan jendela aplikasi terdapat tab [Edit] untuk mengedit gambar dan tab [Preview] untuk melihat animasi hasil. Sedangkan pada sebelah kiri jendela aplikasi terdapat Story Board dari animasi, di sini anda dapat melihat gambar apa saja yang menyusun sebuah animasi, anda pun dapat menambahkan, mengurangi, serta mengaturnya.

Sebagai awalan disediakan beberapa animasi dalam format GIF pada folder samples, yang dapat dilihat dengan mengklik menu Open (Ctrl + O) atau di File > Open dan selain itu juga terdapat beberapa templete buttons yang dapat anda gunakan. Untuk mendapatkan contoh file animasi berformat gif yang lainnya, anda dapat mencarinya di internet. Atau anda ingin langsung berkreasi membuat animasi, silahkan saja.

Panduan Bergambar – Membuat Animasi GIF dengan Easy GIF ANimator

Cara ini pasti menurut anda paling simple dan mudah. Karena dengan Easy GIF Animator anda dapat membuat animasi GIF, baner animasi, button, mengedit animasi GIF, menambahkan efek visual membuat efek text bergerak, melakukan optimasi animasi GIF agar leih cepat, seting perulangan dan durasi frame, mengkonversi animasi GIF menjadi grayscale, eksport animasi GIF menjadi AVI, menggenerate kode html untuk menampilkannya di website, membuat animasi dengan suara, eksport animasi GIF ke SWF Flash,Siapkan software Easy GIF Animator. Semua hal diatas dapat anda buat dengan mudah dan cepat hanya dengan mengikuti panduan wizard .Saya berikan contoh-contoh screenshot :

2 Cara Membuat Animasi Bergerak Easy Gif Animator

jalankan programnya dan pilih mau buat apa

3 Cara Membuat Animasi Bergerak Easy Gif Animator

pilih gambar yang akan dimasukan kedalam animasi gif nantinya

4 Cara Membuat Animasi Bergerak Easy Gif Animator

seting timing waktu dan loopingnya

5 Cara Membuat Animasi Bergerak Easy Gif Animator

6 Cara Membuat Animasi Bergerak Easy Gif Animator

7 Cara Membuat Animasi Bergerak Easy Gif Animator

Saya rasa demikian dulu seputar Cara membuat Animasi gambar bergerak dengan Easy Gif Animator. Semoga bisa membantu sobat membuat animasi keren, tentunya karya sendiri.

Go to link Download

cara memberi animasi naruto vs sasuke pada blog

Cara memberi animasi naruto vs sasuke sangatlah mudah
langkah pertama:

1.tentunya login dulu ke blog anda

2.masuk ke dashbor blog

3.pilih tata letak

4.add gadget

5.pilih HTML/JAVASCRIP

6.beri judul pada widget burung ini (terserah anda)

7.paste kode widget di bawah ini

<div style="position: fixed; bottom: 0px; right: 20px;width:110px;height:80px;"><a href="http://dapur-tutorial.blogspot.com/2012/10/pasang-widget-animasi-naruto-vs-sasuke-di-blog.html"target="_blank" rel="dofollow"><img src="http://i1210.photobucket.com/albums/cc417/kusanagiblog/NarutoVSSasuke.gif"alt="gambar"title="Widget Naruto VS Sasuke"/></a></div>

8.selamat mencoba

by:angga saputra

Go to link Download

Cara Membuat Animasi Stick Pivot Bergerak

Cara Membuat Animasi Stick / Pivot Bergerak - Apa yang di maksud dengan Pivot ? ( Biasanya disingkat menjadi Pivot ) merupakan freeware aplikasi Windows yang memungkinkan pengguna untuk membuat stickfigure animasi, dan simpan di GIF animasi format yang digunakan pada halaman web dan, yang juga dapat dikonversi menjadi video.

Untuk Download Aplikasinya Klik Disini
Jika Downloadnya sudah selesai kamu extract, Sizenya kecil kok paling cuma 820 kb.
Jika sudah di extract lalu buka aplikasinya dan akan muncul seperti gambar di bawah ini

Cara membuatnya :
Sebener nya tidaklah sulit, tinggal di gerakin aja orang orangan nya sambil mencet next frame.
Misal nya kepala nya mau di putar - putar.

Hasilnya akan seperti ini :

Selamat Mencoba :-)

Sumber

Go to link Download

Cara Membuat Animasi loading di Blog

Selamat siang sahabat blogger semua !!! Kali ini, fahrurrozi18 akan memposting tentang Cara Membuat Animasi loading di Blog. Pembuatan animasi loading page di Blogspot ini menggunakan efek Jquery. Nah, untuk Cara pemasangan loading page di Blog sobat, silahkan ikuti langkah-langkah berikut ini :

1. Login ke Blogger.com

2. Di halaman Dasbor, klik Template.

3. Klik Edit HTML.

4. Cari kode ]]></b:skin> dengan menekan Ctrl + F ( Untuk mempermudah pencarian ) pada kolom Edit HTML kemudian letakan kode berikut ini di atas ]]></b:skin>.

5. Setelah itu cari kode </head> dan letakkan kode berikut diatasnya :

Catatan : Jika script berwarna biru di atas telah ada pada template Blog sobat sebelumnya, tidak perlu menambahkan script tersebut.

6. Kemudan cari kode </body> dan letakkan kode berikut ini diatasnya :

5. Klik Simpan Template. Jika sudah benar melakukan semua tahap di atas, sekarang sobat lihat hasilnya. :)

Sekian dulu ya tips dariku kali ini, semoga bermanfaat.

Bye... bye... :)

Go to link Download

Cara Memberikan Widget Animasi Naruto Bergerak Untuk Blog

Disini Saya Kan Menjelaskan Cara Memberikan Animasi Naruto Bergerak Untuk Blog

Ok Langsung Saja
Cara Memasang Widget Animasi Bergerak Naruto

Login ke dasbor blog anda
Pilih rancangan
Pilih Tambah Gadget
Pilih Html/Java Script
Lalu copy kode Html animasi yang anda ingin pasang di blog.
Pastekan kode tadi di Html/java script tadi.
Simpan, dan selesai

Catatan !! ada bisa mengatur dimana anda ingin meletakan animasi tersebuat sesuai keinginan. Caranya dengan mengedit tulisan yang berwarna merah pada script tersebut.

bottom(bawah), top (atas), left ( kiri), right (kanan),

Contoh : jika anda ingin memasang di pojok kanan atas, berarti anda harus mengubahnya menjadi top dan right. Mudah bukan ? selamat mencoba..

1.Jiraiya

CARA MEMASANG WIDGET ANIMASI NARUTO PADA BLOG

2. Kisame

3. Kiba

4. Akatsuki

5.Sakura

6. Tobi

7. Hinata

8. Temari

9. Kankuro

10.Sasuke

11. Pain

12. Neji

13.Rock lee

14.Zetsu

15.Sasori

16. Sarutobi

17. Kisame

Semoga Apa yang Saya Berikan Bermanfaat :D

Go to link Download

Post Game

Tuesday, December 20, 2016

Cara Membuat Animasi Kilauan Pada Tulisan Dengan Photoshop

Cara Membuat Animasi Kilauan Pada Tulisan Dengan Photoshop

Monday, December 19, 2016

Cara Membuat Efek Loading Dengan Animasi Keyframes

Cara Membuat Efek Loading Dengan Animasi Keyframes

Animation Bounce and Rotate

Animation Earthquake Effect

Animation Sliding Effect

Thursday, December 1, 2016

Cara Membuat Animasi Loading Pada Blog

Cara Membuat Animasi Loading Pada Blog

ANIMASI LOADING PART 1, BERWARNA MERAH

ANIMASI LOADING PART 2, BERWARNA BIRU

Tuesday, November 29, 2016

Cara Membuat Fancy Button Dengan Animasi Dan CSS3

Cara Membuat Fancy Button Dengan Animasi Dan CSS3

Sunday, November 27, 2016

Cara Membuat Animasi

Cara Membuat Animasi

Wednesday, November 16, 2016

cara memberi animasi naruto vs sasuke pada blog

cara memberi animasi naruto vs sasuke pada blog

Sunday, November 13, 2016

Cara Membuat Animasi Stick Pivot Bergerak

Cara Membuat Animasi Stick Pivot Bergerak

Friday, October 28, 2016

Cara Membuat Animasi loading di Blog

Cara Membuat Animasi loading di Blog

Sunday, October 23, 2016

Cara Memberikan Widget Animasi Naruto Bergerak Untuk Blog

Cara Memberikan Widget Animasi Naruto Bergerak Untuk Blog