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, ...
fanza
Mei 18th, 2009
mksh jol,hehe
Herry
Mei 23rd, 2009
mampir mas pandjoel…….
sambil jalan malam nih… hehehe ;)
posting terakhir dari blog milik Herry adalah
tova
Mei 23rd, 2009
wah njul,sory aku ra niru2 lho….
posting terakhir dari blog milik tova adalah
ARD
Mei 25th, 2009
sedang terjadi perebutan hak milik atas posting gambar gif antara antoro.net dan tofanc.com
posting terakhir dari blog milik ARD adalah
Membuat animasi gambar bergerak gif dengan photoshop | Kantor Berita Antoro | antoro.net
Mei 26th, 2009
[...] gimana caranya membuat animasi yang lain seperti scrolled text alias text berjalan? akan saya berikan di session berikutnya… hehehe…. soalnya dah capek nulis… [...]
hengky
Mei 27th, 2009
HI KINTAR !!!
Tukeran link ya !!! yg dah di web mu salah alamatnya URL nya.
ganti aja ke
http://WWW.BEDODUCK.WEB.ID
posting terakhir blog hengky adalah HOT NEWS “perang demokrasi”
unggung
Jun 3rd, 2009
HEHEHEHE
Van Piem
Jun 18th, 2009
thx info nya …
ICTKediri-Blog » Blog Archive » Membuat Animasi Gambar Bergerak “gif” Dengan Photoshop
Agu 4th, 2009
[...] gimana caranya membuat animasi yang lain seperti scrolled text alias text berjalan? akan saya berikan di session berikutnya… hehehe…. soalnya dah capek nulis… [...]
Denni Rochman
Sep 15th, 2009
Nambah ilmu, segera praktekkan. kasih komentar ya nanti.
Ofea
Okt 13th, 2009
Thank Bangt Tutorial nya ,Makin tambah Deh Ilmuku
pandjoel
Okt 13th, 2009
@ofea: senang bisa membantu… heheh
Rihzki
Okt 25th, 2009
Makasih, jdi nambah ilmu saya . . . . . . . .
wotto
Nov 19th, 2009
ok tengkyu triknya,ud aq coba omm mudah ko
arul
Nov 30th, 2009
Thanks alot bos For Support.
ruth
Des 19th, 2009
Animasi tadi bisa enggak qita gunakan ke power point? Butuh nh tuk project
nanenyusufuimida
Jan 8th, 2010
thanks. saya suka dengan animasi, akan kucoba mudah2an ja bisa
pandjoel
Jan 12th, 2010
@nane: haha… pasti bisa… soalnya ini masih mudah…
B
Jan 26th, 2010
MAKASIH PENCERAHANNYA YA
Ipoy
Feb 22nd, 2010
Sudah 3x dicoba tapi hasil na Nihil nih mas…..
begitu si Save for web & device, saya tekan play untuk dites
tapi tidak ada tulisan yang keluar.
padahal waktu/frame juga sama yaitu 0,5s.
gmn donk….
Decal
Feb 26th, 2010
Wah, nambah ilmu & bisa bikin baner sendiri neh… Tapi kalo kasusnya kang Ipoy tuh gimana yah..kok nihil tuh ktnya? Aku juga belum gitu familliyaar ama photoshop. Aku masih nyungsep di CorelDraw, dan hasilnya di sini neh decal
Uchiha erie
Mar 5th, 2010
Buat tmen2 yg spec komputerna ga support cs 2 ato 3 ( alias spesifikasinya minim ) bisa juga pake image ready na photosop 7, caranya ga jauh beda ama tutorna bung antoro
riswanto
Mar 15th, 2010
kok gak bisa aku coba animasi mas..
kendalanya mengenai pemindahan huruf…
tolong di perjelas lagi… redaksinya sehingga mudah di pahami… pembaca…
twety
Apr 4th, 2010
cara heser tulisanya gimna si?? kok di geser satu ke geser semua :((
Antoro
Apr 4th, 2010
@twety: pastikan layer text saja yang digeser, layer terletak di bagian kanan, klik yang text…
2dan
Apr 25th, 2010
mas, cara buat gambar/foto (BUKAN TULISAN) bergeraknya mana?????
Tolong ya mas
Hamdan
Mei 7th, 2010
Thanks ya Mas Antoro, q dah bs buat animasi tulisan yg bergerak dan q jdiin WALPAPER d HPq. Jd tambah keren deh. Makasih Banyak taaaaaaaaaaaaaaaaaaaaaaaa
mr tik tik
Mei 9th, 2010
sama gampaang deng ulead gif..heheheh
parman
Mei 26th, 2010
Thaks to
Yogazz
Mei 31st, 2010
Nice Post
gw msih agak lier Mau Belajar 
lg :D
Antoro
Jun 1st, 2010
@yogazz: kenapa lieer??? hahaha
cygnus
Jun 6th, 2010
… makasih, n lam kenal aja !
putry
Jun 7th, 2010
ajarin donk buat animasinya…..????????????????????????????
mamat
Jun 12th, 2010
tengkyu…tengkyu…tengkyu…
[CR]~Renala
Jun 13th, 2010
bye2
Antoro
Jun 15th, 2010
@cr-renala: tinggal di insert aja fotonya di photoshop…
hafedz
Jun 24th, 2010
cara gesernya gimana gan??
Antoro
Jun 25th, 2010
@hafedz: pake panah keyboard itu lho bos… ^^
ocoL
Jun 30th, 2010
tanya kang …
spaya tiap frame lgsg disetting delaynya o.2 ato 0.5 bgmn ???
kalo satu satu kan lama sekali wkt settingnya, ga efisien…
mhn pencerahannya kang ?? kalo ga pake delay kan cepet sekali pergeseran gerak textnya..
matur suwun..
mira
Jun 30th, 2010
kl pake photo sendiri bs? caranya gmn? bs kirimin caranya di email aku:
smrdewi@gmail.com
bisa minta tolong buatin 1 aja kartun yang bergerak ga? pls aku ga mudeng dah coba tp ga bs
Antoro
Jun 30th, 2010
@ocol: jadi sebelum kamu insert new frame animasi, set dulu tuh delaynya jadi 0,2 ato 0,5, jadi nanti tiap kamu insert frame baru lagu, otomatis ngikutin frame sebelumnya, begitu… semoga bisa membantu
saint_ikna
Jul 8th, 2010
bos, gimana sih cara’a bikin gambar bergerak kaya cartoon??
bellabiey
Jul 9th, 2010
mas,aku pngen bkin teks yg dy tuh ga jln??
cuma dy kluar’a satu per satu..
misal’a
b..
be..
bel..
bell..
bella..
kya gtu
gmn ya cra’a??
krim via fb ya..
di huuf_lolopus@rocketmail.com
mksih..
Antoro
Jul 14th, 2010
@saint_ikna: wah, ini masih animasi dasar bos… kalo buat film kartun, bukan pake photoshop… hehe ini kan cuma GIF, thanks dah mampir! ^^
Antoro
Jul 14th, 2010
@bellabiey: waduh, bisa sih itu, tinggal mainin frame nya aja, frame pertama tampilin satu huruf, frame ke dua dua huruf… begitu selanjutnya… eksplorasi aja… thanks! ^^
pandapotan pardede (slazh pardede)
Jul 18th, 2010
upzzzzzzzzz
coba dulu ah…………
btw klo dari image’ ready bsa juga kan…?
ashido
Jul 23rd, 2010
kk tolong minta vidio buat savenya donk!!! aku bingung koq ga bisa gerak ya.. ~_~ plz kirim ya
ashido
Jul 23rd, 2010
oh ia ni emailnya dodoykerenya@yahoo.co.id tolong kirim ya!!!!
efwong
Agu 3rd, 2010
kalo pk phtsp 7.0 bisa gk kk?
madd
Agu 26th, 2010
bagaimana kalau menggabugkan 2 gamabr berbeda menjadi .gif?