?
Solved

Logo animation

Posted on 2006-04-15
4
Medium Priority
?
885 Views
Last Modified: 2008-02-26
Hi Experts,

I have a logo which I want to animate rotation through 360 degrees. Not clock/anti-clockwise, but front-Back-front again, i.e. 3D. Is this possible with CS2, or are there better applications for doing this?

Thanks
andy_bjts
0
Comment
Question by:andy_bjts
  • 3
4 Comments
 
LVL 26

Accepted Solution

by:
David Brugge earned 500 total points
ID: 16467017
Yes, you can do it with CS2 in conjunction with ImageReady.

Start by putting the front view on one layer, and the back view on another. (make the front view the bottom layer and name it front, make the back the second layer and name it back) We need a little space around the image so let’s reduce each image by 75%. This is what I end up on the layer “front” http://img.photobucket.com/albums/v474/JayPeeJR/fig_1.gif
And this is on layer “back” http://img.photobucket.com/albums/v474/JayPeeJR/fig_2.gif

Animating this will not give the appearance of rotating 360 degrees, but simply flashing from one image to another.

You will need to make some "in between" views. How many you make depends on how slowly you want the image to rotate. The slower the rotation, the more views you will need to create.

ImageReady can make "tween" views which blend two frames, but we'll get to that in a moment.

Let's start by making a fast spinning logo and you can slow it down if you want.

In the layers pallet, click the eye icon next to layer “back” thumb to make that layer invisible. Now make a copy of layer “front”. Go to Edit/Transform/Scale to make the image 70% narrower. If you hold down the alt/opt key while you drag, both side will shrink towards the center. http://img.photobucket.com/albums/v474/JayPeeJR/fig_3.gif

Now go to Edit /Transform/Perspective and move one of the corners down like so http://img.photobucket.com/albums/v474/JayPeeJR/fig_4.gif
Because you are using perspective, the matching corner will move inward the same amount. With the image still selected, move the opposite corner up like so http://img.photobucket.com/albums/v474/JayPeeJR/fig_5.gif

Now make the front copy layer invisible and make a copy of the back layer. Do the same with this layer, only make it tilt in the opposite direction. Like so http://img.photobucket.com/albums/v474/JayPeeJR/fig_6.gif

You should end up with a layers pallet that looks like this (only with your logo of course) http://img.photobucket.com/albums/v474/JayPeeJR/fig_7.gif

Now lets animate.

Open ImageReady. Make sure the layers pallet and the animation pallet are open.
At the bottom of the animation pallet, click the new frame four times to make a total of five frames. http://img.photobucket.com/albums/v474/JayPeeJR/fig_8.gif

Now select the first frame in the animation pallet, and in the layers pallet, make all but the “front” layer invisible. Now in the second frame, make only the “front copy” layer visible. In the third frame, make no layer visible. In the fourth, only the “back” visible and in the fifth, only the “back copy” visible.

Now click the “play” button in the animation pallet and watch your image rotate.
http://img.photobucket.com/albums/v474/JayPeeJR/fig_9.gif

Yes, it’s going to be a little jerky. It will be a little smoother when you save as a gif and view it in a browser.

If you want to make it rotate more slowly, you will need to ad more in between layers and distort them accordingly. You can move back into Photoshop and do this and come back into ImageReady and pick up where you left off.

About the tween frame. If you select two frame and click the tween button, image ready will add frames that are a blend of both frames. This almost NEVER works but you can play with it if you like.
0
 

Author Comment

by:andy_bjts
ID: 16468653
D Brugge,

Excellent advice, although some of your links are dead-ends.

Many thanks
andy_bjts
0
 
LVL 26

Expert Comment

by:David Brugge
ID: 16474841
>>>>>How embarrassing! I tested the links above and sure enough, they are dead, So I recopied them and pasted them again with hard returens before and after. If this doesn't work, I'll have to use my points to post a question as to why they don't link

>>>>>Here is the post again with new links<<<<<

Yes, you can do it with CS2 in conjunction with ImageReady.

Start by putting the front view on one layer, and the back view on another. (make the front view the bottom layer and name it front, make the back the second layer and name it back) We need a little space around the image so let’s reduce each image by 75%. This is what I end up on the layer “front”

http://img.photobucket.com/albums/v474/JayPeeJR/fig_1.gif

And this is on layer “back”

http://img.photobucket.com/albums/v474/JayPeeJR/fig_2.gif

Animating this will not give the appearance of rotating 360 degrees, but simply flashing from one image to another.

You will need to make some "in between" views. How many you make depends on how slowly you want the image to rotate. The slower the rotation, the more views you will need to create.

ImageReady can make "tween" views which blend two frames, but we'll get to that in a moment.

Let's start by making a fast spinning logo and you can slow it down if you want.

In the layers pallet, click the eye icon next to layer “back” thumb to make that layer invisible. Now make a copy of layer “front”. Go to Edit/Transform/Scale to make the image 70% narrower. If you hold down the alt/opt key while you drag, both side will shrink towards the center.

http://img.photobucket.com/albums/v474/JayPeeJR/fig_3.gif

Now go to Edit /Transform/Perspective and move one of the corners down like so http://img.photobucket.com/albums/v474/JayPeeJR/fig_4.gif
Because you are using perspective, the matching corner will move inward the same amount. With the image still selected, move the opposite corner up like so

http://img.photobucket.com/albums/v474/JayPeeJR/fig_5.gif

Now make the front copy layer invisible and make a copy of the back layer. Do the same with this layer, only make it tilt in the opposite direction.

Like so http://img.photobucket.com/albums/v474/JayPeeJR/fig_6.gif

You should end up with a layers pallet that looks like this (only with your logo of course)

http://img.photobucket.com/albums/v474/JayPeeJR/fig_7.gif

Now lets animate.

Open ImageReady. Make sure the layers pallet and the animation pallet are open.
At the bottom of the animation pallet, click the new frame four times to make a total of five frames.

http://img.photobucket.com/albums/v474/JayPeeJR/fig_8.jpg

Now select the first frame in the animation pallet, and in the layers pallet, make all but the “front” layer invisible. Now in the second frame, make only the “front copy” layer visible. In the third frame, make no layer visible. In the fourth, only the “back” visible and in the fifth, only the “back copy” visible.

Now click the “play” button in the animation pallet and watch your image rotate.

http://img.photobucket.com/albums/v474/JayPeeJR/fig_9.jpg

Yes, it’s going to be a little jerky. It will be a little smoother when you save as a gif and view it in a browser.

If you want to make it rotate more slowly, you will need to ad more in between layers and distort them accordingly. You can move back into Photoshop and do this and come back into ImageReady and pick up where you left off.

About the tween frame. If you select two frame and click the tween button, image ready will add frames that are a blend of both frames. This almost NEVER works but you can play with it if you like.
0
 
LVL 26

Expert Comment

by:David Brugge
ID: 16474863
>>>>>By know you realize that I can't tell a gif from a jpg. I give back all of the points!

>>>>>Here is the post again with new and CORRECTED links<<<<<

Start by putting the front view on one layer, and the back view on another. (make the front view the bottom layer and name it front, make the back the second layer and name it back) We need a little space around the image so let’s reduce each image by 75%. This is what I end up on the layer “front”

http://img.photobucket.com/albums/v474/JayPeeJR/fig_1.gif

And this is on layer “back”

http://img.photobucket.com/albums/v474/JayPeeJR/fig_2.gif

Animating this will not give the appearance of rotating 360 degrees, but simply flashing from one image to another.

You will need to make some "in between" views. How many you make depends on how slowly you want the image to rotate. The slower the rotation, the more views you will need to create.

ImageReady can make "tween" views which blend two frames, but we'll get to that in a moment.

Let's start by making a fast spinning logo and you can slow it down if you want.

In the layers pallet, click the eye icon next to layer “back” thumb to make that layer invisible. Now make a copy of layer “front”. Go to Edit/Transform/Scale to make the image 70% narrower. If you hold down the alt/opt key while you drag, both side will shrink towards the center.

http://img.photobucket.com/albums/v474/JayPeeJR/fig_3.jpg

Now go to Edit /Transform/Perspective and move one of the corners down like so http://img.photobucket.com/albums/v474/JayPeeJR/fig_4.jpg
Because you are using perspective, the matching corner will move inward the same amount. With the image still selected, move the opposite corner up like so

http://img.photobucket.com/albums/v474/JayPeeJR/fig_5.jpg

Now make the front copy layer invisible and make a copy of the back layer. Do the same with this layer, only make it tilt in the opposite direction.

Like so http://img.photobucket.com/albums/v474/JayPeeJR/fig_6.jpg

You should end up with a layers pallet that looks like this (only with your logo of course)

http://img.photobucket.com/albums/v474/JayPeeJR/fig_7.jpg

Now lets animate.

Open ImageReady. Make sure the layers pallet and the animation pallet are open.
At the bottom of the animation pallet, click the new frame four times to make a total of five frames.

http://img.photobucket.com/albums/v474/JayPeeJR/fig_8.jpg

Now select the first frame in the animation pallet, and in the layers pallet, make all but the “front” layer invisible. Now in the second frame, make only the “front copy” layer visible. In the third frame, make no layer visible. In the fourth, only the “back” visible and in the fifth, only the “back copy” visible.

Now click the “play” button in the animation pallet and watch your image rotate.

http://img.photobucket.com/albums/v474/JayPeeJR/fig_9.jpg

Yes, it’s going to be a little jerky. It will be a little smoother when you save as a gif and view it in a browser.

If you want to make it rotate more slowly, you will need to ad more in between layers and distort them accordingly. You can move back into Photoshop and do this and come back into ImageReady and pick up where you left off.

About the tween frame. If you select two frame and click the tween button, image ready will add frames that are a blend of both frames. This almost NEVER works but you can play with it if you like.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article, I'll explain how to change the color of a selection in Photoshop. I'm sure there are a couple different ways to do this in photoshop, but this is my preferred method in Photoshop. I am using Photoshop CS6 and I will be adjusting the…
Read about why website design really matters in today's demanding market.
Users will learn how resize a batch of photos from a single command in Photoshop via Photoshop's Image Processor. Open up an Image you'd like to resize in Adobe Photoshop: Adjust the image size according to your preferences. Image > Adjustments > …
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question