learn wisdom by reflection, imitation and experience

Belajar Buat Animated Grafik

A Simple Example

For a quick hands-on tutorial on creating animated GIFs in Adobe Photoshop, we’ll walk you through creating the following animation:
ExampleAnimation.gif

This simple animation combines the two most common animation techniques in Photoshop: Turning layers off and on, and using the Tween command to animate the movement of an object on a layer.

 

Step 1: Set up your layers.

ExampleAnimation-Step1.png

The first step in creating any animation in Photoshop is to build a layered Photoshop file with all the elements you plan to animate. Our example document has 7 layers containing the text for our countdown, and layers for the rocket and flame.

You can download our example Photoshop file here:

 

Step 2: Create Animation Frames with Layer Visibility.

ExampleAnimation-Step2.png

Chose Windows > Animation to show Photoshop’s animation palette. On the first frame, turn off visibility for all layers you do not want visible at the start of your animation. Then add one frame at a time, and turn on the layers you want visible for each step in the animation. Changing layer visibility one frame at a time is a classic Photoshop animation technique that covers a wide variety of needs. In our example, continue this pattern to reveal the countdown and the flame at the bottom of our rocket.

 

Step 3: Create Animation Frames using Tween.

ExampleAnimation-Step3.png

Now that the countdown is complete, we need to create the illusion that our rocket ship is taking off. Add one more frame, and this time select the group called “Rocket” in layers and move your rocket off the top of your image window.

Then choose “Tween…” from the Animation palette’s pop-out menu.
ExampleAnimation-Tween.png
Set how many frames to add, and Photoshop spreads the movement of your layer across those extra frames.

 

Step 4: Adjust your Timing.

ExampleAnimation-Step4.png
Finally, go back through and adjust the delay for each frame of your animation. That time is shown in seconds below each frame.

Tip: You can hold down the Shift-key to select a range of frames (such as the 9 frames we added for the rocket’s takeoff) and change them together.

 

Step 5: Export the Animated GIF.

Finally, to export your animated GIF choose:
In Photoshop CS3: File > Save For Web & Devices…
In Earlier Photoshops: File > Save For Web…
ExampleAnimation-Step5.png

Make sure the image type is set to GIF, feel free to experiment with some of the other options, and save your file.To test your resulting animated GIF, drag the file onto you web browser.

As a final reference, you can download our finished Photoshop file here:

Source: The animated spokesperson at the top of this tip is a homage to Tacoma illustrator Mark Monlux’s daily comic strip The Return of Stickman. Mark is a talented and funny guy, who generously allowed us to butcher his creation for this tip. Check out Mark’s site, and sign up for his daily email Stickman comic.

Share:

13 komen:

Ahmad Haziq Azlan said...

cool nya.....
tapi tak ada masa nak belajar la..

aRry ReNnwooD said...

cool,,,kreatifnyer awk yer..hehe

Puan Kutu said...

cantik header baru.hehe..

akk pun takde masa nak belajar buat animated nie.hehe..

3no gr33ny said...

org yg rajin je blh sabar dgn sme ni..huhu

CCICute Design said...

wah..jeles tgk header dia...tab menu plak banyak tol jenis lens.....wawawawaw...nak 1 lens boley....ngeee~~~~

CCICute Design said...

jom exchange link nak.. cci amik link alif tuk letak kat list cci.. :P

CCICute Design said...

jelesler...sbb header leh wat sendirik gerak2 tu... cci sebb tempah cuma design jerk cci wat..muehehehe... :P

Zul Fattah said...

haha.. ok.. aku try buat lu.. kalau tak jd aku tanya ko Alif..

ashrafi said...

Assalamualaikum.

Ini menarik, saya sudah banyak tertinggal mengenai perkara sebegini.

TK said...

menarik... baru tau boleh buat animated gif dengan photoshop (sebab TK jrg guna photoshop)... terima kasih...

QasehSuci said...

thanks alif....leh wat sendiri pasni...

Shafiq said...

TQ Share Ilmu..Dulu Pernah Belajar Tp Lupa..OTW Buat Pic Gerak2..haha

BEYOND ENERGY SAVING DEVICE said...

Salam, saya nak tempah animated gift dari awak.. Kalau boleh, tolong PM sya di mujahadahdiredhai@gmail.com. TQ

Bonjour & Welcome

Bonjour & Welcome

ألف إسماعيل

Followers

Powered by Blogger.

Theme Support