nana johari

September 30, 2013

Photoshop Tutorial : How to make a GIF image + and extra 5 tutorials about GIF



DO NOT RE-TUTORIAL

Assalamualaikum.
Lama kan dah tak buat tutorial lol. 
Comel tak watermark baru aku ahahahahaha lol.

Tutor ni ada 5 tutorials kecik. Ok macam mana nak cakap. Aku akan terangkan basic— macam mana nak buat gif images daripada videos. Kemudian extra; 

  1. buat effect 'zoom in zoom out'— aku yang bagi nama lmao 
  2. letak dua/atau lebih ayat berlainan dalam satu gif
  3. letak nama korang as credit/copyright sebagai yang buat gif pada gif 
  4. edit gif guna PSD
  5. sharpen

Sebenarnya banyak lagi benda yang boleh dibuat pada gif, tapi aku tak habis explore lagi. Tak ada masa otl. So ini je untuk masa ni. Tutorials biasa-biasa sebab aku bukan pakar gif aha aha.

Contoh gifs. 


Hasil effect 1, 3, 4 dan 5. Tak nampak sangat permulaan zoom in tu.


Hasil semua effects. 

*   *   *


Maka. Lets begin.
Tutorial panjang. Ok obvious lol.

Apa yang diperlukan;

  • Photoshop— tak kisah CS berapa asalkan boleh edit gifs. Yang aku familiar CS5 dan CS6. CS3 aku dah lupa macam mana setting dia. Tapi rasanya tak banyak beza pun. 
  • Video— yang nak ditukarkan kepada gif.
  • PSD— kalau korang nak edit guna PSD la, kalau tak nak tak payah lol. PSD boleh download sendiri, search je kat google. 'Coloring PSD'.


Click image untuk tumbesaran


STEP 1 [A]: Make a gif

Okay baca betul-betul.
CS6— firstly korang nampak tak [1] yang aku petakkan dalam screencap di atas. Tukar kepada Motion.
CS5— tekan tab Window, kat atas tu. Cari Animation board or something yang berbunyi ala gini.

Nanti akan keluar timeline atau animation board macam [2] tu.
Tekan File, [3] Import dan [4] Video frames to layers. Lepas tu pilih video yang korang nak upload.

Note : Kekadang tak boleh nak import kalau korang tak ada Quicktime/Quickplayer /aku pun tak ingat apa nama dia/. Tapi aku tak ada pun Quicktime tu still boleh import. Ikut nasib kot? Kalau photoshop kata korang perlukan sekian sekian, download la benda sekian sekian tu. Lepas tu sila berdoa supaya berhasil.


Akan keluar tab macam dalam screencap ni.
Boleh nampak video yang korang nak upload tu dalam skrin kecik tersebut. 

Korang tak boleh buat satu video dalam bentuk gifs sekali gus. Sebab akan muncul lebih daripada 100 layers. Semakin sikit bilangan layers, semakin 'ringan' gifs tu. Dengan erti kata lain, sila buat gifs dengan layers yang tak banyak.

So, nampak tak benda yang aku petakkan dan label as Begin dan End
Tu beginning dan ending untuk korang cut. 

Pilih favorite part atau part yang korang nak jadikan gifs dalam video— drag anak panah Begin pada permulaan favorite part korang tu dan drag anak panah End pada pengakhir part tersebut. Lepas tu korang boleh view pergerakkan video untuk pastikan korang tandakan bahagian yang betul, just tekan Play button kat tengah tu.

Ni aku punya,


Boleh nampak jarak yang aku tetapkan tu tak jauh pun. Sebab aku nak layers nanti dalam jumlah yang tak banyak.

Tekan OK kalau dah puas hati.
Nanti akan jadi gini.
Layers gif aku selalu dalam lingkungan 20-30 layers otl kira banyak tu sebenarnya. 


Jangan ikut step dalam gambar lagi lol. 
Cuba korang tekan button play kat timeline/animation board tu dulu.
Gif bergerak lambat kan?

Ada tiga perkara yang boleh jadi penyebab, aku tak tahu mana satu yang paling betul. 
Sebab time duration. Sebab saiz. Dan sebab Photoshop. Gif images memang lembab kalau view dalam Photoshop aku pun tak tahu apesal. Tapi gif tu akan jadi cepat kalau korang kecikkan saiz dan ubah time duration.


STEP 1 [B]: Crop, resize and change time duration

Highlight layers.
Ingat step ni sampai bila bila.

Berdasarkan screencap atas tu.
[1] Click layer 1, [2] press SHIFT kat keyboard korang tu, [3] click layer yang terakhir dalam board— kalau dalam tutorial ni, timeline board tu. Ekceli kalau nak highlight layers dalam timeline atau animation board ni just tekan kat anak panah kecik bahagian kanan board tu je, kemudian pilih select all layers or something.

Dah highlight!

Extra : Tak kesah la korang nak edit macam mana pun, kalau nak selamat sila highlight semua layers lol. Lepas tu kalau korang nak edit keseluruhan gifs, sila la selalu click pada Layer 1 di timeline/animation board dan layer akhir di layers board sebelum start edit apa-apa


Ubah time duration.
Tak perlu click mana-mana, terus ikut screencap bawah ni.


[1] Click pada 'time' mana mana layer kat timeline/animation board. 
Akan keluar option macam tu, [2] click no delay. So time duration untuk semua gifs akan berubah.


Crop and resize gifs.
Sebenarnya aku dah buat tutorial ni. Takpe lah, ikut jela yang ni.

Highlight semua layers di timeline/animation board dan di layers board kat sebelah kanan tu. Guna teknik yang sama, SHIFT tadi tu. [3] Tekan yang aku petakkan tu. 


Nampak tak benda yang aku petakkan kat atas sekali dalam screencap atas ni?

Korang boleh crop dan resize gifs sekaligus. Ubah benda tu kepada saiz yang korang nak, dalam px. Aku selalu buat width 500px height 200px. Lepas tu gerakkan je kotak crop yang muncul kat tengah alam gif tu, ubah ikut suka hati korang. Bila dah puas hati dengan kedudukan benda tu, sila right click dan tekan crop!

Nanti akan jadi kecik. Sebenarnya kalau korang tak nak edit apa-apa, dah boleh save. Step save ada di hujung tutorial, sila scroll lol.

Ni hasilnya.



*    *    *



Simple edits
[1] Click layer 1 di timeline/animation board.
[2] Click layer terakhir di layers board
[3] Click new layer. Kalau tak nak pun tak pe otl boleh skip yang ni.


[2] Click benda tu. 
Lepas tu korang boleh la pilih benda yang korang nak ubah macam Curve, Exposure or Levels

Hasilnya lebih kurang macam ni,


Dah siap simple edit. Lol.


*    *    *




STEP 2 : Add fonts/credit

[1] Click layer terakhir di layers board. Then click new layer.
[2] Highlight semua layers di timeline/animation board. Click pada layer 1 di situ.
[3] Click 'T' untuk font.
[4] Sila tulis nama korang. Sebaiknya guna font kecil dan opacity kurang dari 100%

Siap.


*    *    *




STEP 3 : Sharpen

Aku tak tahu macam mana nak sharp kan gifs sekaligus, tak usha tutorial lagi. So ni cara panjang. Kalau korang rajin nak cari shortcut, boleh je cari sendiri kat google macam mana caranya.

[1] Click layer 1 di timeline/animation board
[2] Click layer 1 jugak di layers board

Click Filter.
[3] Sharpen.
[4] Smart sharpen.

Ubah setting di situ dan tekan okay. So layer 1 dah sharp. 
Buat benda yang sama pada layer 2 dan seterusnya sampai habis layer. 
Ok aku tahu banyak kerja aha :-) Tapi nak buat macam mana, tanda kena menuntut ilmu lagi lol.

Hasil sebelumnya dan hasil selepas sharpen dan simple edit.



*    *    *



STEP 4 : Zoom effect

Gunakan sekurang-kurangnya 4 layers pertama dan 4 layers terakhir— kalau nak buat zoom in zoom out effect la. Kalau nak buat zoom in je, guna 4 layers pertama— dan vice versa. 

Step A
[1] Click pada layer 1 di timeline/animation board.
[2] Click pada layer 1 di layers board.
[3] Filter.
[4] Blur. 
[5] Gaussian Blur. 

Zoom In.
Dari blur kepada sharp.

Akan muncul tab. 
Sila buat radius dalam 2.0— atau berapa jela yang korang nak. Aku buat 2.0. 
Dan repeat Step A pada layer 2. Cuma bila tab tu muncul, korang kurangkan radius tu kepada 1.5 atau any numbers asalkan kurang daripada jumlah blur di layer 1 tadi. 

Contoh;


Repeat Step A pada layer seterusnya dan kurangkan radius tu lagi.
Dan ni contoh layer 4 aku,


Radius tu makin lama makin kurang. 

Zoom Out.
Buat pada 4 layers terakhir. Dan buat radius makin increase
So hasilnya nanti, dari sharp kepada blur. 

Siap. Zoom in zoom out lol.



*    *    *



STEP 5 : Edit gifs using coloring PSD.

Upload/open PSD yang korang dah download. Ignore ketiadaan gambar dalam screencap aku tu. 
[1] CS5/CS6 — Sila tarik tab tu keluar. 
[1] CS3 — kecikkan tab kalau tak silap aku la.


[1] Dah keluarkan tab tu.
[2] Click pada tab gif yang korang nak edit tu.
[3] Pastikan click pada layer terakhir di layers board dan layer pertama di timeline/animation board.


[1] Click tab PSD tadi balik.
[2] Drag folder PSD, masuk ke dalam tab gif yang korang nak edit tu. Tarik je.

Hasilnyaa.


ok aku mintak maap kepada fanwives manusia ni sebab guna dia sebagai model.

*    *    *



STEP 6 : Add 'dialogues' to gif.

Untuk tutorial ni, aku guna dua ayat/dialog.
Korang decide dulu dari layer mana ke layer mana untuk dialog 1. Macam gif aku ni, aku decided nak letak dialog 1 masa watak pertama hulur tangan nak suap tu kononnya. Maka, aku highlight dari layer 1 hingga layer 6, di timeline/animation board. Sebab pada layer 7, watak tu dah tarik tangan dia balik.

Ikut step font/tulisan di tutorial aku yang INI

Buat dialogues yang korang nak, siap ubah blending option sebelum masukkan/drag dialog 1 ke dalam gif tersebut. 

Ikut screencap di atas. 
Pastikan tanda 'eye' di layer dialog 1 tu kelihatan. 



Dialog 2.
Sekarang highlight pada layers selebihnya yang korang tak highlight tadi. 
Contoh aku, layer 7 sampai akhir. 

Kemudian drag dialog 2 yang korang dah buat awal-awal tadi masuk ke dalam gif. Pastikan tanda 'eye' di layer dialog 1 tak kelihatan

Dah siap.


Aku letak coloring PSD sekali. 



STEP 7: Save gif.

File > Save as web
Save! 


Done.
Adios.



8 comments:

  1. aloooo comelnya xiuhan k cs6 .. xde meih~ nak cbe buat tapi saya xde cs6.. cs5 xleh buat gif en? ·AAAA· nak cbe -..-

    ReplyDelete
  2. @shuexo

    ha tak boleh ke? rasanya boleh je

    ReplyDelete
  3. den tak boleh buat. download quicktime pun still tak dapat since dye untuk MOV or AVI video je. tssskkkk. kemain request ;~~~~~;

    ReplyDelete
  4. @Rozaini Hussin

    laaa yeke ;__; try convert format video tu

    ReplyDelete
  5. Thank you for the tuto kak Nana :))

    ReplyDelete