Thursday, September 24, 2009

[TUTORIAL] bikin banner cara manual [TUTORIAL]

mo blng tutorial, ah kayanya nggak pantes dapet nama sekeren itw..
mo blng omong kosong (lagi), ah nggak apresiatif..
mungkin sharing kli yh :)

bnyk blogger yg memilih picasion sbg alternatif bkn banner dgn model animated picture (.gif)
caranya adlh dgn menyiapkan 2 atau lebih gambar yang mau di-animated-kan,
lalu Create Animation.

tp yg pgn gw share d sni, adlah cara bikin banner secara manual dengan menggunakan Adobe Photoshop.

1) buka Adobe Photoshop
2) File > New, atau click kombinasi Ctrl+N
3) d bagian Width, isi lebar banner yg kamu inginkan. sbg contoh = 250 pixel.
d bagian Height, isi panjang banner. contoh = 180 pixel.
kemudian klik OK.

4) kreasikan kanvas kosong yang muncul dengan menggunakan Brush, Type Tool, dll.
atau bisa juga masukkan gambar yg sdh kamu siapkan sebelumnya, dgn cara File > Open lalu browse gambar yg kmu inginkan.
misalnya nih, gw punya gambar zebra yg mo gw pake jd gmbar banner gw.
5) aktifkan Move Tool dgn menekan tombol V d keyboard,
atau dgn meng-klik bagian yg dilingkati merah dlm gambar.
klik dan tahan gambar zebra, drag ke kanvas yang tadi kita buat.

6) skrg, gw masukin lg gambar zebra yg udh ditambahin kata "click"
ulang langkah 5.
7) perhatikan bagian yg gw lingkarin di gambar. seharusnya skrg udh ada 2 layer,
layer 1 dan layer 2.

8) boleh tambah gambar lg, ulang langkah 4, 5, 6.
contohnya, gw tambah gambar zebra lg yg ada tulisan CLICK dan URL Blog gw..
gw klik lg, gw tahan lg, gw drag lg..
skrg ad 3 layer..
9) klik menu Window > Animation utk mmbuka window animasi
10)klik tanda panah kecil d sblh window animasi

11)pilih "Make Frames From Layers"
12)hapus frame pertama dgn meng-klik icon delete (lih. gambar)

13)klik bagian 0 sec.
itw adl waktu selang antara 1 gambar dgn gambar yg berikutnya.
blh 0.2, 0.5, dst. contoh: gw pilih 0.5 sec. (jgn lupa, gnti smuanya yh..)

14)klik icon "Play" yg kyk d remote control DVD-DVD itw loh, d bgian bawah (udh capek nyontohin d gmbr lg, hehe)
15) File > Save for Web & Devices.
Klik Save.
16) DONE^^

Final Product:

2 comments:

  1. weeh keren postnya.... detil banget... meluncur ah... thx..

    ReplyDelete
  2. nice niihh, coba ahh ^^

    Mampir juga yak di blog ane. hehe

    ReplyDelete