25 November 2007

Membuat Banner untuk mempercantik Website Anda


Pinjam Banner Riristore Web Store

Banner mungkin sudah tidak asing lagi bagi yang sudah malang melintang di dunia internet, karena setiap kita mengunjungi sebuah website pasti ada banner disana dan hampir semua website memasang banner.

Dan dari fungsinya sendiri banner ini bermacam2, ada yang hanya sebagai pemanis website saja sampai sebagai media untuk promosi dari website maupun produk-produk yang ditawarkan.

Pemasangannya sendiri dari yang hanya sekedar tukeran banner untuk sekedar promosi gratis ataupun untuk menambah trafik pengunjung ke website kita sampai ada banner-banner yang dijadikan bisnis dari sebuah website yang akan diperhitungakan bila kita memasang banner di website tersebut, seperti detik.com misalnya, kita akan di tarif jutaan rupiah untuk memasang banner disana.

Di postingan ini saya tidak untuk membahas bisnis banner dan peluang-peluang bisnis banner di internet :) tapi hanya memberikan sedikit trik bagaimana membuat 'banner animasi' dengan format .gif yang sederhana tapi menarik untuk website kita. Sebagai tools-nya saya menggunkan Adobe Fireworks, sedangkan untuk banner format lain seperti Adobe Flash mungkin di postingan selanjutnya.

Memang sekarang sudah tidak ada aturan khusus lagi untuk ukuran dalam hal pembuatan image banner, lain dengan dulu kalau buat banner kecil pasti ukuran yang diminta adalah 90 x 45 pixel atau kalau untuk main page sebuah website pasti 468 x 60 pixel... halah... bete. :)

Sudah lihat banner produk yang saya buat di Web Store yang saya buat di Riristore Web Store? atau banner yang ada di header postingan ini. ya saya akan coba sharing bagaimana membuat banner tersebut. Daripada bayar menggunakan jasa pembuat banner? :) lebih baik coba berkreasi sendiri kan?

Berikut langkah-langkah pembuatan banner tersebut :

Langkah-1

Buat file baru di Adobe Fireworks dan tentukan ukuran banner yang akan dibuat, untuk banner yang saya buat disini dengan ukuran 410 x 60 pixels

Karena image yang kita buat adalah untuk keperluan website, jadi untuk resolusi cukup dengan 72 pixels/inch saja.


Langkah-2

Setting file tersebut dengan format 'Animated Gif' dari properties yang ada pada bagian bawah lembar kerja.

Langkah-3

Buka file image yang akan kita gunakan di banner yang akan kita buat ini, kemudian 'drag' atau tarik ke file image animasi yang akan dibuat.


Langkah-4

Sebagai atribut tambahan masukkan Text melalui 'Tool' 'Text' yang ada di sebelah kiri lembar kerja.

Sampai sini kita telah selesai membuat image pertama dari banner animasi yang kita buat, untuk membuat image berikutnya adalah dengan membuat 'frame' baru.

Bagaimana membuatnya? coba anda lihat sebelah kanan lembar kerja anda dari deretan window yang ada buka window frames atau bila belum ada coba buka melalui
'Window' | 'Frames'

Langkah-5

Buat Frame baru untuk penempatan image berikut yang akan kita buat, dari tombol 'New/Duplicate Frame' yang ada di bawah Window Frame.


Langkah-6

Langkah selanjutnya dari frame yang baru ulangi Langkah-3 dan Langkah-4 dengan image dan tampilan yang berbeda tentunya.

Dan bila ingin ada beberapa tampilan di banner yang anda buat silahkan buat frame baru lagi untuk itu.

Langkah-7

Langkah terakhir adalah mengatur waktu tampilan (frame delay) dari setiap image yang ada di masing2 frame tersebut, dan untuk mengatur ini melalui window frame, click angka yang ada di sebelah kanan dari list frame yang ada kemudian rubah angka sesuai keinginan anda. Di banner yang saya buat saya setting dengan angka '300'


















Untuk animasi model lain silahkan dicoba, dengan:
Select Object yang akan dibuat animasi
kemuadian dari menu Modify | Animation | Animate Selection
Silahkan atur pergerakan animasi yang diinginkan!

















Selamat Mencoba!


14 komentar:

  1. boleh juga dicoba....mmmm softwarenya gratis gak ya...
    apa ada yang gratisan?

    BalasHapus
  2. @heru, silahkan berkresi...

    Software-nya yg trial gratis kok.. :) bisa di download dr web Adobe-nya.

    BalasHapus
  3. Fuuuntastic Mas Ipul, sy sdh coba buat & udah kelar, but sy coba masukin ke blog koq ngga bisa2 ya Mas, pls help...tq

    http://www.eaglesspirit.com

    BalasHapus
  4. Coba menggunakan external hosting yang free aja pak, seperti 'tripot' atau 'geocities', image-nya di upload dan contoh pasangnya spt ini: <img src="http://[url hosting]/img-banner.gif" height="54" width="370" />

    salam,

    BalasHapus
  5. Lebih bagus dan lebih gampang mana antara adobe firework dengan ulead gif animator, mas?

    BalasHapus
  6. @ferdi tda

    Mana lebih bagus mungkin relatif, kalau saya lihat hasil akhir yang diinginkan mau buat seperti apa dan kompresi yang terkecil yang saya pakai.

    Kalau gampang? kayaknya dua2nya sama2 gampang yah.. :) tapi terakhirkan lebih banyak yang menggunakan adobe flash sebagai pengganti banner2 image spt ini, karena lebih interaktif bisa menggunakan audio video misalnya.

    Salam.

    BalasHapus
  7. nice! gimana kalo untuk banner blogger link exchange ukurannya diseragamkan? Biar terlihat rapi jika tukeran link?

    Silahkan koment di blog saya tentang penyeragaman ukuran banner blogger di -> http://hakimtea.blogspot.com/2008/02/penyeragaman-ukuran-banner-blogger.html

    BalasHapus
  8. Saya cari-cari rupanya ada di blog ini, thanks mas tutorialnya.

    BalasHapus
  9. THANKS BRO.. akhirnya nemu disini toh.. good job..

    BalasHapus
  10. Wah, mas..thx tutorialnya ya...saya udah lama ni nyari2 tutorial bikin banner gini...skalian minta izin nge-link ke blog saya boleh tak? biar klo mo blajar2 lagi tinggal klik..ma kasih mas..

    BalasHapus
  11. mas gimana sih bikin postingan yang terpotong dengan "read more " atau "baca selengkapnya" thanks ya...

    email saya ya mas... please

    mania_batam@yahoo.com

    BalasHapus
  12. makasih mas infonya akn saya coba klo ada kelsulitan mohon dibantu yach !

    BalasHapus
  13. Hmm...
    Mas.., ada g' yang beneran gratisan??
    Alna mo dipake lama neyh, entar disuruh bayar lagi...
    :)

    Btw, postingan ney keren juga..
    Thax yang mas, dicoba dulu.

    BalasHapus
  14. http://kontraktorpartisipameranmurah1.wordpress.com
    http://partisipameranayu.blogspot.co.id
    http://kontraktorpartisipameranmurah2.wordpress.com
    http://kontraktorpartisipameranmurah3.wordpress.com
    http://kontraktorpartisipameran1.blogspot.co.id
    http://partisipameranmurah1.wordpress.com
    http://sewapartisiindonesia.blogspot.co.id
    http://partisipameran-gntec.blogspot.co.id
    http://sewapartisiindonesia.blogspot.co.id
    http://jualsewapartisipanelna.blogspot.co.id/
    https://sewapartisipameran1.blogspot.co.id
    http://sewapartisipamerangntec.blogspot.co.id/
    http://partisipanelphoto.blogspot.co.id/
    http://standpamerangoodnews.blogspot.co.id/
    http://partisipameran3.wordpress.com
    http://partisipameran4.wordpress.com
    http://partisipameran5.wordpress.com
    http://partisipameran6.wordpress.com
    http://kontraktorpamerantangerang1.blogspot.co.id/
    https://youtu.be/8W6NOqK6LBk
    http://partisipameran2.wordpress.com
    https://partisipameran1.wordpress.com/
    http://pusat-penyewaan-partisipameran.blogspot.co.id/
    https://prezi.com/v2nxdmpnzfou/partisi-pameran-085100463227/
    http://sewa-partisi.blogspot.co.id/
    http://kontraktorpartisipameran1.blogspot.co.id/
    http://kontraktorpartisipameranmurah1.weebly.com/
    https://partisipameranjakartatangerang.wordpress.com/
    https://www.linkedin.com/in/partisi-pameran-28392413a/
    http://kontraktorpartisipameranmurah1.over-blog.com/
    http://partisipameranratuayu.blogspot.co.id/2016/05/partisi-pameran-standar.html
    https://jualsewapartisipameranmoti.blogspot.co.id/
    https://jualanekatendaroder.wordpress.com/
    http://sewapartisign.blogspot.co.id
    http://goodnewstenda.blogspot.co.id/
    https://jualroder.wordpress.com/
    http://jualanekatendaroder.blogspot.co.id/
    http://jualanekatendagoodnews1.blogspot.co.id
    https://tendarodergntec.wordpress.com/
    https://www.linkedin.com/in/partisi-pameran-murah-aab839140/
    http://partisipamerangn.blogspot.co.id/
    https://tendaroderindonesia.wordpress.com/
    http://jualanekatendagoodnews1.blogspot.co.id/
    https://tendakerucutgoodnews.wordpress.com/
    https://jualriggingalumuium.wordpress.com/
    http://pabrik-tenda-murah.blogspot.co.id/
    http://pabriktendagoodnews1.blogspot.co.id
    http://anekatendagoodnews.blogspot.co.id/
    https://tendasarnavile.wordpress.com/
    https://tendasarnavilegntec.wordpress.com/
    https://tendasarnavileonline.wordpress.com/
    http://partisipamerantangerang.blogspot.co.id/
    http://jualtendapleton1.blogspot.co.id/
    http://sewapanelphoto1.blogspot.co.id/
    http://partisipameranmoti.over-blog.com/
    https://www.youtube.com/watch?v=ZS9J1z2qtOo
    https://youtu.be/dF-SWLpCTS8
    http://dijualtendagoodnews.blogspot.co.id/

    BalasHapus