bringing you the best side of graphics

[Tutorial] Insert GIF Image Into Header in Photoshop

request-kryssiehn

Halloo, aku bawa tutorial kedua ku ^^ Kali ini aku bakal nunjukin/? cara untuk memasukkan gambar berformat gif

ke header di aplikasi photoshop ^^

Yuk kita belajar! :)

Pertama dan yang utama, kalian siapin dulu dua aplikasi ini :

1. Adobe Photoshop [boleh versi apa aja]

2. Ulead Gif Animator [versi apa aja boleh] —> Ini kalo mau download salah satuversinya DOWNLOAD

Sebenarnya nggak harus pakai UGA, kalian bisa pakai aplikasi lain. Tapi kebetulan aku punya nya UGA. Fungsinya UGA untuk memecah layer-layer pada gif. Karena GIF itu terdiri dari layer-layer yang digabung jadi satu kesatuan..

Oke. Kita mulai belajar!

  • Buka Aplikasi UGA [Ulead Gif Animator].

1

 

  •  Klik File –> Open Image. Lalu pilih gambar berformat gif yang kamu mau. Aku pake gif nya Kyuhyun.

3

Nah lihat gambar diatas. Gambar gifnya Kyuhyun otomatis dipecah jadi beberapa layer :)

  • Setelah itu, kamu klik File –> Save as –> Images Frames untuk menyimpan semua layer kyuhyun dalam format .jpeg

Pilih folder yang kamu mau, namai file nya, lalu klik save untuk menyimpan.

4

  • Kita menuju ke photoshop. Buka Aplikasi Adobe Photoshop kamu. Versi apapun boleh. Aku pake yang versi CS3 Portable.

Setelah photoshop siap untuk digunakan, buka pict yang akan kamu tambahkan gif tadi.

5

  • Lalu buka layer2 gif kyuhyun tadi yang sudah disimpan ke photoshop.

6a

6

  • Ini step yang sulit dijelaskan haha. Jadi, kalian harus memasukkan semua layer-kyuhyun itu di lembar kerja. Kebetulan aku udah nyiapin tempat untuk gif Kyuhyun nya di kanan atas. Tempat itu aku bikin dengan shape. Oiya, menginsert gif kyuhyun nya harus dimulai dari layer pertama gif kyuhyun, jangan asal. biar rapi.
  • Atur gif kyuhyun sesuai dengan yang kamu inginkan. Ulangi step ini sampai semua layer kyuhyun masuk ke lembar kerja.

*nb : Kalo pengen gampang waktu bikin gif nya nanti, kamu tumpuk aja layer kyuhyun di satu tempat dan ukurannya harus sama.

7

  •  Lalu setelah selesai, aku pengen gambar nya kyuhyun itu nggak keluar dari shape yang udah kubikin. Jadi aku blok semua layer kyuhyun itu, lalu klik kanan —> Create Clipping Mask

8

Coba bedakan gif kyuhyun diatas dan yang ada di bawah ini, beda kan?

Semua layer kyuhyun itu jadi ada di dalam shape.

9

  • Sekarang kita mulai membuat gif kyuhyun nya bergerak. Klik Windows –> Animations
  • Lalu semua layer kyuhyun itu kamu disable. caranya klik semua gambar matanya kecuali lembar kerja dan layer kyuhyun yang pertama (diatas aku namain layer 2). Coba liat gambar diatas. Di kolom layers bagian kanan ada banyak gambar mata kan? kamu klik semua kecuali layer kyuhyun yang dinamain layer 2.

10

  • Selanjutnya, copy lembar kerja pada animations (lihat gambar), lalu enable kan layer kyuhyun gif yang kedua. Begitu seterusnya hingga selesai.

12

  • Default time pada animations adalah 0 sec, maka dari itu kalau mau atur waktu nya, baca tulisan pada gambar di bawah.

11

Setelah itu coba mainkan. Kalo sudah cukup memuaskan,

simpan dengan meng klik file —> Save Web and Devices. Atau klik Ctrl + Alt + Shift + S

Selesai ^^

request-kryssiehn

 

Oiya, tutorial ini lebih bisa dipahami jika kalian membaca sambil melakukannya. Karena itu saya namakan Learning By Doing. Kalian akan sulit memahami kalo cuma membaca.

Mohon maaf jika kalian kurang paham dengan tutor ini. Ini karena kesalahan saya yang nggak bisa menjelaskan dengan baik. Jadi silahkan tanya-tanya ya kalo ada step yang masih nggak paham ^^

Do not Claim this tutorial as yours.

Credit :

Rifcaramello

http://orangepumpkins.wordpress.com

41 responses

  1. Waaah makasih unnie udah buat tutorial ini! Really helpful<3
    Thanks ya unn<3

    Mei 6, 2013 pukul 12:44 pm

  2. aku sempek kebinggungan bikinnya, gomawo banget unnie ^^

    Juni 23, 2013 pukul 4:38 am

    • Maaf ya kalo nggak jelas hehe, sama-sama ^^

      Juni 23, 2013 pukul 9:26 am

      • enggak kok, malah ini ngebantu banget lho =D

        Juni 23, 2013 pukul 11:37 am

  3. Fai

    kalo misalnya text yg dibikin bergerak gitu caranya sama/beda? ._. hehe

    Agustus 10, 2013 pukul 9:09 am

    • kalo untuk text yang bergerak liat aja di page index, nanti ada tutorial how to make header gif, bukan insrt gif image ^^

      Agustus 11, 2013 pukul 1:57 am

  4. Chingu aku mau tanya dong, kalo mau nyari fontnya dimana? Terus keywordnya apa? Makasih🙂

    Agustus 17, 2013 pukul 4:41 am

    • fontnya? biasanya aku nyari di http://www.dafont.com, terus aku gapake keyword, tinggal liat2 aja menurut abjad, kalo preview nya bagus tinggal download deh😀

      Agustus 18, 2013 pukul 12:59 pm

      • oke thanks ya buat jawabannya hehe😀

        September 5, 2013 pukul 12:22 pm

  5. ini membantu ^^ thanks tutornya^^

    Januari 14, 2014 pukul 1:34 pm

  6. makasih eon sangat membantu ^_^

    Januari 29, 2014 pukul 1:53 pm

  7. kartika

    SIP ! keren deh. trimakasih sudah mau berbagi ilmunya🙂

    April 27, 2015 pukul 12:54 pm

Leave a Reply ^__^

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 )

Gambar Twitter

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

Foto Facebook

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

Foto Google+

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

Connecting to %s