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 pxSix 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 appearedthe fade-in time and the time untill the next pictures fades in, must be can controlledthe 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

B

Berend Klompsma

Participant

Question

Animated banner

Forum|Forum|6 years ago
March 2, 2020
7 replies
4905 views

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

This topic has been closed for replies.

Ussnorway7605025

Legend

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

Community Expert

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,)

Conrad_C

Community Expert

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

Community Expert

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.

JJMack

Community Expert

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.

JJMack

Nancy OShea

Community Expert

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/

Nancy O'Shea— Product User & Community Expert

Derek Cross

Community Expert

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

JJMack

Community Expert

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.

JJMack

B

Berend KlompsmaAuthor

Participant

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