Animated zoom-out tutorial, Photoshop 8
Alright, this will be my first time making a tutorial for an effect that I just made up about... 20 minutes ago. The programs I'm using are Photoshop 8 and ImageReady. The effect will look something like this:
Step 1:
Well, first you need to choose your image. For this effect, I recommend using manga scans because the icon will end up with quite a few frames and manga scans don't require as many colors. I chose to use a manga scan from Chrno Crusade:
Step 2:
Now you'll need to turn the grid on. The grid is a very useful tool for animated icons in general. You can open it by going View > Show > Grid:
Step 3:
Now that your grid is up, choose a focal point to start at. It shouldn't be too big, because each frame will gradually get bigger. For this icon I chose to start with Rosette's face. Select the Rectangular Marquee tool and select the area that you choose and copy it.
Step 4:
Go to File > New. Try to make sure that the number of pixels on each side are already equal. With the grid tool it's easier than it sounds. If the settings are all okay, then press okay then paste what you just copied. Now here's where you edit the image, clean it up, color it, resize it, whatever you want to it. Just make sure you remember everything you did to the image, because you'll have to do do it again for the other frames.
Step 5:
Now that thats done, go back to your original image with the grid still activated. With the rectangular marquee tool, select an area around the area you selected before, but larger. I recommend starting two little squares diagonal from the top right corner of the part of the image you selected earlier, down to two squares diagonal from the bottom left corner of where you selected earlier. I know it sounds confusing, but I don't know how else to word it. That's why I have a picture:
It's kind of hard to see, but the black and white lines around Rosette's face show the area I selected earlier. The blue dots show the start and end of the area I'm selecting now. Basically, click where the top blue dot is, then drag down to the bottom one. Copy that area then go to File > New again. Again, make sure that the image already has equal pixels on each side. Now edit the image the same way you did with the earlier one. When you're done, paste the image ontop of the one you made earlier.
Keep repeating the process of selecting more of the original image in the same way to make more frames. When you have as many as you want, import it into ImageReady.
Step 6
Now, this step is pretty simple. Just put a tween between each frame. For this icon I used three tweens, but you can do more or less. It's all up to you. Just remember that the more tweens you add, the more frames there will be, the bigger the icon will be, and the more you have to reduce the quality to get it to fit LJ standards.
Now all you have to do is set the time and get the icon down to the right size. With luck you might end up with something like this:
With LJ standards you might end up with something like this:
.
Just have fun with it and good luck! I hope that wasn't too confusing. o_o
Step 1:
Well, first you need to choose your image. For this effect, I recommend using manga scans because the icon will end up with quite a few frames and manga scans don't require as many colors. I chose to use a manga scan from Chrno Crusade:
Step 2:
Now you'll need to turn the grid on. The grid is a very useful tool for animated icons in general. You can open it by going View > Show > Grid:
Step 3:
Now that your grid is up, choose a focal point to start at. It shouldn't be too big, because each frame will gradually get bigger. For this icon I chose to start with Rosette's face. Select the Rectangular Marquee tool and select the area that you choose and copy it.
Step 4:
Go to File > New. Try to make sure that the number of pixels on each side are already equal. With the grid tool it's easier than it sounds. If the settings are all okay, then press okay then paste what you just copied. Now here's where you edit the image, clean it up, color it, resize it, whatever you want to it. Just make sure you remember everything you did to the image, because you'll have to do do it again for the other frames.
Step 5:
Now that thats done, go back to your original image with the grid still activated. With the rectangular marquee tool, select an area around the area you selected before, but larger. I recommend starting two little squares diagonal from the top right corner of the part of the image you selected earlier, down to two squares diagonal from the bottom left corner of where you selected earlier. I know it sounds confusing, but I don't know how else to word it. That's why I have a picture:
It's kind of hard to see, but the black and white lines around Rosette's face show the area I selected earlier. The blue dots show the start and end of the area I'm selecting now. Basically, click where the top blue dot is, then drag down to the bottom one. Copy that area then go to File > New again. Again, make sure that the image already has equal pixels on each side. Now edit the image the same way you did with the earlier one. When you're done, paste the image ontop of the one you made earlier.
Keep repeating the process of selecting more of the original image in the same way to make more frames. When you have as many as you want, import it into ImageReady.
Step 6
Now, this step is pretty simple. Just put a tween between each frame. For this icon I used three tweens, but you can do more or less. It's all up to you. Just remember that the more tweens you add, the more frames there will be, the bigger the icon will be, and the more you have to reduce the quality to get it to fit LJ standards.
Now all you have to do is set the time and get the icon down to the right size. With luck you might end up with something like this:
With LJ standards you might end up with something like this:
Just have fun with it and good luck! I hope that wasn't too confusing. o_o