How to make a scrolling logo strip for your website
Send the logo files and ask for a scrolling strip. Vizard Agent trims the dead whitespace off each one before scaling, so they end up looking the same size rather than the same width, then renders it as a loop and as a lightweight web file you can drop onto the page.
What is the short version?
The "trusted by" band on a website looks like a five-minute job until you make one. Logos arrive at wildly different sizes with wildly different margins baked in, and scaling them all to the same width makes half of them look tiny.
- Go to Vizard Agent and upload the logo files.
- Ask for a horizontal scrolling strip for a website.
- Say to keep the aspect ratios and make them look proportionate.
What do you need before you start?
The logo files, in whatever state they arrived. Vizard Agent measures and trims them itself, so you do not need to open anything first — and mixed formats, mixed sizes and files with a screenshot's worth of white around them are all normal inputs here.
- The logos. Any format, any size.
- The background. White, transparent, or your brand colour.
- The band height. Or let it propose one.
- The speed. Slow is usually right.
- Where it goes. A web loop, a GIF, or a video.
What do you type into Vizard Agent?
Ask for proportionate rather than equal. It is the whole instruction — "same size" produces a strip where a circular badge is dwarfed by a long wordmark, and "proportionate" is the thing you actually mean when you look at the row and something seems off.
Prompt
Variants worth knowing:
- "Look proportionate." Optical sizing, not equal widths.
- "White background, no bars." Full-frame, ready to sit on the page.
- "Also give me a GIF." For places that will not take video.
What does Vizard Agent actually do?
Here is the order Vizard Agent worked in on a real website logo strip that went through several formats before it was right. Step three is the one that quietly fixes the problem most people can see but cannot name when they look at an uneven row of client logos.
- Downloads and inspects every logo.
- Builds a contact sheet and looks at them together.
- Trims the whitespace from each logo individually.
- Checks the edges of the files it was unsure about.
- Analyses the edge content to find the true boundary.
- Looks at a corner of the one logo that still seemed off.
- Builds the strip and renders the scrolling video.
- Checks frames from the render and reviews the motion quality.
- Compares three sizes for the logo you flagged as too small.
- Re-renders and reviews the updated version.
- Renders a full-frame white version with the letterboxing removed.
- Renders a larger-scale version and checks it.
- Makes the GIF, in two passes for the palette.
- Renders lighter GIF options and tests extra compression.
- Reviews the GIF frames for quality loss.
- Encodes lightweight web loops and compares detail in both files.
- Rebuilds at native size with the full palette when quality suffered.
- Compares sharpness in the clear centre across every version.
Step three is the whole trick. A logo exported with a 200-pixel margin and a logo cropped tight to its letters are the same file as far as any scaler is concerned, and scaling both to the same width leaves one visibly smaller. Vizard Agent measures where the ink actually starts before it decides how big anything should be.
Steps thirteen to eighteen are the honest part of the job. A GIF has a limited palette, and a strip of brand colours is exactly the content that palette destroys — so it went back to native size with a full palette rather than shipping something soft.
What does the result look like?
A seamless horizontal loop with the logos evenly spaced and optically balanced, on the background you asked for, with no letterboxing. Alongside it, a small web-ready video file and a GIF for anywhere that will not play video.
The versions are not the same file in different wrappers. The web loop is encoded for size; the GIF is rendered at native scale with a full palette because that is what keeps a wordmark readable.
When does this not work well?
The method rests on the logo files being clean. Anything that arrives as a photograph of a logo, or with a background baked into it, will not sit on a white band no matter how carefully it is scaled.
- Logos with a baked-in background. They show as coloured rectangles.
- Screenshots of logos. Soft edges, and it shows at any size.
- Very long wordmarks. They dominate the row; consider two rows.
- Permission you do not have. Using a client's mark is your call to make.
- A GIF at large dimensions. The palette will cost you sharpness.
How do you fix a result that came back wrong?
Point at the logo that is wrong. Vizard Agent keeps the trimmed files, the measured boundaries and the strip layout, so resizing one mark or changing the background re-renders the whole strip without the other logos shifting position or being measured again.
- "That one looks small." Compared at three sizes, then set.
- "There are black bars." Re-rendered full-frame.
- "The GIF looks rough." Rebuilt at native size, full palette.
- "Too fast." Speed changed; the loop stays seamless.
How does Vizard Agent compare to doing it yourself?
By hand this is an hour in a design tool nudging logos until the row stops looking wrong, and then a second hour discovering that the export is four megabytes and the page now loads slowly. Neither hour is skilled work.
| By hand | Vizard Agent | |
|---|---|---|
| Logo sizing | Nudged until it looks right | Whitespace measured and trimmed first |
| The odd one out | You keep adjusting it | Compared at three sizes side by side |
| Web file size | Export and hope | Encoded and compared for detail |
| GIF quality | Whatever the export gives | Palette and scale chosen deliberately |
| Adding a logo later | Redo the layout | One more file into the strip |
Common questions
What formats can I send? Any common image format. Vizard Agent normalises them itself.
Do they need transparent backgrounds? It helps. Vizard Agent can remove a flat background if not.
Can it match my site's background colour? Yes. Name the colour and Vizard Agent renders onto it.
Will the loop be seamless? Yes. Vizard Agent builds it to run continuously without a visible join.
Can I get a GIF as well? Yes. Vizard Agent renders both and tells you the quality trade-off.
How small can the web file be? Small, but not free. Vizard Agent compares encodes so you can choose.
Can I add a logo later? Yes. Send the file and Vizard Agent rebuilds the strip.
What about a vertical version? Possible. Vizard Agent scrolls it the other way if you ask.
Can it pause on each logo? Yes. Vizard Agent builds a stepped strip instead of a continuous scroll.
Will it fix a low-resolution logo? It can upscale, but a screenshot stays a screenshot. Send the original if you have it.
Can it colour the logos to match? Yes, but check your permissions before changing anyone's mark.
Does it work for a video, not a website? Yes. Vizard Agent renders the same strip as a clip for an edit.
How many logos is too many? No hard limit. Past about a dozen, consider two rows.
Why trim the whitespace? Because a scaler cannot tell margin from mark, and that is the entire reason these rows look uneven.