Member Avatar for MikeT

Hi, thanks for looking,

I was hoping someone could give me some info on using Photoshop. I've worked out how to create static web banners, also animated ones. However I'd like to be able to create banners that fade in/out or have many frames - eg a ball bouncing.

I'm currently using Elements and there doesn't seem to be a way to do this, without manually creating lots of layers anyway. Would Photoshop CS have this functionality, or would I need some additional animation software anyway? Is there any other software apart from Photoshop that would suit me better?

Thanks

  • 4 Contributors
  • 12 Replies
  • 111 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by roryt

Dani AI

Generated

Short summary tied to the original thread: wanted fades and multi‑frame motion without buying extra tools; , and floated Flash/ImageReady and JS. Today the practical, future‑proof routes are HTML/CSS/JS, lightweight vector players (Lottie), or exporting optimized frame sequences — not Flash (Flash reached end‑of‑life in 2020). See Adobe for the Flash EOL notice: (https://www.adobe.com/products/flashplayer/end-of-life.html).

Practical workflows to try right away

Example — simple fade loop:

@keyframes fade {
  0% { opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}
.banner { animation: fade 4s infinite; }

For frame‑by‑frame sprite animation (good when you want many frames but need a single asset), export a horizontal sprite PNG from Photoshop and animate background position with steps():

.sprite { width:100px; height:100px; background:url(sprite.png) left top no-repeat;
  animation: play 1s steps(8) infinite;
}
@keyframes play { from { background-position: 0 0 } to { background-position: -800px 0 } }

When to use Lottie or GIF

  • For richer, timeline‑style motion use After Effects + Bodymovin/Lottie for compact, vector JSON playback (LottieFiles: https://lottiefiles.com/).
  • For email and the oldest ad placements, an animated GIF is still the safest choice; modern Photoshop can export optimized GIFs — see Adobe animation basics: ().

Final tips: keep file size small (limit fps, reduce colors, use WebP/APNG where supported), test on real devices, and check any ad network or email client format/size rules.

Recommended Answers

All 12 Replies

Member Avatar for Member #46692

You need flash.

Such is the power of flash, you can fade the banner programatically - so you wouldn't even have to create a multitude of layers.

Member Avatar for roryt

Like iamthwee said you need flash and even photoshop cs2 doesn't have a proper feature to do anything like this you have to create it as a gif. You could also try a program called swift which is supposed to be easier.

Member Avatar for MikeT

Thanks for your replies. I was hoping not to have to use Flash. How far could I go in Photoshop if I went up to CS, would it be just fading text say? Any examples of what I'd be able to do in Photoshop would be much apprecated!

Thanks

Member Avatar for roryt

I can't give you an example but basically all you can do is create a gif. So you would have to edit it frame by frame and there are NO features to do it any other way. Infact there are probably very few extra animation features if any in CS as against elements.

In elements see if you can click "windows>Animation...." This should bring up a pallet of a list of frames but obviously there will only be one there in the first place. There are plenty of tutorials online just search for "creating animated gif in Photoshop" in google.

hope this helps.

Member Avatar for MikeT

Hi,

I've had a good look around the web already, couldn't find anything that helped me much. I was just hoping that upgrading from Elements to CS might do the trick but I guess not.

Keep hearing about Image-ready, do you think it's worth upgrading to CS to get that, it's a pretty simple process to do animated GIFS in Elements, Image-ready sounds more complicated but what advantages does it have?

Thanks

Member Avatar for MikeT

There wasn't an animation palette in Elements by the way

Member Avatar for Member #46692

Try googling javascript + slideshow.

Member Avatar for MDGM

Image ready is pretty much photoshop, just with a few extra gajets. One of these is the animation pallete, which gives you the option to make the frames for the anim using the different layers in your picture. I personally would'nt spend too much upgrading to have image ready, when you could maybe get a flash or even image ready trial and use that for a few days. Using image ready would still mean creating the movement layer by layer though...

Member Avatar for roryt

What about trying a flash trial and then an image ready trial and seeing which you prefer and then buying it. For most people elements is enough and if you buy flash the world is your oyster, as they say.

Member Avatar for Member #46692

He must already have flash cos some of his work in the gallery uses it.

[side note]
My God he's got high hopes for his work,
Yeah I know it's on canvas but even so those prices are pretty steep. :cheesy:
[/side note]

Love the music tho!

Oops, I got the wrong person ha ha.

Member Avatar for MikeT

What about trying a flash trial and then an image ready trial and seeing which you prefer and then buying it. For most people elements is enough and if you buy flash the world is your oyster, as they say.

Sounds like the best idea, thanks

Member Avatar for roryt

glad I could help, let us know how you get on.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.