Create Animated Revolving 3D Ball with Text in Photoshop

Today i show you that how can we create Animated revolving Ball with Text.This is our final result which we create today 

Start off by opening a new ‘.psd’ document in Photoshop. Make the size of the document about 500x500 pixels. Name the document according to your personal specific needs.

The ‘dpi’ in the new document window determines the amount of pixels/dots per inch. In other words, the higher the value, the finer the detail of your design. See Figure 1 for details on opening your new document.

Figure 1

After configuring your settings as shown in Figure 1, and you pressed ‘OK’, you will now see a blank space in front of you on the workspace. This is where you have the freedom to create your design.


Figure 2

Choose the marquee tool in the toolbar. As default, the rectangular marquee will be selected, so you have to hold your mouse pointer on the selection, and wait for the options to appear. Then choose the elliptical marquee tool.

With this tool selected, draw a circle on your workspace. You can simply click and drag the mouse pointer to do this. In order to get a perfectly round circle, hold down the ‘SHIFT’ key while doing this. When you hold down the ‘SHIFT’ key while dragging, Photoshop assists you in creating a perfectly round circle.

Once you release the mouse pointer, you will see a circle drawn with a dotted line. You can now move the circle around, and position it accordingly.

In the toolbar you can now choose a color that you are going to fill the circle with. I chose a soft blue, but the choice is up to you. After you have chosen your desired color, with the circle still selected, go to ‘Edit->Fill…’ Or as a shortcut, you can press Shift+F5. This will now fill the selection, in this case your circle with the desired color that you chose. See Figure 3 for further description.


Figure 3

Ok, so you now have your filled circle. You can rename any layers in the layer panel by double-clicking directly on the name of the layer, and then editing the name by typing your desired name. If your layer panel is not visible, you can press F7 to make it visible on your workspace.


Figure 4

In Figure 4 you will see an action where the first layer is renamed as ‘Circle’. It is always better to rename your layers for your own convenience. This way you will make it easier for yourself to work on your project, by knowing what layer name symbolizes what.

You will now create two new layers to give your flat circle a 3D effect by adding shading and highlighting. In the layer panel, you will see a trash-can icon in the bottom-right. Next to that icon you will see an icon which looks like a piece of paper. Click on this icon twice to create two new layers. They will appear on top of the first layer named ‘Layer2’ and Layer3’. You can rename them ‘Shading’ and ‘Highlight’.

In the layers panel, click on the ‘Shading’ layer to select it. You will now give the circle a shading effect. In the tool bar, choose the gradient tool. Or as a shortcut, you can press ‘G’ to select the tool. With the tool selected, press ‘D’ and then press ‘X’. By pressing ‘D’ you will change the selected colors in the tool bar to the default, which is black and white. By pressing ‘X’, you will swap the colors around. In other words, white will now be your primary color.

But you will only want to apply the shading effect to the circle part. In your layers panel, click on the ‘Circle’ layer while holding down the ‘Ctrl’ key. Have a look at the workspace. Your circle now has a dotted line around it, which means that it is selected.

With your gradient tool still selected, drag a 145degrees line from the top-right hand part of the circle to the bottom-left hand part of the circle. This will now create a gradient that moves from white to black. This was done on your shading layer.

In the layers panel, with the ‘Shading’ layer still selected, click on the drop-down menu that says ‘Normal’ and select ‘Multiply’. This affects the way that the layer acts on the design. Next to the drop-down menu where you have just changed ‘Normal’ to ‘Multiply’, change the opacity of the ‘Shading’ layer to about 75%. This will make the ‘Shading’ layer 25% transparent, so that it doesn’t make the circle too dark.

In the layers panel, select your ‘Highlight’ layer. With the Gradient tool still selected, and the same colors as previously, drag another 145 degrees line, BUT this time only half the diameter of the circle. Same as you changed the effect of the ‘Shading’ layer to ‘Multiply’, now change the effect of the ‘Highlight’ layer to ‘Screen’ and also change the opacity to about 75%.

See Figure 5. This is more or less what you should have in front of you.


Figure 5

Your circle is now ready to be used for further processing. You can now create a new layer and name it ‘Background’. Move this layer in the layers panel to the bottom of all the layers in the panel. You can color the whole layer to your desired color. I used black, as a simple color to emphasize the rest of the design.

Create another new layer after you have colored the ‘Background’ layer to your desired color. Name this new layer ‘Text’. See Figure 6.


Figure 6

Your layers panel should now look like the one shown in Figure 6, except that you will have your background layer in there as well. I created mine afterwards.

With your ‘Text’ layer still selected, you will now choose the text tool in your tool bar. Choose the desired font and color. I will recommend that you use a size of about 36pt. It might seem small, but you will realize that once you apply the ‘Spherize’ effect later on, that the text will be enlarged.

Type your text on top of the circle. You can type any word that you wish to. Rather not long phrases.

After you have typed your text at about 36pt and you have positioned it in the middle of the circle, press ‘Ctrl’ + ‘J’ to duplicate the selected ‘Text’ layer.

With the new layer created and named ‘Text Copy’, press ‘Shift’ + ‘Ctrl’ + left. Every time you press left with the other two keys held down, you will move the text 20pixels in the specified direction. You will press the left arrow about three times to get your text in the correct position.

After you have moved the text of ‘Text Copy’, you can once again duplicate this layer by pressing ‘Ctrl’ + ‘J’. This will create a new layer named ‘Text Copy 2’.

Hide ‘Text Copy 2’ by pressing the eye icon next to the layer. Then select layer ‘Text Copy’. Once selected, click on the ‘Circle’ layer while holding down the ‘Ctrl’ key. Now your ‘Text Copy’ will still be the active selection, but the ‘Circle’ layer’s area will be used as the workspace for the changes that will be made.

Now go to ‘Filters’ in the menu bar, click ‘Distort’ and then finally click ‘Spherize’. See how the text warps around the circle with a spherizing effect.

You will now follow all of these steps over and over, until your text has completely moved off the left-hand side, and then do the same on the right-hand side. Once the beginning of your text moves outside the area of the circle, you have to ‘Ctrl’ + click ‘Circle’ to select the area of the circle. Then press ‘Ctrl’ + ‘Shift’ + ‘I’ to invert the selection.

Now everything, except the area of the circle will be selected. Make sure that your text layer which is moving outside the area of the circle is selected, and then press ‘Ctrl’ + ‘x’. This will clear all pixels of the selected layer in the selected area. In other words, the text that once moved outside the area of the circle has now disappeared.


Figure 7

You should have in front of you what is shown in Figure 7. Make sure that you have applied the ‘Spherize’ effect to all the text layers, and that you have no text moving outside the area of the circle on the left and right hand side.

Once you have done all of this, your design is now ready for export to ImageReady to create the physical animation.

At the bottom of the tool bar with all the tools, you will see an icon that looks like a piece of paper with an arrow moving out of it. Press this icon, and ImageReady will now open automatically. ImageReady installs with Photoshop, so you don’t have to worry that you don’t have it installed. If you have Photoshop, you have ImageReady.


Figure 8

Once ImageReady has opened, you have to convert all the layers created in Photoshop to frames for animation. If your ‘Animation’ window is not showing in your workspace, go to Windows->Animation to make it show on the workspace.

In the top right-hand corner of the animation window, you will see a small button with an arrow icon. Click the button and select ‘Make frames from layers’. See Figure 8 above for an illustration.

You will now see all the frames in the animation window. You can simply delete the first four frames. The ‘Background’, ‘Circle’, ‘Shading’ and ‘Highlight’. Click the arrow button again, and click ‘Select all frames’.

Now in your layers panel, with all your frames selected, make the bottom four layers visible by clicking the ‘eye’ icon. This will allow the ‘Background’, ‘Circle’, ‘Shading’, ‘Highlight’ to show in each and every frame.

Now all that is left to do, is for you to play the animation to see if all your frames are in the right order. If not, you can simply move them into the right order by dragging a frame to a new location.

You can use your own intuition to set the timing and other features. Once you are done, press File->Save Optimized As. You will now save your file as an animated ‘.gif’.

Finished Version