how-to block ads
|
|
Uniqs:
1063 |
Share Topic
 |
 |
|
|
|
 CyberRagePremium,MVM
join:2001-03-21
Jasper, AL
| Tutorial: Spinning Objects with ImageReady Spinning Objects
Spinning Objects with ImageReady
Spinning objects with ImageReady isn't a quick process. This isn't a difficult task but there are many steps involved. There are a few variations on the basic technique used to spin an object with ImageReady. I'm going to take the short-cut way.
Let's get started. I'm going to spin some text. I've decided to spin the word, "text." What an imagination. I'm going to start this project in Photoshop because I like working in PS. It's fine to do all of this in ImageReady if you prefer. Begin a new document in Photoshop or ImageReady 100 pixels wide and 76 pixels high with a transparent background. I used the font Arial Black at a size of 36 pixels. Looks like this:
The first thing you want to do is duplicate the layer you just put your object on..... our text in this case. You can duplicate a layer four ways in PS and IR. My favorites are right click on the layer and pick Duplicate Layer; my other favorite is to grab the layer with my mouse and drag it to the button I've circled in red here. That button is at the bottom of the Layers Palette.... the same button that makes new layers.
I've zoomed in to 200% so I can better see what I'm doing. Yeah that's right, I'm blind. It's up to you if you want to turn the original layer off at this time or leave it on. If you leave it on you can see how much you adjust the duplicate layer compared to the original. If you turn it off you can see the grid behind and use that as a reference. Whatever works for you. I turn the previous layers off. We'll do it both ways here just for example.
Click on Edit at the top of the screen then Transform then Scale. That will put a box around your object as seen in this image.
We want to reduce the size of the object on the sides. In other words, we want to squeeze that puppy in on the sides. Grab one center square boxes on one of the sides. I'm grabbing the right side but it doesn't matter. Grab one of the boxes I've circled with red in the example below. Here is a neat trick, hold the Alt key down on your keyboard, point to one of the middle squares, left click and hold the left mouse button down and push toward the center of the image. By holding the Alt key down you adjust both sides equally at the same time. Hey, that should help keep that sucker in the center. Don't you think? Don't be afraid to squeeze it a bunch. If you move the sides in too little you will end up with a lot of frames and a huge animation.
Mine ended up looking like this. Doesn't look like a lot of difference maybe but I moved the sides in greater than the width of the letter t.... the vertical part of the t that is.
That is the first step to spinning an object. We are just going to keep squeezing that object until it is at least near something like a thin line. It doesn't always look good to have a really flat line. A thin line works pretty well for single sided objects but sometimes not so good for a double sided object. So what's a single sided object? Something that is the same on both sides. Like a sign with letters on a solid background where one would expect the same text on the opposite side. Those spins are easier to do than the one we are doing here which is a double sided object. You wouldn't expect to spin text and not see the text backwards for half the spin. So text is an example of a double sided object.
Back to spinning. Duplicate the layer you just modified. We will squeeze the new duplicate now. Do the same thing, click on Edit then Transform then Scale. Now holding the Alt key down and grabbing the center square on one side, move the sides toward the center like you did before. I changed the text on the previous layer to red and left it turned on in this example so you can easily see how much I moved mine.
That's a little more than I moved the first time but it's close. Now it's time to duplicate the layer you just adjusted. Do the same thing on the new layer you did on the first two duplicates. I duplicated the layers five times and adjusted each as I went giving me a total of six layers to spin the text 90 degrees. My last layer looks like this.
Not exactly a flat line but very narrow. If you were spinning a single sided object you would be finished here if you didn't plan on adding perspective. All you need to do at this point for a single sided object.... an object that is the same on both sides.... is to ship it to ImageReady and make some frames. I know what you are thinking, it's going to spin to that flat shape then spring right back. You will have six frames just getting to that flat or skinny shape. You copy frames 2 through 5, paste those frames after frame six then reverse those pasted frames. It's voodoo I say!!! Suddenly it will spin all the way around. But hey.... don't stop here. Text needs a backside. 
Getting back to spinning this text 360 degrees, go back to the original layer. Duplicate that layer. Move that layer to the top of the layer stack by either dragging it up the list to the top or click on Layer at the top of the screen then Arrange then Bring to Front. In version 6 or higher double click on this new layer and name it Backside or something so you can keep track of the forward and reversed layers. In earlier versions right click on the layer and rename it. Click on Edit then Transform then Flip Horizontal. That will reverse the text in this layer. Now we do the exact same thing we did before. Duplicate this layer and squeeze the sides of the duplicate. Duplicate that layer and squeeze the sides together. Keep going until you get something real skinny like we did before. It doesn't have to look exactly like mine to work. Every spin is different. Like the font side of the text I used five duplicate layers to get to my skinny layer. You do need to keep the same number of frames for each side or your spin will run faster on one side than the other.
When you have finished you should have a total of 12 layers. Two layers with the text full width (forward and reversed) and ten layers you've squeezed. Click on the first layer... the original layer with "text" full width facing forward. Should be Layer 1. If you began in Photoshop, click the bottom of the Tool Palette. That's the long vertical bar with all the tools on it. Click the area I've highlighted in the example below. That will send your work to ImageReady and sync the two applications. Whatever you do in one will be reflected in the other.
Now that we are in ImageReady we can begin to build our animation. Here is some the short cut part I was talking about. Saves a lot of layer making. Click on the arrow in the upper right corner of the Animation Palette. That's the film strip looking thing at the bottom of the screen. In the menu that opens click on Make Frames from Layers. If you clicked on the X by accident and closed the Animation Palette just click on Window at the top of the screen then click on Show Animation. That will bring it back. ImageReady has now made a new frame for each layer you have and is displaying each layer in a separate frame. IR makes the frames in the order you have them in the Layers Palette from bottom to top. There are circumstances when you ship work from PS to IR then make frames from layers you can end up with two frames with the first layer displayed. Should not have happened here but check to be sure. If frames one and two are identical, delete one by selecting it (just click on it) then click on the trash can icon at the bottom of the Animation Palette.
Now we have a really weird animation. Time to fix it. Click on frame eight in the Animation Palette. You might need to scroll to the right to find frame eight. Hold the Shift key down and click on frame eleven. That selects frames 8 - 11 inclusive. Remember that little arrow we clicked on just a minute ago in the upper right corner of the Animation Palette? Click it again. This time select Copy Frames. Now go back and click on frame six. In this animation frame six is the last frame of the forward text just before it flips to the backside of the text. The 90 degree point, in other words. After you have clicked on frame six click on the same menu arrow again and this time choose Paste Frames. In the dialog box make sure Paste After Selection is selected. Click OK. ImageReady just added a copy of those frames between frame six and seven and renumbered the frames. Those pasted frames are still selected. While they are selected click on the menu arrow again and select Reverse Frames. Ahhhhhh, now this is beginning to look like something. Now we can see it appears the text rotates from a full width front view to a full width back view and continues 90 degrees more until we get to a skinny frame. Now click on frame two, hold the Shift key down and click on frame five. Click the arrow in the upper right corner of the Animation Palette and click on Copy Frames. Click on the last frame, frame 16. Now click on the menu arrow and choose Paste Frames. In the menu box be sure Paste After Selection is selected and click OK. Now click on the menu arrow then click on Reverse Frames.
And there you have it. Spinning text. And it's transparent and under 5k!!!
But which way is it spinning? Hmmmmmm. If you are happy with this spin set your frame delays if you wish to have any and save it. I'm just not happy. I want to be able to tell which way it is spinning. Let's add some perspective to that text so we can make it spin counter clockwise if viewed from the top looking down at the text. That is, the first t will move from left to right in the forward views and from right to left when the reverse side is viewed. If you want to spin it the other way just reverse my steps. When I stretch the left, you stretch the right, etc.
Here is another part of the short cut technique. When we copied those frames and pasted the copies back into the animation we have ended up with some layers providing the material for more than one frame. Now if we physically edit one of those layers, that edit will show in every frame in which that layer is active. You can make many adjustments to a layer showing in multiple frames like position, opacity, layer styles, etc, but if you alter the physical pixels in a layer that edit will show in all frames in which that layer is visible. The editing we are about to do will not work with those frames sharing layers. So how do we solve this riddle? Two ways. The messy way is to go to that menu we've been using so much in this project and choose Flatten Frames into Layers. That can make a real mess of your layers. I prefer the simple clean solution and that's what we are going to use now.
Click on Image at the top of the page. Click on Duplicate Optimized. Now you have a copy of your animation but the copy will have a separate layer for each frame and they are all in the same order as the frames. This is good. This is very good. Now we have an animation we can work on.
Click on frame 2 in the Animation Palette then click on layer 2 in the Layer Palette. It is very important to have the correct layer active for the frame you are editing. Be sure you are in Original view in your image window and not Optimized view. Can't edit much in Optimized view. Now click on Edit at the top of the screen then Transform then Perspective. You can do all of the modifications we've done using the Distort tool and if you have a steady hand and wish to use that please do so. Just remember it is easy to move a corner in or out a pixel or two when using that tool and that will show up as a wobble in the spin. You should see something like this.
Grab the upper left corner of the box you see around your text and pull it up a couple of pixels. You can hold the Shift key down while making this move to assist you in pulling straight up and down as the corners can widen and shrink both the sides and the top or bottom. Let's keep it straight. We've come too far to make a mistake now. Now move to the right side and grab the top corner and pull it down a couple pixels or so. Try to adjust both ends about the same amount. We are shooting for something like the one you see on the right below.
See how that little adjustment makes it look like the text turned? I bet you guessed what's next. Yep, do the next frame. Go to the next frame AND the next layer, frame 3 and layer 3 in this case. Click on Edit then Transform then Perspective. Again pull the left side wider and squeeze the right side. Below you see what that frame looks like before on the left, after on the right.
As you work your way through the frames you should increase the amount of perspective you add. Just don't get carried away. Open my finished animation below and step through each frame to see what I mean. Keep doing this until you have adjusted frame six in the same way. Yes, even do frame six. Go ahead. You'll see it does make a difference.
As you can see in my capture of frame six after adjustment it looks quite different after I adjusted it.
Now we have reached 90 degrees. We have to change our perspective a little. Now we want to squeeze the left side and widen the right side. Below you can see my frames seven and eight and you will see that I have changes which side the narrow end is on. This is because that end is still the far away end but it has now passed the 90 degree point and is coming on around.
We are basically working in reverse now. The skinny frames need a little more perspective and as we work through these frames you need to lessen the amount you distort each frame. Stop at layer ten. Skip layer eleven. That is our full width view of the text reversed.... the back of the text as seen straight on.
Beginning with frame twelve through frame sixteen you adjust perspective like you did on frames two through six..... make the left side wider, squeeze the right side. The back side of the text is has now passed the 180 degree point and is turning back around to the front.
Beginning with frame seventeen through frame twenty you reverse the perspective again. We've gone 270 degrees and we're on the last leg of the spin.... back to the front again. When you get all of the frames adjusted you should have something similar to this.
Now you can tell which way it is spinning. Still transparent and less than 5K.
This is fast spin. The more layers you use to make your spin the slower the spin can be. We can slow this spin down a little but having only 20 frames it will never look smooth going very slow. This isn't the smoothest spin I've ever made. I was typing this text as I made the spin in an effort to not forget any steps. I think I should have concentrated on the spin first. 
That's it. You can apply this technique to spin most any object as long as you can get that object on a layer. If you have an object on a solid background you can spin the whole layer including the background then add a background layer in ImageReady the same color as the original background and it will still look as if the object is spinning.
Have fun. There is a thread to play in here: »Playing with Spins If you make a spin using this tutorial we'd love to see your work so click on the link a upload it there rather than clutter up this tutorial thread making it difficult for users to find the tutorials.
Play Thread
--
Prop your feet up at Southeast Chat
[text was edited by author 2002-09-24 17:22:30] | | |
|
nulllolPremium
join:2002-04-12
Brooklyn, NY | great tutorial | |
 cookeysPremium,MVM
join:2001-06-10
Orland Park, IL | reply to CyberRage
Man, this is totally awesome. I was hoping you'd do something like this! | |
|
