nana johari

May 4, 2013

Tutorial : Header GIF II



Do not re-tutorial

Assalamualaikum. 

Al kisahnya begini. Haritu aku usha blog Atin, dia pakai header yang menarik perhatian aku. "Macam mana dia buat?", tapi pertanyaan tu hilang begitu saje. Then aku scroll dashboard, nampak Atin update sejarah header beliau. So aku pergi lah kat blog header maker Atin tadi tu. Ayuni.

Dia ada buat tutorial pendek macam mana nak letak GIF dalam TV PNG tu. So aku try-try, menjadi pulak. Cuma untuk tutorial aku ni, aku buat full version cara nak letak kat header. Teknik nak masukkan GIF kat TV tu, credit to Ayuni. The rest tu aku ikut kaedah aku. GIFs tu, aku dapat daripada tumblr; credit to the gifs owner.

Benda ni boleh digunakan untuk header, dan boleh juga digunakan untuk poster fanfic jenis romcom. 

Diperlukan;

  • Photoshop, tak kisah CS berapa
  • File GIF [yang gerak gerak tu]
  • Television PNG [kalau tak ada, sila search kat deviantart dan download]
  • Fokus lol



*    *    *


Step 1 : Buat background


First, macam biasa. 
Open Photoshop. Click File > New > Nanti akan keluar benda atas ni. Width ikut kebesaran blog korang [kalau korang nak buat header]. Height, suka hati nak buat berapa. Click OK.

Background header korang tu, ada banyak cara nak buat. 
Pertama, guna Fill Tool. Macam bawah ni,


[1] Create new layer
[2] Click pada new layer tersebut
[3] Click Fill Tool
[4] Pilih warna
[5] Click pada image

Nanti image putih tu akan bertukar warna. 

Ataupun, korang boleh guna cara Pattern. Sama ada korang open pattern dan drag masuk image [header] tersebut, atau korang duplicate layer background.

Duplicate; Double click pada layer Background. Tekan Ok. Right click pada layer Background dan pilih Duplicate. Right click Background Copy tu, dan pilih Blending Options. Dan buat macam ni,


Siapa yang tak pernah pakai Pattern, search je kat google; Photoshop Patterns Download. Download lah memana yang korang suka dan load macam dalam tutorial INI.

Maka jadilah begini,


Ikut screenshot di atas. Click bahagian Windows dan pilih Animation. Akan muncul satu animation frames di bawah. Ni,


Okay.
Masuk step seterusnya.


*    *    *


Step 2 : Buat animation pada television png. 

[Langkah A]
Silalah tekan File > Open ; open GIF image yang korang dah save dalam komputer. Nanti akan muncul begini, perhatikan setiap sudut hahaha


Then korang open pulak television png korang. Aku dah nyatakan macam mana nak dapatkan benda tu di awal tutorial. 


[1] Click pada layer teratas sekali di kotak layers
[2] Click pada layer pertama di animation board/frame
[3] Click move tool tu
[4] Sila drag television png masuk ke dalam GIF 

Pastikan file television png tu dalam RGB mode. Kalau tak boleh nak drag, korang click pada television png tu, dan tekan Image > Mode > RGB. Then drag macam biasa.


Akan jadi macam atas ni. Tengok pada semua layers di animation board tu. Semua ada gambar television kan? Maknanya untuk step tu korang dah berjaya lol.


[Langkah B]
[1] Click pada layer television png di kotak layers
[2] Click pada layer 1 di animation board
[3] Click tool tersebut
[4] Sila click di tengah-tengah ruang skrin television tu. Akan muncul garisan putus-putus


Terus buat steps di bawah,
[1] Click layer 1 di kotak layers
[2] Click layer 1 di animation board
[3] Click tool yang aku petakkan tu
[4] Right click di tengah skrin television, pilih Select Inverse. Nanti garisan putus-putus tu akan jadi cenggini,


Sila lah tekan DELETE. Button delete tu ada kat keyboard korang. Bila korang tekan button tu, bahagian luar television akan hilang dan bertukar jadi image petak petak; maksudnya transparent lah tu.

Ini, 


Kalau korang tengok betul-betul, yang transparent di bahagian luar hanyalah Layer 1 di animation board serta Layer 1 di kotak layers. Yang aku petakkan biru tu tak transparent lagi. 

Jangan tekan benda lain, terus buat step bawah ni


[Langkah C]
[1] Click pada Layer 2 di kotak layers 
[2] Click pada Layer 2 di animation board
[3] Press DELETE lagi sekali.

Nanti bahagian luar di Layer 2 pun akan jadi transparent. Yep. Repeat [Langkah C] sampai habis layers.


Jadilah macam atas ni ha. Semua dah transparent. 


*    *    *


Step 3 : Masukkan television png + gif image ke dalam image [header]


[Langkah D]
Aha. Serabut sikit. 
[1] Click Layer 1 di animation board 
[2] Tolak scroll bar sampai ke hujung (jika ada)
[3] Press SHIFT di keyboard dan click layer terakhir di animation board

Nanti semua layers di animation board tu akan highlight biru.


[1] Click benda kecik yang aku petakkan tu
[2] Copy Frames

[Langkah E]
Sekarang click pada tab image [header] korang (CS5) atau kecikkan tab gif (kalau pakai CS3)
Buat macam ni,


[1] Tekan benda alah tu
[2] Paste Frames

Akan keluar benda ni,


Ikut seperti yang di atas. 
Jadilah macam ni,


Nampak pada layer yang lain tu tak ada background kan? Ahaha.
[1] Click pada layer yang tak ada background
[2] Click pada kotak 'eye' layer background header korang di kotak layers

Sila repeat step di atas ni sampai la habis frames yang tak ada background.


Okay sekarang. Macam mana nak resize television yang besar sangat tu. 

[1] Click pada Layer 1 di animation board
[2] Click pada Move Tool
[3] Click pada Layer 1 [gif image/television gif] di kotak layers
[4] Press SHIFT 
[5] Click pada layer atas sekali di kotak layers

Maka dia akan highlight semua. So korang boleh kecik/besar/ubah position television gif korang tu. Bila dah selesai resize dan ubah tempat, boleh click semula pada Move Tool. Dan tekan Apply bila satu tab asing muncul di skrin.

Kalau korang nak letak satu TV je, sila lompat ke step buat tajuk. Kalau nak letak lebih dari satu TV, sila ikut step seterusnya ni.


*    *    *


Step 4 : Letak dua televisions png + gif images 


[1] Click pada layer atas sekali di kotak layers.
[2] Click pada layer 1 di animation board

Repeat Step 2; open gif image yang kedua korang nak masukkan tu. Dah repeat Step 2 sampai habis, buat [Langkah D]

Dan terus ikut step ini,


Click tab image [header] korang.
[1] Highlight semua layers di animation board ikut cara yang aku tunjuk tadi. SHIFT tu. 
[2] Paste Frames

Keluar benda ni,


Buat yang sama. 
Jadi begini,


Television gif 2 tu dah masuk dalam layers television gif 1. Dan di kotak layers, korang boleh nampak ada satu set layers atas layer terakhir television gif 1

Kalau nak drag/ubah position/resize television gif 2 tu, simply highlight semua layers gif 2 tersebut dan tekan move tool. Macam ni,


Ubah macam biasa. Dan tekan Move Tool bila dah selesai ubah.


*    *    *


Step 5 : Tajuk [fonts]


[1] Highlight semua layers di animation board
[2] Click pada layer terakhir sekali di kotak layers


[3] Tekan T Tool
[4] Simply type je tajuk di image tersebut

Sebelum korang type tu pastikan semua layers di animation board dah di-highlight. 


*    *    *


Step 6 : Save 

Bila dah selesai, boleh save.
Begini,


Akan muncul ni,


Save! 

Kalau untuk template designer, upload macam biasa di bahagian layout; header. Kalau blogskin, upload header tersebut ke dalam Imgur [photo hosting website] kemudian copy URL dan paste di HTML template korang. 

Kalau ada tersalah step, maklumkan kepada aku. Aku pun tengah mengantuk ni. Lol. Good luck!

Adios.

13 comments:

  1. slain dri television png tuh....bnda lain ad lgi x?

    ReplyDelete
  2. Woahhh nnty nk cuba tuto nie lah :D

    ReplyDelete
  3. nana masa nak open gif tu kn my potoshop keluar "this is an animated gif. u can only view one frame. saving over dis file will reslut in a loss of information"

    mcm mn nak atasi masalah beginiii ;---;

    ReplyDelete
  4. @Ieyra Ghani

    pakai CS berapa? kalau CS5, dah bukak animation board tu dulu tak?

    kalau tak mahu jugak, try import. kalau import, kena ada quick player ._. tapi tu leceh sikit. yang tu eden tak tahu nak buat ._.

    ReplyDelete
  5. @nanajoe a'ah cs5 . dah bukak tapi dia keluar pop-up tuh lepastu dia keluar gif tu tapi tak jd gif just mcm gambar biasa XoX

    ReplyDelete
  6. Omo Omo... thanks for ur tutorial.. betul2 nak belajar buat poster gif xD Tapi xbpe pandai sgt...

    Nak try la =)

    Thanks again

    ReplyDelete
  7. kenape saye tekan delete tu tak jadi ape2 pon?

    ReplyDelete
  8. @Nur Sarah

    right click, cut as new layer. then delete layer yang muncul tu.

    ReplyDelete
  9. kakak. kalau pakai gimp tak boleh ke? :'(

    ReplyDelete
  10. @Fatin Zulaikha

    tak tahu ;; sebab akak tak guna gimp ;;

    ReplyDelete