By the end of this tutorial, you’ll have a complete, on‑brand banner set running across Facebook (Meta) and LinkedIn — built once from a master creative and exported as HTML5, GIF, and MP4 from Viewst without manual rebuilds.

You’ll learn:

• The exact Facebook and LinkedIn banner dimensions to use in 2026

• How to structure a master creative that works across both networks

• How to import assets into Viewst and set up a scalable banner workflow

• Animation best practices so your ads look polished, not chaotic

• How to export and hand off production‑ready files to media teams

Prerequisites

Before step 1, make sure you have:

• Approved master creative

  • Finalized concept and copy (headline, subcopy, CTA)

  • Brand‑approved logo, fonts, and color palette

  • Key visual (photo, illustration, or product shot)

• Design source file (one of the following)

  • Figma frame (preferred) with all layers named

  • Adobe Photoshop, Illustrator, or XD file

  • High‑resolution layered asset exported as SVG/PSD

• Facebook & LinkedIn campaign basics

  • Target audiences and objectives defined (e.g., lead gen, awareness)

  • Landing pages ready and tracked (UTMs, pixels, conversion tags)

• Viewst account

  • Access to Viewst with brandbook and fonts installed

  • Understanding of basic Viewst editor (you don’t need to be an expert)

If you need a broader overview of banner ad channels, formats, and targeting before diving into production, see the related guide: Banner Ads Guide for Digital Advertising: Platforms, Formats, and Targeting Basics.

1. Define Your Master Creative and Copy System

The strongest cross‑platform workflow starts with a single master creative that structurally governs all derivatives. Viewst is built around this principle.

What to do in this step

1. Choose a core layout that can flex vertical and horizontal

   • One dominant visual area

   • One text block for headline

   • Optional subheadline or supporting point

   • Fixed logo and CTA zone

2. Write copy variants for different aspect ratios

   • Long headline (up to 8–10 words) for vertical Facebook Feed 4:5

   • Short headline (4–6 words) for LinkedIn 1.91:1 horizontal

   • Micro headline (3–4 words) for square (1:1) and tight spaces

3. Set non‑negotiable brand elements

   • Logo placement (e.g., top left or bottom right) that will be consistent

   • CTA container (button or badge) that keeps shape and hierarchy

   • Safe zones: keep text away from edges by at least 5–10% of canvas height/width

Concrete example

For a B2B SaaS campaign:

• Master concept: “Ship more creative, with less chaos.”

• Long headline: “Ship more banner creative, without burning out your team.”

• Short headline: “Scale banner production, minus the chaos.”

• Micro headline: “Scale creative without burnout.”

Common failure at this step

Failure: Starting with separate designs per platform (a "Facebook version" and a "LinkedIn version").

Why it hurts: You instantly triple creative maintenance. Every change means re‑editing multiple files, and brand consistency breaks fast.

Fix: Commit to one master layout and copy system. All Viewst automations (Smart Resize, Instant Animator, brandbooks) work best when they can propagate from a single source.

2. Lock In Facebook and LinkedIn Banner Dimensions for 2026

You can’t design a cohesive cross‑platform set if you don’t anchor aspect ratios and sizes up front.

Facebook (Meta) banner dimensions to prioritize in 2026

For Feed and core placements:

• 4:5 vertical (1080×1350) — safest "performance" default for Feed

• 1:1 square (1080×1080) — universal fallback across many Meta surfaces

• 9:16 vertical (1080×1920) — full‑screen format for Stories and Reels

LinkedIn banner dimensions to prioritize in 2026

For Sponsored Content single‑image ads:

• 1.91:1 horizontal (1200×627 or 1200×628) — most commonly recommended

• 1:1 square (1200×1200) — widely supported and useful for reuse

File guidelines (based on commonly cited specs):

• Formats: JPG, PNG, GIF

• File size: ≤ 5 MB for single image ads

Minimal cross‑platform set you should build

For a single campaign, plan at least:

• Facebook: 4:5, 1:1, 9:16

• LinkedIn: 1.91:1, 1:1

That gives you five key sizes that cover the bulk of standard placements while allowing creative reuse.

Common failure at this step

Failure: Designing only one "social" size (usually 1:1) and expecting it to fit everywhere.

Why it hurts: On Meta, your square asset will letterbox or crop in some placements, and on LinkedIn you’ll waste horizontal real estate. Performance and readability drop.

Fix: Treat aspect ratios as design constraints. Commit to 4:5 + 9:16 for Meta and 1.91:1 for LinkedIn, with 1:1 as your shared flexible format.

3. Import Your Master Creative into Viewst

Once your master creative and target sizes are defined, move production into Viewst so you don’t rebuild banners by hand.

What to do in this step

1. Prepare your source file

   • From Figma: ensure a clean frame with named layers (e.g., logo, headline, visual, cta) and export or use Viewst’s Figma import.

   • From Adobe: export a structured PSD/AI file or use SVG with separate objects.

2. Import into Viewst

   • In Viewst, create a new project or banner set.

   • Use Figma / Adobe import or upload your source files.

   • Confirm that Viewst reads layers as editable HTML5 objects (not a flat image).

3. Verify brandbook and fonts

   • Attach your brandbook so typography and colors are locked to brand.

   • Check that fonts render correctly in the WYSIWYG editor.

Concrete example

• Import a Figma frame in 1080×1350 (4:5) that serves as your master.

• Layers: BG, Visual, Headline_long, Subheadline, Logo_top_left, CTA_button.

• In Viewst, you’ll see these as separate editable items ready for automation.

Common failure at this step

Failure: Importing a flattened PNG/JPG and expecting to resize and re‑flow text intelligently.

Why it hurts: Without editable layers, AI Smart Resize and Instant Animator can’t optimize layout — you’re stuck manually editing assets or re‑uploading new files.

Fix: Always import layered, structured designs or use Viewst’s AI Image Deflatening to convert flat artwork into editable designs when the original source file isn’t available.

4. Use Viewst Smart Resize to Generate Facebook & LinkedIn Sizes

With your master creative in Viewst, you can now create all required sizes in minutes instead of hours.

What to do in this step

1. Set your master creative as the source

   • Choose the 4:5 (1080×1350) layout as the "master" if Facebook Feed is primary.

   • Alternatively, use 1.91:1 (1200×628) as master if LinkedIn is primary and then derive others.

2. Configure required sizes with AI Smart Resize

   • Add target formats:

     • 1080×1350 (Facebook Feed)

     • 1080×1080 (Facebook square + shared LinkedIn square)

     • 1080×1920 (Stories/Reels)

     • 1200×628 (LinkedIn horizontal)

     • 1200×1200 (LinkedIn square)

   • Run Smart Resize to automatically reposition and scale elements.

3. Adjust text mapping per size

   • For 4:5: use the long headline layer.

   • For 1.91:1: swap to the short headline layer to avoid cramped text.

   • For 1:1 and 9:16: test whether short or micro headline reads best.

Concrete example

• In 9:16 (Stories/Reels), move logo and CTA to the bottom safe zone.

• In 1.91:1 LinkedIn, keep headline to one line and push the visual to the right.

Common failure at this step

Failure: Letting Smart Resize run without checking text safety and hierarchy.

Why it hurts: Automated resizing is powerful, but it can’t fully understand your messaging priority. Headlines may become too small or compete with visuals.

Fix: Treat Smart Resize as a first pass. Review each size, enlarging key text and adjusting spacing so hierarchy remains clear — especially on LinkedIn where copy clarity drives B2B performance.

5. Apply Animation Best Practices for Display Ads

Static banners work, but light, controlled motion often improves attention and perceived quality. Viewst’s AI Instant Animator can add motion without hunting through timelines.

What to do in this step

1. Decide on motion hierarchy

   • Priority: CTA and key visual

   • Secondary: supporting text

   • Avoid: busy background motion that competes with message

2. Use Instant Animator for consistent movement across sizes

   • Apply one‑click animations like fade‑in, slide‑up, or scale‑in to:

     • Headline

     • Visual or product shot

     • CTA button

   • Set short, predictable durations (e.g., 0.3–0.8 seconds per element).

3. Respect platform norms

   • Meta: subtle motion is fine; avoid flicker and fast looping.

   • LinkedIn: keep animations restrained and professional; B2B users dislike gimmicks.

Concrete animation pattern

A simple, production‑safe sequence for all sizes:

• 0–0.3s: Background and visual appear.

• 0.3–0.6s: Headline fades or slides in.

• 0.6–0.9s: CTA button gently pops in (scale or fade).

• Total loop ≤ 15 seconds if animated; no jarring resets.

Common failure at this step

Failure: Over‑animating every element or using different animation styles per size.

Why it hurts: Inconsistency kills perceived brand quality, and busy animation can lower legibility, especially on LinkedIn.

Fix: Define one motion language (e.g., soft fades + gentle slides), apply it across all ad sizes, and keep a maximum of 2–3 animated layers per banner.

6. Run Brand and Governance Checks Inside Viewst

Automation doesn’t mean losing control. Brand governance becomes more important as you scale output.

What to do in this step

1. Lock brand styles via brandbooks

   • Enforce typography (font family, sizes, line spacing) across all sizes.

   • Lock primary colors and CTA styles so last‑minute edits don’t go off‑brand.

2. Check safe zones and readability

   • Maintain margin from edges (especially for Facebook where UI overlays can appear).

   • Confirm minimum text size. Aim for:

     • Headlines ≥ 18–20 px equivalent

     • CTAs ≥ 14–16 px equivalent

3. Use collaborative review

   • Share banner set links with stakeholders inside Viewst.

   • Collect comments directly on each size instead of in email threads.

   • Track approvals per variation so ad ops knows what’s ready to launch.

Common failure at this step

Failure: Reviewing only the master creative and assuming all derivatives are fine.

Why it hurts: Small layout issues in one size (e.g., cropped logo on 9:16, too small text on 1.91:1) can slip into production and damage brand perception.

Fix: Treat each format as a first‑class creative. Run a quick visual QA across every size before approving the set. Automation speeds production; governance protects the brand.

7. Export Production‑Ready HTML5, GIF, and MP4 Banners

With design and animation complete, export files that your media team can plug directly into ad platforms or ad servers.

What to do in this step

1. Choose export formats per channel

   • For HTML5 display (programmatic, ad servers): export editable HTML5.

   • For Facebook and LinkedIn single image placements: export optimized JPG/PNG.

   • For animated placements: export MP4 or GIF depending on specs.

2. Respect platform limits

   • LinkedIn: ensure single image files ≤ 5 MB.

   • Meta: keep file weights reasonable; follow IAB Tech Lab’s guidance on HTML5 weight for display campaigns.

3. Export directly from Viewst

   • Select the whole banner set.

   • Export multiple formats in a single batch: HTML5 / GIF / MP4.

   • Provide naming conventions aligned to placements, e.g.:

     • brand_campaign_fb_feed_1080x1350.html

     • brand_campaign_li_single_1200x628.png

     • brand_campaign_fb_story_1080x1920.mp4

Common failure at this step

Failure: Exporting flat images only and leaving ad ops to retrofit formats or rebuild interactive HTML5.

Why it hurts: You lose the benefit of Viewst’s HTML5‑native output, and future edits become harder. Ad ops might compress or alter files in ways that hurt quality.

Fix: Export native editable HTML5 where applicable, plus platform‑ready image/video formats. Treat Viewst as the single source of truth for ad‑ready assets.

8. Hand Off to Media Teams with Clear Specs and Variants

The last step is operational: making sure media teams can launch quickly without guesswork or rework.

What to do in this step

1. Document each banner size and placement

   • Example table:

     • Facebook Feed: 1080×1350 (4:5), static + animated

     • Facebook Stories/Reels: 1080×1920 (9:16), animated

     • Facebook multipurpose: 1080×1080 (1:1)

     • LinkedIn single image: 1200×628 (1.91:1)

     • LinkedIn single image alt: 1200×1200 (1:1)

2. Include targeting notes per creative

   • High‑intent audience: LinkedIn 1.91:1 banners with clear offer and CTA.

   • Broader reach: Facebook Feed 4:5 with more emotional visual.

3. Provide one source folder or link

   • Store all exports in a single structured location.

   • Include Viewst project link for future edits.

Common failure at this step

Failure: Sending a zip file without context.

Why it hurts: Media teams waste time matching files to placements. Wrong formats end up in the wrong places, and some meticulously designed sizes might never be used.

Fix: Ship a simple, one‑page spec with sizes, placements, and examples. Treat handoff as part of the production discipline, not an afterthought.

FAQ: Troubleshooting Cross‑Platform Banner Production

1. What’s the best Facebook banner size in 2026 if I can only choose one?

If you must pick a single primary size for Facebook Feed, use 4:5 vertical (1080×1350). It’s widely recommended as a performance‑oriented default because it uses more screen real estate without being as tall as full‑screen Stories/Reels. Keep a 1:1 (1080×1080) variant as your universal fallback.

2. Do I really need a separate LinkedIn 1.91:1 banner?

Yes. LinkedIn’s commonly recommended single‑image size is 1200×627 or 1200×628 at 1.91:1. A Facebook‑optimized 4:5 or 1:1 asset will either crop or waste horizontal space. For B2B campaigns where clarity and professionalism matter, building a dedicated 1.91:1 layout pays off.

3. How do I avoid text getting cut off when I resize banners in Viewst?

Use Viewst’s AI Smart Resize but always review safe zones:

• Keep key text at least 5–10% away from any edge.

• Use different text layers for long vs. short headlines.

• After Smart Resize, manually adjust font sizes and positions per format.

This extra QA pass prevents crops when platforms overlay UI elements or when banners are shown in different placements.

4. Should my Facebook and LinkedIn banners look identical?

They should look cohesive, not necessarily identical. Maintain:

• Same logo, color palette, and CTA style

• Consistent headline idea and brand voice

But adapt:

• Copy density (LinkedIn can support slightly more specific B2B language)

• Layout (Facebook 4:5 vs LinkedIn 1.91:1 require different composition)

Viewst makes it easy to keep a unified master concept while customizing each size to its platform.

5. Why use HTML5 output instead of just static images?

HTML5 output matters when you:

• Run programmatic display through ad servers that expect standards‑compliant HTML5

• Need editable layers for rapid iteration and A/B testing

• Want smoother animation and smaller file sizes than GIF can offer

Viewst is an HTML5‑native production studio, so you get compliant, editable files that fit modern ad ops workflows without manual rebuilding.

Designing a cross‑platform banner set for Facebook and LinkedIn doesn’t have to mean juggling dozens of disconnected files. With a master‑creative mindset and Viewst’s production infrastructure — Smart Resize, Image Deflatening, Instant Animator, brandbooks, and collaborative review — you can scale high‑volume campaigns while protecting creative quality and your team’s time.