Info Bisnis Internet Untuk Para Karyawan (ibu pakar): Cara membuat Header dengan Animasi Bagian1.

Cara membuat Header animasi dengan Image Ready bagian 1

Cara Membuat Animasi Header Blog dengan Imageready CS2

Dalam postingan ini saya akan sharing cara membuat Header dengan latar belakang di buat animasi agar header di blog maupun di web kita tidak setatis dan agar lebih menarik.Sebenarnya banyak software untuk bisa dipakai untuk membuat animasi,Juga banyak situs penyedia pembuatan banner animasi yang bisa diedit jadi Header missal. Flas Fortex.com atau Cooltex.com. Namun pada kesempatan ini saya akan memandu cara membuat animasi dengan Image ready (kalau dikomputer anda atau di Warnet sudah ter install Photo Shop maka Image Ready Juga sudah ada di dalamnya) Kenapa Image Ready ? alasanya agar animasi yang kita buat bisa langsung dirubah ke format GIF.(Juga biasa ke Format HTML) yang bisa diterima oleh format di blogger (dan bisa langsung di upload ke blog kita).

Pertama bukalah program photoshop. dan tampilanya seperti gambar dibawah ini.

Prinsip kerja animasi di Photo Shop maupum Image Riady adalah memainkan sederetan frame2 yang ada di Palet animasi… Kalau di Flas Mx:Palet animasi fungsinya sama denga time line. Jadi frame2 tsb akan di aktipkan bergantian dengan durasi yang bisa diatur,sehinga pada layar gambar2 maupun text di frame seakan -akan bergerak.. seperti layaknya kerja rol pita Filem di bioskop.Ketika salah satu frame di aktipkan maka gambar dalam frame tersebut akan Nampak di layar. Dan karena pengaktipanya terus menerus (looping) maka di layar akan bergerak terus menerus sesuai durasi yang kita atur… Oleh sebab itu langkah awal untuk pembuatan header animasi ini ,kita akan mempersiapkan frame2 tsb. Dari baground frame maupun text2 yang kita perlukan untuk header kita.

1.Pertama Kita akan mempersiapakan Baground2 frame Header yang akan di animasikan.

1a. Langkahnya sbb: klik Menu File di menu bar lalu klik edit in ImageReady ( File > Edit in Image Ready )

Ket: gambar diatas adalah tampilan kayar Image Ready Cs2. Menu2 nya hampir sama dengan Menu2 PotoShop.CS2

Setelah berganti ke stage Image Ready …klik Menu di Menu Bar Klik file lalu klik New ….> ..(File>New )

1b .Selanjutnya Akan tampil lembar pengaturan Size frame seperti gambar dibawah ini.

Lalu atur lebar Frame layer sesuai lebar blog anda misal lebar blog anda 960 pxels maka size fram anda buat 960 x tingginya 140 pikel sesuai header yang anda ingini.( tapi jangan terlau tinggi … kalau terlalu tinggi loadingnya akan berat (lama)..) lalu klik Oke.

Frame yang masih polos akan tebentuk di stage /layar Image Ready seperti di gambar di bawah ini.

Kalau kta lihat hasilnya akan berbentuk kolom (persegi panjang ) seperti gambar di bawah ini .ukuran Frame ini adalah 960 pixelsx 140 fixels sesuai dengan ukuran header yang kita rencanakan.

Beground Frame diatas masih polos,Selanjutnya akan kita beri warna, juga effect2 layer Style yang kita filih untuk Baground ,juga text yang kita ingini sesuai nama key word blog kita untuk Frame 1.

1c.Partama atur warna Foreground color di tool bar…Klik menu di tool bar

Akan tampil layar pengaturan warna seperti gambar berikut

Pilih warna dasarnya dengan klik di bar berwana disamping missal biru, setelah itu klik wana yang anda pilih di kotak biru sesuai selera anda… gambar diatas hanya contoh dalam praktek kali ini ,saya memilh dasar warna merah. Untuk fram 1. Dengan style 3 diamond…seperti langkah selanjutnya

1d. Selanjutnya Klik Rectanglet ool di Too bar.

Lalu isikan ke Frame yang polos tadi dengan klik dan drag, sehingga tejadi bentuk sbb:

Selanjutnya:

Klik menu Layer di Menu bar lalu pilih Style layer lalu klik Gradient Overly…… >..(..Layer> Style layer> gradient Overly) akan muncul lembar pengaturan Gradient setting seperti dbawah ini.

Ada beberapa pilihan style gradient yaitu:linier,radial,angle,Diamond,Juga pemilihan pembalikan isi dan warna beground yaitu:Reverce… Dalam praktek anda bisa mencoba. masing2 perintah diatas…selanjutnya anda bias memilih sesuai keinginan anda.

Disini saya memilih style diamond seperti rencana diatas.pertama buat satu style diamond dulu seperti gambar berikut.

Karena saya ingin membuat Frame dengan style gradient Diamon 3 buah,maka saya akan membuat satu persatu. Mengulangi langkah2 sebelumnya ..sampai tercipta baground Frame 1 seperti gambar dibawah ini.

Simpan dulu Frame ini di drive anda missal di (My Document).. Tekan SAVE lalu namai file nya (namai saja Frame 1)

Buat lagi frame2 lainya untuk Header animasi anda, mungkin sekitar 8 Frame sudah cukup,sebab kita juga harus hemat muatanya …size file animasi jangan terlalu berat agar tidak menggangu prosses loading nantinya.

Ulangi cara diatas setelah jadi simpan dulu frame2 tersebut untuk melanjutkan ke prosses penulisan text header.

Dalam kali ini saya telah siapakan frame2 dengan beground seperti gambar dibawah ini.

Dibawah ini Fram2 dengn prosses ditumpuk dalam pembuatanya

baground style gradient radial

Dibawah ini frame tanpa style gradient.(solid color).

Salah satu Frame terebut kalau kita masukan / ke stage Image Ready akan terlihat seperti gambar dibawah ini.(hanya Contoh)

Kemudian Bukalah layer Baru …dengan klik menu Open dan memilih File di drive penyimpanan anda dan masukanlah frame2 tsb satu persatu ke stage Image Ready untuk prosses penulisan text..dan atur lah seperti gambar dibawah ini.…(pengaturanya gunakan move tool di menu tool bar. > klik move tool lalu klk di frame dan seret ketempat yang anda inginkan.

2.Kita selanjutnya akan mengisikan text2 header ke frame2 yang telah kita buat. Klik lah Frame 1 (satu) dibagian warna kolom biru yang ada dbagian atas.

Tulislah text yang anda ingginkan dengan klik text tool di tool bar pilih warna biru tua dengan memilih warna di kolom setting text warna ( Set the text color) dibagian atas kanan stage (lihat gambar dibawah).

Pilih warna biru tua. Lalu dibawahnya tulislah text yang sama. dengan warna Putih. Setelah selesai aturlah posisinya dengan Move Tool klik Move tool di bagian Tool bar di sebelah kiri bidang stage. Klik textnya dan seret atur sesuai yang anda kehendakai sehingga tulisan biru seperti bayangan,dari Tulsan warna putih seperti gambar di bawah ini.

Di Frame2 dengan beground tumpuk, tulislah ,judul blog anda dengan waena merah.. sehingga akan terjadi frame seperti gambar dibawah ini

Selanjutnya di Frame2 berikutnya tulislah text dengan warna2 yang berbeda misal kuning,, putih ,biru sehingga nantinya akan menampilkan pergantian warna di animasi header anda… lihat text2 frame yang sudah jadi seperti gambar berikut.