How to Design a Banner in UseCloudDraw
Banners are everywhere. Website headers, social media covers, conference backdrops, roadside ads — if it needs to grab attention fast, it's probably a banner. And here's the thing: designing a good banner isn't about cramming in as much info as possible. It's about saying one thing, loudly and clearly.
In this tutorial, I'll walk you through the entire banner design process in UseCloudDraw. From picking the right size to nailing the layout, adding a punchy headline, and finishing with a call-to-action button that people actually want to click.
Common Banner Sizes
Before you draw a single shape, you need to know your canvas size. Banners come in all dimensions depending on where they'll live. Here are the most common ones you'll run into:
- Website header: 1920 × 600 px (wide and relatively short)
- Facebook cover: 820 × 312 px
- Twitter/X header: 1500 × 500 px
- LinkedIn banner: 1584 × 396 px
- YouTube channel art: 2560 × 1440 px
- Google Ads display banner: 728 × 90 px (leaderboard), 300 × 250 px (medium rectangle)
- Print rollup banner: 850 × 2000 mm
- Conference step-and-repeat: 3000 × 2500 mm or larger
Step 1: Set up your document
- Open UseCloudDraw and go to File → New.
- Enter the exact width and height for your banner size.
- If it's a web banner, use pixels as the unit. For print, use millimeters or inches and set DPI to 300.
- Click OK to create the canvas.
Layout Composition
Now for the fun part — arranging your content. A banner usually has three main pieces: a headline, a visual element (image, illustration, or icon), and a call-to-action. The secret is giving each one room to breathe.
I like to follow the "rule of thirds" when I can. Imagine your banner divided into a 3×3 grid. Place your headline on one of the top intersections, your visual on the opposite side, and your CTA somewhere prominent but not overwhelming. It just feels balanced.
Step 2: Plan your layout
- Sketch a rough layout on paper first. Seriously — a 30-second doodle will save you 20 minutes of rearranging shapes later.
- Decide on a visual hierarchy. What's the first thing you want people to see? Usually it's the headline.
- Keep whitespace generous. A cluttered banner is a ignored banner.
- Make sure nothing important sits too close to the edges — social platforms crop unpredictably sometimes.
Using Grids and Guides
UseCloudDraw has guides and grids built in, and I use them on literally every banner I make. They keep your alignment tight and your spacing consistent.
Step 3: Add guides and grids
- Go to View → Grid to toggle the document grid. You can adjust the spacing in Edit → Preferences → Grid.
- Drag guides from the rulers (top and left edges of the canvas) to mark safe zones, margins, and alignment lines.
- For a rule-of-thirds grid, place two vertical guides at 33% and 66% of the width, and two horizontal guides at 33% and 66% of the height.
Eye-Catching Headlines
Your headline is the hook. If it doesn't grab attention in under two seconds, you've lost the viewer. No pressure.
Here is what works:
- Keep it short. Five words or fewer is the sweet spot for banners.
- Use a bold, readable font. Sans-serif fonts like Montserrat, Poppins, or Bebas Neue work great at large sizes.
- Create contrast. Light text on a dark background, or vice versa. Avoid placing text over busy imagery unless you add a solid overlay or text shadow.
- Make it big. The headline should be the largest element on the banner by a noticeable margin.
Step 4: Add your headline
- Click the Text Tool and type your headline.
- Choose a bold, clean font and increase the size until it dominates the upper portion of the banner.
- Adjust the color to contrast sharply with the background.
- If the background is an image, add a semi-transparent dark rectangle behind the text to improve readability.
Some headline examples that work: "Summer Sale — 50% Off", "Join 10,000+ Designers", "Your New Favorite Tool." Short, specific, and intriguing.
Call-to-Action Buttons
The CTA button is where the magic happens. It's the bridge between "this looks nice" and "I want to learn more." A weak CTA kills conversions. A strong one makes people click.
Step 5: Design a clickable-looking CTA
- Use the Rectangle Tool to draw a rounded rectangle for your button. Rounded corners feel friendlier and more modern than sharp corners.
- Fill it with a high-contrast color. If your banner is mostly blue, make the button orange or yellow. If it's neutral, go with a bold blue or green.
- Add short, action-oriented text: "Get Started", "Shop Now", "Learn More", "Sign Up Free." Avoid vague words like "Submit" or "Click Here."
- Add a subtle drop shadow to the button to make it feel tactile — like it wants to be pressed.
Export Settings for Different Uses
A banner designed for Facebook won't work as a print rollup. You need to export with the right settings for each use case.
Step 6: Export your banner
- For web/social media: Go to File → Export As → PNG. Use RGB color mode. No transparency needed for most banners — it just complicates things.
- For print: Export as PDF with CMYK color mode and 300 DPI. Add bleed if the banner will be trimmed (like a vinyl banner).
- For animated web banners: UseCloudDraw doesn't do animation natively, but you can export frames as PNGs and animate them in a tool like Photoshop or an online GIF maker.
Always check the exported file before uploading. Open it and make sure nothing got cut off, no text is too close to the edge, and the colors look right. It's a 10-second habit that prevents embarrassing mistakes.
Design Your First Banner Now
Open UseCloudDraw, pick a banner size, and start laying out your headline and CTA. Don't overthink it — your first draft won't be perfect, but you'll learn more by doing than by reading.
Launch UseCloudDraw Now