how-to block ads
|
|
Uniqs:
1144 |
Share Topic
 |
 |
|
|
|
 CyberRagePremium,MVM
join:2001-03-21
Jasper, AL
| Photoshop/ImageReady 3D Animation Tutorial 3D Spinning Ball with Text
In this tutorial we will create a realistic 3D spinning ball. But isn't Photoshop a 2D graphics application? Only if you believe what they tell you.  Paint Shop Pro users should be able to do this project as it only involves adding a couple of layers for shading and highlights and duplicating your text many times, moving and distorting each copy.
This tutorial can be done completely in ImageReady if you like. I'm going to begin in Photoshop just because I like using it. Begin a new project at whatever size you wish in either PS or IR. I'm going to make mine 400 by 400 pixels. You can create your background now or wait until you have your project finished. I made mine by pulling a light blue to black radial gradient from the top right corner past the bottom left corner. That is to say, I didn't stop my gradient at the edge of the canvas, I pulled beyond the edge. Then I added a spotlight to the upper right corner. Before you do this you need to decide which direction your light is coming from. It's pretty obvious I've decided the light is coming from the upper right in mine.
The Gradient Tool is located on the Tool Palette. I've circled the icon to select the Gradient Tool in this image.
Once you have selected the Gradient Tool move to the top of the screen and click on the Radial Gradient icon circled in red in the above image.
I used the default lighting setting when I added my light. I moved and shaped my light as seen here:
That gave me this background:
A radial gradient looks like the image below. I'm not sure if PSP users will need to design that gradient to shade from the upper right to lower left or if you can create that gradient and move it where you need it or if you will need to design the gradient to scale, that is, to the size of your project.
Now it's time to make a new layer. Move to the Layers Palette and click on the button circled in red here
and that will make a new layer, Layer 1 as seen in the example. Right click on Layer 1 in the Layers Palette the click on Layer Properties at the top of the menu. In the dialog that pops up type Circle for the name of the layer. I know most of you will skip that step but it's good practice to name your layers.
To put a circle on that layer pick the Elliptical Marquee tool from the Tool Palette shown in this example.
If you see a Square shape there instead of the circle just point at the square then press and hold your left mouse button. Wait a few nanoseconds and you will see some more options. Pick the round one. Move your cursor to the middle of the canvas, press and hold the Shift key and the Alt key, press and hold the left mouse button and move your cursor away from the center. By holding the Shift key, Photoshop and ImageReady helps you make a perfect circle. By holding the Alt key while pulling a selection, the selection moves outward from the center... the center being where you first clicked. By holding both keys you get a perfect circle drawn from the center. You can make some guides to help you find the middle of your canvas if you like or just wing it. Your selection can be moved after you have made it if it isn't just where you want it. Now pick a color to fill that selection. I'm going with blue; R=0, G=54, B=255. Pick a bright color because we will be making it darker very soon. Click on Edit then Fill and be sure your setting are Foreground Color, Normal, 100%, and Preserve Transparency is not selected. You should have something like this at this point.
While you have that circle selection active let's make our shading and highlight layers. Go to the Layers Palette like before and click on the New Layer button at the bottom. Right click Layer 1, click on Layer Properties and name it Shading. Press the letter D on your keyboard to set the default foreground and background colors which are black over white. Now press the letter X to switch those colors. White should now be your foreground color and black the background color. Select the Gradient tool again. It is already set to Radial Gradient so none of the settings need to be changed. Pull a gradient from the upper right to lower left of the circle if your lighting is going the same direction as mine. If not, pull it in the direction of your light. Pull the gradient inside the selection from one edge to the other. In the Layers Palette, set the Blending Mode to Multiply by clicking on the arrow beside the word Normal and picking Multiply from the options.
Also in the Layers Palette, set the Opacity for the Shading layer to about 90% as seen circled in red here.
Did you get something like this?
If you want more shadow don't reduce the Opacity as much. You can use the slider to adjust Opacity by clicking on the arrow beside the window that says 100% in your palette until you change it. Using the slider you can see the results as you move the slider. You can also just type a value into the window and press Enter.
Add a new layer. Name this layer, Highlight. Using the same colors as before, pull another Radial Gradient (same thing we've been doing) in the same direction as you did before...... Upper right toward lower left for me. Pull this gradient about half way across.... to the center of the circle. Set the Blending Mode for the Highlight layer to Screen. Now set the Opacity to about 91%. You should have something similar to this:
If you are happy with what you have you can get rid of that selection now. Press Ctrl+D on your keyboard to turn the selection off (or click on Select at the top of the screen then click Deselect).
Now it's time to add our text. Click on the layer labeled Circle. This will create our text between the color Circle and the Shading and Highlight layers so the text will also shaded by those layers and take on a look of being wrapped around the ball. Now select the Type tool from the Tool Palette.
Pick the font and font color you want to use. Bear in mind that the shading layers will shift your font color. When selecting the font size, don't go quite as large as you normally would. When we distort the text it will become larger. I'm going with AmazoneBT at 80 pixels for mine, color a very light blue but it will appear more light gray than blue. Decorate your text if you wish now. I used the Layer Styles dialog to tweak my text just a little. I added Drop Shadow and changed the Distance to 2 pixels and the Size to 2 pixels. I added Inner Glow and left everything at default values. I added Bevel and Emboss set like the image below.
Looks like this.
To access the Layer Styles double click on the layer you wish to apply styles to.
To open the setting for each of those (Drop Shadow, Inner Glow and Bevel and Emboss) click on the label for each in the list on the left. When you click Drop Shadow (the words), the options for Drop Shadow appear on the right. Same thing for Inner Glow and everything else you see in that list. Before you move on to the next step, right click on your text layer and choose Rasterize from the menu. (Optional step follows. Won't make any difference in the finished product.) If you applied any Layer Styles to your text and just want to get rid of those style layers tagging along you can add a new layer above your text layer, link the text layer to the new layer then press Ctrl+E. Now you will have a Layer 1 that looks just like the text layer and the text layer will be gone. If you did this, name your new layer. I'm naming mine, Text.
Now duplicate your text layer. Now duplicate the text layer again or duplicate the duplicate.  Doesn't matter as long as you end up with three text layers. Turn the lowest layer off by clicking on the eyeball on the left of the layer. We'll use it again later. Turn off the top text layer. Click on the text layer in the middle of the three you have now. For me, that is the first copy I made named Text copy shown highlighted below.
Press and hold the Ctrl key and click on one of the layers with a circle on it. The Shading layer will be fine since it is handy. You should now have your circular selection back. Go to the top of the screen and click on Filter then point to Distort then click on Spherize. This box will pop up.
The only value I changed is Amount from 100% to 75%. Click on OK. Notice the text just became larger. If you started with text too large and it is now huge just go to your History Palette and look from the botton up until you find where you first duplicated your text or, in the case you merged your text layer to loose the Style Layers baggage then click one step above that. Switch back to your Layers Palette and change your text size. Go ahead, I'll wait for you.  When you get that text layer Sperized press Ctrl+D to turn off the selection.
With that text layer Spherized, turn it off and click on the text layer just above it. That is Text copy 2 in my Layers Palette shown above. Click on the Move Tool at the top of the Tool Palette circled in red below..... or just press the V on your keyboard to select the Move Tool.
Press and hold the Shift key then press the Left Arrow on your keyboard twice..... the left arrow, not the Backspace key. Pressing the arrow keys will move a layer or selection one pixel in the direction of the arrow you pressed. Holding the Shift key while pressing the arrow keys will move your layer or selection 10 pixels. We just moved our text 20 pixels to the left by pressing twice while holding the Shift key. If your graphic is larger or smaller than mine you may want to move your text more or less than 20 pixels. Now, right click on this text layer and click on Duplicate Layer. The duplicate layer will now be selected by default. Turn that layer off. Click on the layer we just moved (the layer just below the new layer) to select it. Now press and hold the Ctrl key again and click on one of the layers with a circle, again the Shading layer is handy. When you hold the Ctrl key and click on any layer all of the opaque pixels will be selected. In this case, we get a circle selection again. Press Ctrl+F to apply the Spherize filter again. Pressing Ctrl+F will apply the last filter you used with the same settings you used before. Press Ctrl+D to remove the selection.
Click on the text layer just above this layer, labeled Text copy 3 in my case. Since the Move Tool is still selected, hold the Ctrl key down and press the left arrow twice to move the text 20 pixels. (If some of your text has moved past the edge of the ball read the paragraph below.) Right click on the layer and click on Duplicate Layer. Turn off the duplicate layer and select the layer you just moved.... the layer below the top text layer..... just like before. Again press and hold the Ctrl key while clicking on the Shading layer to make a circle selection. Press Ctrl+F to apply the Spherize filter. Press Ctrl+D to drop the selection. Turn off the layer and click on the next layer up..... the top text layer.
You are getting the idea now. Keep doing these steps until your text begins to move outside the area of the ball. When you move the text and some of it moves past the edge of the ball, don't duplicate layer yet. A couple of steps need to be added now. After the text has been moved, click on one of the layers with a circle on it like that near by Shading layer. Now press Ctrl+Shift+I to invert your circular selection. Now press Ctrl+X to cut the pixels outside the ball area. NOW duplicate the text layer and turn the new layer off then click on the layer you just moved (next one down after you duplicated it) to select it. Again Ctrl+click on the Shading layer to make a new circular selection. Press Ctrl+F to Sperize then Ctrl+D to remove the selection. Again turn this layer off and move to the next layer above and do it all over again. Keep repeating these steps until you have moved the text completely off the ball. It will appear to have been moved around the side of the ball.
Remember that first text layer we left way down at the bottom of the Layers Palette? It's time to use it now. Scroll down to the bottom of the list then grab that layer and drag it up the list to just under the Shading layer. In other words, between the top text layer you just made and the Shading layer. To grab a layer just point at it, press and hold the left mouse button then move the cursor up. The layers will scroll when you reach the top (or bottome) of the list. Move it to here:
Click on the layer you just moved to the top (labeled Text in mine) to select it and turn it on. You did have the other text layers tuned off, right? Now move that layer to the right 20 pixels and duplicate it. We are going to do the same thing we did above except we are going to move the text in the opposite direction. We'll get it all going in the same direction when we animate it. Trust me. There is no reason for me to describe this in detail as it is the same as we did before.
When you get the text moved off the ball in both directions it is time to animate the project. If you did your work in ImageReady you are ready to go. If you have done this work in Photoshop then click on the bottom of the Tool Pallet to send your work to ImageReady. You might want to consider saving your work as a PSD file before beginning your work in IR.... you know.... just in case you need to make a couple of minor adjustments. Have all of your text layers turned off before you ship to ImageReady or if already in ImageReady, turn them off now.
The first thing to do is click on the arrow in the upper right corner of the Animation Palette in ImageReady to get this menu.
Click on Make Frames From Layers in the menu seen highlighted above and watch as IR makes an animation for you. And you thought this was going to be hard. If you have your layers built in order when you click that button you are done unless you want to do some tweaking. But this time, we do not have things in order so it isn't going to be quite so easy as clicking a menu item. Just a little more work and we are done.
Click on the first frame in the Animation Palette. Press and hold the Ctrl or the Shift key and click on the second frame. See that trash can icon at the bottom of the Animation Palette? Click it to delete those frames. We don't need them. Now scroll all the way to the end of the of the animation. You should see two frames with circle areas, one with our Shading layer displayed and one with our Highlight layer displayed. Delete those frames. We don't need them.
Click on the arrow in the upper right corner of the Animation Palette again then click on Select All Frames. Go to the Layers Palette and click on the empty square on the left side of the first layer which is labeled Background. An eyeball should appear in the square and the background layer should now be visible in all frames. Keep all the frames selected. Move to the next layer up. It is labeled Circle if you followed my lead but whatever yours is named it is the first layer we made by filling a circle with a color. Click the empty square on that layer and your circle will be visible in all frames. Now go to the top of the list of layers. Turn on the Shading layer by clicking on the empty square. Then turn on the Highlight layer the same way. Now that you have something beside a transparent background visible in those frames you can see IR placed all of the text layers in the frames in the order we had then in our Layers Palette. If you play the animation now it will look good at the beginning but really gets weird in the middle because the text jumps back to the middle and moves off to the right. Let's fix that.
Go to the frame where the text jumps back to the middle of the ball. It was frame 13 in mine. Click on that frame in the Animation Palette to select it. Now scroll to the end of the animation. Hold the Shift key down while you click on the last frame. That will select all of the frames between the first frame you clicked and the last including the first and last frame. Now click on the arrow in the upper right corner of the Animation Palette again and this time click on Reverse Frames. Now play your animation. Wow!! It works correctly now!!
Now all you need to do is set the timing as you like. Select all of the frames then click on the bottom of one of the frames.... right there where is says 0 sec with a tiny arrow pointing down. Pick the delay you want or select Other and type a value into the box. The delay you choose will be the length of time each frame is displayed. If you pick .15 second for a delay then each frame will be displayed for .15 second then the next frame will be displayed and so on as the animation plays. Look at the bottom left corner of the Animation Palette. If you see something other than the word Forever then click the bottom left corner and select Forever from the list. Now your animation will loop endlessly.
Whew!! I hope you enjoy this tutorial and it helps someone learning the Adobe applications. Have fun and experiment.
It looks like I may have messed up one of my text moves. Seems like there is a little jump around the middle but I'm not doing it again. LOL
Here are some I made earlier.
 
--
Prop your feet up at Southeast Chat
[text was edited by author 2002-12-15 06:08:01] | |
CyberRagePremium,MVM
join:2001-03-21
Jasper, AL | I'll do another one later today that looks like the ball is spinning. The above tutorial has a very smooth ball and you only see the text move.
Spinning the ball itself is much much easier and much quicker. Don't throw that PSD file from above away. It could save you some time.
--
Prop your feet up at Southeast Chat | |
CyberRagePremium,MVM
join:2001-03-21
Jasper, AL | 
3D Spinning Ball 2
The above tutorial is a little long and may even be difficult. This time we won't spin text around a ball, we will spin the ball with nothing on it. And this time, it's quick and easy!! We'll let ImageReady do most of the work. The only thing we need to make the ball spin is a little texture on the surface. Just a teenie bit will do.
The foundation for this project is the same as the previous. We need a background layer (unless you are going to have a transparent background on your ball), the original color filled circle, the shading layer, and the highlight layer. We won't be duplicating any layers and we only move one layer twice. Nice and easy. We won't even need to reverse any frames.
If you saved the previous project as a PSD file before you began creating the frames you can load that into ImageReady and use it. Just don't have any text layers visible. You should have only one frame. If you saved the previous project as a PSD file after you animated the text you can open that file in ImageReady but you will need to delete all but the first frame and turn off all text layers so the only layers visible will be the Background, Circle, Shading, and Highlight layers. Or, you can make a fresh new ball similar to the first steps above or like in this tutorial... Beginner Tutorial
I decided to make a new ball more like the one in the Beginner Tutorial. I opened a new project 250 pixels by 250 pixels. I went with a simple black background this time. My ball is 170 pixels in diameter. In the Info Palette it will show 170 by 170. You can watch that Palette (default location is the upper right side of the screen) as you pull your selection if you want yours to match mine. I filled my circle with red; R=255, G=0, B=0. For my gradients I used white for the foreground color and black for the background color on the Shading layer and a very light red (pink) for the foreground color with black as the background color on the Highlight layer. You can make your shadows, shading and highlights the way you like as long as you have your shading, shadows and highlights on layers above the original color filled circle. Mine ended up like this.
When you have your ball finished and loaded into ImageReady you will need to create another graphic. This will be the texture for the ball and will be the layer that provides the motion. You can make any kind of texture you wish to put on that ball. As you can see above, I went for something subtle... almost smooth.
To make my texture I opened Photoshop because I want to use the Noise filter. ImageReady won't let you make noise. The texture will be wider than the ball. You can probably get away with making the texture layer twice as wide as your ball. That will depend on the texture you create. Your texture may require a little larger size and if you are making a seamless texture you will want to keep it at 128 by 128 or 256 by 256, etc. so it will tile. My ball is 170 pixels so I started a new project in Photoshop 340 pixels wide and 170 pixels high. Here you can make your ball any color you wish. It doesn't matter what color you made your circle, if you have changed your mind now is the time to pick another color. I filled this new graphic with the same red; RGB=255,0,0. I clicked on Filters at the top of the screen then clicked on Noise then Add Noise. I set the options for Add Noise like the image below.
If you stopped now you could have a nice sparkle surfaced rotating ball. I added some blur to mine. Click on Filters, point to Blur then click on Gaussian Blur. I used a Radius of 4.5 to blur my texture. Click on Select then All. Click on Edit then Copy. Now head to ImageReady where you ball is waiting.
In ImageReady, select the layer with your circle on it by clicking on that layer. To paste the texture from Photoshop into the ball project, either press Ctrl+V or click on Edit then Paste. The texture will be pasted just above the circle layer. It will probably be labeled Layer 1 if you have your other layers named.
Looks kind of strange, doesn't it. You have a ball thing with a rectangle sticking out both sides. We'll fix that in a minute. For now, press V to select the Move Tool (or select the Move Tool from the Tool Palette). The texture layer should be selected since you just pasted it into the project so press the right arrow until the edge of the rectangle is just at the edge of the ball like this.
Now duplicate that frame by click on the Duplicate Frame button on the bottom of the Animation Palette.
Now, using the left arrow key, move the texture layer to the left until the right edge of the texture is at the edge of the ball. You can hold the Shift key down to move the layer more quickly. Release the Shift key when you get close to get it just right.
Now for the magic part. Go to the Layers Palette. If you look at the layers you will see the line Adobe displays between layers to assist our eyes in separating the areas for each layer. Press and hold the Alt key and point to the line between the Circle layer and the Texture layer. When you hit the right spot your cursor will change to a strange, black, lock looking thing. When the cursor changes, left click on the line between the layers. Whoa!! Did you see that? The rectangle vanished. That is exactly what we want to happen. This is called Grouping in PS and IR. We are using this wonderful feature to make us a mask. No matter where the texture is located we will only see the area that lies within the boundaries of the ball. Remember this trick. It can be used for a lot neat tricks.
All that is left is to set it in motion. On the bottom of Animation Palette click on the Tween button.
In the dialog box that appears, set the options like mine below. Probably the only thing you will need to change is the number of frames to add. I used 18. Your texture may require more or fewer frames. Or you may just want a slower spinning ball and wish to add more frames.
That's it, folks. All done. Tweak it if you like. If you made a large ball with many frames and wish to display it on the web you may want to reduce the file size as most browsers are poor animated GIF viewers when the size is large. Ironic, eh?
--
Prop your feet up at Southeast Chat | |
CyberRagePremium,MVM
join:2001-03-21
Jasper, AL | reply to CyberRage
I used the same PSD file I used for the first tutorial in this thread to make these. I just didn't use the text and added some different textures.
--
Prop your feet up at Southeast Chat | |
CyberRagePremium,MVM
join:2001-03-21
Jasper, AL | reply to CyberRage
One more. Click on the static image. These rotate. | |
|
