Cara Membuat Banner Iklan Sendiri Untuk Blog dengan Adobe Photoshop

Hallo teman pembaca blog indravedia.com, di artikel kali kita akan membahas tutorial wacana cara membuat banner iklan animasi sederhana dengan adobe photoshop untuk kemudian ditempatkan di blog sebagai sebuah widget ataupun banner iklan sisipan di area postingan. Maksud banner iklan animasi di sini ialah berupa file gambar berformat gif. Dan dalam hal ini kita akan membuat banner dengan animasi karakter sederhana yang berkedip-kedip ibarat menyala, sehingga dibutuhkan dapat menarik perhatian para visitor untuk mengklik banner yang nantinya akan kita tempatkan di blog.

Adapun untuk kemudian teman mampu memanfaatkan banner ini sebagai iklan yang mana jikalau diklik akan mengarah ke sebuah link halaman, baik itu link affiliasi ataupun link menuju blog / halaman artikel teman yang lainnya yang ingin dipromosikan sehingga mendapat kunjungan lebih dari para visitor. Dan ibarat yang saya tuliskan di bab awal, di sini saya menggunakan Adobe Photoshop sebagai media pembuatan bannernya. Kenapa pakai Photoshop? Ya alasannya ialah pengen aja.. He, bercanda. Tentu saja alasannya tidak seegois itu. Alasannya yaitu alasannya ialah selain sebagai salah satu software desain grafis 2D yang banyak digunakan dan sudah sangat familiar, juga memang penggunaannya cukup mudah, dan mendukung juga untuk membuat gambar bergerak berformat gif sederhana, ibarat yang akan kita praktekkan berikut ini.

Baik, supaya lebih real di sini akan saya contohkan membuat banner iklan animasi karakter sederhana yang nantinya akan saya arahkan ke website / link affiliasi sebuah jadwal kursus online yang saya ikuti.

1. Buka program Adobe Photoshop-nya. Lalu buat dokumen gres dengan klik menu File > New. Di sini saya masih menggunakan Adobe Photoshop CS3.

2. Tentukan ukuran piksel dari banner yang akan dibuat. Untuk sidebar blog, basanya menggunakan ukuran 338x280 pixel, atau 300x250 pixel, atau untuk banner header biasanya berukuran 720x90 pixel. Tinggal diubahsuaikan saja mana yang ingin kita buat. Untuk kali ini saya memilih ukuran 338x280 pixel menyesuaikan dengan ukuran lebar sidebar blog.

Untuk lebih mempermudah, mampu dilihat deretan gambar panduan berikut ini.

 3. Masukkan gambar pendukung untuk mempercantik tampilan

 4. Berikan warna pada background dan isikan goresan pena dan material yang pendukung.

 5. Buat goresan pena CTA (Call To Action). "KLIK DI SINI" di bab bawah banner. Seperti nampak pada gambar di bawah ini.

 6. Klik pada menu Window > Animations. Maka akan muncul panel untuk mengatur animasi frame by frame. Klik pada frame 1, lalu klik tombol Duplicate Selected Frame, untuk memalsukan frame.

 7.  Setelah terduplikat, klik pada frame 2 (hasil duplikat). Lalu berikan efek blending pada goresan pena "KLIK DI SINI" pada frame 2. Klik kanan pada layer goresan pena KLIK DI SINI, lalu klik Blending Options. Pilih Stroke untuk menawarkan kesan tegas border pinggir pada tulisannya. Lebih jelasnya lihat gambar di bawah ini.

 8. Berikan durasi masing-masing 0.5 detik pada frame1 dan frame2 untuk menciptakan efek kedipan, jikalau animasinya diputar. Lihat ibarat gambar di bawah ini.

 9. Jika sudah, pribadi saja simpan bannernya dengan klik tombol File > Save For Web & Devices. Simpan dalam format GIF, lalu klik OK.

 10. Selesai

Alhamdulillah selesai. Sampai di tahap ini, kita sudah berhasil membuat banner iklan. Sekarang pribadi saja kita masuk ke tahap berikutnya, yaitu menempatkan banner tersebut di blog bab sidebar dan mengarahkannya (jika di klik) ke suatu halaman yang ingin dipromosikan, baik itu berupa link dari jadwal affiliasi ataupun link blog/artikel teman yang lain, dengan derma sedikit script perintah tentunya. Untuk kali ini, saya akan coba menyematkan sebuah link affiliasi dari salah satu jadwal Online Course yang saya ikuti.

Baik pribadi saja, kita mulai langkah-langkahnya:

1. Login ke akun blogger. Lalu klik tombol Entri Baru (Sama ibarat saat hendak membuat postingan baru).Sehingga tampillah halaman entri posting. Di sini kita akan mengupload gambar / banner yang telah kita buat tadi dengan Adobe Photoshop. Namun bukan berarti kita pribadi publish bannernya melalui halaman entri posting ini. Ini hanya kita gunakan sebagai media perantara untuk nantinya kita menerima link address dari gambar/banner tersebut. Tujuannya buat apa? Nanti akan kita lihat di langkah 3.
Sekarang upload dulu bannernya ke blog, lalu insert / masukkan ke halaman entri posting.

2. Setelah gambar masuk ke dalam halaman entri posting, klik kanan pada banner tersebut. Lalu klik pada pilihan Copy Link Location. Lalu pastekan (link-nya) di mana saja, mampu di notepad atau sekadar di-paste di new tab di address bar. Tujuannya cuma untuk menyimpan link gambar / bannernya. Nanti link addressnya akan kita copy paste kan lagi ke script perintah.

3. Kembali ke dashboard blogger, pilih menu tata letak / layout. Menuju bab sidebar, klik tombol Add Gadget, klik pada pilihan HTML/Javascript. Lalu copy script di bawah ini ke bidang yang tersedia. Ini ialah aba-aba HTML untuk mengarahkan banner iklan (jika diklik) menuju sebuah halaman yang dipromosikan.

<a href='http://www.belajaringgris.net/member/aff/go/rusman103' target='_blank' title='Belajar Bahasa Inggris Fun'><img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEios2arRVf_Em0UQdlzfusYV-EQEv1B9zlx792cVki6EIHBfpLlDo6CPyblWQcQHafZtFQrzZrATxXTm3hPd75BfVgqIzWmlBF2CM3UEMB6iOWNx4_6UK4Ua2RsBtEfZKlkMXXiLKbgdag/s320/ecompusoft.gif' alt='Belajar Bahasa Inggris Fun' border='0'height='280' width='338'/></a>

Keterangan:

• Tulisan merah ialah URL target, yaitu halaman yang akan terbuka jikalau bannernya diklik.
• Tulisan warna hijau ialah URL dari gambar / banner yang ingin ditampilkan. Kita buka lagi script yang tadi sudah dicopy-paste ke notepad. Copy kembali URL/Link tersebut, kemudian pastekan dengan menggantikan goresan pena hijau di atas.
• atur 'height' / tinggi dan width / lebar sesuai dengan ukuran banner, dalam hal ini height: 280 pixel dan width 338 pixel.

4. Jika dirasa sudah benar, dari mulai link target, link banner dan ukuran (lebar dan tinggi banner), pribadi saja klik tombol Simpan. Lalu tempatkan / geser widget di bab sidebar yang dikehendaki, di atas atau di tengah atau mungkin di bawah. Lalu simpan pengaturan. Dan lihatlah sekarang hasilnya. Jika langkah-langkahnya benar, maka di sidebar blog teman sekarang sudah terpampang secara terperinci sebuah banner iklan buatan teman sendiri. Ajiib.

***

Dan simpulan sudah pembahasan kita wacana cara membuat banner iklan sendiri untuk dengan adobe photoshop dan menempatkannya di sidebar blog. Saya pribadi berharap supaya postingan sederhana ini mampu menawarkan pencerahan kepada teman blogger sekalian yang ingin mempromosikan sebuah halaman melalui media banner yang diletakkan di sidebar atau di bab blog lainnya.

Dalam kasus ini, alasannya ialah banner yang kita buat ialah berupa iklan, tentu kita berharap akan banyak yang melihat dan mengklik banner tersebut supaya halaman yang dipromosikan mampu dikunjungi oleh lebih banyak orang. Salah satu cara untuk meningkatkan impresi dan jumlah kunjungan pada halaman yang dipromosikan di banner tersebut - yakni dengan membuat sticky widget, artinya kita membuat banner tersebut menjadi sebuah widget yang sticky, melayang dan tetap menempel tidak hilang dari pandangan walaupun layar di-scroll ke atas dan ke bawah sekalipun. Untuk lebih jelasnya, mampu baca artikel berjudul Cara Membuat Sticky Widget Pada Blog.

Baik, sekian saja artikel ini. Semoga bermanfaat bagi teman blogger semuanya. Sekian dan terima kasih. Salam