| NOTE: The following tutorial was created using Adobe Photoshop 7.0 and Adobe ImageReady 7.0. A basic understanding of the use of these programs is helpful. Different versions and operating systems may have a different layout or require different steps. |
|
1. The first step is to find/create the images you want to use and give them all transparent backgrounds. (Looks like a grey and white checkerboard)
To do this, make sure all of the images are in "RGB mode":
[Image], [Mode >], [RGB Color] from the menu.
Next, find the "Magic Eraser Tool" and click once on the color of the image that you want to have transparent. Make sure that the "Tolerance" is set to "0", and "Anti-Aliased" is unchecked.
TIP: To change all occurrences of that color at once, uncheck the "Contiguous" option box. TIP 2: Always use the "Magic Eraser Tool" before resizing the images or else the background color will blend with the foreground when the pixels dither. |
|
2. Next copy and paste all of the images into a single file as separate layers: -Open one of the images. -[Ctrl+A] Selects the entire image. -[Ctrl+C] Copy's everything in the selection. -[Ctrl+N] Opens the "New Image" dialog box. -Set the sizes a little larger than the image, and set the background transparent. Don't worry if it looks huge, you can crop the image later. -[Ctrl+v] Pastes the image into the new picture. |
|
3. Create a new Layer beneath the others and fill it in with a background color. Black is usually the best choice for this. (Optionally, you can paste another image into the layer to use as the background.) |
|
4. This is where you personalize the image to your liking and add all of the cool lighting and blending effects. How you proceed from here is your decision. You can do anything you want during this step. Just play around with Photoshop for a while. Here's an example of how I made this image: scroll right to see more...--> |
|
|
|
|
|
TIP: Don't overlook the "Opacity/Blending" options for the Layers. You can make some neat effects just by changing the opacity of an image. |
| 5. Once you have all of the layers set up the way you like them, save your file as a .PSD and open it up in Adobe ImageReady. |
|
6. You will now be making the individual frames of the animation, using the layers that you created previously. Select only the layers that you want to have show up for each frame. For example: For my first frame I only want Gohan, the first animation frame of his aura and the background showing. |
|
7. Next, create a duplicate of the first Frame and select/deselect the desired Layers for the second animation Frame.
Repeat this step until you have created every animation Frame. TIP: Try to use at least 4 or more Frames of animation for every 'effect' in your images. Doing so will make the animation look less 'twitchy'. (My example here will only have three frames of animation, so you'll see what I mean by 'twitchy'.) ^_^; |
|
8. Next adjust the Frame delay of each Frame, as you like, to configure the speed of the animation |
|
9. Choose the "Optimized" or "Two-Up" view to see your animation as it would appear as a .GIF (In "Two-UP" view, the image on the right is optimized.) NOTE: .GIF images can only have a maximum of 256 colors, where as .PSD can have over 16 billion colors. Therefore, expect some color loss or 'dithering' when converting the file. You can adjust the optimization settings with the "Optimize" toolbox. The settings shown are what I generally use. In my opinion, they produce a very clean, well-blended .GIF image. You may use whatever you want though. |
Finished GIF
|
10. Once the image has been made to your liking, choose [File], ["Save Optimized As..."] from the menu. NOTE: Once the image has been saved as a .GIF file, ImageReady compresses all of the Layers into one Layer for each Frame. Therefore, if you wish to go back and EASILY edit your image, I recommend also saving the completed animation in .PSD format. (.PSD files do NOT appear animated outside of Adobe ImageReady!) |
.PSD
|
.GIF (with compressed layers)
|
| This page and all associated images on it are copyright to Calin Lee Jones and are not to be used without permission. The character name Gohan, Dragon Ball, Dragon Ball Z, and Dragon Ball GT franchises are copyright Bird Studio/ Shueisha, Toei Animation. Photoshop and ImageReady are copyright to Adobe Systems Incorporated. All rights are reserved to their respective owners. |
