Tutorial Animation: Easy with Tweens!!!

Hello, wah dah lama bgt gak nge-tuto yah he he. Blog ini dulu pertama sekali aku buka sbg percobaan nge-blog. Eh karena ga bakat nulis di anggurin lama sampe jatuh cinta sama scrapbook digital, jadliah blog scrapbook. Dan adanya posting tutorial juga karena beberapa teman minta dibuatin tutorial nge-scrap disini. So awal2 tuto lumayan sering, belakangan jarang bgt ha ha. Emang agak cape bow bikin tuto, sama capenya sama nge-leot blog. Kudu ada mood and napsu nya muncul hihi. Klo gak mapen aja kepala dan jd ga niat. Beda kalo nge-scrap haha, mood ga mood ayuk jalan tol langsung xixixi.

Nah kebetulan banget pengen deh ganti blinkie nya, trus kebetulan pula mba Evi di Tuban tanyain gmn bikin animasinya alus...begitu. So klop deh, apalagi mood sama napsunya lg muncul. Klo udh mood bisa rada tdk lambat bikinnya, klo ga mood setahun juga ga bakal kelar deh.

So ini ini buat yg masih kepengen bikin blinkie, diicip eh dicobain tuto ini ya. Sangat udah dan gampang...

Bukan karena keahlian loh ba Evi jd alus hehe, tapi berkat si tool "tween" yg bikin begitu. Kalo tutorial2 yg dulu khusus animasi kalo ga salah ada yg masih pake ps 6 ato 7 (hihi males nge-cek arciv), kalo dg program itu (kalo ga salah jg) "tweens" itu ga ada. Nah di PS CS 3 ada "tween" buat memudahkan kita cepet bikin animasi and keren punya.

Oke mari kita mulai.

Program Use: Photoshop CS3
Kali ini lagi ga pake kit scrap bikin blinkie nya, pake yg didale potosop aja, mo cepet hehehe.

1. Create new file size (150x50) px, warna sesuai selera.

2. Trus aku kepengen ada garis tepi, warna suka2, aku pake putih.
Klik Rectangel tTool (U) > klik 'path' dan 'rectangel tool' dan 'exclude overlaping path areas'
Kemudian tariklah garis didalam area.

3. Kemudian kita ngetik tulisan.
Klik Horizontal Type Tool (T) > pilih font yg mau digunakan (aku pilih 'plantiya2', 14 pt)
ketiklah 'scrap from my heart'.

4. Create 'new layer' beri nama "brush 1"
Layer>New> Layer atau Shift+CTRL+N
Klik "Brush Tool" > pilih brush yg au dipakai,aku pakai "charm 2", color putih.
Atur size nya dan gabar lah atau klik di pada canvas layer itu "brush satu"
Posisikan ditempat yg di mau. Aku taruh persis disebelah tulisan "scrap from my"

[Tdk menemukan font dan brush seperti itu? Ya, emang ga ada di ps cs 3 standart aja. Browsing di internet buanyak banget FREE brush dan font bagus2. Download brush ke kompi. Unziep di kompi kemudian load- lah ke potosop. Kalo buat font, unziep, kemudian copy paste brush nya ke FONT program di kompi (biasa letaknya ada di control panel), otomatis dia akan masuk jg ke ps kita. Klo bingung email aja eikeh.]

5. Create new layer lagi. Kasih nama "brush 2".
Klik '"brush tool", pilih brush yg mau dipake, aku pilih brush bentuk itu (namanya gag tau xixi)
Posisikan seperti yg di mau, aku taruh paling kanan.


6. KlikHorizontal Type Tool (T) > pilih font yg mau digunakan (aku pilih "ALS Script", 30 pt)
ketiklah 'Ameyasa'.

7. Oke sekarang dah kelar dah. Kita sudah ada 5 layer di layer pellate [background, T (scrap from my ), brush 1, brush 2, T (ameyasa)]. Tinggal bikin animasinya, ini paling asiknya, seru tapi udah...lihat aja...hehehe...

8. Seperti pada gambar, klik icon gambar mata di layer pelatte untuk "ameyasa" dan "brush 2", sehingga mereka invisible. Kemudian klik Window > Animation.

9. Klik tool "duplicates selacted frames" pada pelatte animation, sehingga muncul satu frame persis frame sebelumnya. Buat visible layer "scrap from my" dan "brush 1", buat invisible layer "ameyasa" dan "brush 2", background tetap. Set "delay time" kedua2 frame jadi 0,1 sec.


10. Klik pada tool "tweens animation frames", isi box yg muncul sepert isian di bawah ini:


Jangan lupa klik pilih tween with "previous frame". Klik OK.

11. Akan muncul banyak frame setelah itu.

12. Klik lagi "tween animation frames", seperti gambar dibawah, tapi pilih tween with "first frame".

13. Terakhir, set delay time hanya frame yg 1 dan yg ke 17, (frame pergantian gambar) menjadi 1.o sec. Selesai.

Test dgn klik tombol "play"

Save dengan: Save > Save for web and devices (format gif)

Dibawah ini hasil dari blinkie-ku. Buat teman2 yg demen header blog nya pakai animasi. Bikin dulu ukuran gedenya sekaligus dianiasi, baru setelah selesai di animasi, di re-size ukurannya ke 150x50px utk jadi blinkie nya, so blinkie atau bannernya sama dg header, manis kan hehehe. Jangan lupa ukuran headernya skala nya jgn beda dong saa blinkienya, misal header nya 800x200, blinkie mestinya 200x100 atau 100x50, atau lebih gede gapapa asal skalanya sesuai. Tujuannya biar ga ada yg kepotong gambarnya...begitu dah....

Silahkan dicopy ya kalo mau blinkie nya ameyasa. Makasi. Selamat mencoba...

<p align="center"><a target="_blank" href="http://www.ameyasa.blogspot.com/"><br /><img src="http://spamtheweb.com/ul/upload/3008/35439_blinkie.gif" border="0" /></a></p>

Snowy

---*---

For 0Ne of my online best friend, Widi, i hope you like this wid...
I hope one day i could go to Canada to play snow ball with you and abay huhuy...(mimpidotkom)
(mo ajak astri juga ya....yuk tri yuk...xixi)

Heart Shape Animasi

-Aku pake photoshop CS3-

Heart Shape yg sudah kita buat tadi mau kita kasih animasi sedikit. Kayak animasi berdegub gitu...

Aku pake photoshop cs 3. Kalo dg psp7 dari heart shape tadi go to image ready, tapi kalo dg psp 3 add window animasi.

1. Heart Shape tadi kita duplikat sampe 3 kali. Jadinya ntar ada 4 layer di layer palette.
















2. Kemudian gunakan Free Transform tool (Edit-->Free Transform) untuk setiap layer satu persatu.





- Resize Heart Shape ke-1 menjadi 95% dari yang original (yang original adl 100%).
- Resize Heart Shape ke-2 menjadi 90% dari yang original.
- Resize Heart Shape ke-3 menjadi 85% dari yang original.
- Biarkan yg ke empat tetap pada ukuran original.

3. Klik icon mata yg disebelah masing2 layer pelatte kecuali Heart Shape yg size nya 100% (original).

4. Open window animasi. Maka akan muncul satu layer disitu dari yg Heart Shape 100%.

5. Klik kotak kecil (duplicate selected frame) di bawah pelatte animasi. Maka akan ada 2. Kemudian pada layer palette sembunyikan icon mata 100% tadi dan munculkan icon mata yg 95%. Sehingga layer animasi yg kedua berganti jadi Heart Shape yg 95%. Lakukan kemudian seperti proses tadi kepada layer yg size 90% dan 85%.

Sehingga ada 4 layer animasi dengan size yang berbeda seperti dibawah ini.











Sudah jadi kan. Test dengan mengklik tombol play.

Oke sebelum di save, kalo ukuran imagenya tadi sewaktu meng create Heart Shape masih gede, temans bisa langsung kecilkan dulu dengan mengklik Image-->Image Size dan kecilkan ukurannya, disini aku kecilkan sehingga kira2 300 px. Atau bisa juga dikecilkan sebelum masuk pada animasi proses.

Terakhir save. Kalo dg psp cs3 Klik File-> Save for web and devices (dalam format gif).
Masukkan ke Photobucket/flickr/semacamnya, ambil code nya dan tampilkan di web atau blog temans.

Oke slamat mencoba. Dibawah ini resultnya:

Bikin banner pakai scrapbook kit.

Sebelum dimulai aku pengen menyampaikan kalo sebenarnya aku bukan ahli dalam banner maker atau animasi. Cuma karena demen dengan scrapbook digital and dalam scb banyak kit2 yg lucu maka aku tertarik bikin banner dengan menggunakan kit scb.

Dan teknik animasiku juga masih simple banget, blom bisa kek org2 efek gerak animasinya dah bisa macem2. Tapi berhubung yg pengen ditonjolkan yah kit2 yg lucu2 versi scb yang kita bisa gunain dalam hiasan banner kita maka saya coba bikin.

Tutorial ini berdasarkan pengalaman utak atik sendiri jadi kalo misal beda dg ilmu dari yg lain harap dimaklumi yah. Yang penting sudah bisa menyalurkan hasrat teman2 yg kepengen bikin banner sendiri dg menggunakan scb kit. And hutangku sudah lunas...hehe...jgn ditagih lagi yah tutorial banner nya hehe.

Dan setelah ini, berhubung mudik ke Jkt ngga bisa chatingan ya, kalo misal mentok dg tuto ini email aja (tapi maap belum tentu cepat balas ya say2), di Jkt blom tentu bisa pake i-net. Pssst..coba tanya sama mami Rayna klo bisa, dia dah TOP bikin nya (tapi jgn di teror loh orangnya, org aku yg punya gara2, jgn mami Rayna yg kena) xixi...maap ya mom intermezo ajah....ailopyu...

Oke kita mulai.

Open photohop, klik File>New,isi size 150x50 seperti dibawah. Sebenarnya ukuran boleh suka2 teman, mau besar/kecil, mau square/rectangel monggo dipersilah. Aku coba dg size ini, dan biasa aku bikin jg dg size ini.

Nah setelah di-Oke akan muncul seperti dibawah yg kecil putih itu. Terus klik File>Open untuk ambil paper scb yg akan jadi begronnya nutupin si-putih nanti. Aku udh sedia yg warna biru itu. Nah seperti dibawah itulah penampakan keduanya telah ada.

Kemudian sementara yg biru aktip, klik Image>Image Size (masukkan size seperti file putih), klik Oke, akan berubah jadi kecil dia daripada si-putih (it's oke, don't worry)

Klik Select>All (maka akan terseleksi si biru kecil

Klik Tool Move, drag and drop lah si biru ke si putih. Maka mereka akan bersatu.

Nah aku akan membuat si biru mempunyai sedikit border.

Klik icon kecil f (layer style) dibawah layer pelate, aku beri efek stroke seperti isian dibawah.

Maka seperti dibawah yg biru itulah pnampakannya (sori digabung gambarnya biar irit, soalnya kepanjangan nih tutonya)

Kemudian klik File>Open, ambillah scb kit yg akan digunakan, aku ambil kit bunga pink ini.

Nah kita akan memindahkan kit itu ke begron biru. Seperti di tuto sebelumnya, klik Tool Magic Wand, letakkan cursor pada daerah yg tdk ingin dipilih (catatan:buat pemula pilih kit yg gradasi warna nya ga banyak yah biar ga susah menyeleksinya). Disini ku klik bagian warna putih sekitar bunga pink.(apdet tgl 10 april'08: Kalo file nya dalam bentuk file png, ga ush pake magic wand, dalamarti dia begron transparant, so langsung dimove aja!)

Kemudian Press sekaligus Control+Shift+I pada keyboard untuk membalikkan seleksi sehingga bunga pink yg terseleksi.

Sebelum di move ke begron, kecilkan dulu ukuran si bunga karena dia akan jadi raksasa di atas begron biru kalo ga dikecilkan. Klik Tool Move (ingat! "show bounding box" nya kudu aktip)

Tarik sudut bunga kearah diagonal dan kecilkan, setelah itu klik double pada image itu. Nah siap di move

Setelah bunga berada di begron (sori gambarnya sekalian dibawah yah). Kita akan bikin efek sedikit pada bunganya. Klik icon f (layer style), aku memberikan efek Outer Glow dan Stroke seperti isian dan pengaturan dibawah.



Nah seperti dibawah inilah hasilnya.


Selanjutnya kita akan membuat tulisan. Klik Tool Type (T), dan aku membuat pengaturan seperti dibawah (font comic sans, style regular, size 10pt, color white). Silahkan teman2 membuat pengaturannya sesuai selera.


Kemudian ketiklah tulisannya diatas begron biru (layer begron biru musti aktip yah). Disini aku ketik tulisan AMEYASA. Kemudian aku kasih efek dikit (stroke) dengan isian dibawah.

Seperti dibawah inilah hasilnya.

Nah sekarang coba masing2 perhatikan layer pelate. Ada banyak layer disitu termasuk layer2 cabang dari masing2 efek yg kita buat. Nah kita akan membuat efef2 itu merge visible, supaya efek2 itu menyatu dg induknya (xixi kek ayam aja, habis kehabisan ide kata apa). Aku tunjukkan seperti gambar dibawah adalah layer text ameyasa, dibawahnya ada efek stroke layer. Nah klik tanda panah kebawah itu maka akan menghilang layer efek itu. lakukan pada yg lainnya...

Oke...
Sekarang kita hampir masuk pada tahap animasi. Nah sebelum itu ada yg musti dilakukan. Kita akan membuat invisible setiap layer untuk sementara kecuali layer begron putih.
Klik gambar icon mata di tiap2 layer, ingat kecuali layer begron putihnya.

Maka akan jadi seperti dibawah penampakannya.

Oke. Sekarang kita ready membuat animasi. Klik icon seperti dibawah pada photoshop anda (Jump to Image Ready).

Maka akan muncul window baru (Adobe Image Ready).Seperti dibawah inilah dia.

Hampir sama penampakannya seperti photoshopnya cuman bedanya dia ada layer satu lagi yaitu layer animasi (yg dibawah itu). Kalo pas teman2 buka ga nongollayer pelate animasinya,jgn takut. Klik aja Window>Animation

Nah seperti kita lihat diatas layer animasi itu bentuknya seperti itu. Cuma ada layer begron putih,karena tadi sebelumnya kita sudah membuat yg lainnya invisible. Kita akan memunculkan semua layer. Caranya ikutin dg pasti yah..jangan salah2 ya. Perhatikan ikon kecil seperti dibawah yg terletakdibawah layer pelate animasi.

Klik satu kali pada icon itu untuk meng-create new layer....setelah itu klik satu kali pada ikon mata yg disebelah begron biru (diatas begron putih), maka akan muncullah dia di layer animasi, seperti dibawah ini.

Lakukan hal tersebut untuk memunculkan semua layer. Ingat harus bergantian.

Maka kemudian nanti di layer animasi sudah ada 3 layer (begron putih, begron biru, text dan bunga pink). Aku ingin menghilangkan begron putih karena aku ga ingin dia ikut dalam animasi bannerku. Maka aku klik dia untuk mengaktifkannya dan kemudian meg-klik ikon gambar tempat sampah seperti dibawa, maka dia akan hilang untuk selama1nya...xixixi

Maka seperti dibawah inilah penampakan layer animasi, dengan 3 layer didalamnya.

Sebelum kita memainkan animasinya,atur terlebih dahulu kecepatan gerakannya. Klik aja tanda panah kebawah disebelah angka2 itu pada masing2 layer di layer animasi, dan masukkan tinggak kecepatan yg diinginkan. Disini aku pake 0.5 sec ajah.

Nah sudah selesai,mainkan animasinya, klik play dengan gambar panah ke kanan seperti dibawah ini.

Sudah selesai friends. Kalo kurang mantap tingkat kecepatannya bisa diatur2 lagi, dipause dulu kemudian ganti sec-nya, play lagi kemudian. Sampe merasa puas.

Oke segitu dulu. Ini tuto simple aja. Simple begini aja panjangnya minta ampun dah...Kalo udh sering pegang and bikin ntar teman2 pasti menemukan cara bikin fariasi agar lebih bagus banner nya.

Jangan lupa terakhir di-save dengan cara

Klik File>Save Optimized.

Seperti dibawah inilah penampakan bannernya...

Oke...selamat mencoba teman2...goodluck yah...

Banner I create for friends