Diposting oleh Chelsea FC Fans |

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.

Kemudian pilih tool teks, lalu masukkan teksnya,untuk teksnya silahkan di sesuaikan dengan judul webnya ya…

Hasil jadi sementaranya.

Langkah 9

Setelah selesai sekarang kita aktifkan terlebih dulu tab animasinya yang berada di tab window > animation

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 :

Langkah 11

Setelah tadi kita sudah menduplikat grupnya,sekarang kita duplikat layer di tab animasinya seperti di bawah ini :

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.

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.

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.

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:

Untuk melihat hasil jadi sementaranya kita bisa klik play animation.

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.