Animated banner

[Berend Klompsma]

Goodday,

New to this community I have a problem. I want to make an animated banner for a website with the following features:

• It must start with a black window 1600 x 229 px
• Six pictures (266 x 229 each) have to appear one by one from left to right, nicely spread out over the 1600 px (so there will be some dark spaces between the pictures), fade-in one by one and stay put until the last picture has appeared
• the fade-in time and the time untill the next pictures fades in, must be can controlled
• the pictures have to dissapear in the same order and fade-out (and time)
• when the pictures leave the banner from left to right, the final banner with a certain picture from 1600 x 229 appears and gets fixated.

Can one realize this with CC and if so is there anyone willing to assist me with that?

Your help and suggestions are highly appreciated!

Greetings,

Berend

[Myra Ferguson]

You could make an animated gif using Photoshop, but I would recommend using Animate or InDesign with the In5 plug-in for your animated banner.

[JJMack]

6 images 266 pixels wide is 1596 pixels wide.  If your banner is 1600 to have black space between images you need at least 5 pixels with no black space on each end of the banner.  Your banners is to narrow 1596+5=1601. I would also consider a 1px wide black space more a thin black line.  Photoshop Animated Gif support is limited to 500 frames.  So 500/6= 83.3  round that do to 80   an image has to fade in  40 frames and fade out in 40 frames and each image's fade in/out must be staggered from the others.  You must design how you want the fade in and fade out to be done then control the layers frame opacity to animate the fade in and out of the layers in your banner animation. The layered banner document is easy a black background layer 1600x229 and 6 image layer 266x229 spread across banner. The hard part is controlling the frames animations frame layers opacity fade in and fade out.

If you make each Image layer a smart object and create a video animation  you will have more options with  animating the images smart object layers. Frame Animation tween onlet sypport layet position and opacity. Video animation supports layer transform. You can export video animations as MP4 as well as animated gif. MP4 encoding is better than animated gif encoding, File size and color will be better in an MP4 video.

[Berend Klompsma]

Thank you very much for the extended answer. Indeed I need to do something
about my math 😊!
For the rest, as far as I can understand it, Adobe works with
multiple frames in one and the same window with the same dimensions as the
pictures in the frames.

I want to have appear 6 different pictures from left to right in a banner.
Nothing have to move , so it is not really an animation.

Vriendelijke groeten,

Berend Klompsma
Winsum-Groningen

[JJMack]

Fading in and out is animation the Layers opacity is moving.  Tween Supports Position, Opacity and effects.

[Derek Cross]

There's an excellent (paid for) step-by-step online video tutorial on creating web banners with Adobe Animate here:

https://www.bringyourownlaptop.com/courses/make-html5-banner-ads-in-adobe-animate

[Nancy OShea]

Instead, use a JavaScript carosel slider.  The results will be much better than animated GIF can provide. This one from Wow Slider has lots of skins, animation and layout effects to choose from.   And no coding skills required.

https://wowslider.com/

[JJMack]

As I wrote. Create a Photoshop document with your 1600px x 229px black background layer. Above your background layer layout your 6 image layers.  Create a Frame Animation time line then use tween 12 times to fade the images in and out.

[Conrad C]

1600 x 229 pixels with fades almost all the time sounds like it could result in an extremely large animated GIF to load. GIF is not efficient with that type of animation.

If the website has a performance standard such as constraints on file size or download time, an animated GIF of those dimensions and duration may not meet the standard. You will then want to go in the direction of the suggested solutions based on HTML5 or JavaScript. Those will have major advantages like being able to animate fades without rendering them to pixels, and should result in a much lighter and faster web page.

[JJMack]

It would depend on the amount of details there is in the 6 images. The solid 6 color 1600x229 animated gif is 205KB.  However GIF encoding is old  not good only support 256 mapped colors. An MP4 would be much better or an Html5  javascript.  Flash is out of flavor.

[Ussnorway]

Your best cc app is Edge Animate but that's end of life now so I recommend just making a gif in Photoshop because that still has support

[Derek Cross]

Adobe Animate is updated and is alive and well and part of the Creative Cloud Suite.

(It's used in the excellent tutorial I mentioned earlier in this thread,)