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

About the Author

has written 1 stories on this site.

20 Comments on “Membuat Banner web dengan Photoshop”

  • Alwa, Malang wrote on 1 November, 2010, 6:00

    Asli baru kali ini aq nemuin tutorial photoshop yang bisa buat gambar GIF, maksi banget infonya

  • Halo Balita | BelajarTahu wrote on 1 February, 2011, 11:54

    sip artikelnya
    thanks share nya !!

  • Taufik fahrizal,Jakarta wrote on 8 May, 2011, 15:19

    thanks banget nih…. benar-benar bermanfaat… akhirnya gue bisa bikin banner buat promosi

  • Ega Septian wrote on 11 August, 2011, 11:24

    wah
    thank’s gan
    skrg jadi ngerti nih photoshop
    skrg blog sya punya banner sndiri deh

  • RC-12 wrote on 18 August, 2011, 9:58

    Mantab Tutorialnya…
    izin Sedot ilmunya, Moga Berkah…”SUKSES SELALU”
    Usul : Perbanyak Lagi Tutorial Photoshop yang tersembunyi…
    Lansung dipraktekin Hasilnya yang sudah dimodif
    di : http://tespenku.blogspot.com/
    Maklum Baru bikin Blog, Pemula…

  • TIANG ANTRIAN wrote on 20 September, 2011, 16:26

    Makasih mas ndro ilmunya….nambah2 pengetahuan sedikit nih mas ndro…TIANG ANTRIAN bagus nih mas ndro

  • rajacolek wrote on 23 September, 2011, 18:53

    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..

  • malik azkari wrote on 2 November, 2011, 13:34

    mantap ………….. ilmunya

  • kumpulan artikel wrote on 30 December, 2011, 11:25

    kayaknya lebih ok kalo ada video tutorialnya deh, tapi ini sudah cukup membantu kami yang pemula, tq

  • agam wrote on 22 January, 2012, 11:13

    thx atas caranya :)

  • yusi fushi wrote on 9 February, 2012, 9:39

    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..

  • Rubby wrote on 23 February, 2012, 12:45

    Thanks Gan,.,.
    Ane perlu coba nich,.,.

  • obat kuat wrote on 16 July, 2012, 3:03

    thank gan tipsnya

  • thamrin wrote on 6 October, 2012, 22:08

    terimah kasih gan dengan begini saya makin pintar aj. jujur saya lebih family dengan photoshop ketimbang yang lain. sekali salam sukses

  • mebel jepara wrote on 27 November, 2012, 0:12

    alhamdulillah,
    makasih gan, manfaat banget postingya.
    terimakasih

    mebel jepara

  • kamar tidur wrote on 27 November, 2012, 0:14

    makasih gan , akhirnya dengan postingan agan sangat membantu saya.
    salam
    kamar tidur

  • denz wrote on 11 December, 2012, 10:40

    mantab banner nya….
    thanks yah

  • BJuser wrote on 17 December, 2012, 14:04

    Baguuus gan tutorialnyaa..

  • Hania wrote on 28 December, 2012, 14:09

    makasih buat ilmunya.. bermanfaat.. :)

  • yafi wrote on 17 January, 2013, 10:08

    thank you

Write a Comment

Gravatars are small images that can show your personality. You can get your gravatar for free today!

Isi dan komentar tanggung jawab masing masing pengirim. Gambar yang ditampilkan dalam artikel tidak selamanya mencerminkan isi artikel atau produk .Hanya dipakai sebagai Ilustrasi berita.

You must be logged in to post a comment.






Web Security Made Easy         > | © 2009   > Hosted by : JWC |
2014 | kabarIT.com Neo. All rights reserved.
KabarIT merupakan techno blog yang menyajikan informasi seputar IT yang hangat dan menarik. Isi dan komentar tanggung jawab masing-masing komentar. Selengkapnya...