Tutorial Membuat Header GIF

Hallo, reader! Akhirnya aku bisa bikin tutorial header GIF. Dulu ada yang minta tutorial bikin header biasa dan hiader GIF. Jadi ceritanya di tutorial ini aku kasih garis besarnya aja, jadi lebih ringkas dan simple. Semoga mudah dipahami dan enggak belibet ya~ Silahkan reader!!

1. Buka aplikasi Photoshop, aku pakai CS3 πŸ™‚

2. Buat lembar kerja baru! File-New

tutor1

tutor2

 

Akan muncul lembar kerja seperti dibawah ini.

 

tutor3

 

3. Bukan gambar cast. File-Open.

tutor4

 

Akan muncul kotak dialog seperti ini:

tutor5

 

4. Setelah gambar cast muncul, drag gambar cast ke lembar kerja baru menggunakan Drag Tool, perhatikan gambar!

tutor6

 

7. Setelah gambar cast berpindah ke lembar kerja, atur ukuran dan posisi gambar menggunakan kombinasi keyboard CTRL+T

tutor7

 

8. Duplikat layer cast menggunakan kombinasi keyboard CTRL+J, sehingga akan muncul layer duplikat dari layer cast.

tutor8

 

9. Klik 2 kali pada layer duplikat, lalu akan muncul kolom dialog “Layer Style” klik style “Color Overlay” Lalu pilih warna yang diinginkan πŸ™‚ OK!

tutor9

 

10. Geser layer yang sudah diberi layer style (kanan/kiri) menggunakan “Drag Tool” Perhatikan gambar!

tutor10

Lakukan langkah nomor 8-10. Sehingga akan tercipta 2 shadow color dibelakang cast dengan warna yang berbeda.

tutor11

11. Gunakan Type Tool untuk menuliskan nama WP, alamat WP, quote, dll.

tutor12

tutor13

12. Beri hiasan menggunakan PNG, scrap, dan hiasan pendukung lain. File-Open.

tutor14

14. Beri warna pada backgroung menggunakan Paint Bucket Tool, pilih warna sesuai keingunan.

tutor15

Kurang lebih menjadi seperti ini.

tutor16

15. Karena ada bagian yang tidak terjamah oleh PNG dan ornamen lainnya, kita crop menggunakan Crop Tool.

tutor17

Kurang lebih menjadi seperti ini.

tutor18

Tahap Pembuatan GIF

Untuk membuat animasi, memerlukan ketelitian dan pemahaman yang sangat tinggi pada tutorial ini. Chaww~

16. Klik Window-Animation.

tutor19

17. Akan muncul seperti digambar/? Pada layer pertama, kita klik gambar mata pada layer nama WP, quote, dan alamat WP (read: layer yang akan disembunyikan) Sehingga, layer tersebut akan hilang namun bukan terhapus.

tutor20

18. Setelah selesai pada langkahΒ 17, kita membuat layer baru animation.

tutor21

Pada layer 2 animation, kita klik gambar mata pada layer nama WP (read: layer yang ingin dimunculkan) Sehingga, layer tersebut akan muncul kembali. Perhatikan gambar.

tutor22

19. Buat lagi layer 3 animation.

tutor23

Pada layer 3 animation, klik lagi gambar mata pada layer yang ingin ditampakkan. Perhatikan gambar.

tutor24

Ulangi langkah nomor 18 dan 19, tergantung berapa frame animasi yang diinginkan.

20. Untuk mengatur kecepatan gerak frame, klik+CTRL pada semua layer animation. Klik kanan lalu pilih kecepatan yang sudah tersedia atau pilih “Other…” untuk kecepatan sesuai kinginan. Perhatikan gambar.

tutor27 tutor28

21. Kita sudah mencapai tahap terakhir tutorial, yaitu penyimpanan. Untuk menyimpan editan format GIF pada photoshop kita pilih File-Save for web & Device. Perhatikan gambar.

tutor29

tutor30

tutor31

22. Hasil akhir:

tutorial-header-gif

Bonus Tips:

  1. Untuk membuat color shadow, pilih warna yang serasi sama backgrounnya ya reader. Pakai warna pastel lebih menarik dan menambah kesan fancy πŸ™‚
  2. Untuk hiasan PNG, jangan banyak-banyak, nanti jadi aneh dan bisa aja kamu bingung saat pembuatan GIF animationnya πŸ™‚ Secukupnya aja..
  3. Bisa ditambah PSD coloring dan teksture, karena keterbatasan waktu dan kemampuan, aku enggak sempet ngasih PSD. Reader bisa tambahkan sendiri.
  4. Silahkan berkreasiiii..

Yayy! Selesai.. gimana? Ribetkah? Ada pertanyaan? Silahkan bertanya di kolom komentar readers.. Minta kritik dan sarannya yap! Don’t claim it as yours! Ini murni dari otakku T_T Tolong hargai ya reader πŸ™‚

Tinggalkan jejakmuuu!

Iklan

5 respons untuk β€˜Tutorial Membuat Header GIF’

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout /  Ubah )

Foto Google+

You are commenting using your Google+ account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )

Connecting to %s