Cara membuat annimasi iklan dengan photoshop CS6

Asslamualaikum Wr, Wb.

Dalam tutorial ini saya akan belajar membuat animasi iklan berukuran 300px x 250px dimana animasi iklan ini akan disertai animasi teks dengan menggunakan Adobe Photoshop CS6.

Preview Desain

Berikut hasil desain yang akan saya hasilkan setelah mengikuti tutorial ini.

Langsung saja ikuti tutorialnya......

Langkah 1 : Membuat lembar kerja baru

Buat lembar kerja baru dengan memilih menu File > New, isi name dengan semutwifi atau terserah apa yang anda suka dengan ukuran 300 pixel untuk lebar dan tingginya 250 pixel.

Dibagian background ganti background menjadi #dddddd.atau abu-abu dengan bantuan keyboard Shift + F5 muncul seperti gambar berikut.

Pilih Warna teks yang kalian inginkan

Langkah 2 : Memasang logo pada iklan

Pada pallete layer semut, kita gambungkan dengan layer0 dengan bantuan keyboard Ctrl + E hasilnya seperti gambar di bawah setelelah itu kita buat grup biar nantinya teratur dengan bantuan keybord CTRL + G

Langkah 3 : Menambahkan teks pada desain iklan

Selanjutnya kita akan menambahkan teks yang nantinya akan kita beri efek animasi. Buat sebuah folder baru di pallete layer, saya memberi nama dengan Teks.

Tambahkan teks “Belajar Tutorial” dengan font yang kamu ingin untuk mengubahnya.

Berikan warna dan list sedikit dengan memilih Layer > Layer Style > Stroke. Beri lihat seperti gambar berikut.

Berikutnya warnai text yang kamu

Duplicate layer teks “Berbagi Tutorial” dengan cara menekan Ctrl + J pada Keyboard. Sembunyikan layer asli dengan cara menghilangkan tanda mata seperti lingkaran merah pada gambar dibawah, lalu klik 2 kali pada icon T untuk mengedit teks Belajar Photoshop yang telah kita duplicate.

Ganti teksnya dengan yang lain, Sebagai contoh saya menggantinya dengan “Belajar Photoshop”. Dengan cara yang sama, yaitu duplicate, sembunyikan layer asli, buat lagi sebuah teks dengan tulisan “Belajar Mikrotik” sehingga kita telah menghasilkan 3 teks. Jika kamu ingin lebih, kamu bisa menambahkannya dengan cara yang sama.

Sembunyikan layer “Belajar Photoshop” dan “Belajar Mikrotik” dan “Belajar Server” dan tampilkan kembali layer “Berbagi Tutorial”.

Langkah 4 : Menambahkan animasi pada teks

Pilih menu Window > Timeline untuk menampilkan pallete Timeline. Setelah tampil klik tombol Create Video Timeline untuk memulai proses membuat animasi.

Selanjutnya akan muncul timeline seperti sebuah software video editing. Kita akan mengedit animasi sederhana untuk desain iklan kita disini. Cari Layer “Berbagi Tutorial” dan klik segitiga kecil sehingga akan tampil 4 buah jenis animasi seperti yang dapat kamu lihat seperti gambar dibawah.

Langkah 5 : Memulai proses membuat animasi

Klik icon yang seperti jam dibagian Transform, jika tidak ada Transform berarti Position. Akan ada tanda kuning awal timeline kita.

Pilih move tool pada toolbox photoshop, geser tulisan kekanan. Agar lebih rapi kamu bisa menekan tombol samping kanan pada keyboard.

Majukan sedikit garis timeline dan klik keyframe untuk menambah titik keyframe pada timeline. Jangan geser dulu garis timeline, kita akan mengedit efek animasi disini.

Kembalikan Teks kekiri dengan memilih move tool terlebih dahulu pada toolbox, lalu dengan bantuan keyboar, pindahkan posisinya ketempat semula.

Tampilkan rule dengan Menekan Ctrl + R pada keyboard. Masih memilih move too, klik di tengah-tengah rule dan tarik ke kanan untuk membuat guides atau garis bantu agar teks tepat posisinya saat kita membuat animasi. Garis ini tidak akan muncul pada hasil desain, ini hanya garis bantu saja.

Geser lagi garis timeline kekanan dan klik add keyframe seperti tampak pada gambar berikut.

Geser sedikit lagi dan tambah keyframe.

Pada keyframe ini, geser tulisan ke kiri agar nanti tulisan akan bergeser kekiri.

Tips, kamu bisa menarik dan mendekatkan titik-titik keyframe untuk mempercepat kecepatan atau gerakan animasi. Untuk melihat hasilnya, kamu bisa menempatkan garis timeline dibagian awal, dan klik Space pada keyboard.

Langkah 6 : Membuat animasi iklan untuk layer selanjutnya

Pastikan garis timeline masih pada keyframe layer “Berbagi Tutorial” paling akhir, scrool Timeline keatas untuk menemukan layer “Belajar Photoshop”. Klik segitiga kecil dan add keyframe seperti gambar dibawah ini.

Munculkan layer Belajar Photoshop dari layer pallete dengan menampilkan icon mata disamping layer.

Geser tulisan kekiri.

Tambah keyframe didekatnya untuk membuat animasi.

Geser kembali teks ke lembar kerja hingga sejajar dengan grid yang telah kita buat. Lalu tambahkan 2 keyframe seperti berikut.

Posisikan garis timeline pada akhir keyframe, geser tulisan kekanan.

Lakukan hal yang sama untuk layer “Tutorial mikrotik dan Tutorial Server”! Jika durasinya kurang, kamu bisa menarik hingga durasinya cocok untuk animasi kamu. Durasi disini adalah waktu main animasi pada gambar iklan yang akan kita desain.

Jika sudah, posisikan “end of work area” atau garis seperti pada gambar dibawah ini ke akhir timeline tempat pemberhentian animasi.

Langkah 7 : Menyimpan gambar iklan

Untuk menyimpan gambar animasi iklan ini, kita tidak bisa menggunakan cara biasa dengan mengklik menu file > save atau save as. Untuk menyimpan file agar menjadi iklan beranimasi, kamu bisa menekan menu File > Save for Web. Setting seperti tanda merah yang saya buat berikut. (klik gambar untuk memperbesar).

Forever dibagian animation berarti saat berada di web nantinya, iklan ini akan terus bergerak dan tidak akan berhenti seperti yang telah kamu lihat dibagian review desain diatas. Pilih save dibagian bawah untuk menyimpan desain iklan ini.

Cari folder dimana iklan akan disimpan, lalu dibagian File name : kamu bisa mengisi nama desain iklan. Akhiri dengan ekstensi .gif. Jika sudah klik Save dibagian kanan.