Langsung ke konten utama

Membuat Banner dengan Fireworks

Bagaimana membuat 'banner animasi' dengan format .gif yang sederhana tapi menarik untuk website kita. Sebagai tools yang mudah digunakan adalah menggunkan Adobe Fireworks.
Berikut langkah-langkah membuat banner animasi sederhana

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!














Komentar

Postingan populer dari blog ini

How to design your webstore with Blogger

Introduction Web Store Klasifikasi Web Store Aspek-Aspek penting dalam men-design sebuah Website Memahami HTML untuk Blogging Pengenalan HTML Membuat CSS Menyisip Program Javascript Membuat Website Sederhana dengan Dreamwever Teknik Memanipulasi Gambar Menggabungkan Gambar dengan Fireworks Membuat Banner dengan Fireworks Trik Blogging Blogspot vs Wordpress Memahami template di Blogspot Bekerja dengan file external dari Free Hosting Membuat Web Store dengan Blog SEO untuk Google

Aspek-Aspek penting dalam men-design sebuah Website

1. Konsep Sistem Perlunya konsep dalam pembuatan sebuah website merupakan hal yang sangat penting bila website yang akan kita buat tidak hanya sekedar asal publish saja. Dari fitur-fitur yang akan dibuat sampai bagaimana sistem maintenance untuk website tersebut kedepannya merupakan hal-hal yang perlu diperhatikan. 2. Kemudahan Akses Kemudahan mengakses sebuah website adalah hal yang perlu diperhatikan dalam pembuatan sebuah website, seperti pembuatan dan penempatan sistem navigasi yang tidak membingungkan user dalam mengakses website misalnya. 3. Kecepatan Akses Kecepatan disini selain dari server pendukung yang bagus dari tempat hosting website , tetapi dari website itu sendiri akan mempengaruhi kecepatan sebuah website, seperti penempaan image di sebuah website, buatlah sesuai ukuran yang diperlukan halaman website tersebut misalnya bukan file image yang besar yang hanya di perkecil saja. 4. Look and Feel Design Design yang menarik akan mengundang pengunjung website anda untuk ...