Membuat Banner Menggunakan PhotoShop

Apa anda ingin beriklan di internet...?

Salah satu cara yang ampuh untuk beriklan di internet yaitu dengan menggunakan banner.

Mungkin sudah banyak yang tahu bagaimana cara pembuatan banner itu.

Tapi bagi yang tidak tahu, anda tidak perlu khawatir.

Karena disini saya akan menjelaskan cara pembuatan banner dengan menggunakan photoshop.

Semoga penjelasan cara pembuatan banner di bawah ini bisa membantu anda.

Selamat mengerjakan dan jangan lupa kasih komentar yaa...

Cara-Caranya adalah Sebagai Berikut :

1. Buka Adobe Photoshop.

2. Buka file baru dengan mengklik menu File> New. Pada kotak dialog New :

a. Name: Beri nama file (contoh : “Banner01”)

b. Width: 125 pixels

c. Height: 200 pixels

d. Resolution: 72 pixels/inch

e. Mode: RGB Color

f. Content: Transparent

g. Klik OK

“Ukuran Bisa Anda Sesuaikan Sendiri”

3. Perbesar ukuran window kanvas dengan menarik tepinya. 

4. Perbesar kanvas dalam dengan menggunakan Zoom Tool (Z).

5. Buatlah background untuk banner Anda dengan menggunakan Rectangle Tool (U) Sesuaikan dengan ukuran kanvas. Jika sudah ubahlah menjadi Shape dengan mengklik menu Layer > Raterized > Shape. Buatlah bidang seleksi berbentuk Marquee (kotak) dengan menggunakan Rectangular Marquee Tool (M) di atas background lalu klik menu Edit > Clear, sehingga background Anda berbentuk list kotak (bingkai).

6. Masukkan Gambar atau Photo yang akan anda jadikan Background ke dalam canvas. Klik File > open > pilih gambar anda > OK.

7. Masukkan Gambar ke dalam Canvas yang telah di edit (Banner01) dengan cara Drag & Drop, sesuaikan dengan canvas. Hapus window kanvas yg dibuka tadi (selain Banner01).

8. Buatlah teks nama yang akan dipakai untuk banner anda (contoh “Klik Disini”) di tengah-tengah banner menggunakan Horizontal Type Tool (T). Sesuaikan ukuran teks dengan banner menggunakan Move Tool (V).

9. Tambahkan efek Bavel and Embos di Teks dengan mengklik menu Layer > LayerStyle > Bavel and Embos (tambahkan pengaturan lain jika Anda mau) klik OK jika sudah.

Abaikan no. 6 & 7 bila anda tidak ingin menggunakan background. ( Hanya Teks Saja )

Kini Banner Anda Sudah Setengah Jadi, Lanjutkan Membacanya.......

10. Sekarang Pindah ke dalam Program Adobe ImageReady dengan mengklik menu File > Jump To > Adobe Image Ready. Tunggu sebentar sampai Program Adobe ImageReady terbuka.

11. Untuk membuat animasi “teks berkedip” Windows Animasi harus tersedia, jika belum ada, Anda bisa memunculkannya dengan mengklik menu Window > Animation.

12. Untuk membuat animasi, pertama-tama kita akan bekerja dengan menu Layers. Klik ikon mata pada layer teks nama Anda. Sehingga ikon mata tidak terlihat dan otomatis teks nama Anda pun tidak terlihat. Sedangkan untuk gambar biarkan saja terlihat.

13. Pindahlah ke jendela Animation, lalu klik ikon Duplicate Current Frame. Anda sekarang mempunyai dua frame di jendela animation. Klik ikon mata pada layer teks nama Anda sehingga terlihat. Hasilnya frame pertama teks nama Anda tidak terlihat sedangkan pada frame yang kedua teks nama Anda terlihat.

14. Sekarang aturlah waktu “teks berkedip” pada jendela Animation. Klik pada “Select Frame Delay Time” di bawah frame pertama dan kedua di jendela animation. Contoh: Beri waktu 0.5 pada kedua frame.

15. Untuk mencoba animasi teks Anda klik Plays/Stops Animation pada jendela animation di bawah gambar.

16. Kalau waktu berkedipnya sudah terasa cukup (tidak terlalu cepat juga tidak terlalu lambat).

17. Langkah berikutnya, simpan pekerjaan Anda dengan mengklik menu File > Save Optimized (Ctrl+Alt+S). Pada Save as Type Anda pilih extensi Image Only (.gif) klik Save.

18. Pembuatan banner sekarang sudah selesai, Untuk melanjutkan anda butuh koneksi internet.

Mengubah File GIF Ke Dalam Bentuk URL

19. Untuk mengubah file .gif ke dalam bentuk URL, Anda memerlukan web yang menyediakan layanan tersebut. Dan ternyata banyak sekali web yang menyediakan layanan secara gratisan, diantaranya Photobucket, servimg, dan layanan gratis lainnya. Atau jika Anda sudah memiliki account gmail Anda bisa mengaktifkan googlepages dan mengupload file photo disana, atau bisa juga dengan menggunakan layanan Picasa dengan menggunakan account gmail juga.

20. Namun disini saya menggunakan Picasa dengan account google saya.

21. Setelah gambar terupload Lihat dan klik kanan gambar anda, pilih “view image info”. Location adalah URL banner anda. (http://url banner anda.gif)

Memasang Banner Di Blog

22. Setelah anda mendapatkan URL banner anda, sekarang tinggal memasangnya di BLOG.

23. Login ke BLOG anda masuk ke: Rancangan > Elemen Laman > Tambah Gadget > pilih HTML/JavaScript.

24. Isikan url alamat yang ingin anda tuju dan url banner anda. Copy/pastekan url di bawah ini ke dalam “Konten”. Judul terserah diisi apa tidak.

       <a href="URL-YANG-DITUJU" title="TEKS-YANG-MUNCUL"><img src="URL-BANNER-ANDA" alt="" /></a>

       URL-YANG-DITUJU = alamat web yang ingin anda tuju saat mengklik banner.

       TEKS-YANG-MUNCUL = teks akan muncul saat kursor diarahkan ke banner.

       URL-BANNER-ANDA = url banner anda.

       Contoh :

       <a href="http://blujer.blogspot.com" title="blujer blog"><img src="https://lh4.googleusercontent.com/_D2wo5l8AiU8/TZVyMnMsXHI/banner01.gif" alt="" /></a>

25. Setelah itu pilih simpan. Lalu pilih simpan lagi di Elemen Laman.

Lihat BLOG Dan Selamat Banner Telah Terpasang Di BLOG Anda