Please visit us : DAFTAR ISI http://www.indoVirta.

tk Tentang e-book ini Install Program Mengenal Wilayah Kerja Mendesain Banner Dengan Wizard Mendesain Banner Tanpa Wizard Mendapatkan kode html Penutup 2 3 6 9 12 19 20

http://www.indovirta.tk

Page 1

Please visit us : TENTANG E-BOOK INI http://www.indoVirta.tk EBook: CARA CEPAT MEMBUAT BANNER GIF UNTUK BLOG/WEB dibuat bagi anda yang ingin mengetahui bagaimana caranya mendesain sebuah banner dengan format gif. Tentunya ebook ini dibuat bagi anda yang ingin menggunakan cara sederhana dalam hal mendesain tetapi mendapatkan hasil yang optimal. Software yang digunakan untuk mendesain banner ini tentunya kami cari yang paling sederhana yaitu Easy GIF Animator. Anda akan saya bimbing mendesain banner mulai dari menggunakan wizzard sampai dengan mendesain banner tanpa wizard. Diharapkan setelah ini anda bisa mendesain lebih baik dari saya. Semoga ebook sederhana yang saya buat dengan dua versi bahasa ini dapat bermanfaat bagi anda semua. Hormat Kami, Sanov-Indopay Team.

http://www.indovirta.tk

Page 2

Please visit us : http://www.indovirta.tk

INSTALL PROGRAM Anda dapat mendownload software easy gif animator di http://adf.ly/1zpPz. Setelah anda mengekstrak filenya ikuti proses penginstalan program tersebut seperti langkah-langkah di bawah ini. 1 Klik file egifan4p_full sehingga muncul tampilan di bawah ini. Klik next untuk melanjutkan

Centang I accept the agreement. Lalu klik next

Anda diminta untuk memasukan password. Klik next untuk melanjutkan

http://www.indovirta.tk

Page 3

Please visit us : http://www.indovirta.tk 4 Jika password yang anda masukan benar maka akan keluar tampilan seperti di bawah ini. Klik next untuk melanjutkan.

Klik next untuk melanjutkan

Jika anda ingin menampilkan icon easy gif animation di dekstop centang Create a dekstop icon. Lalu klik next

http://www.indovirta.tk

Page 4

Please visit us : 7 http://www.indovirta.tk Klik Install untuk memulai proses instalasi

Klik next setelah proses instalasi selesai

Klik Finish

http://www.indovirta.tk

Page 5

Please visit us : MENGENAL WILAYAH KERJA http://www.indovirta.tk

Gambar diatas adalah wilayah kerja Easy GIF Animator 4 Pro. Sebelum memulai desain banner, maka terlebih dahulu kita mengenal wilayah kerja Easy GIF Animator 4 Pro. Mengenal Fitur Welcome Screen on Startup Fitur Easy Wizards Ada 3 fitur yang terdapat pada Easy Wizards yaitu : 1 Create New Animation yaitu sebuah fitur untuk membuat animasi baru dengan menggunakan wizard/gambar yang sudah ada. 2 Create Animated Banner yaitu sebuah fitur untuk membuat animasi banner dengan menggunakan sample banner yang sudah ada. 3 Create Animation Button yaitu sebuah fitur untuk membuat animasi button dengan menggunakan sample button yang ada. Fitur General Task Ada 2 fitur yang terdapat pada General Tasks yaitu : 1 Create New Blank Animation yaitu sebuah fitur yang digunakan untuk membuat animasi baru tanpa menggunakan sample 2 Open Existing Animation yaitu membuka file animasi yang telah dibuat. Mengenal Menu Easy GIF Animator Pro 4

http://www.indovirta.tk

Page 6

Please visit us : Menu File terdiri dari beberapa sub menu yaitu : http://www.indovirta.tk

1 2 3 4 5 6 7 8 9 10

New yaitu salah satu fitur untuk mendesain animasi baru. New banner wizard yaitu salah satu fitur mendesain animasi baru dengan menggunakan sample dari software. New button wizard yaitu salah satu fitur mendesain animasi button dengan menggunakan sample dari siftware Open yaitu fitur untuk membuka file yang tersimpan di direktori. Save yaitu fitur untuk menyimpan lembar kerja. Save As yaitu fitur untuk menyimpan lembar kerja pertama kali dan memberikan nama file yang akan di simpan Export To AVI yaitu mengekport file yang telah kita buat ke format AVI Export To Flash yaitu mengekspor file yang telah kita buat ke format SWF Send Via E-Mail yaitu fitur untuk mengirim hasil file ke email. Exit yaitu fitur untuk keluar dari aplikasi

Menu Edit terdiri dari beberapa sub menu yaitu :

http://www.indovirta.tk

Page 7

Please visit us : Menu Frame terdiri : http://www.indovirta.tk

Menu Tools terdiri dari :

1 2 3 4 5

Preview adalah salah satu fitur untuk melihat tampilan animasi dengan menggunakan aplikasi Preview in Web Browser adalah salah satu fitur untuk melihat tampilan animasi dengan menggunakan jendela browser seperti internet eksplorer Create Image Effect yaitu salah satu fitur untuk memberikan effect pada gambar. Create Animated Text yaitu salah satu fitur yang digunakan untuk memberikan effect pada text. Generate HTML Code : salah satu fitur untuk menampilkan kode HTML animasi yang telah kita buat.

http://www.indovirta.tk

Page 8

Please visit us : MENDESAIN BANNER DENGAN WIZARD http://www.indovirta.tk Ada 2 cara untuk memulai desain banner dengan wizard yaitu : 1 Mengklik Create Animated Banner pada jendela Welcome Screen on Startup. 2 Melalui menu file, lalu klik sub menu New Banner Wizard.

Pada Banner Wizard ada dua pilihan untuk membuat ukuran banner yaitu : 1 Selected standar size yaitu ukuran banner telah ditentukan oleh aplikasi 2 Specify Custome Size yaitu ukuran banner ditentukan oleh kita. Disini saya menyarankan untuk memilih standar size dengan ukuran 468 x 60. Lalu klik Next. Selanjutnya akan dihantar pada jendela Banner Background. Pada jendela ini ada 3 pilihan yaitu Simple Color, Gradient Color, Picture or Text.

http://www.indovirta.tk

Page 9

Please visit us : http://www.indovirta.tk Disini saya memilih Gradient Color. Color 1 saya pilih warna putih dan color 2 saya pilih warna hitam. Lalu klik Next.

Pada option Text 1 saya menuliskan You start with $100 in your VirtaPay account and it's free. Option How To Show merupakan animasi text pada saat awal tampil, disini saya pilih Slide in from Right. Option long to show merupakan lamanya teks ditampilkan, disini saya memilih 5 sec, dan How To Hide merupakan animasi teks yang ditampilkan setelah penayangan selama 5 detik, disini saya memilih Fade Out. Option Text 2 saya menuliskan Earn up to $20 per day in your account for participating. Untuk animation teks saya samakan dengan animasi teks pada option text 1. Pada Option Text 3 saya menuliskan Get a $25 bonus for each new user you refer. Untuk animation teks saya samakan dengan animasi teks pada option text 1. Selanjutnya klik Next sehingga muncul tampilan jendela dibawah ini.

http://www.indovirta.tk

Page 10

Please visit us : Selanjutnya klik Save Banner To File. http://www.indovirta.tk

Pada file name tuliskan nama filenya. Misanya latihan1. Lalu klik Save.

Untuk melihat hasilnya anda bisa mengklik menu Animation sub menu Animate atau dengan menekan icon atau . Kekurangan membuat banner dengan option Create Banner Animation Wizard adalah kita tidak bisa menyisipkan gambar dan batas maksimal teks hanya 3 teks saja.

http://www.indovirta.tk

Page 11

Please visit us : MENDESAIN BANNER TANPA WIZARD http://www.indovirta.tk Kelebihan mendesain banner tanpa wizard adalah kita bisa menentukan bentuk animasi sesuai dengan keinginan kita. Disini saya akan memandu anda dengan langsung ketingkat mahir. Bukalah aplikasi Easy GIF Animator 4 Pro. Pada jendela Welcome Screen on startup anda klik Create New Blank Animation.

Langkah awal klik icon disebelah kanan layar kerja anda atau bisa juga melalui Menu Frame sub isenrt blank frame sehingga muncul jendela Insert Blank Frame.

Pada Position and Size untuk kolom Width saya menulis angka 468 dan Height saya memilih angka 60. Klik Ok.

http://www.indovirta.tk

Page 12

Please visit us : http://www.indovirta.tk

atau Langkah kedua kita membuat background frame. Caranya adalah klik icon Rectangle Tool. Lalu arahkan ke frame yang berwarna putih dan klik satu kali. Sehingga muncul jendela Special Fill. Pada option Select Fill Type saya memilih option Picture or Text. Kemudian memimilih option Tile. Terakhir klik OK.

http://www.indovirta.tk

Page 13

Please visit us : http://www.indovirta.tk

Langkah ketiga adalah saya memasukan logo virtapay. Caranya adalah klik icon atau Insert Image (Ctrl + I) sehingga tampilannya seperti di bawah ini.

Perhatikan, saat ini logo berada dalam animasi garis. Klik icon atau default mode, selanjutnya klik frame 1 yang telah kita beri background. Selanjutnya klik frame 2. Anda bisa melihat antara frame 1 dan 2 ada perbedaan bacground. Jadi kita harus samakan backgroundnya. Caranya adalah : klik icon dan klik frame 2 sehingga muncul jendela Speciall Fill. Lalu klik OK. Sekarang frame 1 dan 2 telah memiliki background yang sama.

http://www.indovirta.tk

Page 14

Please visit us : http://www.indovirta.tk

Langkah ke 4 saya ingin menambahkan tulisan VirtaPay tanpa animasi disebelah logo Virtapay dengan 2 jenis. Caranya adalah klik icon sehingga muncul jendela Insert Text. Pada kotak teks saya menulis teks Virta yang berwarna hijau dan selanjutnya klik OK.

Perahatikan teks Virta dikelilingi oleh garis putus-putus yang bergerak. Arahkan mouse anda ke teks Virta dan drag mendekati logo. Sehingga tampilannya menjadi seperti di bawah ini.

http://www.indovirta.tk

Page 15

Please visit us : http://www.indovirta.tk Lakukan untuk penulisan kata Pay dengan metode diatas sehingga hasilnya menjadi seperti di bawah ini.

Langkah kelima kita membuat teks animasi. Caranya adalah dengan mengklik icon atau Create Text Effect sehingga muncul jendela seperti di bawah ini.

Tulis You start with $100 in your Virtapay account and its free. Untuk option How to Appear saya memilih metode Type. Untuk option How long to show saya memilih 4 sec dan pada option How to Hide saya memilih Slide Out. Perhatikan bahwa jarak antara tulisan VirtaPay dengan You start with $100 in your VirtaPay account and its free belum di atur. Untuk mengaturnya klik tab Customize Appear Effect dan Customize Hide-Effect.

http://www.indovirta.tk

Page 16

Pada tab Customize Effect, centang Custome Position. Pada X Position saya memasukan angka 55 pada X Position dan 36 pada Y Position. Kolom ini berfungsi untuk mengatur letak tulisan You start with $100 in your VirtaPay account and its free agar terlihat rapi. Pada tab Customize Hide Effect, pada option Custom position saya memasukan angka 36. Sehingga hasilnya adalah seperti berikut :

atau preview. Hasilnya sesuai dengan yang kita inginkan. Untuk mencoba hasilnya klik icon Lalu bagaimana cara menambahkan teks animation berikutnya ? Perhatikan jendela kerja di bawah ini. Perhatikan Frame disamping ini. #1 disebut dengan fame 1, #2 disebut dengan frame 2 begitu selanjutnya. Klik kanan Frame 2. Pilih option copy. Geser scroll ke bawah sampai ketemu frame paling akhir. Klik kanan frame tersebut dan pilih option paste. Langkah berikutnya adalah : klik icon sehingga muncul jendela CreateText Effect. Tuliskan teks Earn Up to $20 day in your account for participating.

http://www.indovirta.tk

Page 17

Please visit us : http://www.indovirta.tk

Atur tata letak teks pada tab Customize Appear Effect dan tab Customize Hide Effect. Sama seperti langkah sebelumnya. Lalu klik OK. Lakukan hal yang sama jika anda ingin menambahkan beberapa teks animation pada banner anda. Jika anda sudah merasa banner anda sesuai dengan yang anda inginkan simpanlah hasil kerja anda. Caranya adalah : klik icon atau klik File, sub menu file save as sehingga muncul jendela Save As. Pada opion File name tulis nama filenya. Disini saya menulis virtapay 5. Selanjutnya klik tab Save.

Sekarang banner anda selesai dan siap untuk digunakan. Untuk memasang di blog tentu anda sudah tahu dan saya tidak perlu lagi memberikan tutorialnya.

http://www.indovirta.tk

Page 18

Please visit us : http://www.indovirta.tk MENDAPATKAN KODE HTML Tutorial diatas bisa anda gunakan untuk membuat banner website anda. Andapun dapat melakukan sharing banner dengan relasi atau orang yang berniat untuk mempromosikan website anda. Untuk keperluan ini anda tentu harus memiliki kode html yang bisa dicopy oleh pengunjung website anda untuk di salin ke website/blog mereka. Hal yang harus anda ketahui, bahwa untuk bisa bertukar banner dengan metode ini anda harus memastikan bahwa banner anda sudah terpublish melalui website. Untuk mengetahui alamat URL publish banner anda, anda bisa melihatnya pada Control Panel option File Manager. Misalnya pada indovirta, banner ini bisa dilihat dengan alamat URL : http://www.indovirta.tk/images/virtapaypromo.gif. Nah pada website anda silahkan anda tulis kode berikut ini. <a href="alamat URL yang dituju" target="_blank"> <img src="alamat banner yang dipublish" width="468" height="60" border="0"> </a>

Misalkan : saya mempublish banner virtapay pada alamat : http://www.indovirta.tk/images/virtapaypromo.gif Saya ingin ketika orang mengklik banner tersebut maka dia akan terhubung ke : http://www.indovirta.tk Maka kode html nya menjadi : <a href="http://www.indovirta.tk" target="_blank"> <img src="http://www.indovirta.tk/images/virtapaypromo.gif" width="468" height="60" border="0"> </a>

http://www.indovirta.tk

Page 19

Please visit us : PENUTUP http://www.indovirta.tk Akhirnya saya dapat menyelesaikan ebook CARA CEPAT MEMBUAT BANNER GIF UNTUK BLOG/WEB. Saya merasa ebook ini masih jauh dari kesempurnaan. Oleh karena itu saya berharap akan ada penulis yang dapat membuat ebook yang jauh lebih sempurna dari apa yang saya buat. Semoga dengan ebook yang sederhana ini pengunjung website http://www.indovirta.tk dapat bertambah wawasannya dan bisa lebih kreatif dari apa yang saya ajarkan melalui ebook ini. Sehubungan ebook ini dibuat untuk penjualan pada DDP 1 virtapay, maka jika anda merasa ebook ini membantu anda, harap memberikan voting dengan mengklik bintang 5. Semoga http://www.indovirta.tk bisa menjadi website pertama bagi merchant virtapay yang berasal dari Indonesia. Hormat Saya, Mr. Sanov Indopay Team

http://www.indovirta.tk

Page 20