Preparing bank mascot artwork before animation starts
Your team is producing a 12-second animated explainer for a bank at 1280 x 720, 24 fps. The brand team supplies Illustrator artwork for a mascot: nine layers, two linear gradients, and a soft drop shadow applied to a grouped body shape. Brand rules permit exactly six palette colours, given as hex values, and prohibit gradients in the flat-style version. The client also wants a 300 x 250 banner cut from the same art. The project lead asks you to prepare assets before anyone animates, and warns that the last project shipped with fuzzy mascot edges and two visibly different blues.
1. Lay out your import and clean-up steps for the mascot, and explain why the fuzzy edges and mismatched blues occurred last time.
Read the worked answer
Import the .ai once with Import to Stage, choosing Import all layers and converting Illustrator layers to Animate layers, so the nine parts stay separate for rigging. Place all later instances from the Library - re-importing is how duplicate symbols with drifting colours get created. For the blues, replace each gradient fill with the nearest approved hex value inside Illustrator and re-import, rather than eyedropping on the Animate stage where a transformed or tinted instance returns a blended colour. Fuzzy edges almost always mean a scaled instance: inspect each symbol's transform, and a value like 87.2% or 113.6% resamples the vector and softens the outline. Reset to 100% and resize the symbol's content, or redraw at the two target sizes.
2. How do you handle the soft drop shadow so it survives both the 720p explainer and the 300 x 250 banner?
Read the worked answer
Do not assume one solution carries both. In the explainer, an Animate drop-shadow filter on the body symbol is acceptable and stays editable, but confirm the publish target renders filters reliably - filter support on HTML5 Canvas output is limited, so a filter that looks right on stage can disappear or rasterise badly in the browser. For the banner, bake the shadow as a drawn offset shape in a palette colour, or as an alpha PNG placed under the mascot. That keeps the file small, avoids a filter on a resource-constrained ad unit, and guarantees identical appearance across browsers. Note the divergence in the asset spec so nobody 'fixes' the banner by re-applying the filter later.
3. The banner is a 23% scale of the explainer art. What symbol strategy do you propose, and why not simply scale instances?
Read the worked answer
Build two variants, not one scaled instance. At 300 x 250, a 23% scale takes a 2 px outline to roughly half a pixel, which renders as a broken or grey hairline depending on the browser; thin detail inside the face disappears entirely. So author a simplified banner mascot with heavier strokes, fewer interior details and a tighter expression, sharing palette and silhouette but not geometry. For reuse, keep one master symbol with named, separated parts and place instances at 100%, scaling content rather than instances wherever scaling is unavoidable. Document which variant is canonical for each deliverable so a late art change is applied twice, deliberately, instead of being scaled and hoped for.