Animate your images to attract attention and fight the static boredom. This section contains tutorials to help you master the animation process.  Home Photoshop ImageReady Animation Creating and Animating A Jack In the Box

Creating and Animating A Jack In the Box


We'll start by creating a 3d box. Create a rectangle in a new layer.

image 1

Press Ctrl+T. Right click and select perspective.

image 2

image 3

Duplicate the layer and fill with black color. Move the layer below the first layer.

image 4

Create another rectangle. Using similar steps create the other sides of the box.

image 5

image 6

image 7

image 8

Duplicate this layer and fill with black color. Place it on the other side. Move this layer below all layers.

image 9

Create top lid of the box similarly.

image 10

Press Ctrl+T. Right click and select warp. Adjust nodes and handles to create a shape like this.

image 11

Fill this shape with orange color.

image 12

Duplicate this layer. Fill it with brown color. Move this layer below previous layer. Move this shape towards right a few pixels.

image 13

Apply stroke layer style to all box layers.

image 14

Using custom shape tool create some cool flowers and patterns on front sides of the box.

image 15

Our box is complete. Now we'll create jack. USing elliptical shape tool create a few ellipses and place as shown.

image 16

Create eyes, nose lips etc. using 2 pixel brush. Create 2 springy antenna and place on top of the head.

image 17

Create arm and hand using pen tool.

image 18

Duplicate the arm layer. Flip horizontally and place it for the other arm.

image 19

Our jack and box, both are done. Link and merge all jack layers together. Time to animate jack. Open animation window. Select first frame and in layer window hide jack layer.

image 20

Duplicate this frame. Unhide jack and adjust it's position as shown.

image 21

Duplicate this frame. Adjust jack's position as shown. At this frame jack is mostly out of the box.

image 22

Duplicate this frame. At this frame simply move jack just a couple of pixels down.

image 23

Select frame 3&4. Duplicate it three four times. This will add a springy motion to jack.

image 24

image 25

Press Shift+Ctrl+Alt+S to save an optimize animated GIF.

Creating and Animating A Jack In the Box



Author's URL: Fiery Darts
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Animate your images to attract attention and fight the static boredom. This section contains tutorials to help you master the animation process. More ImageReady Animation Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Creating and Animating A Jack In the Box"

Captcha