Hokage's Room

The Seikishidan

Clan Leader:

SLEIDER

Type:

Public, Approval Required

Founded:

Jun 20, 2007

Location:

n/a

Members:

2

Description:

The Seikishidan or Holy Order of Knights aims to teach it's 20 members how to make signatures, icons, avatars as well as to apply the knowledge in graphic-making to things that we can use even in real life.

• Blog
• Members

Animation 104

Animation 104: Mini TV Animation + Transparency
This is a bit painful to do but worth it when it's done.
This is the concept that I applied when doing the Kakashi Banner in my blog.

First Phase
Extract Animation Frames from the Video that you desire to animate. Use this tutorial.

 

Second Phase

Create a multi-layered stock image in Adobe Photoshop.

 

I won't explain how to do those kind of borders yet in this tutorial.

For the transparency, apply the concepts in this tutorial. 

When you're done creating the stock image, transfer it to Image Ready (or Open it in Image Ready) 

 

Third Phase

After carefully following the first and second phase, it's now time to adjust the final image in Image Ready.

 

a. Go to File then Import folder as frames. Select your designated folder based on Phase 1. 

 

b. Resize the animation frames via Edit - Image Size.

In the Kakashi banner, I resized my animation frames to 300x115 px 

After doing so, resize the canvas to the same size as your stock image. 

 

c. Adjust the time delay, let's say 0.1 seconds for each frame.

 

d. Carefully insert all the layers of the stock image that you created on top of the animation frames. Make sure you selected Frame 1 in the Animation window. The explanation for that is in the image below. 

 

Explanation why there are 3 layers saying "Stock Image Background" in the screenshot below: If there are unecessary transparent parts, cover it up by duplicating the background layer of the stock image and fiddle with it as you wish. 

 

e. Erase all the unecessary visible parts outside your border (if you did applied the vector concept or the border + transparency concept).

 

f. When you are done editing, go to File then Save Optimized as. Save as a GIF. 

 

-------------- End of the Tutorial --------------

 

If you liked this tutorial and you wish to know even more, join the Seikishidan. The door of creativity is being opened for you.

I have some more knowledge to impart to you as your clan leader. I will also patiently give answers to all questions that the official clan members will give me and that is something which I would not do outside the Seikishidan Clan. 

Posted Jul 3, 2007 by Sleider | Share It

Filed under: Animation Tutorial