Dumay Community


Komunitas Progaming, Software, Perbaikan Komputer, Gaming, Musik, dll
 
IndeksCalendarFAQPencarianAnggotaGroupPendaftaranLogin
Like Page
Tinggalkan Jempol Kalian di Forum INI


Similar topics
Login
Username:
Password:
Login otomatis: 
:: Lupa password?
User Yang Sedang Online
Total 1 user online :: 0 Terdaftar, 0 Tersembunyi dan 1 Tamu

Tidak ada

User online terbanyak adalah 10 pada Fri Aug 26, 2016 7:04 pm
Clock
Top posters
Admin
 
buginese
 
harex
 
suliswanto
 
Prisa
 
alijenggot
 
XXX
 
joecow
 
safana
 
ilmu komputer
 
Latest topics
» Kenalan Yuk Semua...
Wed Apr 30, 2014 10:33 am by Bagus Rio Dwi Mayvando

» Aplikasi Program TU Sekolah
Mon Apr 07, 2014 9:35 am by Admin

» ESET NOD32 Antivirus 5 Full Crak
Mon Apr 07, 2014 7:55 am by Admin

» Cara Install Anti Virus NOD32 Full Crak
Mon Apr 07, 2014 12:07 am by Admin

» Menampilkan File Flasdisk yang Terhiden
Sun Apr 06, 2014 8:53 pm by Admin

» bahasa pemprogaman Pascal
Thu Dec 19, 2013 11:13 pm by julpiyanur

» bahasa pemprogaman Pascal
Thu Dec 19, 2013 11:08 pm by julpiyanur

» bahasa pemprogaman Pascal
Thu Dec 19, 2013 11:06 pm by julpiyanur

» Membuat Folder Lock Sederhana
Sat Jun 22, 2013 10:12 am by DK.pujangga

My Banner
Kolom blog tutorial
Tukeran link yuuk..
Silahkan copas code dibawah ini,,



Share | 
 

 Membuat Animasi Banner Simple dengan Adobe ImageReady

Topik sebelumnya Topik selanjutnya Go down 
PengirimMessage
benks
Members
Members
avatar

Posts : 4
Join date : 05.06.09
Location : Cikarang -Bekasi

PostSubyek: Membuat Animasi Banner Simple dengan Adobe ImageReady   Sat Jun 06, 2009 10:53 am

Kita pasti udah sering melihat animasi banner yang menarik yang ada di sidebar blog bukan?. Dan pasti, sering kita ingin juga membuat animasi banner yang kita ingin-kan bukan?. Sebenar-nya banyak cara untuk membuat animasi ini dengan dukungan berbagai software-sofware yang canggih seperti Macromedia/Adobe Flash, Adobe After Effects, dan lain sebagainya yang membutuhkan penguasaan yang lebih rumit apalagi bagi pengguna komputer awam. Kenapa tidak menggunakan yang sederhana tapi masih mengizinkan kita untuk berkreasi seperti Adobe ImageReady saja?.

Sebelum kita mulai membuat animasi, kita harus sedikit memahami pengertian dari istilah-istilah yang berhubungan dengan animasi berikut ini:

* Animasi: Pergerakan atau tampil-nya objek secara simultan dan berurut dari posisi yang satu ke posisi yang lain, yang terdiri dari urut-urutan pergerakan objek tersebut.
* Frame: objek tunggal dari sebuah animasi, yang akan disusun dan ditampilkan secara berurutan untuk membuat animasi
* Tweening: proses pembuatan frame-frame tambahan diantara posisi frame pertama dan posisi frame terakhir yang menghasilkan transisi antar frame

Berikut ini kita akan mencoba membuat animasi banner dengan menggunakan Adobe ImageReady, yang biasa-nya sudah ter-install secara default pada saat kita meng-install Adobe Photoshop pada komputer kita.

#Mempersiap-kan file original dengan Adobe Photoshop:

1. Buat file baru dengan ukuran Width 200 pixel dan Height 80 pixel
2. Kreasi-kan file baru tersebut sesuai dengan keinginan kita dengan menambah-kan latar belakang berwarna berbeda, menambahkan tulisan, bisa juga dengan menambahkan gambar.
3. Untuk contoh ini, saya menambah-kan dua layer dengan warna berbeda, layer “bg1” dengan warna #FF0000 dan layer “bg2″ dengan warna #FFF799
4. Kemudian, saya tambahkan dua layer Text, layer dengan tulisan “Animasi Simpel” dan layer dengan tulisan “Banner Weblog“
5. Terakhir, saya membuat border (optional) sebagai pelengkap saja. Gambar berikut ini menunjukkan urut-urutan layer tersebut dalam Photoshop:


6. Simpan-lah file yang baru saja kita buat tersebut dalam format Photoshop dengan extension .PSD, agar dapat kita import dari ImageReady. Bagi yang ingin mendownload file original yang saya buat (dalam format .PSD), bisa download disini: http://www.savefile.com/files/1130043

#Membuat Animasi Dengan Adobe ImageReady

1. Jalankan aplikasi ImageReady
2. Setelah aplikasi ini terbuka, klik pada menu [File] – [Open] untuk membuka file original yang telah kita buat sebelumnya pada Photoshop. Tampilan pada ImageReady akan seperti pada gambar berikut ini:


3. Untuk seterusnya kita akan memfokuskan pada jendela Animation untuk membuat animasi yang kita inginkan. Skenario untuk contoh ini adalah: Tulisan “Animasi Simpel” akan berjalan dari kiri ke kanan, kemudian tulisan “Banner Weblog” akan muncul dan menghilang kemudian muncul lagi, kemudian latar belakang layer “bg1″ akan muncul bergantian dengan latar belakang layer “bg2″.
4. Dengan jendela Animation aktif, klik pada icon [Duplicates current frame] iconduplicateframe.gif satu kali untuk menambahkan 1 frame baru pada jendela Animation


5. Pengaturan Frame #1: Pada aplikasi ImageReady, klik pada frame #1 untuk mengaktifkannya dan klik pada layer text “Animasi Simpel” pada jendela layer, kemudian pada jendela Proyek geser tulisan tersebut ke kiri dengan menahan tombol Shift. Setelah itu, klik layer text “Banner Weblog” dan atur opacity-nya menjadi 0, demikian juga dengan layer “bg2” atur opacity-nya menjadi 0 pada jendela layer.


Tampilan pada jendela Animation akan seperti pada gambar di bawah ini:


6. Pengaturan Frame #2: Pada aplikasi ImageReady, klik pada frame #2 untuk mengaktifkannya dan klik pada layer text “Animasi Simpel” pada jendela layer, kemudian pada jendela Proyek geser tulisan tersebut ke kanan sampai tidak kelihatan lagi dengan menahan tombol Shift. Setelah itu, klik layer text “Banner Weblog” dan atur opacity-nya menjadi 100, demikian juga dengan layer “bg2” atur opacity-nya menjadi 100, dan pada layer “bg1” atur opacity-nya menjadi 0, pada jendela layer.


7. Kemudian dengan frame #2 masih aktif, klik pada icon [Tweens animation frames] icontweenframes.gif, untuk membuka jendela Tween, dimana kita bisa mengatur animasi dengan menambahkan beberapa frame secara otomatis diantara frame #1 dan frame #2, untuk contoh ini saya memberikan nilai 30 pada bagian [Frames to Add] untuk menambahkan 30 frame diantara frame #1 dan frame #2. Sebagai informasi, semakin tinggi nilai frame yang ditambahkan, maka proses pergerakan animasi akan semakin lambat tetapi akan semakin besar juga ukuran file animasinya.

8. Pada jendela Animation sekarang akan terdapat 32 frame (frame #1+ frame #2+ 30 frame tambahan dari tween) dan menampilkan pergerakan transisi dari frame #1 sampai pada frame #32


9. Selanjutnya, klik pada menu [File] – [Save Optimized As] untuk membuka kotak dialog penyimpanan file, dan berikan nama file-nya sesuai dengan keinginan kita (untuk contoh ini saya menggunakan nama file animasifilefinal.gif) dan pastikan kalau ekstensionnya itu .GIF
10. Selesai sudah, dan seterusnya kita bisa meng-upload-nya ke weblog kita. Berikut ini hasil final-nya:



Semoga bermanfaat, dan jangan lupa kasih komentar ya
Kembali Ke Atas Go down
Lihat profil user http://murah-web.co.cc
 
Membuat Animasi Banner Simple dengan Adobe ImageReady
Topik sebelumnya Topik selanjutnya Kembali Ke Atas 
Halaman 1 dari 1
 Similar topics
-
» Cara MenDesign Gear Dengan PhotoShop
» bercanda dengan LOGIKA
» [Blender] How to Cellshading
» [ASK] Gimana cara yang baik buat cuci helmet..??
» Modif suspensi v-ixion, bisa nggak?

Permissions in this forum:Anda tidak dapat menjawab topik
Dumay Community :: FORUM TEKNIK INFORMATIKA :: Forum Internet :: Forum Web-
Navigasi: