In this thread...every post will discuss a certain graphic technique and this post will discuss animated signatures.This tutorial will explain how to create an animated signature image with ease. I use this method always since it's the easiest. I made this, I did not copy it from anywhere.
What do I need ?
- Photoshop CS/CS2 <both are fine but I highly recommend using CS since it doesn't show the image optimized as default>
- ImageReady CS/CS2 <both are fine>
*Note : Be sure to tick the "animation" on "Windows" before you start using ImageReady.
- Windows movie maker <I will explain why later>
- NeroVision <--- optional, though I use it alot.
How do I start ?
PhotoShop and ImageReady
Signature image
- Start making the signature image using PhotoShop *Note : Don't make it with ImageReady...don't ask why, just don't do it*
- Leave a space for the animated picture. don't make it a big one...I recommend saving at least 200x200 max for the animation.
- After you finish the image,
DO NOT flatten the image/join all layers together...only flatten the image when you are 100% sure that it doesn't need any edition.
- After you finish everything...save the (.psd*) file first, then "save for the web" the image as GIF
* Note : it doesn't have to be GIF, I use GIF because it's smaller in size; makes it easier to upload*.
Animated picture
- "Open with" ImageReady the animated picture and touch nothing when it opens
*Note :
DO NOT touch the layers, frames, move any of them*
- Edit the "canvas size" on "image" and make it exaclty as the previously made signature image.
- Open the signature image and drag its layer to the animated picture's layer box
*Note : drag and drop, nothing complicated about it.
DO NOT move it after you drop it*.
- In the layer box, you will notice that the signature image became a part of the animated picture. make it the first layer by simply dragging down signature image's layer to the bottom in the layer box. reposition the signature image by "selecting all frames" in the animation box, then move it freely as desirable.
*Note that you'll screw up really bad if you don't "select all frames" while moving the signature image.
- On "select", choose "all layers" and deselect the signature image by simply holding ctrl and then click on it in the layer box.
- You will notice that the animated picture's layers are only selected...that's exaclty needed...then go to the animation box and click on the little arrow on the upper right corner. then select "select all frames".
- Go to "edit" and "free transform" the animated layers and frames to fit the space you previously made for the animation on the signature image.
- Click on the "play animation" button to check if everything is in place or not.
- If everything goes fine, save it as (.psd*) and open it with Photoshop.
Editing the signature
- In Photoshop, remember
NOT TO faltten the image, doing so will ruin everything.
-
DO NOT TOUCH THE LAYERS PLEASE!!!!
- Any edition to the layers in Photoshop will mostly ruin everything.
- Create a new layer and make it on top of all layers..use brushes or anything to make the animation better..if any edition needed to the image, do it the signature image only.
- After you finish, save the (.psd*) file and open it with ImageReady and check if any edition is needed for signature image only.
- "save optimized" the image.
- Well done
These are the basics needed to create and to preform the animation.
Windows Movie Maker
Why windows movie maker ?
Windows movie maker is one of the easiest movie-editing softwares to use. everything is possible when using it..from audio to video. but since we're animating here, only video will be explained.
Which version should I use ?
Actually, there is no difference between versions...the layout is kinda identical and ways to preform are similar as well.
Windows movie maker, is it a must have ?
No it's not, though you will be taught how to create animations from movie clips. by that; you won't have to use "already made" GIF animations.
Is there any other available movie-editing softwares to use ?
A lot of other softwares are available, though windows movie maker is very easy to use...
How to start making animations using Windows movie maker ?
There are two methods to create an animation : Image saving by frames - creating a known video format extention for ImageReady to identify.
Image saving by frames -
This method is very easy, yet it take too long for making a full animated picture :
- Drag a movie to the blank space in the middle of Windows movie maker. then drag it to the timeline below - sometimes it's the story board, you have to change it by clicking on it -and then it gets harder.
- You'll notice that the timeline is devided to seconds, when you highlight the movie from its end. the the icon will become red and then you can shorten the movie by moving it forward...keep doing that till you reach the desirable movie clip.
- When you reach the desirable clip, pause and start taking snapshots...after you take the first one, do not fast forward the movie. just click on "next frame" and save while doing so...every image completes the other...keep doing that until you get a complete animation.
- Then open the saved images with photoshop and edit the blending options for all of them to 0% EXCEPT the first one. save it and then open it with ImageReady and do the animation just like any other by the previously mentioned method.
Creating a known video format extention for ImageReady to identify -
This one is easier and takes less time to finish...as you know, ImadeReady can open only two types of video formats. which are (.mov*) and (.avi*) :
- Drag a movie to the blank space in the middle of Windows movie maker. then drag it to the timeline below.
- Make a clip just like the way I mentioned by frames...but now you have to save the movie so ImageReady can identify it.
- Till now, I've tried every single format available but none are known or identified by ImageReady, that's why I started using NeroVision but NeroVision is harder and take a hell a lot more time. Just stick to Windows movie maker
If you have any questions, please ask. ~Natsume