Banner designing workflow

[bencik]

Hey guys,

 

I used to use Photoshop to design and try different layouts and it work just fine for static banners, but for animated banner it seems rather tedious as I have to export all the assets and recreate the whole banner and lay out all the assets again in html...

 

So I was wondering if there is a better workflow for designing and prototyping banners – maybe using Figma instead of Photoshop and exporting the banners in html and then just applying the gsap animations by hand?  Or maybe some WYSIWYG editor to speed up the whole process rather than coding all the different css positions for all the banner sizes by hand? Could you share your workflow and apps that you use?

[fripi]

Placing the elements (png, svg, jpg, text...) , creating planes and give them colours can be done easily with dreamweaver or the free "Google Web Designer" then indeed link gsap and start moving them.

I most of the time use Adobe Animate to place everything as it gives me more masking options, and gsap to animate, but texts seems to come out blurry on non retina/hidpi screens

[geedix]

I like Figma, Sketch or XD more than Photoshop for laying out banners and animations, but it's not a huge difference; you have to get your assets organized somewhere.
I try to export everything aligned at 0,0. Keep transparent pngs at full banner dimensions (200% for crispness), logo, text, whatever -- the blank space doesn't add file size. 
GWD is popular for wysiwyg banners. I had to use it on a couple of inherited projects and I didn't like it, but maybe that's just me. Adobe Animate with canvas export is still used a lot, and could be your best option if you're doing intricate masks or animation that's best worked out on a timeline. Keep bitmap assets at 2x size in your Animate file (with more compression) and they'll be sharp on hi dpi screens.

[fripi]

13 minutes ago, geedix said:

I like Figma, Sketch or XD more than Photoshop for laying out banners and animations, but it's not a huge difference; you have to get your assets organized somewhere.

Never tried XD, can it save a html file with clean placed divs ? Sometimes placement is so complex in pure code...

 

Problem that I got more and more with Animate is complains of clients about blurry text on normal screens

[geedix]

XD doesn't have html export, but it's good for SVG, and for prototyping animation. It has paid plugins to export html, but code I've seen from those looks too bloated for me. 

We did some banners that used dynamic html text in a div on top of canvas animation done in Animate. There should be an easier way to keep text consistently crisp with Animate, but I haven't tried it lately

[davi]

Design Workflow:
I still use Photoshop and still think it's best in the long run IMO. I've used Sketch/Figma which is great for the vector stuff, up until you need to deal with imagery (cropping, editing, and optimizing). For example, one of the tricks I do is adding a bit of Smart Blur to detailed images with textures to lower file size without any noticeable difference (only Photoshop can do that). Or, if I'm chopping up a character's parts in order to create a rig and animate, where I need to "fill in" overlapping part areas (again Photoshop). I still really like the legacy 'Save for Web' too, I just find the interface handy, the fine-tuned control you get, and I love the large preview.

You can still export SVG out of Photoshop, including text. You can copy and paste CSS out of Photoshop as well, which comes in super handy (you can't use everything that it copies, but a lot of it is super helpful). Most people don't realize this.

Re: Adobe Animate Blurry Text–
Blurry Adobe Animate text on non-Retina is an easy fix: It's likely because of the font and how it's sitting on floating point positions (i.e. x=20.2 rather than x=20), or actually needs to sit on half-pixels (x=20.5). Some fonts (typically the more curvy ones) render better on the half-pixel, whereas others render better on whole pixels. Sometimes you need to tweak the height by half-pixel so both sides sit on the correct pixel (this is more of a font issue than Animate). Adjusting the positioning of your text typically works 95% of the time but again, depending on the font, it might not.

The next solution (which will make your non-Retina banner look crisp like Retina) involves the canvas element, stage, and the code Adobe Animate exports out. I don't use the banner code Adobe Animate exports by default, personally, but you can modify the code in your HTML file manually to see the results. Inside of the JS it exports is a function called "makeResponsive" which is WAAAAY down at the bottom of the JS file. This "makeResponsive" function is being called in your HTML file. What it's doing is basically checking for pixel density and then determining how to go about creating the stage. On Retina displays, it's making a stage twice as large and scaling it down. On non-Retina it's not and making it the actual size (by default). What you need to change is the "pRatio" value in the makeResponsive function (it's for pixel Ratio). If you set that to 2 (rather than window.devicePixelRatio || 1), it'll treat it like a Retina display. However, if you republish the file it'll set it back to the way it was – obviously a problem. Right now all that stuff is in the exported JS file and that variable is private. So you need to figure out a way to change that on your end (either make your own export template or copy and paste that function into a new place and call it there rather than call Adobe's version).

However, that also comes with its own set of caveats. There's probably a reason why it doesn't do that by default. There's likely some performance implications with doing so, and having to render a stage twice as large. If you're doing complex animation and using the timeline, probably best not to do that or at the very least, test it. But if you're using GSAP inside of Animate, you probably have a much better shot at it performing just fine 

Dynamic Text @Geedix:
You can layer DOM text over the canvas (probably the best option) but you can also create dynamic text right inside of Animate. You load the font file the same way as if you were hand-coding it via font-face. Then you use CreateJS / EaselJS's method of creating text via code inside of Animate. (It's similar to dynamic text in the old Flash, so all of the drawbacks from back then, such as slowly moving dynamic text across pixels makes it a bit jittery, but there's a workaround for just about everything). From there, you can control it and animate it using GSAP 😘

[fripi]

1 hour ago, davi said:

Re: Adobe Animate Blurry Text–
...
So you need to figure out a way to change that on your end (either make your own export template or copy and paste that function into a new place and call it there rather than call Adobe's version).
...

Great, thank you, seems indeed to work well !

 

But I really don't see how to fix that in a template, I thought that replacing "$RESP_HIDPI" with a part of the exported code could work but that changes nothing... well I can still make a batch "search/replace" after

 

[davi]

56 minutes ago, fripi said:

Great, thank you, seems indeed to work well !

 

But I really don't see how to fix that in a template, I thought that replacing "$RESP_HIDPI" with a part of the exported code could work but that changes nothing... well I can still make a batch "search/replace" after

 

Well, as mentioned, you can't use it because it's being exported as part of the JS file (which will get overwritten every time you republish) and the pRatio variable is private. So basically you want to create your own function for that somewhere else instead. (Yes, total hack 🤣)

In your template HTML file, just make a duplicate of that entire makeResponsive function from the exported JS file and put it somewhere else so it's not part of the exported JS file. For example, add it to the script tag in the template HTML file instead. Then in the handleComplete function, just change "AdobeAn.makeResponsive..." to "makeResponsive...". Then modify the makeResponsive function to your liking. Perhaps add an option like "defaultToHighDPI" where it determines if pRatio is checked against the device OR set manually to 2 (always render as HiDPI / Retina).

Also, you'd need to access some of the items in the function you copied differently, since it'll be in a different scope. For example: "lib.properties.width" won't work. You'll need to access that from the template HTML file by using this instead :
AdobeAn.getComposition(Object.keys(AdobeAn.compositions)[0]).getLibrary().properties.width

[fripi]

17 hours ago, davi said:

 total hack 🤣

Indeed

That's what I tried but there are always new errors and it doesn't seem to overwrite what is done in the private function so...

Just making a search replace in all files before delivery with sublime text is much faster