Cara Membuat Banner website , web banner, banner slide website

  • Published on
    09-Dec-2015

  • View
    12

  • Download
    0

Embed Size (px)

DESCRIPTION

step by step bagaimana membuat banner. Jasa pembuatan web banner murah

Transcript

  • 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 Menamba