|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Let's make a BARBER POLE that moves !
|
| Well, I turned this one upright so it actually looks like a Barber Pole, and added a little globe on top to enhance the effect some. This tutorial uses Photoshop 5.5 and ImageReady 2.0 which comes as part of the Photoshop package. |
|
Back to TIPS |
 |
|
|
|
|
|
|
|
|
Open a new document in Photoshop "Ctrl N" and create a rectangular selection with the Marquee tool. Hit "D" to select the default colors black and white, then hit "X" to put white in the foreground and black in the background. Choose the "Gradient" at the tip of the red line in the figure on the right, and holding down the "Shift Key" fill the selection from the middle to just outside your selection as in the red oval at right. |
|
|
 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
 |
|
|
|
|
|
|
|
|
|
|
|
|
|
This should produce a pole similar to the one on the right, but you might have to adjust the levels "Ctrl L" to make it look a little lighter or darker. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
 |
|
|
|
|
|
|
|
On a new layer above the pole, draw a rectangular selection much wider than the pole and fill with red (or whatever color you want). |
|
|
|
|
|
|
|
|
|
Now choose "Edit" ... "Transform" ... "Numeric", and then check the "Rotate" box and type in "45" for the degree of rotation. Stay on this layer, and "Ctrl Click" the pole layer to select the pole area. Now hit "Ctrl Shift I" to inverse your selection and hit the "Delete" key to clear the excess red area outside the pole. You should now set the "Blending Mode" at the top of the layers palette to "Multiply" and find that you have something like this. |
|
 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
 |
|
|
|
|
|
|
|
|
|
I copied this layer a total of 4 times and saved one to use later. I merged three of these together into the one layer that you see here with three bands on it, and again chose "Multiply" for the mode. The one that I saved I named "Restart" in the layers palette - we're going to use this single one a little later, so keep it handy and separate from the others. |
|
|
|
|
|
|
|
|
|
 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
I now copied this new, merged layer with three bands on a total of 4 times, and each time I moved the copy up about 3 or 4 times with the "Up Arrow" key on the keyboard after hitting "V" to select the move tool. You can see these copies in the figure on the left. You can also see the "restart" layer down at the bottom of the figure. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
 |
|
|
|
|
|
|
|
|
|
Now it's time to go to ImageReady 2.0. Click the icon at the bottom of the "Tools" palette to launch ImageReady, but make sure that you have saved your photoshop file first - otherwise it will tell you that you have to do this anyway. |
|
|
|
|
|
 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
You should now see an "Animation" palette in ImageReady 2.0. If not, then choose "Window" ... "Show Animation" to see something like this. You will see the "Initial Frame" which is your starting image. Click the "Duplicate Frame" button to add a copy of this frame. |
|
|
|
|
|
Here is where a little logic comes in handy !
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
On the new frame of the animation that you added by clicking the duplicate frame button you want to look at the layers palette (just like in Photoshop), and hide or show layers to change your frame appearance. On this one for example I added frames and made the "sphere" start to glow, and the "stripes" start to move - all by just showing layers that were initially invisible and hiding others. To get the moving pole effect I added frames and made the "moved" bar layers visible in succession while hiding the previous "moved" layer on the new frame. HERE IS WHERE THE "RESTART" LAYER COMES IN HANDY! As I show these moved layers in succession, there will obviously be a gap that appears at the bottom of the pole. By showing the single bar "restart" layer, and by moving it slightly using the move tool (again, just like in Photoshop), I can keep the pole uniform until I reach the point where my animation is ready to start repeating itself - when it starts to look like the original position of the stripes. At this point you could either just stop where you are, or copy the animation frames by selecting them and copying them to the end of the animation. Play with the animation by adjusting the time intervals at the bottom of each frame, or adding or deleting frames until it looks right. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
 |
|
|
|
|
|
|
Choose your optimize settings by adjusting the figures in the "Optimize" palette - "Window" .... "Show Optimize". Remember, the fewer colors you choose the smaller your image, but the lower the quality as well. |
|
|
|
|
|
|
|
|
|
 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Preview your animation by choosing the "Optimized", "2Up", or "4Up" tab on the image window, and when you're satisfied that it looks OK choose "File" ... "Save Optimized as" and name it and save it. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|