nana johari

March 28, 2013

Photoshop : Header GIF



CTRL dan click pada image kalau nak view lagi besar

Assalamualaikum.

Semalam Apis ada cakap yang dia tak boleh nak buat tutor pasal header GIF. Aku tak pasti apakah sebabnya lol. So aku tolong buatkan bagi pihak dia memandangkan aku tengok blog ni dah macam tak ada function. Tak berapa nak sama dengan header Apis, tapi lebih kurang macam atas tu la. Simple punya.

Apa yang diperlukan;
  • Photoshop, tak kisah pun CS berapa
  • Empat gambar bercorak, bilangan optional tapi untuk tutor ni aku guna empat gambar



*   *   *


First.
Buat background header. Untuk background header ni, korang boleh buat plain color atau bergambar. Macam contoh aku tu, bergambar. So awal-awal tu edit background header kasi siap dulu. 

Kalau tak reti buat background header macam atas tu, ikut tutor INI sebelum step fonts. 

Lepas tu buat step ini,


Nanti akan keluar animation board kat bawah tu. 
Lepas tu korang boleh buat nama blog kat header. 


Tekan T untuk buat fonts [1]
Click new layer [2]
Lepas tu type lah apa-apa kat header tu [3]
Kalau nak apply effect [4], right click pada layer font tadi dan tekan Blending Options. Ubah lah ikut suka hati, nak letak shadow ke, stroke ke.


*   *   *


Next step; letak empat gambar.


File > Open. 
Open gambar yang berkenaan. Macam aku, aku open empat gambar di atas. 

Then korang drag satu gambar ke dalam tab header korang. Macam ni,


Click pada tab Gambar 1, click lama pada gambar tersebut dan tarik masuk ke tab header. Untuk CS3, kalau tak tahu nak drag ikut tutor INI

Susun Gambar 1 yang korang drag tadi, betul-betul atas tajuk header. Macam aku buat tu. Then korang akan nampak, layer baru kat kotak layers di bahagian kanan [bawah] tu. 

Buat benda yang sama untuk Gambar 2. Jadi macam ni,


Susun macam korang susun Gambar 1 tu jugak. Bertindih, tak apa. Dan repeat step yang sama untuk gambar-gambar seterusnya.

Nanti akan jadi macam ni,



*   *   *

Sekarang masuk step Clipping mask.

Highlight semua layers gambar yang korang drag masuk tu;
Click pada layer Gambar 1, SHIFT + click pada layer Gambar 4. 

Nanti dia akan highlight biru macam ni, 


Lepas tu korang right click pada layers yang dah di-highlighted tu. Akan keluar list options macam atas tu. Tekan Create Clipping Mask.

Nanti dia jadi begini hoho,



*    *    *

Making GIF.

Step ni melibatkan Animation board dan kotak Layers di bahagian kanan tu. Hanya layers keempat-empat gambar je yang akan terlibat lol.


Tengok screenshot di atas. 3 daripada 4 layers gambar di kotak layer dah tak ada simbol "mata". Kalau korang hilangkan simbol mata tu maksudnya, korang tak boleh nampak that thing atas image korang. 

Tekan simbol mata di tiga layers gambar korang, kecuali di layer Gambar 1. Bila korang tekan simbol mata tu, nanti dia akan hilang dan jadi macam screenshot aku kat atas ni.


Ikut step dalam screenshot atas ni. 

First, tekan kotak new layer di Animation board [1]. 
Nanti akan muncul layer baru di situ [2]. 
[3] Click pada simbol mata di Gambar 1, dan click pada kotak mata di Gambar 2 [bagi simbol mata tu muncul semula]. 

Tujuan step ni; nak bagi Gambar 1 tak kelihatan dan Gambar 2 kelihatan. Bila korang tambah new layer kat Animation board dan korang tutup simbol mata di Gambar 1 serta munculkan simbol tu di Gambar 2, Gambar 2 yang akan muncul di Layer 2 di Animation board, tapi Gambar 1 tak muncul. 

Korang akan nampak perbezaannya pada tajuk header. 


Ulang step yang sama pada Gambar 3. 
Click new layer di Animation Board [1]
New layer akan muncul di Animation Board [2]
Click simbol mata di Gambar 2 dan click pada kotak mata di Gambar 3 [bagi simbol mata tu muncul semula]

Maka, untuk Layer 3 di Animation board, hanya Gambar 3 yang kelihatan. 

Repeat step untuk Gambar 4. 
Buat new layer di Animation board. 
Hilangkan simbol mata di Gambar 3, dan munculkan simbol mata di Gambar 4.


*   *   *

Sekarang masuk step Time Duration /aku panggil time duration lol tak tahu la apa namanya/ 


Highlight semua layers di Animation board. 
Click pada Layer 1, SHIFT + click pada Layer 4. 
Nanti akan nampak highlight biru macam screenshot atas ni.

Tekan pada simbol anak panah kecik di bawah Layer 4 di Animation board tu. 


Nanti muncul list macam atas ni. Korang boleh pilih nak berapa seconds [kelajuan gambar bertukar]. Kalau nak letak sendiri berapa seconds, tekan Other.

Lepas tu korang boleh Play, tengok benda tu bergerak. Button Play ada je dekat dekat Animation board tu. 


*   *    *

Step seterusnya; Ubah brightness/curve/hue saturation/color balance/etc

Kalau korang nak ubah brightness header korang tu boleh tengok step ni. Kalau tak, korang dah boleh save dah header korang. Rujuk step di bawah sekali untuk Step Save.


Okay.
Dah Play/Stop apa semua, tekan semula pada Layer 1 di Animation board. 
[Tips: Nak ubah apa-apa, mesti click pada layer yang terawal]

Click pada New Layer di kotak layers [1]
Tekan simbol bulat hitam/putih tu [2]

Jadi cenggini,


Boleh je ubah antara yang di atas. Nak ubah yang aku tak petakkan tu pun boleh. Ikut suka hati.
Aku buat step Curve untuk yang ni.

So jadi macam ni,


Dah gelap sikit. 
Note; Kalau korang buat effect ikut cara yang aku tunjuk tadi, semua layers di bawah layer effect korang [macam yang aku petakkan] akan dapat effect yang sama. 


*   *   *

Step Save.

Dah siap semua kan. Tekan File > Save for Web & Devices


Akan muncul cenggini,


Pastikan kotak atas tu tertera GIF. 
Dan kalau tak ada apa-apa nak diubah, Save!

Nak upload sebagai header, buat macam biasa. 
Dashboard > Layout > Upload di bahagian header.
Kalau blogskin, tak silap aku pakai URL kan? So upload lah header korang ni dalam image hosting websites macam Imgur, Photobucket dan etc. Dan copy URL image tu, paste di bahagian code header.

Adios. 

9 comments:

  1. Waa . Awesome ah . Thanks unnie , nak try ah lepas ni :D

    ReplyDelete
  2. wahh cool LOL nana huu :D
    btw apis x buat sbb die kate die ada final exam huhu

    ReplyDelete
  3. thanks nana for this tuto ;---; lama dah cariii... erkk bila dah save tu dia tersimpan kat mana ek ? tak jumpa pulakkk eden cari ;~;

    ReplyDelete
  4. Ohohh dah dah. ada masalah teknikal tadi //buffering// ok thanksss tuto nie membantu ;d

    ReplyDelete
  5. yg tulisan The Windows Of Soul tu .. apa nma font dia ? :) Cantik

    ReplyDelete