Berbagi itu indah

» » Membuat Animasi Header Website Menggunakan Adobe Photoshop CS3

Membuat Animasi Header Website Menggunakan Adobe Photoshop CS3

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.
Screen shot 2012-12-13 at 11.31.02 AM

Langkah 2

Setelah programnya terbuka kita pilih file > new.
Screen shot 2012-12-13 at 11.31.27 AM
Kemudian Atur ukuran canvas dengan Width 1000px dan height 250px untuk ukuran nanti bisa disesuaikan, untuk lebih lengkap lihat gambar dibawah ini :
Screen shot 2012-12-13 at 11.31.35 AM
Screen shot 2012-12-13 at 11.31.41 AM

Langkah 3

Buat layer baru kemudian pilih Tools > Rounded Rectangle Tool kemudian isi kedalam canvas tetapi sisakan sedikit area dipinggirnya. Seperti contoh dibawah ini :
Screen shot 2012-12-13 at 11.31.49 AM
Screen shot 2012-12-13 at 11.32.01 AM

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.
Screen shot 2012-12-13 at 11.32.40 AM

Langkah 5

Klik kanan pada layer shape pilih > Resterize Layer .
Screen shot 2012-12-13 at 11.32.55 AM

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.
Screen shot 2012-12-13 at 11.33.08 AM
Screen shot 2012-12-13 at 11.33.17 AM

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.
Screen shot 2012-12-13 at 11.32.40 AM

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.
Screen shot 2012-12-13 at 11.33.39 AM
Kemudian pilih tool teks, lalu masukkan teksnya,untuk teksnya silahkan di sesuaikan dengan judul webnya ya…
Screen shot 2012-12-13 at 11.33.46 AM
Hasil jadi sementaranya.
Screen shot 2012-12-13 at 11.33.52 AM

Langkah 9

Setelah selesai sekarang kita aktifkan terlebih dulu tab animasinya yang berada di tab window > animation
Screen shot 2012-12-13 at 11.33.59 AM
Screen shot 2012-12-13 at 11.34.05 AM

Langkah 10

Pilih layer  teks dan shapes yang mau di kasih animasi kemudian dijadikan grup,kemudian duplikat grup jadi 3 seperti gambar di bawah ini :
Screen shot 2012-12-13 at 11.34.34 AM
Screen shot 2012-12-13 at 11.34.52 AM

Langkah 11

Setelah tadi kita sudah menduplikat grupnya,sekarang kita duplikat layer di tab animasinya seperti di bawah ini :
Screen shot 2012-12-13 at 11.34.58 AM
Agar beranimasi kita kasih warna yang berbeda pada setiap layer yang ada. Digrup 1 biarkan di Warna shape biarkan warna merah dan matikan eye droper 2 grup diatasnya.
Screen shot 2012-12-13 at 11.35.33 AM
Pilih Di grup 2  dan di layer 2 di tab animasi kita ubah warna shapenya kali ini saya mengganti warnanya jadi warna kuning, jangan lupa matikan eye droper grup lainnya.
Screen shot 2012-12-13 at 11.35.22 AM
Dan terakhir Pilih Di grup 3  dan di layer 3 di tab animasi kita ubah warna shapenya kali ini saya mengganti warnanya jadi warna hijau, dan jangan lupa matikan eye droper grup lainnya.
Screen shot 2012-12-13 at 11.35.33 AM

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:
Screen shot 2012-12-13 at 11.35.43 AM
Untuk melihat hasil jadi sementaranya kita bisa klik play animation.
Screen shot 2012-12-13 at 11.35.50 AM

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.
Screen shot 2012-12-13 at 11.35.57 AM
Screen shot 2012-12-13 at 11.36.10 AM
Bagaimana? mudah bukan ?

Hasil akhir

headerr
Labels: Design Web

Thanks for reading Membuat Animasi Header Website Menggunakan Adobe Photoshop CS3. Please share...!

0 Comment for "Membuat Animasi Header Website Menggunakan Adobe Photoshop CS3"

Back To Top