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.
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.
Dan iklan
kamu telah siap digunakan
Tara Lihat hasilnya....
Tara Lihat hasilnya....
Terima Kasih semuga bermanfaat artikel ini..
