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.

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

 Selamat mencoba ^_^

Dwi Utami

Dwi adalah seorang salah satu staff Instruktur di LKP PalComTech Baturaja

33 comments

  1. seppppp Lanjutddkan… :nerd :2thumbup :alay

  2. setelah nyoba, jadinya kayak gini ..

    ternyata biar bisa ber-animasi harus dijadikan gambar GIF, hehe baru tahu..

    thanks tutorialnya mbak Wie :D

  3. baguss mb’,,,
    mau donk di ajariinnn bkin,,heee
    :2thumbup :peluk

  4. emmmm ilmu baru nii…
    dari pgotoshop bs buat animasi :thumbup

  5. wiiii.. keewwwrrrreennn banget

  6. keren…
    :matabelo :2thumbup

  7. wah cool…ajarin dong

  8. ihh,,,,ko bisa sih..:)
    salut,,salut…!!

  9. wihhhh ternyata buat animasi itu gak mesti dari flash ya… pake photoshop juga bisa,,, kereennn mbak dwi :2thumbup

  10. baguuuzzzzzzzzz

  11. kalau animasinya bendera berkibar bisa nggak Mbak Dwi… thanks

  12. makasih infonya :cystg

  13. :kimpoi :kimpoi bagus n menarik sekali tapi dyan masih Ga bisa ngambil aplikasin ne gmana ea??

  14. cara memasang diblog gmn?

  15. saya sudah coba buat animasi nya. di ps bisa jalan tapi kok begitu di unggah ke header blogspot animasinya tidak jalan padahal sudah di simpan dalam file “gif”. mohon pencerahaany nya mbak mungkin ada step yang ketinggalan disaya.
    tks

  16. gan, cara masukin gambar di nomor 4 nye gimana ? Ane buka open eh langkah 1, 2, 3 nye ilang :’(

  17. gan, cara masukin gambar di nomor 4 nye gimana ? Ane buka open eh langkah 1, 2, 3 nye ilang :’(

  18. terima kasih buat ilmunya, :D (y)

  19. kok di webkuenggak bisa ya gan,apa ada yg salah

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

[+] kaskus emoticons nartzco