Chief
~ Shmalpha ~
- Admin
- #1
Requirements to make Animated Gif : Adobe Photoshop preferably CS5
I have found this youtube video where animated gifs have been done in Adobe Image Ready which used to be an additional package in older versions of Adobe Creative Suite. It now has been incorporated in Adobe Photoshop CS5. So this will give you a basic understanding.
The process using Photoshop CS5:
1. Gather the images you want to animate into one folder.
2. Open a new document matching the dimensions of your source images.
3. Select all of the source images and drag them together into Photoshop. Release them over the general workspace. The first image should show up with a superimposed “X.” New to Photoshop CS5, the images will stack one at a time as layers in your current document when you hit “Enter.” (In previous versions, dragging the files into the workspace would simply open each one up as separate files)
4. Keep hitting “Enter” until all of the images are loaded as individual layers. Rearrange the layers into the correct order, if necessary.
5. Open the Animation palette (Window > Animation).
6. In the Animation palette menu (found at the top right corner of the palette), click Make Frames From Layers. You can also click Reverse Frames if needed. This will take each layer in your document and set it as an individual frame in the animation.
7. Now we will change the duration of each frame. Make sure you are in frame view, not timeline view. If you do not see thumbnail icons of your layers in the Animation palette, click the icon in the lower right corner (the hover text will say “Convert to Frame Animation”). Now, back in the Animation palette menu, click Select All Frames.
8. Click the drop down button just underneath each frame image). This will bring up a menu where you can set a duration. Since all frames are selected, all frames will be set to the same time. Each frame can be changed individually, if desired
9. The drop down button circled in black in the image above will change how many times the animation will loop; either a fixed number of times, or forever.
10.Once the frame order and timing as been set up, it is time to save the image! Click File > Save for Web & Devices, make sure the file format is set to GIF, change any other options if needed, and save the image!
Always save as a PSD file incase you have to make alterations, A PSD file is a master file which can be re-editied.
To add a head '(ie Hamish’s head).
Open a new window and edit Hamish photo (all you will require in this case is a head)
Copy the head
Go to first layer of animation. Highlight. Then paste (Add head and position over existing head.) This creates a new layer in between Layer 1 and layer 2.
Once you are happy with the position you will have to resize to fit over the top. Rarely do pictures match.
Once you are happy with position. Duplicate layer and move in between layers 2 and 3. Now you will have to move the head to correspond with background position on layer 2.
Then do the same for all the layers. Until you have an additional head layer between all the original animation layers.
Now you should have a series of original base animations and heads
You will notice that there is a dot beside each layer. This makes each layer active or unactive. Highilighted dot means its an active layer. Switching them on an off is required. Make sure once you are happy with everything to switch them all off except Layer 1 and 1st head layer.
Go to animation palatte at bottom of page. Click on frame number 1
All you should see is the first Layer and 1st head.
Click on frame number 2. Make active layer 2 and 2nd head.
Click on frame number 3. Make active layer 3 and 3rd head.
Do this until all layers are complete.
Run the anumation to make sure everything is running ok (See points 9 and 10)
This all may sound very confusing and frustrating but believe me once you have done it a few times it will make sense. And you will get a lot quicker. You will make mistakes but making mistakes is part of the learning process.
To get a base Animation from movie or youtube clip.
Use Youtube Downloader to copy a clip onto your computer. This software is easy to find and its free
Open clip in a video editing program. Ie Windows movie maker, Nero vision (which I use), Adobe Premiere, Corel Video Studio. There are plenty of them out there.
Go to position of clip where you wish to start. Take a Snapshot of frame. (This will place a copy of the frame in your pictures folder.) This will be the first frame of background animation. Forward the clip 4-5 frames and take another snapshot. This will be the second frame of background animation. Repeat until process until you have your series of snapshots.
Note: moving the clip 4-5 frames at a time makes adequate background animation. If you used every frame and took a snapshot you would be there forever.
Once you have completed this process. Edit in snapshots in Adobe Photoshop to create base animation.
Also using Photoshop CS5 you can open existing gifs and modify them
If you don’t have Photoshop CS5. (Your stuffed) haha
You can upload your pics to a Gif Maker site and they make simple animations. Here is a couple but I have never used them
http://makeagif.com
http://gifninja.com
Well that’s about it. Don’t hesitate to ask any more questions
Cheers Oogac.
I have found this youtube video where animated gifs have been done in Adobe Image Ready which used to be an additional package in older versions of Adobe Creative Suite. It now has been incorporated in Adobe Photoshop CS5. So this will give you a basic understanding.
The process using Photoshop CS5:
1. Gather the images you want to animate into one folder.
2. Open a new document matching the dimensions of your source images.
3. Select all of the source images and drag them together into Photoshop. Release them over the general workspace. The first image should show up with a superimposed “X.” New to Photoshop CS5, the images will stack one at a time as layers in your current document when you hit “Enter.” (In previous versions, dragging the files into the workspace would simply open each one up as separate files)
4. Keep hitting “Enter” until all of the images are loaded as individual layers. Rearrange the layers into the correct order, if necessary.
5. Open the Animation palette (Window > Animation).
6. In the Animation palette menu (found at the top right corner of the palette), click Make Frames From Layers. You can also click Reverse Frames if needed. This will take each layer in your document and set it as an individual frame in the animation.
7. Now we will change the duration of each frame. Make sure you are in frame view, not timeline view. If you do not see thumbnail icons of your layers in the Animation palette, click the icon in the lower right corner (the hover text will say “Convert to Frame Animation”). Now, back in the Animation palette menu, click Select All Frames.
8. Click the drop down button just underneath each frame image). This will bring up a menu where you can set a duration. Since all frames are selected, all frames will be set to the same time. Each frame can be changed individually, if desired
9. The drop down button circled in black in the image above will change how many times the animation will loop; either a fixed number of times, or forever.
10.Once the frame order and timing as been set up, it is time to save the image! Click File > Save for Web & Devices, make sure the file format is set to GIF, change any other options if needed, and save the image!
Always save as a PSD file incase you have to make alterations, A PSD file is a master file which can be re-editied.
To add a head '(ie Hamish’s head).
Open a new window and edit Hamish photo (all you will require in this case is a head)
Copy the head
Go to first layer of animation. Highlight. Then paste (Add head and position over existing head.) This creates a new layer in between Layer 1 and layer 2.
Once you are happy with the position you will have to resize to fit over the top. Rarely do pictures match.
Once you are happy with position. Duplicate layer and move in between layers 2 and 3. Now you will have to move the head to correspond with background position on layer 2.
Then do the same for all the layers. Until you have an additional head layer between all the original animation layers.
Now you should have a series of original base animations and heads
You will notice that there is a dot beside each layer. This makes each layer active or unactive. Highilighted dot means its an active layer. Switching them on an off is required. Make sure once you are happy with everything to switch them all off except Layer 1 and 1st head layer.
Go to animation palatte at bottom of page. Click on frame number 1
All you should see is the first Layer and 1st head.
Click on frame number 2. Make active layer 2 and 2nd head.
Click on frame number 3. Make active layer 3 and 3rd head.
Do this until all layers are complete.
Run the anumation to make sure everything is running ok (See points 9 and 10)
This all may sound very confusing and frustrating but believe me once you have done it a few times it will make sense. And you will get a lot quicker. You will make mistakes but making mistakes is part of the learning process.
To get a base Animation from movie or youtube clip.
Use Youtube Downloader to copy a clip onto your computer. This software is easy to find and its free
Open clip in a video editing program. Ie Windows movie maker, Nero vision (which I use), Adobe Premiere, Corel Video Studio. There are plenty of them out there.
Go to position of clip where you wish to start. Take a Snapshot of frame. (This will place a copy of the frame in your pictures folder.) This will be the first frame of background animation. Forward the clip 4-5 frames and take another snapshot. This will be the second frame of background animation. Repeat until process until you have your series of snapshots.
Note: moving the clip 4-5 frames at a time makes adequate background animation. If you used every frame and took a snapshot you would be there forever.
Once you have completed this process. Edit in snapshots in Adobe Photoshop to create base animation.
Also using Photoshop CS5 you can open existing gifs and modify them
If you don’t have Photoshop CS5. (Your stuffed) haha
You can upload your pics to a Gif Maker site and they make simple animations. Here is a couple but I have never used them
http://makeagif.com
http://gifninja.com
Well that’s about it. Don’t hesitate to ask any more questions
Cheers Oogac.
I'll keep playing with it for awhile, because it is a good learning experience.
