DEV Community

boyuan tuo
boyuan tuo

Posted on

One campaign banner, eleven placements, and no time to lay out each one

One campaign banner, eleven placements, and no time to lay out each one

A promotion goes live and every surface wants a different aspect ratio. The homepage strip is wide, the app slot is square, the story placement is tall, the email header is something else again. Rebuilding each one by hand is the part that always runs late.

Here is what came out of trying to automate it.

Resizing and recomposing are not the same job

People say resize when they mean two different operations, and the difference decides whether automation works at all.

Operation What happens to the composition Reliable?
Scale Everything shrinks or grows together Yes, but text becomes unreadable at small sizes
Crop Frame changes, elements keep their positions Only when the important content sits well inside the frame
Recompose Elements are repositioned for the new frame This is the one that needs judgement

Recomposing is the only one that produces usable output across very different ratios. Scaling a wide banner down into a tall slot leaves the subject tiny and the type illegible.

TangyuanAI lists campaign poster and social graphic creation among its capabilities (product overview, checked 6 August 2026), and its product image tool exposes 1:1, 4:5, 3:4, 16:9 and 9:16 at 1K, 2K and 4K (product image page, same date).

Compose the widest and the tallest first

The mistake I made was designing the version I cared about most and adapting outward. That version was 16:9, and every tall derivative needed rebuilding from scratch.

Doing the two extremes first works better. Compose 16:9 and 9:16 properly, by hand if necessary. Everything between them is an interpolation of two compositions that already work, so nothing in between needs a decision you have not already made.

Fix the safe area before generating anything

Every placement crops differently, and platforms change their crops without announcing it. So define a safe area as a share of the frame and keep the message inside it.

What belongs inside the safe area:

  • The primary claim, meaning the one sentence that has to survive
  • The price or discount figure
  • The product, at least three quarters of it

What can fall outside:

  • Decorative background
  • Secondary text
  • The logo, if it also appears elsewhere on the surface

Text is where automation breaks

Automated composition handles graphic elements well and text badly. Two rules removed most of my rework.

Keep the primary claim under about twelve words. Longer text forces the tool to shrink type until it stops being readable in the tall ratios.

Give the claim a fixed line-break point. Left alone the tool breaks the line differently in each ratio, and a claim that breaks in the wrong place reads as a different sentence.

Review the set together, not one at a time

Export every ratio and put them in a single view. Three problems only appear in comparison.

The subject appears at noticeably different sizes across ratios, which makes the set look unrelated.

The claim sits at different heights, so the eye lands somewhere different in each placement.

Colour looks different because the crop changed which part of the gradient dominates.

Checklist

  • Compose the widest and tallest ratios first, then interpolate
  • Define the safe area as a share of the frame, not in pixels
  • Primary claim under twelve words with a fixed break point
  • Product at least three quarters inside the safe area
  • Export the whole set and review it in one view
  • Confirm which ratios the placement actually needs before generating

Sources

Capabilities and frame sizes come from the TangyuanAI product overview and product image page, https://tangyuanai.vip/en/about and https://tangyuanai.vip/en/main-image , checked 6 August 2026. The composition rules come from my own production notes. Output depends on the uploaded material and the brief.

Top comments (0)