Cara membuat Animasi Header diblog dengan Image Ready bagian ke 2

Cara membuat animasi Header Blog Dengan Image Ready abgian kedua.

Cara membuat Animasi  Header  Blog dengan ImageReady CS2 bagian 2.

Sallam pembaca

Dalam kesempatan ini saya akan melanjutkan  panduan untuk membuat header animasi bagian 1 postingan yang lalu,yang saya peruntukan untuk pemula.

Di bab yang lalu kita telah menyelesaikan persiapan pembuatan Frame2 header yang akan kita buat animasi.

Yang telah kita simpan dengan nama File Frame header 1 s/d 9

Sekarang kita mulai masuk ketahapan seting Animasi. Bukalah program ImageReady anda

Setelah layar setage Image Ready Muncul. Pilihlah menu Window di Menu Bar bagian atas. Setelah itu Klik Sub menu Animasi dalam kolom yang muncul di bawah menu Window. Palet animasi biasanya otomatis akan muncul di bagian bawah layar.I.mage Ready.tapi kalau salah tempat drag dan seret ke bagian bawah menggunakan Move Tool,di Tool bar.

Sub Manu window Lihat gambar brikut.

Dibawah ini adalah gambar layar Image Ready Untuk mengerjakan animasi.

Masih di Window. Klik Sub menu Layer yang ada dibawah menu Window, akan muncul palet layer. Tempatkan palet ini disebelah kanan layar stage Image Ready.

Seperti dibawah inilah  gambar palet layer

.........................................................................................................................................................
Palet ini akan berpungsi untuk mengaktifkan atau mematikan layer di frame2 yang ada di Palet Animasi. Disini nanti ada symbol mata yang menandai mati dan tidaknya sebuah isi frame yang akan terlihat di layar kerja anda. Hanya isi  frame aktiplah nanti yang bisa dilihat di layar kerja. Anda. nantinya anda harus mencatat setiap isi yang diwakili oleh layer frame dengan mencoba mematikan  atau mrnghidupkan symbol mata tsb.Catat saja simbol mata bagian atas isinya apa .. dan symbol mata no 2 isinya apa …no 3 isinya apa….dst.sebab dilayer ini kalau tidak dicatat akan sulit memilh symbol mata mana yang perlu di aktipkan atau dimatikan.

Nah kalau layar kerja anda…Sudah siap buat layer baru ukuranya sama dengan ukuran Frame2 anda yang sudah anda buat…(960 x140 )  pilih File Di Menu Bar dan Pilih New. Akan tampil layer baru di layar kerja anda. Lihat gambar dbawah ini.

Selanjutnya panggil atau Open frame2 header yang sudah siap yang anda simpan di Drive My Document. Masukan semua dan atur seperti diibawah ini pakai Move Tool.

Selanjutnya pilih Fram no1 (satu.) Klik Edit  terus dan  klik Copy. Lalu klik layar baru anda . Pastekan frame no satu tsb di layaer baru ini… Cara lain pakai Move Tool Klik dan drag Frame no1 anda ke layar baru ini.. atur posisinya dengan benar. contoh seperti gambar dibawah ini.

Dibawah Ini adalh gambar palet animasi..agar lebih jelas.  untuk  cara kerjanya..

Lihat palet animasi..frame no 1 aktip. Ditandai dikelilingi warna biru.

Klik gambar panah kecil disebelah kanan palet anaimasi akan muncul menu palet animasi sbb.

Selanjutnya Klik New Frame … frame di palet animasi akan menjadi dua.

Pindah ke palet Layer.di bagian kanan layer. Klik simbol  mata. Lihat Frame dua di palet animasi kosong… lihat dilayar  atas. Juga layar kosong, isikan frame no 2 ke layer kosong ini…

Pindah ke palet animasi bagian bawah… lihat frame no2 (dua)…gandakan lagi dengan klik panah kecil di sebelah kanan palet animasi…klik new frame. Di palet animasi frame menjadi tiga.  Seterusnya matikan  symbol mata di palet Layer lalu klik  symbol mata untuk mrngosongkan frame no tiga. Di layer atas  gambar juga kosong. masukan Frame anda no 3 ke layar diatas… begitu seterusnya sehingga 8 frame atau 9 frame anda telah terwakili di deretan fram2 di palet animasi…

Sekarang atur isi frame2 anda sebab sekarang isinya masih berantakan... Coba saja klik Frame 1 di palet animasi.. Mungkin isinya bukan gambar atau text yang ada di frame 1 seperti yang anda siapakan… sebelumnya…; anda tak usah bingung,, memang gambar2 di frame masih campur aduk antara 8 frame yang tadi kita masukan… Ambil kertas dan pensil.. dan catat isi gambar mata yang ada di palet Layer..

Pertama klik layar yang ada di layar kerja dimana Frame2 anda tadi anda masukan. Setelah itu. Lihat ke palet layer di sebelah kanan. Matikan semua simbol mata yang ada….ahkirnya dilayar kerja anda (dilayar )akan kosong semua…

Setelah itu hidupkan symbol mata paling atas di palet layer. Catat isinya .text nya maupun ciri2 gambar begroundnya.

Kemudian hidupkan symbol mata no dua dari atas. Yang paling atas matikan… catat isnya yang muncul dilayar..

Kemudian hidupkan symbol mata no tiga dari atas matikan symbol yang sebelumya… amati layar kerja. Catat isi text dan ciri2 begroundnya… demikian sampai isi symbol mata telah anda catat semua…

Jangan lupa  urutanya dari paling atas jangan ketukar.

Nah setelah itu aktipkan Frame 1 dipalet animasi.  Masih kosong atau isi ?… tentunya kalau semua gambar mata di palet layer dimatikan semua, frame no 1 ini  juga akan kosong di layer kerja. Nah klik hidupkanlah symbol mata yang sesuai untuk simbol frame satu seperti yang anda rencankan.. begitu juga seterusnya untuk frame dua di palet animasi… klik frame no 2 aktipkan symbol mata yang sesuai deng frame 2  seperti yang anda catat  dan seperti yuga yang direncanakan…lihat lagi frame1,cek semua Frame dipalet animasi. Setelah semua benar, coba mainkan.

Klik tombol Play di bagian bawah palet animasi.. seperti layaknya tombol tape/video… atur dulu waktunya (Durasinya)  setiap frame seperti keinginan anda … ada durasi antara 5 detik sampai 0,0 detik(lihat pengaturan durasi dibawah frame di palet animasi ,ditandai gambar panah kecil). klik saja dan atur sesuai keinginan anda. … untuk latihan perkirakan seperti tampilan animasi yang sudah jadi seperti gambar di bawh ini. 

Untuk tesnya anda bisa atur yang Loop(Forever), artinya yang berputar terus menerus.pengaturanya dibagian samping paling kiri.. dibagian bawah palet animasi.

Sebelum disimpan  stop dulu dan kembalkan  ke frame 1 di palet animasi .

Baru anda simpan ke format (tipe GIF_ atau  JPG dengan Klik File  dan Klik SAVE  Optimized..dan namai filenya.. pilih tipe GIF yang ada dibawah kolom penulisan nama fle.

Nah pembuatan Animasi anda telah selesai,,,, dengan Image Ready atau Flas Mx prinsip dan caranya hampir sama. Anda akan menjadi ahli membuat animasi… kalau sudah mencoba satu atau dua kali ,semua akan menjadi mudah.karena terbiasa.  Header animasi anda sekarang sudah siap .Anda selanjutnya tinggal Upload ke blog anda,…

Masuk ke blog anda > tata letak> edit Header…. Hapus header lama >upload Heder animasi baru anda….lalu  Save ..Selesai. Silahkan mencoba.

Sekian  teman2 Kalau ada komentar dan pertanyaan tolong tulis di kolom Komentar:

semoga bermanfaat.

 Sallam Gumilar.H

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.

Setelah semua frame2 yang direncanakan sudah siap Simpan dulu Frame2 anda di drive atau flas disk anda., sampai saatnya nanti masuk  ke prosse penempatanya di layer animasi..Namai saja flle nya Misalnya Frame animasi header 1, Fram animasi heade 2 dst.. Namun lanjutan untuk artikel ini baru bisa anda baca di postingan yang akan datang di ...Cara pembuatan header animasi dengan ImageReady bagian ke 2

Sallam Gumilar.H