Membuat Animasi Header Website Menggunakan Adobe Photoshop CS3
Assalamu’alaikum…
Pada saat kita membuat sebuah website
baik web statis ataupun dinamis kita harus memenuhi komponen-komponen
website dan salah satu yang terpenting adalah header, header pada
website adalah bagian yang paling terpenting karena header pada web
merupakan judul atau identitas dari sebuah website,untuk membuat header
ini ada banyak macam cara bisa menggunakan animasi,tulisan ataupun
menggunakan photoshop. Nah kali ini saya ingin berbagi dengan gimana
cara membuat judul header dalam bentuk gif menggunakan Adobe Photoshop
CS3.
Yuk simak langkah-langkahnya dibawah ini…
Langkah 1
Buka adobe photoshop cs3 >start > all program > adobe master collection cs3 > pilih adobe photoshop cs3.
Langkah 2
baca selengkapnya dibawah ini, jangan lupa tinggalkan comment juga lho....!!! :D
Setelah programnya terbuka kita pilih file > new.Kemudian Atur ukuran canvas dengan Width 1000px dan height 250px untuk ukuran nanti bisa disesuaikan, untuk lebih lengkap lihat gambar dibawah ini :
Langkah 3
Buat layer baru kemudian pilih Tools > Rounded Rectangle Tool kemudian isi kedalam canvas tetapi sisakan sedikit area dipinggirnya. Seperti contoh dibawah ini :Langkah 4
Buka file yang mau di jadikan header web, kalian bisa ambil dari google untuk backrgroundnya, kemudian menggunakan move tool pindahkan foto tadi ke canvas yang lagi kita kerjakan tadi. Lalu tekan ALT + T zoom sampe memenuhi area shape yang kita buat tadi.Langkah 5
Klik kanan pada layer shape pilih > Resterize Layer .Langkah 6
Pilih layer foto yang kita masukkan
tadi matikan eye droper kemudian pilih layer shape lalu pilih tools
magic want tool lalu letakkan pada sahpe sehingga terseleksi semua warna
hitamnya.
Langkah 7
Aktifkan kembali gambar yang tadi eye
dropernya di matikan >klik menu select > invers atau tekan CTRL +
SHIFT + I jika sudah balik terseleksi tekan Backspace untuk menghapus
seleksi yang di gambar,kemudian tekan CTRL + D untuk mematikan seleksi.
Langkah 8
Setelah selesai dengan bagroundnya,
sekarang biar tambah cantik kita tambahkan teks dan shape yang bakal
kita kasih animasi. Tambah layer baru untuk teks yang kita buat nanti.
Hasil jadi sementaranya.
Langkah 9
Setelah selesai sekarang kita aktifkan terlebih dulu tab animasinya yang berada di tab window > animationLangkah 10
Pilih layer teks dan shapes yang mau di kasih animasi kemudian dijadikan grup,kemudian duplikat grup jadi 3 seperti gambar di bawah ini :Langkah 11
Setelah tadi kita sudah menduplikat grupnya,sekarang kita duplikat layer di tab animasinya seperti di bawah ini :Langkah 12
Untuk mengatur kecepatan animasinya kita bisa atur sesuai keinginan yang terdapat di layer animasi disini saya pilih 0,5 second untuk kecepatannya,atur di semua layer:Langkah 13
Setelah selesai semua kemudian kita simpan, karena untuk header web maka kita simpan di file > save for web & devices, kemudian simpat dalam bentuk gif kemudian save.
Bagaimana? mudah bukan ?
Hasil akhir
Selamat mencoba ^_^
Sumber : http://news.palcomtech.com/2012/12/membuat-animasi-header-website-menggunakan-adobe-photoshop-cs3/
1 komentar:
okey pak manfaat ! jngn lupa kunjungan balinya ! http://3jar.blogspot.com
Posting Komentar