Handout 2 Banner dan Logo

1

Handout 2 – Banner dan Logo I. Pendahuluan Banner dan Logo adalah dua cara untuk mempromosikan website. Banner dapat di-exchange artinya dipertukarkan dengan website lain yang bersedia menempatkan banner website kita. Kali ini anda akan belajar merancang banner dan logo dengan menggunakan dua software berikut, yaitu : Banner Maker Pro Versi 6 dan Logo Creator atau AAALogo. Banner Maker Pro digunakan untuk memudahkan dan mempercepat pembuatan banner karena dilengkapi dengan sarana / petunjuk tahapan pembuatan. II. Instalasi Banner Maker 1. Pada CD Software Pendukung yang sudah diberikan, double klik pada Banner_maker_pro_6.rar, hingga terbuka jendela baru yang didalamnya anda klik Banner Maker Pro 6.exe

2. Tekan Next

3. Pilih “I Accept The Agreement” dan Tekan Next

Marketing Department Only

PDF created with pdfFactory Pro trial version www.pdffactory.com

2

Handout 2 – Banner dan Logo

4. Tekan Next tiga kali

Tekan

5. Tekan Install dan tunggu hingga proses install selesai (hingga muncul tahap selanjutnya). Ketika proses selesai, tekan Finish



3


6. Ketika banner maker terbuka. Proses instalasi selesai.

III. Cara Pembuatan Banner Ingat : setiap tahap dapat anda pergunakan jika perlu, jika merasa tidak perlu beberapa tahap dapat dilewati dengan menekan NEXT untuk melanjut ke tahap selanjutnya dan PREVIOUS untuk kembali ke tahap sebelumnya. Atau anda dapat menekan tab atas seperti Home, Size, dst untuk meloncat-loncat tahapan jika diperlukan.

1. Tekan Tombol Begin

1.6

1.1

1.5 1.2

1.3

1.4

1.7

1.1 : Menu bantuan penggunaan banner maker pro yang telah disediakan 1.2 : Tombol untuk membuat proyek kerja yang baru 1.3 : Tombol untuk membuka proyek banner yang sebelumnya telah ada 1.4 : Tombol untuk melakukan preferensi setting pada banner maker sesuai keinginan anda 1.5 : Tombol untuk memulai proyek banner anda 1.6 : Menu Profil Banner Maker Pro



4


1.7 : Tempat Sampah untuk membuang semua objek, text dan gambar yang ada hanya dengan menyeretnya saja.

2. Pemilihan Ukuran Banner yang akan digunakan (Banner Size). Jika sudah, tekan Next.

2.1

2.2

2.1 : Merupakan ukuran-ukuran banner yang telah disediakan dan siap pakai. 2.2 : Digunakan jika anda ingin menentukan ukuran banner sendiri (Secara Manual).

3. Tahap selanjutnya ialah memberikan background / gambar latar dari banner. Jika sudah tekan Next, untuk kembali ke tahap sebelumnya tekan Previous.

3.3

3.4

3.1 3.2

3.1 : Jika background banner hanya berupa satu warna 3.2 : Background berupa gambar yang telah disediakan atau gambar dari anda sendiri, tekan “Add Background Image” untuk memasukkan gambar dari computer ke dalam banner. “Show All Background” adalah pilihan



5


ketika anda ingin melihat semua background yang telah disediakan dan “Match Image Size Only” adalah pilihan untuk melihat background yang sesuai dengan ukuran banner yang telah kita tentukan sebelumnya. 3.3 : Background berupa gradasi 2 warna misal : dimulai dari warna Hijau ke warna putih. Number of Color adalah jumlah / besar jarak perubahan warna gradasi tersebut. Style adalah arah warna yang akan tergradasi apakah vertical atau lainnya. 3.4 Shape adalah bentuk dari background yang telah kita tentukan.

4. Memberikan Garis di sekitar banner.

4.3

4.5

4.1 4.4 4.2

4.1 : Bevel adalah efek timbul 3 Dimensi / seperti relief, maka bevel inner adalah efek timbul ke dalam. (jika dalam bentuk nyata, akan mirip seperti lubang) 4.2 : Bevel outer adalah efek timbul ke luar yang merupakan kebalikan dari bevel inner. 4.3 : Adalah garis tipis, akan terlihat jika bevel inner atau outer tidak aktif. 4.4 : Besar kedalaman Bevel dan atau Garis 4.5 : Untuk warna garis pada atas banner yang akan tampak pada fitur bevel 4.6 : untuk warna garis pada bawah banner yang akan tampak pada fitur bevel juga.

5. Memberikan tambahan bentuk/objek untuk banner. Untuk memulai tekan “New Shape”. Setiap fitur yang ada pada tahap ini dapat dikombinasikan satu sama lain sehingga menghasilkan efek banner yang berbeda. Eksplorasi sangat penting untuk menambah pengetahuan software.



6


5.1

5.3

5.4

5.2 5.5

5.1 Untuk merubah bentuk tipe/ objek, select from the list of shape types. 5.2 Merubah ukuran objek dengan me-setting tinggi dan lebar objek. 5.3 Edge color and width merubah warna dan lebar dari garis luar objek. Untuk membuat objek tanpa garis, set warna edge sama dengan warna interior. Untuk merubah bentuk interior, pilih pola interior. Secara default, warna interior adalah putih. Warna dapat diubah atau dihilangkan. 5.4 Dalam penggunaan warna, sebuah gradasi 2 warna dapat digunakan juga. Untuk menggunakan gradien, tekan pada “gradient check box” pada sebelah kanan layar. 5.5 Untuk meletakkan objek pada tengah banner secara vertical atau horizontal, tekan kotak pada box sebelah kanan layar tepatnya dibawah gradient. · · ·

Tip #1: untuk membuat button/tombol bulat/oval, masukkan objek circle/ellipse ke banner, masukkan text pada objek, dan simpan dengan format GIF dengan warna background menggunakan warna transparent. Tip #2: untuk membuat garis lurus, gunakan objek rectangles dengan lebar / width sebesar 1 atau 2. Tip #3. Round Percentage (%) bekerja dengan objek Rectangle (kotak). 0% akan membuat kotak dengan sudut lancip. Semakin besar persentase akan makin menumpulkan sudut dari kotak tersebut. 100% akan membuat kotak menjadi ellipse.

6. Memberikan Gambar seperti clipart atau logo pada Banner. Gambar dapat berformat JPEG, BMP, atau GIF. Untuk memulai, tekan “Add Image button”.



7


6.1

6.2 6.3

6.1 Untuk menentukan ukuran gambar, tekan pada height dan width. 6.2 Ketika gambar telah dimasukkan, transparansi gambar dapat diubah untuk dapat menimbulkan efek bayangan background. Untuk membuat gambar transparan, naikkan besar transparansi dari 0 to 100 dimana 0 adalah nyata and 100 adalah full transparan. 6.3 Secondary Transparency memberikan tingkata / level transparansi pada efek yang berbeda. Bevel Width adalah lebar bevel yang bekerja ketika tipe Transparency adalah Bevel.

7. Menambahkan Text pada Banner



8

Handout 2 – Banner dan Logo 8. Memberikan efek pada text yang telah atau baru dimasukkan pada proses no.7. Disini dapat mengubah efek 3D texy, gradasi warna text, garis text, bayangan, dsb.

9. Memberikan efek pada text dengan merubah sudut text.

10. Memberikan animasi / pergerakan pada banner.



9


10.1 One Step Animation adalah animasi statis (satu frame). Pilih 25 jenis animasi dan simpan banner. One Step Animation cara termudah memberikan animasi pada banner. 10.2 Frame By Frame Animation untuk membuat animasi dengan beberapa banner berbeda kemudian menggabungkan untuk membuat efek berbeda. 10.2.1 To create an animated banner using frame by frame animation, follow these steps:

1. 2. 3. 4. 5.

Buat file .gif dan masukkan menggunakan “Add Image”. Set kecepatan frame animasi untuk setiap frame. Set refresh frame animasi untuk setiap frame. Tentukan jumlah loop. Simpan banner.

11. Pada tahap ini, anda dapat Menyimpan Pekerjaan anda atau meng-output hasil pekerjaan anda. Penjelasannya sebagai berikut:



10


11.1 Save Tab Ketika banner telah selesai, pekerjaan dapat disimpan. Dengan menekan tombol Save, pilih format (BMP, GIF, JPEG, or TIFF) , tentukan nama dan tekan save. Banner dapat digunakan seperti sebuah gambar pada umumnya. 11.2 Graphic Options. Pilihan untuk Bitmaps adalah kemampuan membuat bitmap dalam format 8 atau 16 bit pixel. Pilihan JPEGs termasuk ke dalam format 8 or 24 bit pixel, dengan kualitas kompresi yang dapat memodifikasi kualitas dan ukuran gambar. Dan kemampuan Progressive Encoding yang membuat banner dapat muncul penuh pada web browser. Pilihan GIFs adalah untuk Transparansi, warna Transparan dan memasukkan unsur animasi. 11.3 Preview Untuk melihat banner image pada web browser, tapi simpan banner terlebih dahulu, kemudian tekan pada on Preview in Web Browser. Banner akan tampak pada default web browser. 11.4 Send via E-Mail. Banner yang telah disimpan, dapat dikirim lewat email. 11.5 FTP to WebSite Banner yang telah disimpan, dapat dikirim ke website menggunakan FTP. Untuk men-set FTP situs anda, tekan Options pada Home tab. 11.6 Create HTML Link Code Banner dapat dirubah dalam bentuk kode HTML. Untuk membuat HTML code muncul pada banner atau web, tekan pada Link Image to WebSite/WebPage setelah banner disimpan. Setelah memasukkan website da informasi directory / folder, kode HTML banner akan dibuat. 11.7 Create Mouse-Over



11

Handout 2 – Banner dan Logo mouse-over effects bekerja seperti perubahan warna banner ketika pointer mouse melewati banner, tekan pada “Create Mouse-Over JavaScript” tentunya setelah banner disimpan, dan memiliki banner lain sebagai gambar mouse over. Karena mouse over umumnya memiliki dua efek tombol. Dimana satu tombol sebagai as warna regular, dan warna lainnya sebagai warna yang muncul ketika mouse melewati banner. Banner dapat pula me-link / terhubung ke suatu file / halaman web. 11.8 Create Banner Ad Rotator Jika ingin banner berubah setiap saat atau sesuai interval waktu yang ditentukan setiap kali web dibuka, tekan pada “Create Banner Ad Rotator”. Banner Ad Rotator akan membuat kode JavaScript yang dapat ditempatkan pada kode HTML di halaman web yang akan memutar banner anda bergantian. 11.9 JPEG Compress JPEG Compressor akan mengurangi ukuran besar file jpeg sehingga gambar lebih cepat terbuka/muncul. 11.10

GIF Compress

GIF Compressor mengurangi ukuran besar file GIF sehingga gambar lebih cepat terbuka/muncul

12. Anda dapat mengkombinasikan semua fitur yang telah disediakan untuk dapat menghasilkan banner yang berbeda dan orisinil buatan anda. Sekarang tinggal kreasi Anda yang bekerja.



Handout 2 Banner dan Logo

Recommend Documents