Membuat Banner web dengan Photoshop

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

20 thoughts on “Membuat Banner web dengan Photoshop”

  1. tutorial yang sangat menarik..dan lumayan bikin bingung karena langkah2nya sangat bnyak hehe maklum saya dasarnya saja masih belom begitu faham tentang photoshop. edit foto giv saja saya masih belom tau hehe.
    salam kenal saja yaa gan….tutorialnya kerren bnget ajarin dunk…hehe..

  2. cara bikin teks ke 2 sma ke 3 nya gmn c.? saya baru nyoba n, bnr2 bru nyba, tlg d jlaskan yaa, atau gx ksh saya link nya..

Leave a Reply

Your email address will not be published.