Agency Workflow Guide

From Photoshop to Banner Ad in One Clean Pipeline

You already have campaign designs in Photoshop. This guide shows the recommended way to bring them into Canvosity so that every layer snaps into place, every size stays on-brand, and animating each element is effortless.

The short version

  1. Start with your existing Photoshop campaign — all the ad sizes should already be there as separate documents or artboards.
  2. For each size, split anything that needs to move, fade, or animate into its own layer.
  3. Export each layer as a file with the same dimensions as the ad (e.g. every 300×250 ad layer exports at 300×250 px).
  4. The bottom-most layer (the background) exports as JPEG. Every layer above it needs transparency, so use PNG or WebP.
  5. Drop all the files into Canvosity — layers stack in register, animation is a single click per element.

Why this approach

Pixel-perfect alignment

Every exported layer is the full ad dimensions, so when you stack them in Canvosity they line up exactly as they did in Photoshop.

Animate anything, any time

Because each moving element is its own layer, you can drop an animation onto it in seconds — no re-exporting, no cutting up images later.

Small, network-friendly files

JPEG for the opaque background, PNG/WebP only where transparency is needed. Hits DV360 / CM360 k-weight budgets comfortably.

1

Start with the campaign you already have

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.

300 × 250 Medium Rectangle 728 × 90 Leaderboard 160 × 600 320 × 50 The same set of sizes you've already designed in Photoshop
2

Break animated elements into their own layers

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.

Original (flattened) break apart Separated layers Background Headline Product CTA Button
3

Export each layer at the full ad dimensions

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.

✗ Cropped tightly — hard to align 300 × 250 ad area 60×18 png 40×40 png 50×18 png Each has different dims — you'd have to position them by hand. ✓ Full-dim layers — stack & done 300 × 250 ad area Each layer PNG is 300×250 — positions match by construction.
Pro tip: Canvosity also draws a grid overlay on the canvas. Since every layer asset fills the grid, snapping, resizing, and animating all start from a clean base — no mental math.
4

Pick the right format for each layer

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.

Layer stack (top → bottom) 1. CTA Button PNG / WebP 2. Product shot PNG / WebP 3. Headline PNG / WebP 4. Background (bottom) JPEG Why this combo? JPEG (background only) Smallest file size. No transparency, so reserve it for the opaque base. PNG (everything above) Keeps alpha. Universally supported across every ad network. WebP (smaller PNG alternative) Better compression with alpha. Supported by all modern DSPs.
5

Export layers from Photoshop

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.

Stylized approximation of Photoshop's UI — use as a map, not a pixel-match
Ps Campaign_300x250.psd @ 100%
Photoshop File Edit Image Layer Select Filter
Layers
👁 CTA Button
👁 Product
👁 Headline
👁 Background

From the menu bar, walk down this path:

File › Export › Layers to Files…
Export Layers To Files
Destination ~/Campaign/300x250/
File Name Prefix 300x250_
File Type PNG-24
Visible Layers Only
Trim Layers ← leave OFF
Cancel Run
Critical: Make sure Trim Layers is off. If it's on, Photoshop crops each layer to its tight bounding box and you lose the full-dim alignment we worked for in step 3.
For the bottom background layer only: re-export it separately as a JPEG at ~85% quality. You can use File → Export → Save for Web (Legacy) or File → Export → Export As… with JPEG selected. Delete the PNG version of the background — you only want the JPEG in your final set.
6

Bring them into Canvosity

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.

Exported files cta.png product.png headline.png background.jpg drop in Canvosity canvas (300×250) Each asset fills the canvas — positions restore automatically.
Next: Select any layer in Canvosity, open the Animations section in the inspector, and pick an entrance, motion, or exit effect. Because each layer is already aligned in the ad box, motion animations move relative to a predictable base — no surprise offsets.
7

Longer animations with multiple backgrounds

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.

Scene 1 — opening headline.png hero-art.png tagline.png background.jpg JPEG Scene 2 — final CTA cta-button.png offer-text.png background-2.jpg JPEG In playback Scene 1 visible swap Scene 2 visible Two layer groups, one timeline. Each scene's elements animate in and out independently.

Format rule is the same — every background can be JPEG

Format choice depends only on whether the image itself has transparent pixels. Stack position and animation behavior don't change it. Canvosity controls each layer's opacity at runtime, so a JPEG background can fade in, slide in, or hold steady all the same — you don't need an alpha channel just because the layer animates. A layer needs PNG or WebP only when some pixels inside it should be see-through (text shapes, product cutouts, buttons). Every full-coverage opaque background — first, second, third — stays JPEG.

In Photoshop

  • One layer group per scene (e.g. Scene 1 — Setup, Scene 2 — CTA).
  • Each group holds its own background + the elements on top of it.
  • Export every layer at full ad dimensions — same Layers to Files command.
  • Re-export every full-coverage opaque background as JPEG. PNG/WebP only when pixels inside need to be transparent.

In Canvosity

  • Drop both groups' assets into the Asset Library.
  • Stack Scene 2's layers above Scene 1's in the layer panel.
  • Give Scene 1 elements an exit animation around the swap point.
  • Give Scene 2 elements an entrance animation that starts at (or just after) the swap point.
  • The timeline lets you nudge timing per layer until the handoff feels right.
Scaling up: the same pattern extends to three or more scenes. Each new scene is another layer group sitting above the previous one in the stack. Every solid, full-ad-size background can stay JPEG; only layers that contain transparent pixels (text, cutouts, button shapes) need PNG or WebP.

Quick checklist before exporting

Keep this tab open while you work through a set.

Ready to build

Open Canvosity and bring your first campaign across using the steps above.

Go to Canvosity