Membuat animasi gambar bergerak gif dengan photoshop bag.2
Posted on 15. Mei, 2009 by Antoro in Tutorial
*artikel sebelumnya: membuat animasi gambar bergerak gif dengan photoshop
Setelah kemaren mebuat animasi pergerakan warna, kita akan mencoba mmbuat scrolled text alias text berjalan gambar gif menggunakan photoshop. Mari kita buka photoshopnya…
Buat dokumen baru, file>>new. Pilih ukuran gambar, saya mengunakan ukuran 250 x 50 pixel.
Jangan lupa tampilkan jendela animation di “windows” > “animation
Okay, selanjutnya buat layar baru, yang berisi text yang kita tampilkan. Klik “new layer” pada jendela layer:
setelah itu klik text tool yang ada di sebelah kiri,
kemudian kettikan tulisan yang ingin kita animasikan, saya mengetikkan “antoro.net”
Beralih ke jendela animasi. Disini kita akan membuat text tersebut berjalan dari ujung kanan ke ujung kulon… eh ujung kiri. Jadi pada frame pertama pada jendela animasi, geser tulisan tadi ke kanan dengan menggunakan arah kanan pada keyboard. Kita bisa juga menggunakan mouse, tapi kalau tidak cermat, nanti animasinya tidak berjalan mulus. Geser ke kanan sampai ujung depan tulisan tidak terlihat lagi,
kemudian, klik duplicate selected layar pada jendela animasi,
klik frame kedua (yang di duplikasi tadi). Kemudian kita geser text tadi ke kiri memakai arah kiri keyboard sampai ujung belakang tulisan tidak terlihat.
Agar gerakan text berjalan dengan mulus, kita berikan frame tambahan dengan meng-klik “tween animation frames” pada frame pertama,
lalu akan muncul jendela seperti berikut:
Pada tween with, pilih yang next frame.
Pada frame to add, masukkan jumlah frame yang kehendaki, masukkan angka lebih dari 5 bila ingin animasi berjalan mulus, saya menggunakan “15″, lanjutkan dengan klik OK.
Agar animasi terus berjalan, pilih yang “forever”. kemudian tekan tombol play dalam jendela animasi, kira-kira hasilnya akan seperti ini…
Whoops! Hampir lupa, untuk menyimpan gambarnya, kita gunakan “save for web & device” nya photoshop. Caranya klik file > Save for web & device atau shortcut CTRL+ALT+SHIFT+S
Pilih file gif, lalu save, muncul jendela save, masukkan nama gambar, dan save.
MEMBUAT FAVICON AGAR BERGERAK
Caranya hampir sama, cuma ukuran standard favicon adalah 16 x 16 pixel (sempat tidak sempat harus enambelas, lhoh!). Buat aja ukuran 16 x 16 pixel, lalu ikuti langkah di atas untuk menganimasikan. Kemudian yang paling penting adalah cara save gambar favicon tersebut. Favicon memiliki extensi gambar .ico (yang pada photoshop CS 3 yang saya pakai tidak ada). tapi kita bisa mengakalinya dengan mengetikkan sendiri. Caranya klik file > Save for web & device atau shortcut CTRL+ALT+SHIFT+S, pilih gambar gif, kemudian save.
Nah, setelah itu akan muncul jendela save, masukkan nama untuk gambar favicon diikuti dengan .ico contohnya “favicon.ico” lalu save.
Artikel Terkait:
- Membuat animasi gambar bergerak gif dengan photoshop Selain buat edit-edit foto, photoshop juga bisa kita gunakan untuk membuat gambar bergerak / animasi dalam format .gif...
- Cara membuat favourite icon/favicon di wordpress Sudah direvisi, thanks buat ade atas kritiknya… Tutorial ini berawal pas beli nih domain, temenku si fanza (yang punya blog dot com baru haha) tanya, “gimana sih caranya buat gambar kecil di kiri http//…. pada browser?” Oh, itu namanya favourite icon alias favicon. Favicon adalah gambar kecil berukuran 16 x...
- membuat email dengan alamat domain sendiri Sudah punya website dengan alamat domain sendiri? Punya alamat domain keren kok emailnya masih nebeng pake @yahoo.com ato @gmail.com?...
- SEO: Hal yang membuat ranking di mesin pencari turun Berikut ini adalah hal-hal yang bisa membuat turun rangking blog/website kita di mesin pencari terkenal seperti Google, Yahoo,MSN dan search engine lainnya. KEYWORD Banyak keyword: Jangan menggunakan keyword artikel secara berlebihan apalagi menambahkan keyword yang tidak sesuai dengan artikel, karena disamping akan dianggap spam oleh mesin pencari, juga akan membuat...
- Cara back-up database pada wordpress Hal ini memang masalah sepele, tapi sangat berguna jika kita rajin melakukannya. Sering terjadi database kita hilang akibat maintenance dari server, hilang ketika meng-upgrade wordpress, ...
bijey syenna
Sep 3rd, 2010
boleh nhe …