Sabtu, 10 Desember 2011

Membuat Banner web dengan Photoshop

0 komentar
Kebanyakan banner web yang memiliki animasi bergerak di buat menggunakan Flash tapi kali ini kita mencoba membuatnya dengan photoshop
Pertama buka photoshop anda kali ini saya menggunakan Adobe Photoshop CS3

Setelah itu buat dokumen baru dengan cara tekan File – new
Pada kolom width di isi dengan 450 dan Height dengan 100 klik OK
Rubah nama Layer Background menjadi layer 0 dengan cara dobel clik pada layer Background
Beri warna pada canvas kita dengan tool Gradient tool

Lalu klik pada icon untuk merubah Gradient warnanya. isikan seperti yang tertera pada gambar berikut

Lalu tarik garis vertikal dari bawah ke atas melintasi tengah canvas
Sekarang kita membuat text dengan menggunakan tool lalu clik kan pada canvas yg telah di warnai tadi saya menuliska free tutorialssetelah itu tambah layer dengan cara berikut
klik tool untuk membuat tulisan kedua yaitu free samples
buat layer baru lagi lalu buat tulisan kabarit.com dengan cara yang sama seperti sebelumnya sehingga menghasilkan gambar seperti berikut
buat lah lingakaran dengan tool di bawah inibuatlah lingkaran seperti berikut
Carilah gambar speaker di internet terserah warna ap saja
lalu buka gambar tersebut dengan cara File – open , lalu pilih gambar yang telah anda unduh dari internet sebelumnya
crop gambar tesebut hingga hanya ada gambar speaker tsb dengan tool di bawah ini
crop seperti di bawah ini
hasil crop tsb copi ke canvas yang sebelumnya seperti di bawah iniAtur gambar speket tersebut dengan tool free transform dengan cara Ctrl T
atur sampai rapi
Copy layer 1(layer yang ada gambar speakernya) beri nama Layer 1 besar
klik ‘layer 1 besar’ ubah size gambar speaker tandi menjadi lebih besar dari sebelumnya beri efek blur pada gambar yang sudah di perbesar tsb dengan tool seperti di bawah ini
akan muncul peringatan seperti di bawah ini klik OK
lalu akan muncul dialogbox seperti berikut isi seperti gambar di bawah ini lalu klik ok

copy layer free tutorials, layer hasil copyan td diberi nama free tutorials blur begitu pula dengan layer free semples dan kabarit.com lalu layer hasil copyan tadi di beri nama nama asli di tambah blur belakangnyan cara mangcopy layer adalah klik kanan pada layer yang ingin di copy pilih duplicate layer lalu isi nama layer duplikat tadi
Sekarang kita memberi efek blur pada layer hasil copyan tadi
sebelum memberi efek blur pada layer tersebut disabel view layer yang lain yang ada  textnya dengan cara menghilangkan simbol mata pada layer yang lainberi efek  blur pada layer ‘free tutorials blur’ dengan cara yang telah di jelaskan sebelumnya
setelah selesai pindah ke layer ‘free samples blur’ atur view nya lalu beri efek blur dengan cara yang sama dengan sebelumnya
setelah selesai pindah ke layer ‘kabarit.com blur’ atur view nya lalu beri efek blur dengan cara yang sama dengan sebelumnya
Sekarang anda buka window animation dengan cara berikut
window ini kita gunakan untuk membuat animasinyapenampakan windownya seperti berikut
di window ini secara otomatis terdapat satu frame yaitu frame1
Pada frame pertama kita seting view seperti berikut
Lalu tambah frame dengan menekan tombol dalam frame kedua ini kita seting viewnya seperti berikut
kemudian tambah frame lagi dengan mengunakan tombol seperti yang tadi kemudian seting view frame ketiga  seperti ini
kemudian tambah frame lagi dengan mengunakan tombol seperti yang tadi kemudian seting view frame keempat  seperti inikemudian tambah frame lagi dengan mengunakan tombol seperti yang tadi kemudian seting view frame kelima  seperti ini
kemudian tambah frame lagi dengan mengunakan tombol seperti yang tadi kemudian seting view frame keenam  seperti ini
setelah itu jangan lupa menyeting delaynya dengan cara berikut
pada frame ke 1 , 3 , 5 delaynya dikasih 0.5 dan pada frame ke 2,4,6 dikasih delay 0.2
setelah itu coba di mainkan dengan tombol play
kalau sudah berhasil tekan tombol stop langkah kemudian adalah menyimpan berkas dengan format GIF dengan cara tekan File- Save for web and diveceslalu tekan SAVE
dan SUDAH SELESAI

sumber : kabarit.com

Leave a Reply

tatakai blog's