From Photoshop to Banner Ad in One Clean Pipeline

Why this approach

Most agency campaigns ship in the full set of IAB sizes — 300×250, 728×90, 160×600, 300×600, 320×50, and so on. They're usually already drawn up in Photoshop as separate documents or artboards. Don't rebuild them. The goal is to bring those designs across as-is.

For each ad size, look at what's meant to move. A headline that slides in? Its own layer. A product shot that fades up? Its own layer. The CTA button that pulses? You guessed it. Anything static — the background, decorative fixed elements — can stay merged.

Think of each layer as one actor in the animation sequence. If it needs to appear, disappear, move, scale, or change opacity independently, it gets a layer.

This is the trick that makes everything downstream easy. Don't crop each layer to its tight bounds. Export every layer as an image the same width and height as the final ad. The transparent area around the actual pixels is what lets layers line up perfectly when stacked.

For a 300×250 ad, every layer image should be exactly 300×250 px. Drop them into Canvosity's canvas and their positions and scale are already correct — no nudging required. You also get a clean base transform for any motion animation, because the layer's geometry fills the ad box.

One simple rule: the bottom-most layer is the only one that's opaque, so it's the only one that exports as JPEG. Every layer above it needs transparency — otherwise it'll cover up everything below — so those use PNG or WebP.

Photoshop's File → Export → Layers to Files command writes each layer out as its own image, preserving the document dimensions — which is exactly what we want (every layer comes out at the ad size). Here's what the flow looks like.

Create a new project in Canvosity, add each ad size (300×250, 728×90, etc.), and drag your exported files into the Asset Library. Because every file is full-dim, stacking them rebuilds the original composition exactly — then you can animate each element independently.

Many campaigns aren't a single static frame — they tell a sequence. Scene 1 sets up the message (background + headline + supporting art). Everything animates out. Scene 2 swaps in with a new background and the final CTA. Same workflow, just one extra rule: treat each scene as its own layer group, then stack the groups in playback order.

In Photoshop this means one folder per scene, each containing its own background and the elements that live on top of it. Export every layer the same way as before — full-dim, transparent margin — but with one important format twist for the second scene's background.

A campaign almost always ships at 4–8 ad sizes (300×250, 728×90, 160×600, 300×600, 320×50, etc.). The headline, CTA, logo, and background are the same logical layers in every size — only their crop and dimensions change. The click-tag URL, loop count, and any hover behaviors are usually identical too. Animating each size from scratch is the biggest single source of tedium in agency banner work. Canvosity solves it by matching layers across sizes by filename and broadcasting from one ad to all the others — animations, click tag, loop count, and hover effects all transfer in one click.

Photoshop export tips that make this painless

What gets synced

• Per-layer animations + layer order — for layers whose names (and asset filenames, for images) match between source and target. Target layers' z-stack is reordered to match the source's stacking.
• Missing image layers are auto-added to sibling sizes when you've uploaded an asset with the matching filename at the sibling's exact dimensions. The new layer is created at (0, 0) covering the full ad — the canonical full-ad-dimensions workflow. Two safeguards keep this conservative: the source layer must itself be at full source-ad dimensions (positioned/sized layers like a 50×50 logo are skipped — we can't safely guess their target position), and an asset matching the sibling's exact width × height must exist in your library.
• Click-tag URL — the destination URL the whole ad links to. Almost always identical across sizes in a campaign.
• Loop count — how many times the timeline plays before stopping.
• Outro region — the loop-out time and outro length, so the seamless-loop animation kicks in at the same beat on every size.
• Hover effects — the ad-global mouseover behaviors (button scale, glow, etc.). Each hover effect's target layer is remapped to the corresponding layer in the target ad (including newly auto-added ones); a hover effect whose target doesn't exist in a sibling ad is dropped for that ad only.

How to use Sync animations to other sizes

1. Build your campaign in Canvosity with every size. Upload assets to each size using consistent filenames.
2. Pick one size as your "source" — usually the largest (300×600 or 728×90) since it has the most timeline real estate.
3. Animate everything on the source ad: entrances, exits, hover effects, loop timing. Set the click-tag URL.
4. In the ad selector (bottom-left of the editor), right-click the source ad and choose Sync animations to other sizes.
5. Confirm. Canvosity walks every other size, copies the timeline / click-tag / loop count / hover effects onto matching layers, and reorders layers to match the source's stacking.
6. Layers that don't match are left alone — the toast tells you how many. If a layer didn't get its animations, the most common reason is a mismatched filename. Rename and re-sync.

Making it loop seamlessly

Most banner ads loop 2 or 3 times. Without any setup, the timeline just snaps back to the start when it reaches the end — the viewer sees a visible jump cut. To make the loop-back feel intentional, you'd usually animate your final visible elements out (fade, slide off, scale away) so the screen returns to its initial blank state before looping. The catch: those exit animations should only play between loops — never on the final loop, where you want the ad to come to rest with everything visible.

Canvosity's outro region handles this for you. Mark a section at the end of your timeline as the outro, place your loop-back animations inside it, and on the final loop the playback automatically pauses at the outro start — leaving every element visible in its just-before-outro state.

Editing the HTML / CSS / JS directly (advanced)

The Preview panel has a "View Code" toggle that opens HTML, CSS, and JS tabs. You can hand-tweak the generated code — useful for one-off network-specific shims, a custom GSAP plugin, or test-rigging a third-party verification tag. Canvosity then exports a real zip with your edits baked in, so this path is a first-class workflow rather than an escape hatch.

The flow

1. Build everything you can in the canvas first — layers, animations, hover effects, click-tag, outro. Apply the cross-size sync if you have multiple sizes. Get the canvas as close to the final state as possible.
2. Click Preview → View Code. Make your hand-edits in any tab — HTML, CSS, or JS.
3. Click Apply Changes. Canvosity splices CSS / JS edits back into the canonical HTML, so the preview iframe always reflects what would ship. Apply changes from each tab in turn if you're editing more than one.
4. Click Export with edits in the preview toolbar. The button appears as soon as you've applied any change. A per-size zip lands in the Exports drawer — same flat structure as a normal per-ad export (index.html + images/ folder + backup JPG), with your edited code shipped verbatim as index.html.

For most campaigns you won't need this — the canvas + animation panel cover everything an IAB HTML5 banner needs, including click-tag, loop, outro, and hover effects. Reach for the code editor only when a specific network or QA test rig requires something the editor doesn't expose directly (verification tags, custom polite-load timing, third-party measurement pixels, etc.).