animasi photoshop

8/3/2019 Animasi Photoshop

1/12

Home Animation Ant moving around

Ant moving aroundSkill level:

Time Required:

hrs mins

MAKE AN ANT RUN AROUND

1. Creat new document in Photoshop, size 200 x 150 px, transpament background

2. in first layer, use brush tool to creat a random closed path
http://psd.tu-torial.com/http://psd.tu-torial.com/view_cat.php?id=1http://psd.tu-torial.com/view_cat.php?id=1http://psd.tu-torial.com/


2/12

3. Draw an ant ( i think it :P )

4. Hit Ctrl + T and transform the ant small and lie down the path ( you should fill light color forthis path )


3/12

5. Creat new layer, Hit Ctrl + T again, and transform....


4/12


5/12


6/12

Filled the path, note : in one step, u must creat new layer

6. And now, hidden all layer by clicking on Hide icon close layer.

Change all layer to ImageReady


7/12

7. on Animation pallet, use New frame icon to creat 45 frame like this

8. Important in frame 1, you unhide layer 1 ( have an ant )

in frame 2, layer 1 will hide again, you unhide layer 2

in frame 3, you unhide layer 3...

do the same step with 42 next frame

Animation Shot

When done, click on Play icon to preview or Save as *.gif type

Our result !!!


8/12

Animating in PhotoShop CS3Thursday, August 14 2008PhotoShop used to ship with a helper application known as ImageReady, which was used forsuch things as animation. PhotoShop now has ImageReady features built-in, so we can animateour PhotoShop documents without exporting to an external application. In this tutorial, you willlearn how we can add motion to our graphics and export as an animated GIF.

Animation was added to PhotoShop in version CS3, so this tutorial is aimed at Adobe PhotoShopCS3. ImageReady uses a similar process for animation.

If you're ever in the market for some great Windows web hosting, tryServer Intellect. We havebeen very pleased with their services and most importantly, technical support.

The first thing we need to do is to create a new document. We will add some text to the canvas,and this is what we will animate:
http://www.serverintellect.com/http://www.serverintellect.com/http://www.serverintellect.com/cloud-hosting/facts/http://cs5.photoshopatoms.com/http://www.serverintellect.com/


9/12

Now, we will goto Window > Animation. You should see a window like the following:

Click to enlarge

This window will be used for creating keyframes of our animation. At the moment, we have just

one keyframe - the current state of our canvas. We will now add a new keyframe. Click on theDuplicate Frame button at the bottom of the Animation Window ( ) and we should havesomething like this:
http://www.photoshopatoms.com/tutorials/animating-in-photoshop-cs3/images/img02.gif


10/12

We now have two keyframes, but they're both exactly the same (because we duplicated). This isOk because we want the keyframes to start off the same, and then we can make our changes. Wewill want the second keyframe to be at the end point, or next point of our animation - we will nothave to recreate every step ourselves. Go ahead and make sure the second keyframe is selected,then drag the Text Layer over to the right-hand side of the canvas, like so:


11/12

We are using Server Intellect and have found that by far, they are the most friendly, responsive,and knowledgeable support team we've ever dealt with!

Notice that keyframe 1 has stayed the same as the original, but in keyframe 2 the text is now overto the right. If we click between the two keyframes, we can see the differences on the canvas.Next, we can let PhotoShop do the animation of the in-between frames. This is called Tweening.

Make sure the second keyframe is selected, and click on the Tweening button ( ) next to theDuplicate button.

We will then be asked which frame we want to tween with, and how many frames we want toadd. We will leave the default, 5 frames. Click Ok.
http://www.serverintellect.com/http://www.serverintellect.com/


12/12

We now have 7 frames, each slightly different, which provide the illusion of movement. We can

click the Play button at the bottom of the Animation Window to preview the animation.

Click to enlarge

If the animation is too fast, you can change the speed by clicking the small black arrow at thebottom-right of each frame, next to 0 sec. This will change the duration that the frame will showfor.We can repeat the process of animation to animate the text further, not only using motion, butWarping the text also:

To save as an animated GIF, we goto File > Save For Web & Devices, and make sure GIF isselected from the presets menu.

Yes, it is possible to find a good web host. Sometimes it takes a while. After trying several, wewent with Server Intellectand have been very happy. They are the most professional, customerservice friendly and technically knowledgeable host we've found so far.
http://www.serverintellect.com/http://www.serverintellect.com/http://www.serverintellect.com/http://www.photoshopatoms.com/tutorials/animating-in-photoshop-cs3/images/img08.gifhttp://www.serverintellect.com/http://www.serverintellect.com/

animasi photoshop

Documents