Monday, March 23, 2009

Cara Bikin Blinkie Animasi

Saya cuma kasih pencerahan buat yang belum tau...
Pertama-tama, buka Adobe Photoshop. Kalo proses udah selesai, klik File<New, dan isi seperti di bawah ini. Sebenernya sih, terserah mau segimana ukurannya, tapi biasanya orang ukurannya segitu buat ngirit ruangan sitenya, dan para theme makers segitu ukuranna(tips dari Dyana, makaci...). Masalah nama, isi ikut kesukaan .

Kalo sudah, akan keluar windows kecil seperti tampilan di bawah ini.
Perhatikan!!!
Nah lo, mau ngapain lagi sekarang? Sekarang, kita cari gambar buat background blinkienya. Klik File<Open. Nah, kamu tinggal pilih gambar yang udah kesimpen di kompimu yang mau dijadikan background. Disini, aku pake background si polkadot kuning itu.
GYAAA!!!!
Nah, karena ukuran image yang mau kita pake buat backgroundnya jauh lebih besar, kita harus samakan dulu. Caranya, klik Image<Image Size (si polkadot kuning itu harus aktif/windownya masih kebuka). Buat ukurannya sama seperti si putih. Cukup ubah bagian WIDTH-nya. Nanti ukurannya bakalan lebih kecil dari pada yang putih.
@adebunga
Nah, kita sampai ke tahap penyatuan 2 buah background. Sementara window polkadot kuning masih kebuka, klik Select<All. Jadinya si polkadot itu terseleksi dehh.... Kalo polkadot itu udah diseleksi, klik MOVE TOOL, atau langsung aja klik V di keyboard masing-masing. Geser polkadot ke rumahnya si putih.
f
Nah, kalo udah pindahin begronnya ke rumah si putih, sekarang kita cari gambar buat kitnya. Ukuran gambar kit itu harus lebih kecil dari begronnya. Kalo lebih bede, kecilin dulu. Di tutorial ini, aku pake gambar jeruk =krennzzz.
Nah, karena latar belakang si jeruk itu gak sama dengan polkadot, kita harus bikin dia terlihat seperti transparant. Caranya pake lasso(ato langsung pencet L di keyboard masing-masing). Buat lingkaran di tepian gambar jeruk(kalau bentuk kitmu bukan jeruk, bunga misalnya, bentuk lassonya jangan lingkaran kalo bisa. Ikutin aja bentuk gambar kitmu dengan hati-hati). Seharusnya sih pake Magic Wand, tapi karena yang buat nih tutorial gak tau caranya, jadi pake lasso aja. Kayak gambar di bawah....
dfggdf
Abis itu, geser JERUKNYA(bukan begron putihnya) pake move tool, atau langsung pencet V di keyboard masing2 ke tempat polkadot kuning. Mau tao di tengah, kanan, ato kiri, terserah.... Seperti inilah, kenampakan sang jeruk.

Sekarang, kita taro teks di calon banner itu. Klik Type Tool (bisa langsung teken T di keyboard), trus klik di bagian mana kamu mau pasang teksna. Pas banget di jeruk, misalnya. Atau, di samping jeruk. Buat ngeganti fontnya, perhatiin image di bawah ini.

Nah, di tutorial ini, teksku Eka. Kayak itu tuh, yang dibawah...

Sebelum kita mulai tahap animasi, kita buat dulu para layers invisible, kecuali layer background putih. Letak mereka di kotak layer di kanan bawah. Kayak itu tuh. Cara invisible-in mereka, klik di ikon mata sampe matanya ilang.
  menjadi
Kalo udah dibuat invisible(kecuali background) klik tombol Jump to Image Ready (teken Ctrl+Shift+M) bersimbol .
Akhirnya, sampe ke tahap animasi. Kita kebuka di jendela baru "Adobe Image Ready".

Yang tampak di atas adalah kertas kosong halaman pertama. Kosong melompong belom ada apa-apanya. Dihalaman pertama ini, klik ikon mata yang ada di samping tulisan "Layer 1" di Layer Pallates. Kira-kira seperti yang ada di gambar:

Nah nanti di kotak animasi(bawah) akan jadi seperti ini:
Sekarang buka kertas kosong baru lagi. Caranya teken  dan klik ikon mata yang ada di samping tulisan "Layer 2" di Layer Pallates. Kira-kira seperti yang ada di gambar:

Nah, nanti bakalan ada gambar polkadot sama jeruk.
Buat kertas kosong baru dan klik ikon mata textmu(paling atas). Nah, nanti bakalan ada gambar polkadot, jeruk, dan text Eka yang jadi satu.
Sekarang, klik tombol PLAY buat mainin animasimu. Simbolnya =.
Dalam kondisi ini, bannermu tadi itu masih terlalu cepat jalannya. Untuk ngatur kecepatannya, liat gambar ya... Tapi, disini aku pake 1.0 (1 sec). Tapi, sebelum atur kecepatan, klik tombol pausenya dulu ().

Kalo udah diatur, pasti perlu dicoba-coba dulu khan? Klik tombol PLAY buat muter ulang, klik PAUSE buat berentiin. Kalo kecepatannya kurang pas, diatur lagi, sampe pas.

Nah, ini nih kenamppakan punyaku:

Segitu aja, sebenernya simple kalo kamu udah lancar, nanti kamu bisa buat variasi lainnya, misalnya backgroundnya yang ganti2, kitnya yang ganti2, atau semuanya.
Oh iya, supaya bisa di-publish, pasti musti di save dulu kan! Caranya, klik File<Save Optimized.
Saya juga post di Siteku.
++kalo masih bingung, tanya aja. sumber kubelajar++

54 comments:

  1. ^ ^ wahhh , dah mulai jago nih... |D

    klo dah bisa gini gak usah lagi nanti pake link2 orang 'bule' [glittergraphics , dan sejenisnya]..
    bikin sendirilah.... brani dikit ... ori dikit.. )

    :: GoodPosting ^ ,

    ReplyDelete
  2. hihi... belajar sotosop harus diselingi makan soto+sop jugha..... hoho

    ReplyDelete
  3. speedstars: persamaan: dua-duanya ada hurup s sama o.
    perbedaan: soto ada huruf t-nya, tapi sop hurup p adanya.

    ReplyDelete
  4. klo gitu tar gw bikin software yg lebih hebat dari Adobe, nmny SotoySop CS v.5

    spy yg make gak pada sotoy sotoy smuah .. :D

    ReplyDelete
  5. speedstars: Ya udah, klo udh jadi ku download, biar jadi sotoy.... hihi (sesuai nama productna)

    ReplyDelete
  6. ooo gitu sama yah kayak cara buat banner gif animasi hehehehe...
    oya Tambahan Sebaiknya Sebelum JUMP TO IMAGE READY SAVE dulu file nnya dengan .psd untuk mengurangi besar file Blinkie nya ...hehehehe

    ReplyDelete
  7. Photoshop-ku sih... kalau disimpen tipe nya PSP, emangna jadinya bisa JPEG, GIF, atau PNG ya??

    ReplyDelete
  8. File > [Save For Web]

    bukan [Save] ataupun [Save As

    ReplyDelete
  9. sangat membantu, jadinya:
    http://syifananda.multiply.com">>http://i43.tinypic.com/2ds2wj5.gif/ width="88" height="31" border="0" />

    Bagi yg mau pasang... silahkan

    ReplyDelete
  10. Itu kalo masih di photoshop.
    Klo di IR, File < Save Optimized. Bakalan kesimpen jadi Images Only(GIF).

    ReplyDelete
  11. Ini punya group-ku: (Boleh dipasang ^^)
    http://sahabatsyifa.multiply.com" target="_blank">http://i40.tinypic.com/nl3cee.gif" border="0"

    ReplyDelete
  12. Bukan siapa-siapa sih... Cuma aku pinjem namanya aja...

    ReplyDelete
  13. oya, ini pke photoshop versi berapa???
    Kalo pke adobe photoshop elements 3.0 bisa nggak??

    ReplyDelete
  14. ::: versi 7 ke atas : ver.7 Re-tail Edition , v.7 , v.CS , v.CS2 , v.CS3 , v.CS4
    ::: Elements bisa, tapi terlalu dasar [kaku] kurang fitur effect

    ReplyDelete
  15. ::: mainkan transparansi layer [total frame: 58] dan gradient [blending options yg tipe Rainbow] :::
    warning:
    -agak berat, sekedar hiasan, gak cocok dijadiin blinkie -

    ReplyDelete
  16. tpi di versi 6 bisa kuk. Aku pake ver.6 pas bikin tutorial ini.

    ReplyDelete
  17. ohh.. bisa toh..
    sorry .. soalny gw kenal Photoshop sejak yg versi7,
    yg versi6 gw cari2 diweb dah gak ada, klopun ada tupun edisi TRIAL.. + _

    ReplyDelete
  18. Di CS3 ada gak sih tombol Jump to Image Ready? Kayaknya gak ada ya?

    ReplyDelete
  19. @rinda789: Oh, kalo gambar jeruknya ambil dari komputer kamu aja. Kalo misalkan kegedean, kecilin lagi ya seperti ngecilin yang buat background itu..... Bisa dicari di google.

    ReplyDelete
  20. Wah, aku masih nggak mudeng gara2 beda jenis komp-nya sich????

    ReplyDelete
  21. mungkin bukan karena sulit baca tutorny..
    Dira hanya masih grogi pake Phtshop, masih terasa asing baginy software itu ^

    ReplyDelete
  22. Dia ga bisa menampilka kotak animasinya

    ReplyDelete
  23. lho.. bukanny dah otomatis.. ?

    klo ngeluarin manual tinggal klik [ Window ] -> [ animation ]

    ReplyDelete
  24. Nah iya, itu yg udah kukasih tahu. Skrng dah bisa.

    ReplyDelete
  25. kepaket ama CS3.
    dulu sempet nyoba.
    Klik Windows > Animation, maka muncul Animation Bar..

    -maap baru kerespon skarang-

    ReplyDelete
  26. Klik tombol Play.. Kalo udah Ok save di GIF..

    Klik File > Save For Web and Devices

    ReplyDelete
  27. dulu pernah nyoba juga tp ga kesimpen, takutnya ga bergerak.

    ReplyDelete
  28. he3x...ganti aja, jadi ...apa ya..blm nyoba lagi sih. kpn-kpn deh...

    ReplyDelete
  29. Thanks, Kak, ..., nanti dicoba deh

    ReplyDelete
  30. pas itu saya prnh buat,ukurannya 150X50.resolutionnya:72
    namanya Scrapbook

    ReplyDelete
  31. Huaaa! Aku ga bisa buatnyaaa! Aku pke PSP CS3

    ReplyDelete