- Last post
- 14 Responses
Hi all :)
I am curious what everyone is using to create (sometimes animated) social and digital banners or ads. I have used Photoshop, Animate, GWD, etc, but feel like there should be a more streamlined way to create them. I'm looking into online software such as Creatopy, Bannerwise, and so on, but does anyone have any thoughts or suggestions on the best process? I need to create them quite frequently and want to nail down a good procedure for doing so.
- Anything that doesn't require coding or AE knowledge? Some of my team members don't know After Effects. Thanks!cam28
- ^ if you want good animated video, AE dudes are what you wantGuyFawkes
- AE should be considered a basic requirement and most have it. If you know Photoshop you already know half of what you need to learn the rest.CyBrainX
- Cool, thanks all. I'll explore AE a bit more :)cam28
- Well, technically, not just AE. You need Bodymovin / Lottie – but that's only ideal if it doesn't contain any imagery but all vectors.fyoucher1
Currently looking into Figma for versioning ease.
If Figma actually works out for you but you find yourself needing more advanced animation, you might look at Principle. These are cheap options that aren’t meant for what you’re doing but could totally work.
Canva is a graphic design platform, used to create social media graphics, presentations, posters, documents and other visual content. The app includes templates for users to use. The platform is free to use and offers paid subscriptions like Canva Pro and Canva for Enterprise for additional functionality.
- @cam28 if AE is too hard i would suggest this.milfhunter
- Cool thanks. After reading all this, I might just jump into AE :)cam28
- Do you use AE for both MP4 and HTML5? I hate having to create super similar graphics in two different applications.cam28
- I'm working together with a developer who will use my mp4 exports from AE and rebuilds a HTML version in "Google webdesigner" which is a platform by Google.milfhunter
- You could consider to only use https://webdesigner.…
Downside is creative freedom. Not everything is possiblemilfhunter
You can also create & animate banners and social media files in Apple Keynote.
What are you trying to output? GIF files? HTML5 animation? mp4?
They all have a different approach to them yet there is no way to output any of them from one app alone... you're still going to be left w/compression / publishing rules you must meet that usually require more than one app.
I'd have better feedback / "how to" info if I knew what your final output was (I build banners like a pigeon poops btw... just need to know what you're trying to output). <3
- HTML5 for Google and MP4's for socialcam28
- Thanks for the help!cam28
- HTML5... I recommend doing them 'by hand'. I've yet to find an app that doesn't output a mess of code. I use a simple raw JS animation platform called GSAP.PonyBoy
HTML/css is fairly simple however you are always going to have browser bugs to deal with (no app will cover those issues).PonyBoy
- As far as mp4's go I use AE to animate and output. I do use Illustrator and Photoshop to often output my layers for AE... can't really avoid that.PonyBoy
- To be clear tho - the apps 'topes is posting above are just not there yet... they're enough to help you output minimal quality but I highly recommend you...PonyBoy
- ... just use the 'by hand' route for HTML5 output... you have so much more control (although you do need have a good grasp on JS and scripting concepts)PonyBoy
- Give this a read on getting starting w/using the GSAP animation library: https://css-tricks.c…PonyBoy
- what Pony said.mekk
- AE for Gif Banner animation
or mp4 social video.
Animate CC for HTML5 banners (Super quick and easy to use).
or get good at coding with GSAP.Sellies
- What shits me is publishers still have 120x600 or 160x600 banner sizes and still want banners at 80kbs.Sellies
- can you do both HTML5 and MP4's from AE? I usually have to create for both Google and Social and hate to have to create similar animations with diff appscam28
- there are plugins that'll do it, cam... I think one is called 'bodymovin' however the time I tried it (2+ years ago... it may be better now) it output...PonyBoy
- ... a ridiculous amount of script that went way over file size. Doing it 'by hand' is so much easier / efficient.PonyBoy
- @Sellies... those limits are changing! (finally!) More and more I'm finding final file size to be 150kb or smaller.PonyBoy
- Thank you!!!cam28
What about exporting HTML5 from Animate? I did that before, but my ad guy said the files wouldn't upload correctly to google ads. I ended up having to remake them in GWD.
I'm looking into Creatopy or Bannerwise - any thoughts on those apps?
- < might have been due to file size, or some reason other than messy codeProjectile
- You need to upload HTML file into Animate CC that has the right clickTag.
So when you export the file, it works on any platform.Sellies
- If anyone is interested, I can upload my template files and a guide on how to use it.Sellies
- Hi! I'm interested... test dot obbtkn at gmail dot com... TA!OBBTKN
- @Sellies - I would LOVE that! Let me know how to reach you :)cam28
- Animate works great for this, your ad guy is completely wrong.fyoucher1
- @fyoucher - lol, your probably right. Do you use Media Encoder to export the files? I think that's how I did it. Is there a better way? I did put the ads into..cam28
- Google's ad verification thing and it said there was an error (I didn't add any code myself in Animate, only timeline animations). Thoughts?cam28
- For a standard animated display ad, it needs to be HTML5, so you'd export out of Animate as Canvas.fyoucher1
- You're in the wrong file format if you're trying to us Media Encoder, thats for video.fyoucher1
- oh ok. I read an incorrect tutorial then lol. I'll try this. Thanks!cam28
No one uses Google Web Designer for HTML5? It's not perfect but it certainly does the job.
GSAP + Visual Studio Code
For the people recommending "doing it by hand".... do you find that it takes too much time because of all the different sizes you need to create? I know the animations can get a little screwy when moving them around (in Animate anyway - AE I haven't tried yet). It's certainly doable, but still wondering if online apps like Creatopy or Bannerwise would be more efficient.
My team needs to create these on a regular basis, so hoping to cut down on some production time haha.
Thank you all for the help!
Handcode + CSS Animation:
- Best for simple stuff. You’ll quickly run into issues in both ability and efficiency when getting into more complex things.
- PROs: Performs nicely, although I’m not entirely sure I notice if it’s faster than GSAP.
- CONs: CSS Animation code just isn’t easily readable when you have a lot going on.
Handcode + GSAP:
- I use this combo about half the time. I have my own template for this.
- PROs: Great and super versatile, plus well-supported. Non-animators can repurpose your files and figure them out. The library via CDN doesn’t get counted. Easier to do banners where you need to easily replace text. Performs well. You can do 2.5D movements. GSAP is good stuff.
- CONs: Obviously, it’s nowhere as fast as a GUI having to type stuff out in code (and I know some hardcore coders will disagree, but trust me, it’s not even remotely close). Your assets are generated from somewhere else. You have to QA a lot, which sucks. Trying to do character animation in just code sucks a big one.
Adobe Animate + Timeline Animation + Canvas:
- PRO’s: It’s got a GUI and has a visual workflow. That's easier than looking at a thousand lines of code. Flash folks are superior familiar already. Vector shit built it. Easy to do masks. It’s possible to do an “animated” alpha mask, can’t do that in the DOM (Yes, this is possible in Animate). The library via CDN doesn’t get counted. You barely need to QA if you have a template in place.
- CONs: Timeline animation can easily get bogged down, this is because of the shitty way the timeline animation gets published (wait.to.wait.to etc etc). No easy way to do 2.5D (there’s a library called DepthJS, but it’s a shitload of work to use). Doesn’t use webfonts like how the DOM can (but you CAN use fonts and do dynamic text in Animate, you just have to use CreateJS to create text programmatically OR layer DOM text on top of the canvas element).
Adobe Animate + GSAP:
What I recommend. I also have built my own template.
- PRO’s: Using Canvas and time-based GSAP performs extremely well, especially when getting into A LOT of objects. You can automate a lot of things. You can build a lot of your assets right in the app and animate them with code. You can mix timeline animation with coded-animation. You can easily do blend modes, masks, etc etc.
- CON’s: You need to have an Adobe account. If you’re passing off files, they need to know how to use the app and GSAP too.
Google Web Designer:
If you’re using Google’s Studio (the old DoubleClick), this is probably great. Everything is all built in and integrates nicely, especially with video. If you’re looking for quick and efficient, this is probably the way to do. I would imagine you’d run into hurdles if you’re trying to do really complex stuff though.
Creatopy / Bannerwise / etc:
I think these would be great for really simple stuff, one framers, low budgets, etc.
CONs: What happens when they no longer are in business? Their code is definitely not editable to normal humans. You can’t passing nothing off to other dev’s.
After Effects / BodyMovin / Lottie:
- PRO’s: Works great for ALL VECTOR stuff. AE is great at manipulating vectors. You can use a separate animator for the project and a dev to implement.
- CONs: Throw some imagery in there and you’ll quickly run into file size issues. Library isn’t allowed on CDN, although there is Lottie Light which is much smaller in file size. No dynamic text, bummer. Good luck trying to edit code.
WHY THE F**K ISN’T THIS BUILT INTO ADOBE!!! Come on Adobe, SVG export should be native and should have happened 15 years ago.
You’re probaby still using Macromedia products.
- This is great. Thank you!!cam28
- + 1OBBTKN
- no Keynote? boo :\
illustrator -> ae+lottie -> coder cleanup works for us. for most of these "tools" it is true that they generate trash output ->sted
- what makes it easy to run into size/resource consuming issues.sted
- Well, that was pretty thorough.CyBrainX
- dear Flash,
missing you again
rest in peaceBeeswax
Maybe try https://cavalry.scenegroup.co
“I’ve been making responsive compositions in @cavalry.app which get all their data from Google Sheets. From this one composition you could get endless ad variants in 1.1, 4.5 and 9.16.
I’ve tried this in AE for years using Master/Essential Properties/expressions but none worked as well as this first attempt in Cavalry, and I’m literally only scratching the surface of what you can do here.
To resize/reposition elements at different aspect ratios, I used Composition Constraint and Number Ranges. To change the text/product on each render, I turned on Dynamic Render and plugged the Dynamic Index into the Google Sheet Row Index.”