1 Ebook Gratis dari www.jagowebsite.com

Setelah membaca dan mempraktekan isi dari ebook ini diharapkan anda mengerti

" Bagaimana membuat banner iklan untuk Bisnis Online Anda, banner iklan yang cocok dengan selera anda sendiri, Tanpa harus Keluar Uang untuk sebuah

Desain Banner .."

Oleh:

Joko Muryanto

www.jagowebsite.com

DILARANG KERAS MEMBAJAK ATAU MENGCOPY ISI

DARI EBOOK INI SEBAGIAN ATAU SELURUHNYA

Anda diperbolehkan membagikan Ebook ini kepada teman, saudara,

sahabat atau siapapun secara gratis

2 Ebook Gratis dari www.jagowebsite.com

Dengan panduan yang anda dapatkan disini anda bisa saja menghemat biaya puluhan ribu untuk Desain banner anda. Atau anda bisa saja membuka jasa pembuatan banner iklan.

Disamping belajar anda juga bisa mendapatkan penghasilan dari usaha Membuat banner. Apa saja yang akan anda pelajari dalam E-book Panduan ini:

Cara membuat banner menggunakan program Adobe Photoshop (program para desain grafis)

Cara menyiapkan dan membuat background banner yang biasa digunakan oleh kebanyakan banner iklan

Cara menggabungkan gambar ke dalam Banner

Cara membuat tulisan pada Banner

Cara memberi gaya (style) pada tulisan atau layer yang biasa anda lihat pada banner iklan

Cara menyimpan gambar banner anda kedalam format Jpg ataupun GIF

Cara membuat banner animasi dengan format gambar GIF

Cara atau teknik yang sederhana dalam membuat paduan warna dalam sebuah banner untuk anda seorang pemula.

Dan beberapa informasi lainnya yang bisa anda dapatkan dalam E-book panduan ini

Panduan ini Langsung ke Pokok Bahasan, Jika dirasa ada yang kurang paham dengan istilah-

istilah yang digunakan bisa mencari informasi di Internet.

3 Ebook Gratis dari www.jagowebsite.com

Bahasan 1.

Langkah pertama yang harus anda lakukan untuk bisa membuat banner adalah anda harus familiar dulu dengan program yang namanya Adobe Photoshop. Program ini merupakan program para desain grafis professional. Untuk mendapatkan program Adobe Photoshop ini anda bisa mendapatkannya gratis disini http://search.4shared.com/q/1/photoshop link ini adalah tempat para netter baik hati yang mau membagikan software photoshop. Atau mau yang resmi di websitenya http://www.adobe.com/downloads/ Berikut tampilan dari program Adobe Photoshop

Area Kerja Adobe Photoshop

Seringkali letak tool-tool (palette) Adobe Photoshop sudah berubah dimodifikasi oleh pengguna sebelumnya. Untuk mengembalikan letak palette ini gunakan menu Windows -> Workspace -> Reset Palette Location.

Adapun penjelasan fungsi dari masing-masing panel adalah sebagai berikut

A : Menu Bar, berisi perintah utama untuk membuka file, save, mengubah ukuran gambar, filter dan lain-lain.

B : Option, berisi pilihan dari tool yang Anda pilih. Misalnya dipilih kuas/brush, maka ukuran/diameter brush ada di sini.

C : Gambar, menampilkan gambar yang sedang dibuat atau diedit.

D : Pallete Well, cara cepat untuk mengakses palet brushes, tool resets dan Layer Comps. Juga dapat digunakan untuk meletakkan palet yang sering digunakan.

E : Toolbox, berisi tool untuk menyeleksi dan memodifikasi gambar.

4 Ebook Gratis dari www.jagowebsite.com

F : Palette, berisi jendela-jendela kecil yang di dalamnya terdapat perintah dan pilihan untuk dokumen/gambar yang sedang dikerjakan.

Agar tidak terlalu bosan dengan penjelasan Teori yang panjang lebar, saya akan langsung mengajak anda praktek saja. Pada tutorial ini anda tidak harus menguasai seluruh fungsi tombol yang ada adobe photoshop. Yang harus anda ketahui, adalah fungsi yang akan kita dipakai untuk membuat Banner. Pada dasarnya banner untuk mempromosikan website ada beberapa ukuran yang umum dipakai dari yang kecil sampai yang besar. Satuan Ukuran yang dipakai adalah pixel.

Ukuran banner yang standar menurut Interactive Advertising Bureau disebut dengan IMU atau Interactive Marketing Unit (Pixel) ada 3 (tiga) bagian besar dari golongan banner, yaitu:

Rectangles dan Pop-Ups, ini biasanya digunakan untuk kepentingan membuat iklan banner yang sifatnya window pop-up. Adapun jenis-jenis ukurannya adalah sebagai berikut:

o 300 x 250 IMU / pixel (Medium Rectangle) o 250 x 250 IMU / pixel (Square Pop-Up) o 240 x 400 IMU / pixel (Vertical Rectangle) o 336 x 280 IMU / pixel (Large Rectangle) o 180 x 150 IMU / pixel (Rectangle)

Banner dan Buttons, ini merupakan ukuran yang paling banyak digunakan dan sering kita jumpai pada situs-situs di internet. Banner jenis ini biasanya dipasang pada bagian-bagian tertentu dari suatu situs di internet. Bisa dalam bagian suatu artikel atau pada bagian atas atau bawah dari situs. Adapun jenis-jenis ukurannya adalah sebagai berikut:

o 468 x 60 IMU / pixel (Full Banner) o 234 x 60 IMU / pixel (Half Banner) o 88 x 31 IMU / pixel (Micro Bar) o 120 x 90 IMU / pixel (Button 1) o 120 x 60 IMU / pixel (Button 2) o 120 x 240 IMU / pixel (Vertical Banner) o 125 x 125 IMU / pixel (Suare Button) o 728 x 90 IMU / pixel (Leaderboard)

Skycrapers, ini biasanya dipasang pada bagian samping (baik kanan atau kiri) dari suatu situs. Bentuknya selalu memanjang dari atas ke bawah, oleh karena itu disebut dengan skyscrapers. Cocok untuk situs-situs yang padat content, misalnya banyak berisi artikel atau tulisan yang panjang dan biasanya sampai bisa di scroll. Adapun jenis-jenis ukurannya adalah sebagai berikut.

o 160 x 60 IMU / pixel (Wide Skyscraper) o 120 x 600 IMU / pixel (Skyscraper) o 300 x 600 IMU / pixel (Half Page Ad)

Ukuran banner iklan ini juga ada kaitannya dengan harga pemasangan, jika kita mengiklankan bisnis kita menggunakan banner. Semakin besar ukurannya semakin mahal juga tarifnya.

5 Ebook Gratis dari www.jagowebsite.com

Bahasan 2.

Cara menyiapkan dan membuat background banner

1. Langkah pertama silahkan buka program Adobe Photoshop 2. Klik File New, muncul kotak dialog, atur lebar area kerja, sebagai contoh saya

menggunakan ukuran Width dan Height 250 x 250 pixel, dengan resolution 72 3. Klik OK

4. Muncul Halaman putih dengan ukuran yang telah kita buat tadi. Langkah selanjutnya

adalah membuat warna background 5. Silahkan aktifkan Path Selection Tool terlebih dahulu, kemudian klik

Set background Color.

6. Maka akan muncul kotak baru Color Picker, silahkan pilih sesuai selesa warna background yang mau dipakai, saya menggunakan warna hijau untuk backgroundnya.

7. Klik OK

6 Ebook Gratis dari www.jagowebsite.com

8. Selanjutnya silahkan tekan tombol Ctrl + Del untuk mengubah backgroundnya maka secara otomatis background berubah.

Pastikan posisi warna hijau ada dibawah.

Bahasan 3.

Cara menggabungkan gambar ke dalam Banner Agar banner kita lebih menarik perhatian, kita bisa menambahkan gambar sesuai tema website kita. Gambar bisa kita cari di internet dengan memasukkan kata kunci , misalnya saja “money”, “online bisnis” dan lain sebagainya. Setelah mendapat gambar yang sesuai langkah berikutnya adalah menggabungkannya ke dalam banner. Sebagai contoh saja saya menggunakan gambar berikut yang saya dapat dari internet.

Gambar diatas berformat .png yang background gambarnya tidak ada. Sehingga kita bisa langsung menggabungkannya ke dalam kesatuan (layer) banner kita.

7 Ebook Gratis dari www.jagowebsite.com

Sekarang kita buka gambar tadi menggunakan adobe photoshop, caranya File Open , kemudian cari gambar yang akan kita buka, klik Open.

Langkah – langkah menggabungkan gambar ke layer background.

1. klik Move Tool yang ada di tool box 2. klik pada gambar yang akan kita pindah

3. Tahan dan geser, arahkan pada background warna hijau. 4. Atur gambar agar sesuai dengan ukuran backround kita.

Klik, Tahan, Geser

Klik tahan dan perkecil ukuran gambar

dengan menggeser tanda panah ke bawah

Perbesar dulu dengan klik tanda ini

8 Ebook Gratis dari www.jagowebsite.com

Teman – teman juga bisa berkreasi sendiri menggunakan warna background dan gambar yang lain.

Bahasan 4.

Cara membuat tulisan pada Banner

1. Klik Tombol Horizontal Type Tool, kemudian letakkan tulisan pada Banner kita tadi

2. Tulis kata-kata sesuai selera tentunya yang menarik perhatian. Atur posisi tulisan agar terlihat bagus. Anda bisa menggeser juga menggunakan Move Tool, mengatur ukuran, warna dan juga jenis huruf.

Tekan enter

Hasilnya Kurang lebih seperti ini

Tanda layer yang aktif

ada blok biru

9 Ebook Gratis dari www.jagowebsite.com

3. Untuk mengedit posisi tulisan, gambar atau back ground pastikan terlebih dahulu anda

mengaktifkan layernya.

Bahasan 5

Cara memberi gaya (style) pada tulisan atau layer yang biasa anda lihat pada banner iklan

Kita lanjutkan dari bahasan 4 sebelumnya. Pastikan anda sudah mengatur posisi tulisan agar terlihat proporsional dan menarik termasuk jenis huruf warna dan juga ukurannya.

Nah saatnya kita memberi pemanis untuk tulisan kita, caranya

1. Aktifkan layer tulisan kita tadi, kemudian klik kanan pada posisi layer

2. Pilih Blending Options, maka muncul kotak :Layer style

Klik kanan disini

10 Ebook Gratis dari www.jagowebsite.com

3. Centang juga pada Stroke untuk menambahkan efek lapisan huruf, Cari ukuran untuk mendapatkan efek yang terbaik biasanya 2 atau 3 sudah pas, Jangan lupa klik OK

Terakhir silahkan anda kembangkan sendiri agar terlihat menarik.

“kuncinya hanyalah Menambahkan gambar, jenis huruf yang pas, memberi efek pada tulisan dengan Layer style (drop shadow atau Stroke) “

Hasil akhir seperti ini…

Centang pada Drop shadow untuk

menambah efek bayangan pada

tulisan

Ubah ukuran Distance dan Size,

untuk mendapatkan efek yang

menarik

Lihat perubahannya

Mengganti warna stroke

Mengganti ukuran stroke

Memasukkan gambar

pemanis yang sesuai tema,

Memasukkan gambar/

Tulisan Eksekusi

Menambahkan Huruf dan

memberi efek

11 Ebook Gratis dari www.jagowebsite.com

Bahasan 6

Cara menyimpan gambar banner dalam format Jpg ataupun GIF

Silahkan klik File Save untuk menyimpan ke dalam format PSD (photoshop)

Untuk menyimpan dalam format lain, misalnya JPG atau GIF File Save As Tulis nama file ubah Format ke format JPG Save

Bahasan 7

Cara membuat banner animasi dengan format gambar GIF

Dalam membuat Banner animasi caranya kita menggunakan bantuan software lain, sebenarnya bisa menggunakan adobe photoshop tapi hanya versi tertentu saja yang bisa digunakan.

Software yang akan kita gunakan adalah EasyGIFAnimatorProv4.9.0.40, Silahkan download Gratis di link ini

http://www.mediafire.com/download/v25uleuqhg3wl68/EasyGifAnimator.zip

Setelah anda download silahkan di extrax dan install software ini ke computer anda

Selanjutnya buka software yang telah kita install maka akan tampil halaman seperti ini

12 Ebook Gratis dari www.jagowebsite.com

Prinsip dari program ini adalah menampilkan semacam slide dari gambar-gambar yang ada, semakin banyak gambar yang kita masukkan dalam slide maka banner yang dihasilkan semakin menarik.

1. Siapkan terlebih dahulu gambar yang akan kita masukkan, minimal 2 gambar Sebagai contoh saya menggunakan gambar dari hasil tutorial diatas. Gambar yang kedua tanpa menggunakan “klik di sini”

Gambar yang digunakan harus sama ukurannya

2. Klik “ Create New Animation “, Muncul kotak “Animation Wizard” tambahkan gambar dengan klik “Add Image “

3. Klik Next, atur delay dari setiap gambar yang ada. Klik Next lagi

4. Klik Finish. Anda bisa mengatur delay dan melakukan preview kembali dengan memanfaatkan panel-panel.

5. Simpan hasil pekerjaan anda dengan Ctrl+S

Contoh web banner yg sudah saya buat dengan menggunakan panduan ini bias di lihat di

http://goo.gl/qXQas7

http://goo.gl/Rd81i4

Gambar yg ditambahkan

13 Ebook Gratis dari www.jagowebsite.com

Bahasan 8

Cara atau teknik yang sederhana dalam membuat paduan warna dalam sebuah banner untuk anda seorang pemula.

Kunci Utama dalam sebuah desain adalah perpaduan warna yang menarik, pas dan cocok. Bagi seorang pemula mungkin belum terbiasa dengan perpaduan warna ini. Tetapi jangan kuatir dengan memanfaatkan internet kita bisa mencari kombinasi warna-warna yang cocok untuk sebuah desain.

Berikut 12 website yang dapat menciptakan kombinasi warna

1. Color Explorer http://colorexplorer.com Satu set perangkat yang termasuk didalamnya warna sepadan dan koleksi warna. Dikembangkan dengan baik dan memiliki antarmuka yang spesial. 2. Software Color Palette dari ColourLovers Termasuk didalamnya perlengkapan foto untuk mengambil jenis warna dari suatu gambar, color picker yang canggih dan color theory wheel untuk memberikan anda inspirasi, dan anda dapat menyimpan warna-warna yang anda butuhkan. 3. Colour Lovers Website yang dikembangkan oleh Darius A Monsef IV. Pengunjung dapat mencari, me-rating, memberikan review dan mencintai warna dengan jumlah kombinasi yang sangat luas. Mereka telah menciptakan garis warna yang memikat, dalam warna dasar yang tampil menarik di berbagai ukuran. 4. Contrast-A Anda dapat bereksperimen dengan berbagai kombinasi warna yang bervariasi, me-review warna anda, mengakse dan menciptakan palet warna sendiri. 5. Daily Colorscheme Dapat membantuk anda menjelajah kombinasi warna baru yang mungkin belum anda pikirkan, juga merupakan sumber inspirasi warna yang sangat bagus. 6. Adobe Kuler Aplikasi website gratis untuk themes yang dapat memberikan inspirasi bagi desain anda. Apapun yang anda ciptakan, dengan Kuler anda dapat bereksperimen dengan cepat dengan berbagai variasi warna atau browse dari ribuan koleksinya. 7. Check My Color Memeriksa warna foreground atau background dengan kombinasi warna, serta memberikan anda pilihan untuk menentukan apakah variasi warnanya cocok untuk orang yang memiliki kelemahan dalam melihat. 8. Color Combos Anda dapat menemukan kombinasi warna yang sempurna bagi desain anda. Juga memungkinkan untuk anda memilih dan melakukan test kombinasi warna bagi website .

14 Ebook Gratis dari www.jagowebsite.com

9. Color Palette Generator Menjalankan salah satu css galeri yang terbesar, tentunya tidak ada alasan anda tidak dapat mengupload gambar dari galeri tersebut untuk melihat palet warna asli dan bagaimana menggunakan warna tersebut. 10. Colr.org Aplikasi yang cukup bagus untuk membantu anda memilah skema warna anda. Idenya cukup menarik, yaitu menggunakan gambar online dan kemudiak colr.org mengambil range warna dari gambar tersebut untuk membentuk suatu palet warna. 11. Color Schemer Online 2 Memiliki 16 kotak yang berisi ide warna yang sepadan, cukup mengambil sebuah warna dan secara otomatis akan menciptakan warna-warna yang sepandan untuk artwork anda. 12. Color Palette Generator Palet warna berbasis gambar, upload sebuah gambar dan aplikasi ini akan menciptakan skema palet warna untuk anda gunakan.

PELUANG USAHA

Ini adalah sekedar memberi ide usaha untuk para pembaca tutorial Ebook “ Panduan Buat Banner” . Anda bisa menawarkan Jasa untuk membuat sebuah Desain Banner. Bisa banner Header, Banner untuk promosi dengan ukuran standard.

Anda bisa membuka lapak/ tempat jualan di Facebook, Forum-forum diskusi seperti kaskus, atau membuat Blog khusus untuk Jasa anda

Anda bisa mematok harga untuk pembuatan banner promosi ini Rp.60.000 – 200.000 /banner, terkantung anda. Bisa juga dibedakan banner animasi dengan banner biasa.

Contohnya anda bisa menawarkan Jasa Desain Web Banner Animasi / Statik seperti ini Nama Produk : Web banner Animasi Tipe File : .gif Ukuran : Semua ukuran web banner yang lazim di gunakan Harga : Rp 45.000 Nama Produk : Web banner Statik Tipe File : .jpg Ukuran : Semua ukuran web banner yang lazim di gunakan Harga : Rp 40.000

Lumayan kan, Silahkan kreasikan sendiri ya?

“ Kumpulan Artikel dan informasi Bisnis Online” www.blogjoko.com

Jasa Vote +1 google plus untuk Website Anda

http://jasaGooglePlusID.blogspot.com

Harga termurah!!!

15 Ebook Gratis dari www.jagowebsite.com

DAFTAR PUSTAKA

agusalfa.blogspot.com Google.co.id http://goo.gl/Rd81i4 http://joesphotoshop.blogspot.com/2009/11/layer-style.html http://www.visigraphic.com/blog/12-website-yang-dapat-menciptakan-kombinasi-warna