FORUMS: list search recent posts

Rotating Images on a web page (Save for Web?)

COW Forums : Adobe Photoshop

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
Butch Golden
Rotating Images on a web page (Save for Web?)
on Feb 8, 2008 at 4:58:13 am

I was told that it's possible to layer images and then "Save For Web. Have worked with it but the 'Animation' section in the Export dialogue is always greyed out. Can someone point me to a proper method to use. I'm trying to achieve something like the animated ads in Cow but with still images.

Any help is much appreciated.


Return to posts index

Vincent Rosati
Re: Rotating Images on a web page (Save for Web?)
on Feb 11, 2008 at 6:27:51 pm

Hello Butch- I Use PS CS2, so my response may not be accurate if you are using CS3, as I understand that there have been some changes in the ImageReady integration.

In PS CS2 you would 'Edit In ImageReady' by clicking on the button at the bottom of the tool box, to open the animation timeline.
It is here that you would animate your layers, than File/Preview In...(browser), and finally File/Save Optimized As.../ .gif (or File/Export/SWF).

(Just Guessing) If you're in PS CS3, open Window/Animation to open the animation timeline. Create your animation, which you would preview by clicking the Plays Animation button at the bottom of the timeline, than File/Save For Web.

If you're simply having an issue of creating the actual animation, let us know.

Vince


Return to posts index

Butch Golden
Re: Rotating Images on a web page (Save for Web?)
on Feb 11, 2008 at 9:47:18 pm

Thanks sir for your reply. Will give it a shot on my own first, (discovering is fun) and if no success, I'll not be the least embarrased to come back and ask.

Tip-of-the-hat.


Return to posts index


Butch Golden
Re: Rotating Images on a web page (Save for Web?)
on Feb 12, 2008 at 2:14:48 am

Ok, looks like I'm striking out here. I did find Animation but then I hit the wall.

I have four graphics of the same size (black text on a white background) that I want to overlay (one on top of the other) in a web page and have them repeat continously. I've made jpgs, gif. pngs, and psd's but do not understand layers very well so really do not know where to start in this process.

Do I need to create a layer for each image first? If so, that's where the fun stops as I can't see how to do that.

Thanks


Return to posts index

Vincent Rosati
Re: Rotating Images on a web page (Save for Web?)
on Feb 13, 2008 at 1:24:06 am

np. :)
1-Each object should be on it's own layer in the Layers palette.
2-Open the Animation palette.
3-Click 'Duplicate Selected Frames', in the Animation palette (next to the trash can).
Keep it simple, create 4 animation frames.
4-Click on animation frame #1. Than, in the Layers palette, turn off all of the layers that should be hidden, leaving only the desired layer as a visible object.

Repeat step 4 for animation frame #2, #3, and finally #4.

You should now have 4 animation frames, each set to trigger the visibility of the appropriate layer.
Press the Play button to see the animation.

You will likely need to adjust the timing...
Shift-Select all of the animation frames and click the little triangle that is beneath any of the frames. It is here that you can enter either a preset or custom delay for the frames.

Finally, File/Save For Web... *gif. GIF is the only animation format available under the Save options.
You could File/Export as a SWF, but I wouldn't worry about that yet.

If you require any smooth blending or motion in the animation, that would require 'tweening' (or, in-betweening). But, don't worry about that yet, basics first.

I hope this gets you to your next step. If you get stuck anywhere, let us know.

Vince


Return to posts index

Butch Golden
Re: Rotating Images on a web page (Save for Web?)
on Feb 13, 2008 at 5:06:46 am

Just some minor adjustments in your explanation and using the handles for each layer in the timeline to adjust the duration of each image to 2 seconds each got me a working animation - with one flaw. All layers play out correctly in the timeline but the last layer is omitted from the animation in the Save For Web dialog. (Also missing in the saved animation)

I will try a different set of images next to see if there's anything about my first set that's amiss but I don't think so. The last layer just doesn't show up.

You know lot's. Got any ideas?


Return to posts index


Butch Golden
Re: Rotating Images on a web page (Save for Web?)
on Feb 13, 2008 at 4:44:01 pm

I got an idea of my own and did some looking around in Photoshop Elements 4. I found Save For Web as an option and recreated my layers, set my duration, saved the proj as GIF and it works with no missing layers.

I suppose it's one of those 'whatever it takes' things but doesn't resolve why it's not working in CS3.

Next step,
What does it take to export to swf so I can extend my capabilities to Flash?


Return to posts index

Vincent Rosati
Re: Rotating Images on a web page (Save for Web?)
on Feb 13, 2008 at 5:15:51 pm

Whatever it takes :)!

As far as flash, you can simply export as SWF. Tinker with the settings until you have acceptable results.
Compare the file sizes, GIF vs. SWF, to see which is better.

Generally speaking, Flash is more for incorporating vector graphics into animations, which I'm not sure how that might be accomplished in PS.
But, the exercise is worthwhile for learning how to embed flash into web docs.

Vince


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2017 CreativeCOW.net All Rights Reserved
[TOP]